freemoa
10,000+ Views

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

안녕하세요. 프리모아의 웹디자이너화 되가고 있는 마케터 Will 입니다.
오늘은 웹디자이너 분들이라면 누구나 한번쯤은 들어봤을 법한 '페럴렉스 스크롤' 기법에 대해서 언급을 해보고자 합니다. 최근 2014년도 겨울부터 시작해 근 1년동안 가장 뜨거운 웹디자인 트렌드 몇가지가 있는데요. 와이드한 화면, 라인 쉐도우 아이콘, 페럴랙스 스크롤 방식 등이 그러한 부분들입니다.
외주를 받는 프리랜서 웹디자이너들도 페럴랙스에 대해서 많이들 알게 되었고, 작업을 하게 되었을 텐데요. 혹시라도 모르는 웹디자이너 분들을 위해, 그리고 웹디자이너에게 의뢰를 맡기는 클라이언트를 위해 페럴랙스 디자인에 대해서 말해보고자 합니다.

페럴랙스란?

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

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

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

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

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

페럴랙스란 웹사이트 사례

웹 디자이너 프리랜서에게 있어서 백문이 불여일견이라는 말처럼 역시 직접 보는게 확 와닿을 텐데요. 몇몇 페럴랙스 스크롤방식을 활용한 웹사이트 사례들을 찾아보았습니다.
독특한 페럴랙스 웹사이트 [ http://www.full-windsor.com ]
기본적인 페럴렉스 웹사이트에 대해서는 이미 충분히 많이들 보셨을 것 같아서 조금 독특한 페럴렉스 사이트를 보여드리고자 하는데요. 드래그앤 드롭을 페럴랙스 스크롤에 적용했다는 점과 가로 스크롤을 이용한다는 점이 조금 이색적이라고 느껴지네요.
마우스 포은트 이동 자체에 있어 원숭이의 손을 오브젝트로 잡아서 내가 직접 페이지를 손으로 움직이는 듯한 재미감과 책을 넘기는 듯한 가로 페럴렉스로 독특함을 추구하였습니다. 하지만 페럴렉스의 고질적인 문제점도 명백하게 보여주는데요. 웹사이트 자체가 조금 무거워진 감이 있다는걸 알 수 있습니다.
큰 이미지를 활용한 펠러랙스 웹사이트 [ http://www.madwell.com ]
이러한 큰이미지를 활용한 페럴렉스 웹사이트의 경우 로딩속도가 오래 걸린다는 단점이 있습니다. 하지만 보시는 바와 같이 와이드한 화면에 큰 이미지를 활용하기 때문에 마치 화면속에 들어가 있는 느낌을 받을 수 있습니다. 또한 마우스 이동에 따른 오브젝트 변화로 고객에게 새로운 동적 흥미를 줄 수가 있습니다.
이상 온라인 아웃소싱 프리모아의 Will 이었습니다.
Comment
Suggested
Recent
더 궁금한 사항은 댓글로 달아주세요~ +_+ //
Cards you may also be interested in
2018.3월 추천 데스크톱 견적! 사무용 ~ 프리미엄 총 7가지 소개
안녕하세요~ 모든 IT, 게임, 일상 정보를 먼저 재빠르게 전해드리는 빠박IT 입니다. 오늘은 2018년 3월달 추천 데스크탑 견적에 관한 포스팅이며 사무용~프리미엄까지 총 7가지 견적을 소개해드리도록 하겠습니다. 1. 사무용 먼저 처음으로 사무용 견적입니다.인텔 펜티엄 G4600에 RAM 4GB에 120GB짜리 SSD가 탑재된 견적입니다. 내장그래픽 성능으로 인해 게임으로는 롤 및 디아블로3 정도까지 가능하며 웬만하면 문서작성 및 PPT 제작 그리고 영상보는용도로 사용하시는것이 가장 좋은 견적입니다. 영상을 저장해서 보신다면 외장HDD 하나 구매하시는 것이 좋습니다. 조립비+배송비 포함해서 현금평균가로 33만원대에 구매가 가능한 견적이죠. 다만 윈도우10은 별도입니다. 2. 보급형,게임 보급형  다음은 보급형 견적입니다. 라이젠5 2400G 제품이 나옴에 따라 보급형으로 완전히 자리를 잡은 부품입니다. 내장그래픽만으로도 오버워치 중옵이 쾌적하게 돌아갈 정도이며 블리자드 게임은 어느정도 사양이면 다 된다고 보시면 되겠습니다. 배틀그라운드까지 원하신다면 GTX 1050 2GB를 추가로 다셔야 쾌적하게 돌아가며 배틀그라운드가 필요 없으시다면 GTX 1050 2GB 없이 사용하시면 되겠습니다. 가격은 각각 조립비+배송비 포함하면 현금가 평균 59,78만원대 정도입니다. 3. 게이밍, 게이밍+전문작업 견적 다음은 게이밍 및 게이밍+전문작업 견적입니다. 이 견적은 6코어 6쓰레드인 i5-8600K와 6코어 12쓰레드인 라이젠5 1600X로 나뉘어진 견적입니다. 확실히 인텔 i5-8600K가 라이젠5 1600X보다 게임 프레임면에서는 좀 더 좋은 성능을 보여주지만 멀티 프로그램 사용 및 전문작업인 베가스나 에프터이펙트에서는 라이젠5 1600X가 좀 더 나은모습을 보여줍니다. 그래서! 게이밍으로 가신다면 인텔 제품으로, 전문작업까지 원하신다면 라이젠5 1600X로 가시는 것이 좋습니다. 이정도의 견적이면 게이밍으로는 배틀그라운드 상옵도 무난하고 쾌적하게 돌릴 정도입니다.(그림자를 중간으로 할시) 4. 프리미엄,프리미엄+전문작업 견적  마지막으로 프리미엄 견적 2가지 입니다. 이것도 또한 게이밍과 전문작업 2가지로 나뉘어진 견적이며 한개는 6코어 12쓰레드, 한개는 8코어 16쓰레드인 견적입니다. 게이밍면에서는 역시나 인텔이 좀 더 앞선 모습을 보여주지만 게임말고도 다른 프로그램을 사용하실에는 라이젠7이  좀 더 프레임 드랍을 덜 일으키죠. 하지만 최대 프레임 방어는 인텔 i7-8700K가 좀 더 좋으며 라이젠7 제품은 게임도 하고 싶고 전문작업도 같이 사용하고 싶을 때 이 견적으로 가시면 되겠습니다. 게이밍부터는 오버클럭도 가능하니 좀더 프레임 방어를 하고 싶으시다면 오버클럭을 하시는 것도 좋습니다. 이 견적의 성능으로 따지자면 배틀그라운드 풀옵(그림자만 중옵으로 할시) 무난하고 쾌적하개 즐기실 수 있을 정도입니다. 오늘은 여기까지 2018년 3월달 추천 데스크톱 견적을 저의 개인적인 의견으로 말씀드렸습니다. SSD,그래픽카드 제조사, 파워 및 케이스는 자기 입맛대로 고르셔도 전혀 무관하며 이 견적이 절대 답이 아니라는 것을 명심하셔야됩니다. 위에 보여드린 견적은 답이 아닌 참고용이며 " 이정도는 맞춰야돼! " 가 아닌 " 이정도로 맞춰주시면 좋아요 " 라는 포스팅입니다. 다음글로는 IT에 관한 글이며 인텔 CPU인 캐논과 아이스레이크에 관해서 올리도록 하겠습니다. https://youtu.be/FMJqr4HWNvg 제 블로그 : http://ccf1007overmen.tistory.com 컴퓨터 문의 : https://www.facebook.com/ccf1007overmen
핸드폰 바꿨습니다. 13년 만에...
모토로라 크레이저 모르는 아가들 없재? (핸드폰 하나를 13년째 쓰고 있는 게 유우머) 이름 : 모토로라 크레이저 (MS700) 만남 : 2007년 7월 7일 이별 : 2019년 11월 25일 (예정) 햇수로 13년, 도합 4525일 그동안 정말 수고 많았다. 아니 얼마나 튼튼하게요? 13년 간 비가 오나 눈이 오나 곁을 지켰던 모토로라 크레이저를 이제 보내 주고자 합니다. 사람 나이로 치면 어림잡아 130살 정도로 치환될 수 있지 않을까 생각하면 나는 정말이지 악독한 고용주가 아니었나 싶은데요. 처음에는 한 번도 바꾼 적 없는 번호가 마치 이름 마냥 중하게 여겨져서 붙들고 있었던 것이 나중에는 이 아이에 정이 들고, 결국은 골골대는 어르신이 되어 버린 이 지경까지 모시고 댕기게 되었지 뭡니까. 언젠가부터 그게 뭐 그리 힘에 부칠 일이라고, mms를 불러올 때마다 처량한 끼익 끼익 소리를 내기 시작하더라고요. 모른채 몇 해를 더 흘려 보낸 어느 날, 그 소리가 왠지 더 버거워서 애처롭기까지 했던 날, 그제서야 겨우 마음을 먹을 수 있었습니다. 놓아줘야 겠구나. 핸드폰의 13년은 인간의 13년과는 비교할 수 없을 정도로 만만찮은 삶이었을테니, 과로사로 돌아가시기 전에 이제라도 편히 재워 드리려 합니다. 삼성 애니콜, LG 싸이언, 모토로라 크레이저, 그리고 이제 애플 아이폰 11 프로. 네번째 핸드폰을 가지기까지 얼마나 많은 세대를 지나 온 건지. 벌써 아이폰은 11번째 세대로군요. 그간 함께 해줬던 아이팟터치 4,5,6세대와 아이패드들에게도 수고했다 인사를 건넵니다. 016-***-**** 번호로 아이폰 11 프로 쓰는 사람 보셨나요. 그게 바로 접니다. 물론 2021년이면 사라질 시한부 번호지만 그래도 아직 소중하거든요. 잃고 싶지 않아... 액정 크기 비교. 개통은 안 했지만 배경화면은 바꿔 두었습니다. 덕후에게 제일 중요한 건 이거 아입니까? 아직 개통은 못 했습니다. 도서관 회원증을 신분증인 줄 알고 들고 나간 바람에 헤헤... 유심이 들어가지 않는 폰이라 유심부터 개통해야 하거든요. 요게 제일 설레는 부분입니다 후후 참. 마침 모토로라 폴더블 스마트폰 레이저 2019가 나와서 웃기기엔 그걸로 갈아타는 것 만한 게 없는지라 잠시 혹했지만 며칠 웃기려고 사기에는 너무 큰 모험이었기에 포기했습니다... 내가 크레이저 못 버린 것처럼 모토로라도 레이저 절대 못 버려... 근데 광고 겁나 멋있지 않아요? 한 번 더 혹할 뻔 했으나 가격에 짜게 식었스빈다. (128기가가 아이폰11프로 256기가보다 비쌈. 게다가 폴더블인거 빼고는 사양 겁나 구림...) 마지막으로 새거 인증! <NEW>
[인정받는 디자이너가 되기위한 발걸음 그리드]
안녕하십니까 IT 아웃소싱 플랫폼 프리모아입니다. 디자인분야에서 레이아웃을 잡는 것은 기본적이면서 퀄리티 높은 결과물을 만드는데 중요합니다. 물론 웹디자이너분들도 웹사이트를 디자인하면서 배치나 여백, 정렬 등 신경을 많이 쓰고 있을겁니다. 앱디자이너들도 카테고리나 주요기능을 이용자에게 가독성을 좋게하려고 고민하고 계실 것 같습니다. 디자인에서 중요한 레이아웃을 빛나게 도와주는 도구이자 수단인 '그리드(grid)' 를 알아보겠습니다. § 그리드란? 레이아웃의 요소들을 조화롭게 시각화시키기 위하여 사용하는 수평 , 수직의 안내선입니다. 레이아웃을 잡게 도와주는 요소이지 꼭 그리드에 신경쓰다보면 획일화되고 융통성 없는  레이아웃 디자인으로 나올 수 있으므로 틀에 얾메일 필요는 없습니다.  § 그리드의 장점 첫째. 정보의 조직, 명료, 집중화 둘째. 창조성과 객관성의 증대 셋째. 디자인 요소의 통합과 공간의 체계적 통계 넷째. 제작 과정의 합리화를 통한 시간과 비용의 단축 § 그리드의 구성요소 (1) 칼럼 : 글자나 이미지를 배열하기 위해 나눈 세로형태의 공간 (2) 모듈 : 모듈은 가로, 세로가 일정한 간격으로 분할된 한 면으로, 공간을 나누는 기본 단위이다. (3) 마진 : 그리드 외곽의 빈 공간, 화면에 균형과 긴장을 부여, 내용과 이미지를 제외한 나머지 부분 (4) 플로우 라인 : 공간을 수평으로 분할하는 가상의 기준선 (5) 존 : 몇개의 모듈이 모인 별도의 틀 (6) 마커 : 표제와 페이지번호와 함께 사용되어 반드시 동일한 위치에 반복되어야 합니다. (7) 칼럼 마진 : 칼럼과 칼럼 사이의 공간을 말합니다. § 그리드 종류 1. 블록그리드 그리드의 기본으로써 하나의 블록만을 사용하는 디자인으로 1단그리드라고도 불립니다.  글을 많이 적는 서적이나 논문, 리포트에 주로 쓰이는데 반복될 경우 지루한 느낌을 줄 수 있습니다. 2. 단그리드 두개이상의 단으로 나누어 사용한 그리드로써 단의 수의 따라 2단 3단으로 불리는 그리드 디자인 다양한 형태의 단으로 구성될 수 있어 신문이나 잡지에서 많이 쓰이며 '칼럼그리드'라고도 불립니다. 3. 모듈그리드 모듈그리드는 단그리드보다 복잡한 디자인 형태일때 사용하는 그리드형태입니다. 모듈이라는 사각형의 방을 만들어 그룹화하는데 이 잉역을 바탕으로 레이아웃을 정합니다. 모듈을 제대로 사용하지 않을 경우 시각적 혼란을 주기 떄문에 안정된 느낌으로 디자인해야합니다. 4. 계층그리드 직관적인 배치를 사용하여 어떠한 범주에도 들어가지 않고 규칙적이고 반복적으로 쓰이는  다른 그리드와 달리 디자이너의 공간연출 역량이 중요합니다. 주로 포스터나 북디자인, 웹페이지에서 접근하는 방법입니다. § 그리드디자인 하는데 도움되는 사이트 Grid guide <http://grid.guide/>그리드를 생성하는데 수치를 도움받을 수 있는 좋은 리소스사이트입니다. 전체 폭과 열의 수를 입력하면 자동으로 거터 너비 별로 그리드의 수치를 계산해서 알려줍니다, <http://guideguide.me/>를 들어가면 설정을 통해 포토샵에서 그리드를 쉽게 생성할 수 있도록 제공받을 수 있습니다.  웹디자인을 하기전에 그리드를 세팅해 놓고 레이아웃을 잡는다면 이용자들에게  깔끔하고 가독성있는 웹사이트를 설계하실 수 있을 것 같습니다.  또한 그리드를 잘 이용할 수록 숙련도 높은 디자이너로 성장하실 수 있습니다.  디자이너를 꿈꾸는 분들에게 많은 도움이 되셨으면 좋겠습니다.  감사합니다.