[디자인] 웹 디자인 최신 트렌드 페럴렉스 제대로 쓰기

안녕하세요. 프리모아의 웹디자이너화 되가고 있는 마케터 Will 입니다.

오늘은 웹디자이너 분들이라면 누구나 한번쯤은 들어봤을 법한 '페럴렉스 스크롤' 기법에 대해서 언급을 해보고자 합니다. 최근 2014년도 겨울부터 시작해 근 1년동안 가장 뜨거운 웹디자인 트렌드 몇가지가 있는데요. 와이드한 화면, 라인 쉐도우 아이콘, 페럴랙스 스크롤 방식 등이 그러한 부분들입니다. 

외주를 받는 프리랜서 웹디자이너들도 페럴랙스에 대해서 많이들 알게 되었고, 작업을 하게 되었을 텐데요. 혹시라도 모르는 웹디자이너 분들을 위해, 그리고 웹디자이너에게 의뢰를 맡기는 클라이언트를 위해 페럴랙스 디자인에 대해서 말해보고자 합니다. 

[ 페럴랙스란 ? ] 

페럴랙스란? 시차 관측 위치에 따른 물체의 위치나 방향의 차이라는 사전적 정의를 가지고 있는데요. 페럴렉스 스크롤이란(시차스크롤) 사용자가 스크롤을 통해 웹사이트의 페이지를 내림에 따라 발생하기도 하고, 드래그앤 드롭 방식, 수직과 수평 페럴렉스 등 다양하게 표현할 수 있습니다. 

[ 페럴랙스란 웹사이트 셋트 ] 

프리모아의 Will은 친절하니까요. 

페럴랙스 웹사이트 셋트를 가져와 봤습니다. 웹디자이너분들에게 참고가 될 수 있늕디 모르겠네요. 첫번째 셋트의 경우는 리본과 같은 오브젝트를 이용해 페이지 구간의 연계성을 줄 수 있습니다. 특히 리본과 같은 선 오브젝트는 고객의 시선을 유도하는 효과가 있어서 중요한 문구 또는 사물, 페이지로 콜투액션 역할을 할 수 있습니다,

두번째는 배경(큰 이미지)을 최대한 활용한 페럴렉스 웹사이트 셋트인데요. 앞서 설명했던 것과 컨셉이 조금 다른 부분이 있습니다. 전체 배경을 주고 마우스 스크롤 이동에 따라 시차차이를 주고, 원근감을 느끼게 해줄 수 있는데요. 이럴 경우 고객은 웹사이트의 배경에 들어간 듯한 느낌이 들기도 합니다. 

[ 페럴랙스란 웹사이트 사례 ] 

웹 디자이너 프리랜서에게 있어서 백문이 불여일견이라는 말처럼 역시 직접 보는게 확 와닿을 텐데요. 몇몇 페럴랙스 스크롤방식을 활용한 웹사이트 사례들을 찾아보았습니다. 

독특한 페럴랙스 웹사이트 [ http://www.full-windsor.com ]

기본적인 페럴렉스 웹사이트에 대해서는 이미 충분히 많이들 보셨을 것 같아서 조금 독특한 페럴렉스 사이트를 보여드리고자 하는데요. 드래그앤 드롭을 페럴랙스 스크롤에 적용했다는 점과 가로 스크롤을 이용한다는 점이 조금 이색적이라고 느껴지네요. 

마우스 포은트 이동 자체에 있어 원숭이의 손을 오브젝트로 잡아서 내가 직접 페이지를 손으로 움직이는 듯한 재미감과 책을 넘기는 듯한 가로 페럴렉스로 독특함을 추구하였습니다. 하지만 페럴렉스의 고질적인 문제점도 명백하게 보여주는데요. 웹사이트 자체가 조금 무거워진 감이 있다는걸 알 수 있습니다. 

큰 이미지를 활용한 펠러랙스 웹사이트 http://www.madwell.com/

이러한 큰이미지를 활용한 페럴렉스 웹사이트의 경우 로딩속도가 오래 걸린다는 단점이 있습니다. 하지만 보시는 바와 같이 와이드한 화면에 큰 이미지를 활용하기 때문에 마치 화면속에 들어가 있는 느낌을 받을 수 있습니다. 또한 마우스 이동에 따른 오브젝트 변화로 고객에게 새로운 동적 흥미를 줄 수가 있습니다.

이상 온라인 아웃소싱 프리모아의 Will 이었습니다.