|
90년대 초반 단순한 하이퍼 링크로 구성된 웹사이트에서부터 화면을 구성하는 것에 대한 고민은 항상 있어왔다. 당시엔 그것을 중요하게 생각하지는 않았지만 말이다. 웹 기술은 항상 진화했고 진화하면서 사용자가 웹에서 행동하는 방식을 바꾸어 왔다.
JavaScript 프레임워크중 하나인 jQuery가 널리 쓰이기 시작하면서 이를 활용한 jQuery 플러그인들이 웹 디자인의 큰 부분을 차지하기 시작했다. 단순한 그래픽 혹은 css style에 jQuery가 개입하면서 웹 페이지가 사용자의 행동에 제각기 반응하는 이전에 없던 사용자 경험을 만들어 내기 시작한 것이다.
패럴렉스 플러그인은 여러개의 레이어를 겹쳐두고 사용자의 마우스 포인터 위치에 따라, 혹은 스크롤이 내려가거나 올라감에 따라 여러개의 겹쳐둔 레이어가 제작기 다른 속도로 움직이며 입체적인 효과를 준다. 특히 세로로 길쭉한 한 페이지 디자인에 적합하다. 패럴렉스 스크롤은 여러가지 jQuery 플러그인과 섞여 시너지를 발휘한다. 오브젝트의 크기를 모니터의 크기에 맞게 표현하여 모든 모니터에서 동일한 경험을 안겨주게 된다.
패럴렉스 스크롤은 단순히 위에서 아래로, 혹은 왼쪽에서 오른쪽으로 마우스의 휠을 돌리며 페이지의 컨텐츠를 소비하는 대신 네비게이션을 클릭하거나 스크롤바를 마우스로 클릭하고 천천히 내리는 형태의 사용자 경험을 만들어 냈다. 휠을 돌려 페이지를 내리면 좋은 사용자 경험을 얻기가 쉽지 않다. 휠을 돌리면 화면을 구성하는 오브젝트들이 의도에 맞지 않게 뚝뚝 끊겨 표현되는 경우가 많기 때문이다.
여러 해상도를 가진 여러명의 사용자에게 같은 사용자 경험을 안겨주기 위해서 단순하게 1024px 혹은 960px등의 가로 공간을 고정하는 방법을 사용하던 웹 화면이 여러가지 플러그인을 사용하면서 사용자가 작은 모니터를 사용하던 큰 모니터를 사용하던, 길쭉한 모니터를 사용하던 넓적한 모니터를 사용하던 꽉 찬 화면을 제공함으로써 컨텐츠를 효과적으로 전달할 수 있게 되었다. 웹사이트를 구성하는 방법은 여러가지 기술에 의해 다양성이 생겼다. 좋은 사용자 경험을 내기 위해, 컨텐츠를 효과적으로 전달하기 위해 웹 화면을 잘 구성하면 사이트에 대한 신뢰가 생길것이며 어떤 방식으로든 사용자와 사이트 모두에게 긍정적인 영향을 미칠 것이다.
패럴렉스 효과 제대로 내기
Medium의 디자이너, Dave Gamache가 제안하는 패럴렉스 제대로 쓰는 법. 간단한 것만 소개하였으니, 본문을 꼭 확인하시길.
해야 할 것 :
- 브라우저가 애니메이션 하기 좋은 효과들을 써라. translate3d, scale, rotation, opacity를 제외하면 60프레임 이상이 나오지 않을 가능성이 높다.
- JS로 애니메이션을 주기 전에, window.requestAnimationFrame을 먼저 사용해라. 이렇게 하면 브라우저가 새로 그리기 전에 애니메이션을 줄 수 있다.
- 반올림을 제대로 해라. 54.2356345234578px 같은 값은 불필요하다. 소숫점 둘째 자리로도 충분히 효과를 볼 수 있다.
- 뷰포트 안에 있는 요소들만 애니메이트해라. 화면 바깥에 있는 녀석들을 움직여봐야 무슨 소용인가?
- fixed, absolute position인 요소들만 애니메이트해라. 필자 본인도 이유는 잘 모르지만 그렇게 하면 퍼포먼스가 확 올라가는 걸 경험했다고.
- 오브젝트 안에 모든 애니메이션을 정의해라. 뭐 이런다고 해서 퍼포먼스가 올라가는 건 아니지만 이렇게 하면 모든 게 한결 쉬워진다.
하지 말아야 할 것 :
- background-size:cover는 피해라. 특히 애니메이트 하려는 경우에는.
- 스크롤 이벤트에 바로 bind하지 마라. 포지션 업데이트 할 때에는 인터벌을 조금 둬라, 안그러면 미친듯이 포지션 변경 신호가 가서 퍼포먼스에 악영향을 준다. 매 10ms 정도마다 업데이트 해도 충분하다.
- 엄청나게 큰 이미지를 애니메이트 하거나, 크기를 확 줄이지 마라.
- (가급적) 한번에 너무 많은 걸 돌리지 마라. 실제로 뭔가 문제가 발생한 적은 없었지만, 가능성이 높다고 생각한다. parent와 child에 한꺼번에 애니메이션을 줄 때 버벅이는 경우가 있었다.
Parallax는(페럴랙스) 거리와 각도에 따라 사물이 다르게 보이는 차이를 말합니다. 말로는 이해가 잘 안되신다구요? 아래 예제를(소스: wikipedia) 보시면 이해가 조금 더 잘 되실 것같네요. “사물과 시선의 각도” 그리고 “사물과 시선의 거리“에 따라 사물의 모습이 다르게 보이는 것을 보여주는 예입니다.
이러한 시각적인 효과를 웹사이트에 적용하면 웹사이트를 스크롤할 때마다 시시각각으로 변하는 화면을 볼 수 있기 때문에 사용자들은 입체감을 느낄 수 있습니다.
간단한 예로 백그라운드 이미지는(background image) 멀리 있다고 가정하고 천천히 움직이도록 하고 백그라운드 위에 있는 포그라운드 이미지는(foreground image) 시선과 가깝다고 가정하여 백그라운드 보다는빠르게 움직인다면 마우스로 화면을 스크롤을 할 때마다 두가지 레이어가 다른 속도로 움직이기 때문에 입체감을 느낄 수 있는 것입니다.
튜토리얼,소스
패럴렉스 스크롤링으로 제작된 웹사이트를 보시려면 아래 제목을 클릭하세요.
| 
