Parallax Scroll 디자인으로 다이나믹한 홈페이지를 만들자

소개해 드릴 내용은 웹 트랜드로 자리 잡은 페럴렉스(Parallax) 스크롤 페이지입니다.

웹 서핑을 하다 보면 스크롤만으로 홈페이지를 상하좌우로 이동하며 전체 내용을 물 흐르듯 쉽게 볼 수 있도록 만들어진 곳이 있습니다.
마우스 클릭 없이 스크롤을 이용해 홈페이지 내용을 빠르고 쉽게 전달해주는 곳이 Parallax Scroll을 이용해 제작된 홈페이지입니다.

Parallax Scroll은 다중스크롤이라고도 하며 Parallax Scroll 웹사이트의 의미는 사용자가 스크롤을 이용하여 이동할 때 배경이나 다른 오브젝트들이 각각의 시차와 depth를 가지고 반응해 변화(움직임)되는 홈페이지를 말합니다.

일정한 레이아웃에서 벗어나 자유롭게 움직이는 교차 이미지와 스크롤링을 통해 여러 개의 depth안에 있는듯한 입체감과 역동성을 느낄 수 있습니다.

페럴렉스[parallax(par·all·ax)]란

명사
[U] (전문 용어) 시차(視差: 관측 위치에 따른 물체의 위치나 방향의 차이)
출처:Oxford Advanced Learner's English-Korean Dictionary

Parallax Scroll 홈페이지 제작시

Parallax 기법을 사용하기 위해서는 잘 짜여진 한 페이지 레이아웃 보다는 전체적인 흐름을 기획하는게 중요합니다.

각각의 오브젝트(이미지)의 움직임이 얼마나 잘 어우러져 움직이는지가 중요한 요소입니다.

이러한 이유때문에 Parallax Scroll 홈페이지를 제작하려면 단순하게 하나  하나 페이지를 디자인 한다기 보단 전체적인 스토리의 흐름과 배치가 중요하여 웹디자인 이라기 보단 웹 프로듀싱에 가깝다고 말 할수 있습니다.

Parallax 기법을 사용하면 무엇보다 홈페이지에서 보여주고 싶은 메시지의 스토리 텔링이 자유롭고, 각 페이지 이동중 이탈하는 사용자 수를 줄일수 있기 때문에 기업에서는 프로모션, 이벤트, 제품 노출등에 효과적으로 사용될 수 있습니다.

 

Parallax Website Designs

Activate Drinks

Dream Pretzels

AdSempre

Whiteboard

Tokiolab

Q Music Titanic

Range Rover Victoria Beckham

Putzengel

Smokey Bones

Inception Explained

Oakley

New Zealand

Cantilever

Biamar

Bata

Australian Trade Commission

Bagigia

Tiger Awareness

Ben The Bodyguard

Ala

 

 

정보가 도움이 되셨다면 손라락 꾹 눌러주세요.   🙄