패럴렉스 스크롤(Parallax scrolling)에 관하여

패럴렉스 스크롤 (Parallax scrolling)

1. Parallax Scrolling이란?

 

- 애니메이션이나 게임에서 사용됐던 기법으로 화면을 구성하는 배경이미지들과 기타 이미지들간의 움직임이나 동작 시간을 다르게 주어 스크롤이 될 수 있도록 하는 디자인 표현 기법.

- Parallax(시차 : 관측 위치에 따른 물체의 위치나 방향의 차이)의 뜻에서도 볼 수 있듯이 물체의 위치와 방향의 차이로 사용자에게 평면적인 웹사이트가 아니라 마치 살아 숨쉬는 듯한 느낌의 웹사이트를 제공할 수 있다.

 

 

2. 등장 배경 

- Adobe사의 Flash를 통해 Parallax Scrolling 기법을 사용하다가 모바일 기기의 발전과 보안상의 문제점들로 인하여 ActiveX나 Flash와 같은 플러그인을 배제하게 되었다.

- 이와 함께 HTML5와 CSS3, Javascript, Javascript library 등의 발전하여 Flash를 대체하여 구현이 가능하게 되었다.

- 기업이나 서비스 제공자가 제약적인 환경에서 벗어나 사용자나 소비자에게 좀 더 다이나믹하고 시각적으로 뛰어난 효과들, 다양한 디바이스에서의 지원, 여러가지 마케팅 효과 등을 얻기 위해 본격적으로 Parallax Scrolling 기법을 사용하게 됨

3. 사용 유형

- Parallax Scrolling 기법을 보면 사용자가 웹페이지에서 마우스의 스크롤 또는 키보드의 방향키를 통해 화면을 제어하도록 하고 있다. 이런 기능을 통해 기업이나 서비스 제공자가 사용자의 시선을 유도하거나 호기심 유발 등과 같은 효과를 줄 수 있다.

그렇기 때문에 다음과 같은 유형에 많이 사용하고 있다.

- 제품설명

- 기업 광고

- 스토리텔링

- 스토리를 가진 브랜드 광고

- 회사소개

 

4. 장/단점

 

- 장점 

페이지 컨텐츠를 소비하지 않음 -> 한 페이지로 구성 가능.

컨텐츠에 따라 사용자의 시선을 서비스 제공자가 원하는 방향으로 이끌수 있음.

단순히 마우스 스크롤 뿐만이 아니라 키보드의 방향키 등을 통해 다양하고 새로운 사용자 경험을 이끌어 낼 수 있음.

디스플레이 크기에 영향받지 않고 효과적으로 컨텐츠를 전달할 수 있음

- 단점 

컨텐츠가 가로 또는 세로로 너무 길 때, 사용자가 지루함이나 불편함을 느낄 수 있음.

하나의 페이지로 구성 시 많은 리소스가 필요하기 때문에 초기 로딩속도가 느릴 수 있음.

컨텐츠의 양이 많을 경우 화면 구성이 복잡해질 수 있음.

모바일 등의 기기에서 처리 문제가 남아 있음. 

 

5. 구현 방법

- 이미지를 PNG(투명한 파일)로 만들어 각각의 좌표값(Position)을 이용해 배경위에 띄우고, 

- JQuery을 통해 스크롤 이벤트로 좌표값을 조절해야 하기 때문에 하나의 객체(Object)들의 움직이 중요한 요소가 된다.

- 구현방법 안내 사이트

http://dev.classmethod.jp/etc/html5-x-css3-x-jquery-6-parallax/

http://code.tutsplus.com/tutorials/simple-parallax-scrolling-technique--net-27641

6. 사례

우리은행 https://www.wooribank.com/

http://graphicnovel-hybrid4.peugeot.com/start.html