19가지 패럴랙스 웹 사이트 레퍼런스
작년 여름, 메디아티 스타트업 펠로우십에서 처음으로 인터랙티브 콘텐츠에 대해서 알게 됐다. 개발도 디자인도 할 줄 몰라서 구현할 가능성은 전혀 없었지만, 그저 굉장한 레퍼런스 몇 가지를 보는 것만으로도 얼리어답터가 되는 기분이었다. 특히 NYT에서 내놓는 기사들은 기술적으로 그리 대단하지는 않아도, 시청각을 고루 자극하며 내용의 이해를 돕는 치밀한 기획이 커뮤니케이션의 넥스트 버전에 대해 생각해보게 만들어줬다.
그 때 썼던 글
https://brunch.co.kr/@thinkaboutlove/54
REASIGN 9/4일자 뉴스레터는 패럴랙스 효과를 사용한 웹 사이트 19가지다. 메일 끝에 REASIGN 팀이 추천하는 사이트도 함께 첨부한다.
The Interactive news: 각종 인터랙티브 뉴스를 모아놓은 곳.
http://www.theinteractivenews.org/
Generation Screwed: 내용은 모르겠고 그냥 예쁘고 멋지다. 미적으로 영감을 받았다.
https://highline.huffingtonpost.com/articles/en/poor-millennials/?mobile=1
*하단 내용은 뉴스레터 REASIGN에서 일부를 발췌해온 것입니다.
01.Bear Grylls
디지털 에이전시 Outpost는 탐험가이자 TV유명인 Bear Grylls의 디지털 전략을 맡았다. 해당 스튜디오는 “새로운 브랜드 비전과 가치를 만들고, ‘어드벤처 브랜드'를 구현하기 위해서, 우리는 사람들이 온라인으로 여행을 하게끔 만들어야 했다.”라고 케이스 스터디에서 말했다. 풍부하고, 다이내믹한 사용자 경험이 키 포인트다.
세밀한 패럴랙스가 도처에 깔려있으나, 진정한 신스틸러는 홈페이지다. Grylls가 드라마틱한 산지를 배경으로 나타나고, 유저들은 스크롤을 하면 마치 그 장면으로 빨려들어가는 듯한 느낌을 받는다. 탐험을 시작하기에 매우 멋진 인트로였다.
02.ToyFight
ToyFight는 수상 경력이 있는 크리에이티브한 에이전시다. 웹사이트는 위트가 가득하다. 창립자 Jonny Lander와 Leigh Whipday는 그들을 3D 피규어 형태로 만들어, 사이트 전반에 등장하도록 구성했다. 잘 활용한 패럴랙스가 3D 효과를 증폭시켰고, 선명하고 밝고, 깔끔한 배경과의 조합 덕에 전혀 부담스럽거나 방해되지 않는다.
03.Hello Monday
Hello Monday는 Denmark에서 활동하는 디자인 에이전시다. 유저들에게 스토리와 재미요소를 제공하는 몰입형 디지털 경험을 목표로 하는 이 회사는 포트폴리오 웹사이트를 통해 그 목표에 한걸음 더 다가가고 있다.스튜디오 사이트를 만들 때 어려운 것은 최첨단의 디자인 아이디어가 종종, 디자인 포트폴리오에서 가장 중요한 명확성과 사용성을 해친다는 점이다.
Hello Monday는 미묘한 패럴랙스 효과를 천천히 움직이는 페이지 레이아웃으로 설명해가면서 두 가지 모두를 잡았다. 각 프로젝트의 핵심 이미지는 사용자에게 잘 녹아들 수 있도록 천천히 움직이며, 정보를 제공하는 기능을 손상하지 않는 선에서 다이내믹함을 더했다. 효과는 홈페이지에서만 사용되며, 각 프로젝트 페이지에서는 작업을 더 빛나게 하기 위해 정적인 효과를 유지한다.
04.A-dam
A-dam은 GOTS 인증을 받은 오가닉 코튼을 사용하는 컨셉의 남성용 복서 브리프와 반바지를 판다. 해당 제품은 공정한 임금을 받고 노동 시간을 지키는 사람들의 핸드메이드 상품이다. 그들은 기성 제품에 비해 윤리적이고 스타일리쉬한 대안을 제시하며, (Build in Amsterdam이 만든)사이트에서는 스크롤할 때마다 튀어오르는 디렉션 등 갖은 패럴랙스 요소로 제품을 멋지게 보여준다.
84.Paris는 Diesel사의 BAD 향을 론칭하기 위해 인상적인 패럴랙스 웹 사이트(+소셜 미디어 캠페인)를 만들었다. 이 한 페이지 짜리 사이트는 ‘BAD Guide’를 차례로 보여준다.
사용자는 마우스를 드래그해서 사이트를 둘러보고, 핀터레스트처럼 이미지를 클릭해가며 자세히 볼 수 있다. 흑백 일러스트로 Tinder(“일단 오른쪽, 오른쪽, 오른쪽, 오른쪽-해두고 나중에 정리하면 된다.”)부터 인스타그램(매주 목요일마다 전 애인이랑 연락하는 것 잊지 말고. #TBT)까지 갖가지 것들의 팁을 알려주기도 한다.
Bareface의 사이트는 가구 시스템의 무한한 가능성을 보여준다.06.Myriad
Myriad는 Boss Design이 만든 다양한 모듈식 사무용 가구이다. 호환성이 뛰어나고, 재조립이 가능하도록 디자인되었으며 일하는 공간에 맞춰서 직접 만들 수 있다. 론칭 당시, Bareface는 Myriad의 무한한 가능성을 보여주기 위해 패럴랙스 요소를 멋지게 활용했다. 사이트에 가면 영감을 주는 가구 배치 등을 볼 수 있다.
화면의 나무들은 각자 독립적으로 움직인다.07.Firewatch
우리가 지금껏 본 패럴랙스 스크롤링 웹 사이트 중 가장 아름다운 사례를 하나 꼽으라면 게임 Firewatch이다. 깊이 감각을 주기 위해 6개의 레이어를 사용했다. 여기가 멋진 이유는, 스크롤 납치scroll hijacking(패럴랙스 효과를 사용하면 종종 나타나는)가 전혀 없고, 페이지의 윗 부분에서만 쓰이기 때문이다. 사이트의 나머지 부분은 여전히 시각적인 멀미 없이 쉽게 정보를 습득할 수 있도록 되어 있다. 어떻게 작업했는지 궁금하다면, CodePen 확인해보시길.
풍경을 레이어링 한 것은 화면이 3차원인 것처럼 보이게 만든다.비슷한 느낌으로, 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가 “내용, 사용성, 사용자 경험 사이에서 이상적인 균형을 만들어낼 것"이라 말했던 목적을 달성했다.
재무와 돈은 흥미로울 수 없는 분야 중에 하나다. 하지만 뉴욕에서 활동하는 디지털 에이전시 Firstborn은 Public Service Credit Union을 위해 만든 다이내믹한 패럴랙스 스크롤링 웹 사이트 <Make Your Money Matter>로 수익을 많이 내고 있다.
대중에게 신용 조합에 들었을 때 얻을 수 있는 이익을 설명하는 데에 초점을 맞춰, 이 엄청난 사이트는 은행을 사용하는 것뿐만 아니라, 신용 조합이 어떻게 돌아가는지, 어떻게 신청해야 하는지, 고객의 보중금에 따른 은행의 이득은 얼마인지 보여주는 계산기까지 있다.
시애틀의 상징, Space Needle의 사이트는 605피트 높이의 타워 아래 쪽에서 시작해서, 꼭대기까지 스크롤하여 SkyCity레스토랑과 시애틀의 전체 뷰를 볼 수 있게 한다. 605피트 정도로 만족할 수 없다면, 계속해서 스크롤해보시길!
14.Madwell
뉴욕에서 활동하는 디자인&개발 에이전시 Madwell은 포트폴리오에 엄청난 뎁스를 더하는 인상적인 3D 스타일을 잘 살리기 위한 패럴랙스 스크롤링 효과를 사용했다.
Peugeot은 브라우저에 자동 재생 만화를 띄우기 위해 사용한 패럴랙스 스크롤링에 온 힘을 쏟아부었다. 만화는 스크롤을 내릴 때마다 플레이되며, 자동차 회사 신제품 HYbrid4의 기술을 광고하는데 도움이 되기도 했다.
아트 컨설턴시 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월 온라인에 게재되었으나, 아직까지도 패럴랙스 스크롤링으로 뭘 할 수 있는지를 보여주는 강력한 사례로 남아있다. 추후에 이 신문은 퓰리처 수상 기사를 전 세계의 디자인 커뮤니티의 관심을 사로잡는 혁신적인 방법으로 소개했다.
원문: https://www.creativebloq.com/web-design/parallax-scrolling-1131762
