페럴랙스 스크롤

요즘 반응형 웹기획과 함께 페럴랙스 스크롤 형태의 사이트들이 많이 늘어 나고 있습니다.

우선 페럴랙스 스크롤 이라는 것에 대해서 알아보겠습니다. 

페럴랙스 스크롤(Parallax scrolling) 은 원래 게임이나 애니메이션과 같은 곳에서 사용하는 기법으로 오브젝트 간 시간 차이를 통해서 조금 더 역동적으로 화면을 표현하던 기법입니다. 이러한 기법이 CSS3와 HTML5 가 등장하면서 2011년부터 웹에 적용되어 점차 확대 되어 가고 있는 추세입니다. 

2013년 Purdue University 의 연구에 따르면 페럴랙스 스크롤 기법은 UX 측면에서 새로운 경험을 제공하여 특정 측면의 향상을 가져오지만 반드시 UX 적인 향상을 가져오지는 않는다고 하였습니다.  

이러한 페럴랙스 스크롤 웹사이트의 가장 큰 장점은 UX전문가(기획자 또는 디자이너 등)가 원하는 내용을 사용자에게 주도적으로 이야기 할 수 있다는 점입니다. 이러한 점을 통해서 사용자는 인식하지 못하고 사이트에서 제공하는 콘텐츠를 제공 받게 됩니다....

하지만 이러한 페럴랙스 스크롤 웹사이트는 다소 큰 이미지를 사용하고 있어 로딩 시간이 오래 걸린다는 단점이 있습니다. 또한 2011년 이후 활성화된 방식이라 모든 브라우저에서 호환되지 않는 다는 치명적인 단점도 있지요... 또한 과도한 스크롤로 인해 사용자는 웹사이트 자체에 어려움을 느끼거나 원하는 콘텐츠를 찾지 못하여 불만을 가질 수도 있을 것입니다.  

하지만 사용자가 충분히 흥미를 가질 수 있고 잘 엮어진 스토리 형태로 제공을 한다면 사용자는 물 흐르듯 사이트에서 제공하는 콘텐츠를 제공 받을 수 있을 것입니다. 

이러한 페럴랙스 스크롤 형태로 만들어진 몇 가지 참고 사이트를 알아보겠습니다. 

http://www.madwellnyc.com/

http://www.iutopi.com/

http://www.culturalsolutions.co.uk/

http://www.spendeeapp.com/

http://moto.oakley.com/

http://www.putzengel.at/

http://everylastdrop.co.uk/

http://www.hanwhafireworks.com/index.do

http://www.nintendo.com.au/gamesites/mariokartwii/#home

http://www.sony.com/be-moved/

http://www.the-bea.st/

http://lamoulade.com/#!/home

정말 다양한 방식의 페럴랙스 스크롤 사이트가 있는데요. 이러한 사이트들은 간단한 정보를 사용자에게 쉽게 설명하기 위한 사이트들이 대부분 입니다. 이러한 페럴랙스 스크롤 사이트 개발을 위해서 다양한 곳에서 라이브러리와 튜토리얼을 제공하고 있습니다. 간단한 참고 사이트는 아래와 같습니다.  

 

http://matthew.wagerfield.com/parallax/

http://markdalgleish.com/projects/stellar.js/

http://www.jarallax.com/

http://prinzhorn.github.io/skrollr/

http://speckyboy.com/2012/07/20/the-parallax-scrolling-effect-40-examples-and-tutorials/

http://www.topdesignmag.com/20-examples-of-one-page-websites-that-are-using-parallax-scrolling/

http://www.creativebloq.com/web-design/parallax-scrolling-1131762

http://webdesignledger.com/inspiration/21-examples-of-parallax-scrolling-in-web-design

http://richardshepherd.com/smashing/parallax/

http://designwoop.com/2012/06/parallax-scrolling-tutorials-resources/

http://net.tutsplus.com/tutorials/html-css-techniques/simple-parallax-scrolling-technique/

http://www.designzzz.com/jquery-parallax-plugins/

http://www.impressivewebs.com/parallax-scrolling-scripts-plugins/

http://jalxob.com/cool-kitten/

http://blog.themeforest.net/tutorials/create-a-funky-parallax-background-effect-using-jquery/

페럴랙스 스토롤 형태의 사이트는 사이트에서 제공하는 콘텐츠를 사용자가 거부감 없이 받아 들이도록 적절한 스토리를 통해서 사용자에게 표현하는 것이 가장 중요한 요소라고 생각합니다. 그러한 전달을 위해서는 사이트에서 가진 콘텐츠를 매끄럽게 연결해가는 기획이 필요하겠죠..또한 이러한 페럴랙스 스크롤 사이트를 기획할때 개발자와 디자이너와 소통할 수 있는 방식 또한 해결해야 될 문제점이라고 생각합니다.