|
패럴랙스 스크롤링이란?
주로 웹사이트에서 사용되는 기술로 스크롤에 따라 오브젝트와 배경 이미지가 시간차를 두고 변하는 기법을 의미합니다. 패럴랙스 스크롤링은 콘텐츠 탐색을 간편하게 해줄 수 있으며, 스크롤에 따라 3D 효과와 깊이감을 제공함으로써 사용자와의 인터랙션을 높이고 호기심을 자극하여 사이트에 머무는 시간을 늘려줄 수 있습니다. 느리고 무거운 플래시를 대체하여, HTML5와 CSS3를 이용하여 제작 가능하다는 것을 큰 장점으로 뽑을 수 있겠습니다.
패럴랙스 스크롤링을 적용하기 위한 10가지 Tip
웹디자인 트렌드로 패럴랙스 스크롤링이 자주 소개되면서 국내 기업들의 웹사이트에서도 사이트 리뉴얼 시 패럴랙스 스크롤을 적극 반영하는 모습을 보여주고 있습니다. 이에 앞서 지난 2013년, 디자인 전문 사이트인 “Creativebloq”에서는 패럴랙스 스크롤 제작 시 유용한 Tip 10가지를 소개하였는데 간단히 살펴보도록 하겠습니다.
01. 모바일 환경을 고려하라.
현재는 대부분의 패럴랙스 스크롤링 웹사이트들이 모바일에 친화적이지 못합니다. 하지만 오늘 날, 모바일로 인터넷을 이용하는 빈도가 높아지고 있으며, 제한적인 환경에서의 사용을 강요하는 사이트들은 도태되고 있습니다. 이에 따라 각 디바이스들에서 활용 가능한 반응형 웹(Responsive web) 구축에 공을 들여야 할 것입니다.
02. 패럴랙스 스크롤링이 사이트 제작의 동기가 되어서는 안 된다.
분명 패럴랙스 스크롤링은 매우 트렌디한 기법입니다. 하지만 이는 사이트 구축 시 사용자에게 색다른 경험을 제공하는 한가지의 요소일 뿐, 패럴랙스 스크롤링을 과하게 적용하여 사이트에서 주고자 하는 사용자 경험을 덮어버리는 우를 범해서는 안될 것입니다.
03. 재미있게 만들자.
근래에 패럴랙스 스크롤링을 적용한 웹사이트들이 많이 늘어나고 있으며, 각자 다양한 방식으로 이 기법을 사용하고 있는데요. 타 웹사이트에 비해 경쟁력을 갖추기 위해서는 기왕이면 다른 사이트보다 재미있게 만드는 것이 사용자의 관심을 끌고, 사용자가 사이트에 머무는 시간을 늘릴 수 있을 것입니다.
04. 스토리를 만들자.
주로 회사나 제품의 연혁을 웹사이트에 담고자 할 때 많이 사용하는 방식으로, 패럴랙스 스크롤링을 통해 제공하고자 하는 콘텐츠의 타임라인이나 스토리를 경험하게 할 수 있습니다. 이를 접한 사용자에게는 단편 만화를 읽는 것 같은 재미를 부여할 수 있습니다.
05. 연결성을 부여하라.
자신의 웹사이트에 사용자들이 오래 머물도록 만드는 것이 모든 제작자들의 목표일 것입니다. ‘스크롤을 한번 더 하면 다음에는 뭐가 나올까?’ 사용자로 하여금 이러한 궁금증을 끊임없이 유발하여 사이트에 오래 머물 수 있도록 콘텐츠와 패럴랙스 스크롤링 기법의 매끄러운 연결성이 필요할 것입니다.
06. 사용자의 다음 행동을 안내하라.
대부분은 스크롤을 통해 다음 콘텐츠로 자연스럽게 이동하지만, 사용자들은 간혹 다음으로 넘어가기 위해서 어떻게 진행해야 하는지 방향을 잃기도 합니다. 이 경우 스크롤 진행부(화면 하단 부 등)에 ‘Next’ 또는 화살표 등의 가이드를 주어 안내하는 것도 좋은 방법으로 볼 수 있습니다.
07. Layer와 Depth를 추가하라.
포토샵의 Layer와 마찬가지로 이미지가 주로 사용되는 웹사이트 제작 시, 여러벌의 Layer 및 Depth를 나누고 각각의 Layer에 스크롤에 따른 노출 값을 달리 적용하면 스크롤 시 보다 풍부한 깊이감과 인터랙션 효과를 줄 수 있습니다.
08. 과한 사용은 금물.
앞서 언급한 [02. 패럴랙스 스크롤링이 사이트 제작의 동기가 되어서는 안 된다.]의 내용과 이어지는 것으로, 과한 패럴랙스 스크롤링의 사용은 오히려 사용자에게 혼란을 줄 수 있습니다. 우선 보여주고자하는 콘텐츠를 명확히 한 후 적재적소에 알맞게 사용하는 것이 올바른 사용 방법일 것입니다.
09. IE(Internet Explorer)에서 제작 시 주의하라.
웹 세계에서 연결성을 최우선으로 강조하고 있는 요즘, 모든 디바이스 및 브라우저에서 동일한 사용 환경을 제공하는 것이 중요합니다. 하지만 IE의 경우 6, 7, 8 버전은 패럴랙스 스크롤링이 구현되지 않습니다. 특히 IE 의존도가 높은 국내 사용자들을 생각한다면 웹사이트 개발 시, 이 같은 사항은 유념해야 할 키포인트가 될 수 있습니다.
10. 로딩 애니메이션
접속 시 즉각적으로 메인 화면이 뜨는 일반 웹사이트와 달리, 대량의 대용량 이미지를 기반으로 패럴랙스 스크롤링을 사용하는 웹사이트의 경우 접속 시 로딩이 필요한 경우가 대부분입니다. 빠른 로딩이 가장 중요하겠지만 필수불가결한 요소라면, 최대한 재미있는 로딩화면을 제공하여 사용자가 지루해하지 않게 만들어 사이트를 이탈하지 않도록 하는 것이 중요할 것입니다.
패럴랙스 스크롤링 사이트 맛보기
패럴랙스 스크롤링이 적용된 많은 사이트들이 있지만, 그 중 몇 가지를 추려보았습니다.
아래 예시들은 사이트 중 일부만 캡쳐하였으며, 각 사이트 방문 시 더 많은 내용과 패럴랙스 스크롤링 적용 방법을 직접 확인하실 수 있습니다.
01. Life of pi
2012년 개봉했던 영화 “Life of Pi”의 제작 과정을 타임라인으로 풀어낸 웹사이트 입니다. 방대한 양의 콘텐츠를 효과적으로 웹사이트에 풀어놓았으며, 스크롤 할 때마다 쏟아져 나오는 콘텐츠들로 인해 사용자들의 눈을 즐겁게 해주고 있습니다.
02. Mariokart
닌텐도의 마리오카트 웹사이트입니다. 스크롤 시 좌에서 우로, 위에서 아래로 화면이 이동하며, 콘텐츠들이 재미있게 등장하는 모습을 볼 수 있습니다.
03. The Royal British Legion
스크롤 시 꽃을 형상화한 그래픽 심볼이 하단으로 이동하며 백그라운드의 콘텐츠와 결합되는 방식으로, 과하지 않은 방식을 사용함으로써 백그라운드의 콘텐츠에 집중할 수 있도록 구성 되었습니다.
04. Sony
소니의 전자제품들을 탐험해볼 수 있는 웹사이트입니다. 스크롤 시 부품들이 결합되어 하나의 제품으로 완성되는 과정을 담아내고 있습니다.
05. The Lab
실험실 홍보용으로 제작되었으며, 사용자는 마우스 스크롤만을 이용하여 해당 연구소의 실내를 자세하게 탐험이 가능합니다.
06. Soulreaper
Soulreaper라는 코믹스 홍보를 위해 제작된 웹사이트 입니다. 시원시원한 화면 분할과 실제 코믹북을 읽는 듯한 사용자 경험을 제공하고 있습니다.
07. Qmusic
네덜란드의 Qmusic에서 주최했던 타이타닉 관련 이벤트를 웹사이트에 담았습니다. 스크롤 시 잠수정이 점점 깊이 잠수하며 콘텐츠를 비춰주고 있습니다.
08. Putzengel
독일의 청소 제품 회사 홈페이지로, 패럴랙스 스크롤링 뿐만 아니라 첫 화면의 쓰레기를 마우스로 집어 던질 수 있거나, 각 버튼에 마우스 오버 시 인터랙션 효과 등 소소한 즐길거리를 제공하고 있습니다.
이 외에 지난 2014년 Creativebloq에서 패럴랙스 스크롤링이 효과적으로 사용된 50가지의 사이트를 소개했습니다. 하단 URL을 통해 더 많은 웹사이트들을 확인해 보시기 바랍니다.
마치며
예시로 보여드린 웹사이트들을 보면 모두 다양한 방식으로 패럴랙스 스크롤링 기법을 사용하는 것을 볼 수 있습니다. 하지만 모든 웹사이트에서 볼 수 있는 공통적인 요소는 타임라인이면 타임라인, 홍보물이면 홍보물 등, 사용자에게 보여주고자 하는 사이트의 성격과 콘셉트를 명확히 한 후 적재적소에 패럴랙스 스크롤링 기법을 사용했다는 것입니다.
현재는 웹사이트에 주로 사용되고 있지만 앞으로의 발전 가능성이 높은 만큼 조만간 모바일 환경에서도 활성화될 것이라 예상되며, 앞으로 더욱 혁신적인 패럴랙스 스크롤링 웹사이트들이 끊임없이 탄생하길 기대합니다.
참고자료 및 인용자료 출처
| 
