패럴랙스 스크롤링 웹 사이트 추천 19가지

목차

1. Bear Grylls
2. ToyFight
3. Hello Monday
4. A-dam
5. Diesel: BAD Guide
6. Myriad
7. Firewatch
8. Garden Studio
9. GitHub 404
10. Jess&Russ
11. Alquimia WRGMake Your Money
12. MatterSeattle Space Needle
13. Seattle Space Needle
14. Madwell
15. Peugeot Hybrid4
16. Cultural Solutions
17. Walking Dead
18. New York Times: Tomato Can Blues
19. Snow Fall

꾸준히 유지되고 있는 웹 디자인 트렌드 중 하나는 패럴랙스 스크롤링이다. 이 효과를 쓰면, 웹 페이지의 배경이 전경에 비해 느리게 움직여서 스크롤 할 때마다 3D 효과를 낼 수 있다. 때때로 지나치게 압도적일 수도 있지만, 조금씩 사용하면 독특하고 기억에 남는 웹 사이트를 만드는 미묘하게 깊은 요소들을 넣을 수 있다.

그러나 그것이 어떻게 완성되어야 하는가를 보여주기 위해서, 기술적으로 많이 신경 쓴 사이트들을 모아보았다. 어떤 경우에, 패럴랙스 스크롤링은 사이트의 중심이 되는 포인트가 된다; 다른 경우에는 단지 전경이 조금 튀어나오는 것처럼 보이게 하기 위해, 터치에 있어 뎁스(depth)를 더하는 정도로만 기능하기도 한다.

02.ToyFight

ToyFight는 수상 경력이 있는 크리에이티브한 에이전시다. 웹사이트는 위트가 가득하다. 창립자 Jonny Lander와 Leigh Whipday는 그들을 3D 피규어 형태로 만들어, 사이트 전반에 등장하도록 구성했다. 잘 활용한 패럴랙스가 3D 효과를 증폭시켰고, 선명하고 밝고, 깔끔한 배경과의 조합 덕에 전혀 부담스럽거나 방해되지 않는다.

03.Hello Monday

04.A-dam

A-dam은 GOTS 인증을 받은 오가닉 코튼을 사용하는 컨셉의 남성용 복서 브리프와 반바지를 판다. 해당 제품은 공정한 임금을 받고 노동 시간을 지키는 사람들의 핸드메이드 상품이다. 그들은 기성 제품에 비해 윤리적이고 스타일리쉬한 대안을 제시하며, (Build in Amsterdam이 만든)사이트에서는 스크롤할 때마다 튀어오르는 디렉션 등 갖은 패럴랙스 요소로 제품을 멋지게 보여준다.

05.Diesel: BAD Guide

84.Paris는 Diesel사의 BAD 향을 론칭하기 위해 인상적인 패럴랙스 웹 사이트(+소셜 미디어 캠페인)를 만들었다. 이 한 페이지 짜리 사이트는 ‘BAD Guide’를 차례로 보여준다.

