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

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

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

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

페럴랙스란?

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

페럴랙스란 웹사이트 셋트1

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

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

페럴랙스란 웹사이트 셋트2

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

페럴랙스란 웹사이트 사례

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

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

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

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

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

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

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

온라인 아웃소싱 플랫폼 프리모아 프로젝트와 프리랜서(개발자,디자이너,기획자)를 연결해 드립니다. 매주 업데이트 되는 프로젝트를 확인해 보세요. www.freemoa.net
Follow
Cards you may also be interested in
부쩍 느려진 인터넷속도를 빠르게
haejin67
169
420
2
노트북 배터리 수명확인하는법, 이런 방법이?
007overmen1
22
48
0
쉽게 볼 수 없는 사진들.jpg
CtrlZ
107
72
5
[이슈 콕콕] ‘알몸 사진이 자식에게…’ 노인 노리는 몸캠 피싱 급증
newsway
5
3
1
롱보드 여신 지니의 특별한 라이딩 촬영 후기
jinijinidrone
3
2
0
삭제해야하는 핸드폰 어플.jpg
nanmollang
89
83
13
꼭 삭제해야 할 악성프로그램 이름들.jpg
real896pc
86
245
0
슬기로운 방콕 생활을 위한 앱 추천 7
visualdive
22
55
0
나만 알고싶은 앱 딱 3개만 알려줌
visualdive
9
17
0
기깔나는 컴퓨터 바탕화면 모음.jpg
quandoquando
154
98
14
배우가 스탭들과 함께 유치장에서 쪽잠자고 같이 제작사 욕하며 촬영한 작품.jpg
mumumimi
17
9
3
짤줍 0104
goalgoru
103
24
4
컴퓨터 모니터 신호없음 해결방법 5가지!
007overmen1
24
66
0
일상에 바로 적용 가능한 상식을 알려주는 책
FLYBOOK
18
59
0
꽉 막힌 도로서 '도움' 요청하는 아버지···오토바이 운전자가 내린 조치
Voyou
20
8
2
초보자를 위한 자급제폰 구매 가이드
Voyou
63
79
9
에브리타운을 또 하나 만들었습니다. 몰랑이를 본 순간 이건 만들어야겠다는 생각을 했어요 ㅎㅎ 이번에는 만드는데 좀 오래 걸리긴 했지만 그래도 결과가 만족스러워서 좋습니다. 저도 몰랑이처럼 스케이트 타러 가고 싶어지네요
respectyou
81
5
8
컴국종의 컴퓨터 수리.jpg
n0shelter
27
11
2
빙글 코인 모으시나요?
Skella
5
2
5
핸드폰 바꿨습니다. 13년 만에...
uruniverse
67
12
60
4.7 Star App Store Review!
Cpl.dev***uke
The Communities are great you rarely see anyone get in to an argument :)
king***ing
Love Love LOVE
Download

Select Collections