[UI/UX] 패럴렉스 스크롤로 본 웹 화면에 대한 고찰

JavaScript 프레임워크중 하나인 jQuery가 널리 쓰이기 시작하면서 이를 활용한 jQuery 플러그인들이 웹 디자인의 큰 부분을 차지하기 시작했다. 단순한 그래픽 혹은 css style에 jQuery가 개입하면서 웹 페이지가 사용자의 행동에 제각기 반응하는 이전에 없던 사용자 경험을 만들어 내기 시작한 것이다.

패럴렉스 플러그인은 여러개의 레이어를 겹쳐두고 사용자의 마우스 포인터 위치에 따라, 혹은 스크롤이 내려가거나 올라감에 따라 여러개의 겹쳐둔 레이어가 제작기 다른 속도로 움직이며 입체적인 효과를 준다. 특히 세로로 길쭉한 한 페이지 디자인에 적합하다. 패럴렉스 스크롤은 여러가지 jQuery 플러그인과 섞여 시너지를 발휘한다. 오브젝트의 크기를 모니터의 크기에 맞게 표현하여 모든 모니터에서 동일한 경험을 안겨주게 된다.

패럴렉스 스크롤은 단순히 위에서 아래로, 혹은 왼쪽에서 오른쪽으로 마우스의 휠을 돌리며 페이지의 컨텐츠를 소비하는 대신 네비게이션을 클릭하거나 스크롤바를 마우스로 클릭하고 천천히 내리는 형태의 사용자 경험을 만들어 냈다. 휠을 돌려 페이지를 내리면 좋은 사용자 경험을 얻기가 쉽지 않다. 휠을 돌리면 화면을 구성하는 오브젝트들이 의도에 맞지 않게 뚝뚝 끊겨 표현되는 경우가 많기 때문이다.

여러 해상도를 가진 여러명의 사용자에게 같은 사용자 경험을 안겨주기 위해서 단순하게 1024px 혹은 960px등의 가로 공간을 고정하는 방법을 사용하던 웹 화면이 여러가지 플러그인을 사용하면서 사용자가 작은 모니터를 사용하던 큰 모니터를 사용하던, 길쭉한 모니터를 사용하던 넓적한 모니터를 사용하던 꽉 찬 화면을 제공함으로써 컨텐츠를 효과적으로 전달할 수 있게 되었다. 웹사이트를 구성하는 방법은 여러가지 기술에 의해 다양성이 생겼다. 좋은 사용자 경험을 내기 위해, 컨텐츠를 효과적으로 전달하기 위해 웹 화면을 잘 구성하면 사이트에 대한 신뢰가 생길것이며 어떤 방식으로든 사용자와 사이트 모두에게 긍정적인 영향을 미칠 것이다.

네비게이션을 클릭하거나 스크롤바를 드래그해서 보면 좋습니다.

http://www.madwellnyc.com/

http://stephband.info/jparallax/demos/index.html


밤을 새고 작성해서 문장이 매끄려우려나 모르겠네요.
패럴렉스 스크롤 페이지는 컨텐츠 유동이 적을 때 특히 유용합니다.