[Web Design Trend] Parallax Scrolling

[Web Design Trend] Parallax Scrolling

2012. 11. 1. 07:40ㆍGUI 가벼운 이야기
Limho

본 내용은 위키피디아의 내용 일부를 토대로 작성되었습니다.

1. 정의

Parallax Scrolling : 모니터상에서 화면이 (상하좌우)스크롤될 때, 배경 이미지들과 오브젝트 이미지들간 시차가 발생하여 스크롤되도록 하는 기법.
Parallax : 시차, 관찰 위치에 의한 대상물의 변위

[관련 참고 용어]
Belt Scrolling
화면상의 특정 오브젝트를 조작하여 그 오브젝트 움직임의 양과 방향에 따라 화면이 스크롤되도록 하는 기법.

게이머의 컨트롤에 의해 주인공 캐릭터(오브젝트)가 상하좌우 돌아다니면 그 방향의 새로운 배경과 오브젝트들이 스크롤되어 나타나 주어진 임무를 수행하는 아케이드게임에서 많이 사용하는 방식이다.
플래쉬 사이트에서 사용자가 조작하는 마우스 포인터의 움직임에 따라 화면이 스크롤되어 나타나는 것도 벨트 스크롤의 일종이라 볼 수 있다.

2. 역사

디즈니사가 1940년대부터 애니메이션 제작에 사용한 '멀티플레인 카메라(Muntiplane Camera)촬영 기법'에서 그 기원을 찾아볼 수 있다.
카메라를 횡으로 움직이면 카메라에 가까운 이미지가 먼 이미지보다 더 많이 움직이게 되어 자연스런 공간감을 만들 수 있다.줌인(줌아웃)을 하면 가까운 이미지는 화면 뒤로 물러나고 먼 이미지가 점점 커져 나타나게 된다.

참고영상 - 월트 디즈니 애니메이션 http://www.youtube.com/watch?v=R5yJCncdiAc

상당히 긴 컨텐트가 제한된 크기의 모니터내에서 오브젝트간 시차를 두고 스크롤되는 Parallax Scrolling 개념이 처음으로 적용된 사례는 1982년 Moon Patrol이라는 아케이드게임이다.

달에서 임무를 수행하는 차는 배경이 왼쪽으로 자동 스크롤됨에 따라 전진하는 것처럼 보이며 원거리의 산은 근거리물체들보다 천천히 이동하여 화면 전체에 공간감이 느껴지도록 하고 있다.
(이후 이러한 스크롤 방식의 아케이드 게임이 쏟아졌고 8-90년대 전자오락실의 추억을 간직한 사람이라면 흔히 볼 수 있었던 게임방식이었다.)

최근에는 안드로이드폰 Idle화면에서도 app icon들과 배경이미지의 공간감을 연출하기 위해 좌우스크린 이동시 적용되어 있다.

3. 구현방법

위에서 설명한 바와 같이 Layer를 사용하여 Layer간 시차를 주는 방식으로 구현하고 있다.
게임에서는 이미지의 메모리용량을 줄이기 위해 배경 패턴 타일을 반복하여 흐르게 하는 방법을 주로 쓰며, 메모리 크기가 중요한 웹사이트에서도 응용할 수 있는 부분이다.

4. 웹사이트에서의 구현기술

과거 Parallax Scrolling을 적용한 웹사이트들은 주로 Flash로 만들어졌다.
Flash의 호환 문제와 swf에 포함된 컨텐트들이 검색되지 않는 점 등으로 Flash의 역동적인 효과들을 대체하는 HTML기반의 코드들이 개발되고 있으며 Parallax Scrolling의 경우 jQuery, 자바스크립트, CSS3를 사용하여 구현이 가능하다.

5. 어떤 웹사이트에 적용하면 좋은가

애니메이션과 게임에서 주로 사용되었다는 점에서 알 수 있 듯,
- 이야기 형식(스토리텔링 기법)이 웹사이트컨셉에 어울리는 경우
- 메세지 전달을 위해 다른 공간으로의 자연스러운 이동이나 오브젝트들간의 유기적인 동작들이 필요한 경우
- 스텝을 나누어 메세지를 전달하면서 스텝간 연결 흐름을 자연스럽게 하고 싶은 경우
에 구현하면 좋다.
이외에도 One Page 웹사이트로 제작 시, 배경 이미지를 고정시키고 컨텐트만 스크롤되게 하여 이미지 용량을 줄이고 싶은 경우, 또는 공간감 원근감을 강조한 컨셉의 웹사이트를 만들고 싶은 경우에도 사용해 볼 수 있겠다.

6. Parallax Scrolling으로 구현한 웹사이트 사례 모음

본 글의 최하단에 링크된 List Pages에서 소개된 웹사이트들 중 몇가지를 추려 보았다.

Peugeot hybrid4