사용자는 마우스를 드래그해서 사이트를 둘러보고, 핀터레스트처럼 이미지를 클릭해가며  자세히 볼 수 있다. 흑백 일러스트로 Tinder(“일단 오른쪽, 오른쪽, 오른쪽, 오른쪽-해두고 나중에 정리하면 된다.”)부터 인스타그램(매주 목요일마다 전 애인이랑 연락하는 것 잊지 말고. #TBT)까지 갖가지 것들의 팁을 알려주기도 한다.

06.Myriad

Myriad는 Boss Design이 만든 다양한 모듈식 사무용 가구이다. 호환성이 뛰어나고, 재조립이 가능하도록 디자인되었으며 일하는 공간에 맞춰서 직접 만들 수 있다. 론칭 당시, Bareface는 Myriad의 무한한 가능성을 보여주기 위해 패럴랙스 요소를 멋지게 활용했다. 사이트에 가면 영감을 주는 가구 배치 등을 볼 수 있다.

07.Firewatch

08.Garden Studio

비슷한 느낌으로, Garden Studio는 감각적이고 보는 사람으로 하여금 기분을 좋아지게 하기 위해서, 나머지 정적인 페이지로 넘어가기 전인 사이트 최상단에 패럴랙스 기술을 사용하기로 했다. 움직이는 풍경은 세밀하고 지나치게 야단스럽지 않는 동시에 이목을 확실하게 끈다. 너무 아름다워서, 계속해서 스크롤링해서 봤다.

09.GitHub 404

이는 스크롤이 아니라 마우스를 움직이면 나타나는 효과라 엄연히 말하자면 패럴랙스 스크롤링은 아니다. 하지만 이 엄청나게 흥미로운 페이지는 뎁스를 주기 위해 레이어를 사용했다. 패럴랙스를 ‘제대로' 사용한 것과는 다르게, 배경은 전경보다 빠르게 움직이고, 방향 감각이 이상하고 비현실적인 느낌을 만들어낸다.

10.Jess&Russ

파워 디자이너 Russ Maschmeyer와 Jessica Hische 커플의 결혼 웹사이트가 보기만 해도 아름답다는 건 딱히 놀랄만한 일은 아니다. 사이트는 패럴랙스 스크롤링을 사용해서 일러스트를 뎁스 있게 보여주면서, 그들의 로맨틱한 이야기를 늘어놓는다. 그들은 2012년에 결혼했지만, 웹 사이트는 지금 봐도 볼만한 가치가 있다.

11.Alquimia WRG

밀라노에서 활동하는 Alquimia WRG는 디지털 미디어 브랜드들에게 놀랍고 효과적인 경험을 만드는 데 초점을 맞춘 디지털 에이전시다. 깔끔하고 미니멀하며, 흑백으로만 이루어진 웹사이트는 단정한 패키지를 만드는 데에 자주 쓰이는 언어들(HTML5, CSS, JavaScript)을 조합하여 사용했다.

HTML5 캔버스는 첫 번째 로딩 이미지를 움직이게 하는 데에 쓰였다. “홈페이지에 있는 패럴랙스 요소들은 마우스가 움직이는 것을 통해 3D 우주 느낌을 내기 위해 다이내믹하게 만들어졌다.”

페이지 네비게이션은 심플하면서도 부드럽게 페이지를 넘기는 효과가 적용되었으며, 이는 JavaScript로 CSS의 부족한 면을 보충함으로써 가능했다. works 페이지는 선택된 작업들의 깔끔한 리스트들과, 클릭했을 때 부드러운 슬라이딩 효과와 함께 자세한 정보가 나온다.

콘텐츠가 로딩될 때, JavaScript는 화면 하단에 프리로딩 바를 구현시킨다. 사이트는 Bianchi가 “내용, 사용성, 사용자 경험 사이에서 이상적인 균형을 만들어낼 것"이라 말했던 목적을 달성했다.

12.Make Your Money Matter

재무와 돈은 흥미로울 수 없는 분야 중에 하나다. 하지만 뉴욕에서 활동하는 디지털 에이전시 Firstborn은 Public Service Credit Union을 위해 만든 다이내믹한 패럴랙스 스크롤링 웹 사이트 <Make Your Money Matter>로 수익을 많이 내고 있다.

대중에게 신용 조합에 들었을 때 얻을 수 있는 이익을 설명하는 데에 초점을 맞춰, 이 엄청난 사이트는 은행을 사용하는 것뿐만 아니라, 신용 조합이 어떻게 돌아가는지, 어떻게 신청해야 하는지, 고객의 보중금에 따른 은행의 이득은 얼마인지 보여주는 계산기까지 있다.

13.Seattle Space Needle

시애틀의 상징, Space Needle의 사이트는 605피트 높이의 타워 아래 쪽에서 시작해서, 꼭대기까지 스크롤하여 SkyCity레스토랑과 시애틀의 전체 뷰를 볼 수 있게 한다. 605피트 정도로 만족할 수 없다면, 계속해서 스크롤해보시길!

14.Madwell

뉴욕에서 활동하는 디자인&개발 에이전시 Madwell은 포트폴리오에 엄청난 뎁스를 더하는 인상적인 3D 스타일을 잘 살리기 위한 패럴랙스 스크롤링 효과를 사용했다.

15.Peugeot Hybrid4

Peugeot은 브라우저에 자동 재생 만화를 띄우기 위해 사용한 패럴랙스 스크롤링에 온 힘을 쏟아부었다. 만화는 스크롤을 내릴 때마다 플레이되며, 자동차 회사 신제품  HYbrid4의 기술을 광고하는데 도움이 되기도 했다.

16.Cultural Solutions

아트 컨설턴시 Cultural Solution은 홈페이지의 뎁스를 경험하게 하기 위해 패럴랙스 스크롤링 효과를 사용했다. 메인브랜드 이미지는 컬러풀한 원들을 사용한 것이고, 그 원들은 미묘한 3D 효과를 내면서 전경보다 배경이 느리게 움직인다.

17.Walking Dead

우리는 TV 좀비 드라마 Walking Dead의 팬이다. 게다가, 홍보용 웹사이트가 론칭되었을 때 완전히 사로잡히고 말았다. 그 창의적인 사이트는 드라마의 원작인 만화를 상기 시키고, 패럴랙스 스크롤링을 잘 활용하여 병들고 부패한 세계로 당신을 끌어당길 것이다.

“무엇보다도, 우리는 이 드라마의 팬으로서 이 자리에 왔다.” 리드 디자이너 Gavin Beck이 말했다. “이런 진행을 통해서, 우리는 팬들이 Walking Dead를 탐험해보고 그 진가를 알아볼 수 있는 세상을 만들고 싶었다.”

“그 점을 달성하기 위해서, 우리는 HTML5, CSS3, JavaScript/jQuery, Web Audio/HTML5 Audio, 그리고 패럴랙스 스크롤링 등 현존하는 갖가지 기술들을 살펴보았다. 모든 플랫폼을 가로지르는 매력적인 단일의 경험을 제공하기 위해 이 모든 방법들을 한데 모으는 것은 실로 도전이었다.

18. New York Times: Tomato Can Blues

집중력이 낮은 스낵 콘텐츠 미디어의 시대에, 어떻게 사람들을 롱폼longform 저널리즘으로 끌어들일 수 있을까? 여기 NYT가 내놓은 좋은 답변이 있다. 그들은 스토리 텔링, Atilla Futaki가 그린 익살스러운 일러스트와 똑똑한 웹 디자인 기술을 잘 버무렸다.

우리가 지금껏 본 패럴랙스 스크롤링 예시 중에 가장 좋은 것들 중 하나이며, 이 아티클은 당신을 Mary Pilon이 쓴 케이지 파이터의 이야기로 끌어들일 것이다. 콘텐츠를 스크롤하면, 당신이 콘텐츠에 푹 빠져 몰입할 수 있도록 일러스트가 영상 효과와 약간의 변화를 보이면서 살아있는 듯한 느낌을 준다.

Futaki의 일러스트는 경찰의 기록, 목격자의 증언, 사진 작가와 기자의 메모에 기반해 있으며, 그런 세세한 관심이 빛을 발했다. 이 모든 대단한 독서 경험이 온라인 저널리즘의 미래일까?

19. Snow Fall

온라인에서 롱폼 콘텐츠로 무엇을 할 수 있는지에 대한 경계를 확 넓힌 첫 번째 사이트 중 하나로, NYT의 Snow Fall 기사는 패럴랙스 스크롤링 및 웹 영상을 포함한 다양한 요소들을 조합했다.

Tunnel Creek에서의 눈사태에 대한 이 기사는 2012년 12월 온라인에 게재되었으나, 아직까지도 패럴랙스 스크롤링으로 뭘 할 수 있는지를 보여주는 강력한 사례로 남아있다. 추후에 이 신문은 퓰리처 수상 기사를 전 세계의 디자인 커뮤니티의 관심을 사로잡는 혁신적인 방법으로 소개했다.