Monthly Archives: 10월 2013

1. Parallax Scrolling이란?

 

1940년대부터 전통적인 애니메이션이나 게임에서 사용됐던 기법으로 화면을 구성하는 배경이미지들과

기타 이미지들간의 움직임이나 동작 시간을 다르게 주어 스크롤이 될 수 있도록 하는 디자인 표현 기법입니다.

Parallax(시차 : 관측 위치에 따른 물체의 위치나 방향의 차이)의 뜻에서도 볼 수 있듯이 물체의 위치와 방향의 차이로

사용자에게 평면적인 웹사이트가 아니라 마치 살아 숨쉬는 듯한 느낌의 웹사이트를 제공할 수 있습니다.

 

 

2. 등장배경 

 

원래는 애니메이션이나 게임에서 사용하던 기법으로 예전에 PC나 게임기에서 하던 마리오와 같은 게임을 예로 들 수 있습니다.

 

• 제품설명
• 기업 광고
• 스토리텔링
• 스토리를 가진 브랜드 광고
• 회사소개

 

4. 장/단점

Parallax Scrolling을 사용함으로 장/단점은 다음과 같습니다.

 

- 장점

• 페이지 컨텐츠를 소비하지 않음 -> 한 페이지로 구성 가능.
• 컨텐츠에 따라 사용자의 시선을 서비스 제공자가 원하는 방향으로 이끌수 있음.
• 단순히 마우스 스크롤 뿐만이 아니라 키보드의 방향키 등을 통해 다양하고 새로운 사용자 경험을 이끌어 낼 수 있음.
• 디스플레이 크기에 영향받지 않고 효과적으로 컨텐츠를 전달할 수 있음

- 단점

• 컨텐츠가 가로 또는 세로로 너무 길 때, 사용자가 지루함이나 불편함을 느낄 수 있음.
• 하나의 페이지로 구성 시 많은 리소스가 필요하기 때문에 초기 로딩속도가 느릴 수 있음.
• 컨텐츠의 양이 많을 경우 화면 구성이 복잡해질 수 있음.
• 모바일 등의 기기에서 처리 문제가 남아 있음.

5. 국내외 사례

- 국내

• http://www.tistory.com/event/photoevent2013/
• https://www.wooribank.com/
• http://pyl.hyundai.com/
• http://www.lg.com/global/oledtv

- 해외

• http://www.nintendo.com.au/gamesites/mariokartwii/
• http://a-class.mercedes-benz.com/com/en/#!/?s=start
• http://www.zensorium.com/tinke/
• http://graphicnovel-hybrid4.peugeot.com/start.html
• http://www.puma.com/mobium/

Parallax Scrolling에 대한 이론만 다루었습니다.

추후에 기회가 된다면 다양한 예제를 통해 다시 한번 다루도록 해보겠습니다.

감사합니다.

 

※ 참고 자료

[1] http://en.wikipedia.org/wiki/Parallax_scrolling

[2] http://designbyforest.tistory.com/entry/%ED%8C%A8%EB%9F%B4%EB%A0%89%EC%8A%A4-%EC%8A%A4%ED%81%AC%EB%A1%A4Parallax-Scrolling

[3] http://sir.co.kr/bbs/board.php?bo_table=pl_talk&wr_id=4187

[4] http://www.kirasung.co.kr/tc/entry/%EC%B5%9C%EC%8B%A0-%EC%9B%B9-%ED%8A%B8%EB%9E%9C%EB%93%9C-_-%ED%8C%A8%EB%9F%B4%EB%9E%99%EC%8A%A4-%EC%8A%A4%ED%81%AC%EB%A1%A4%EB%A7%81-%EC%9B%B9%EC%82%AC%EC%9D%B4%ED%8A%B8-Parallax-scrolling-Website

[5] http://skullacy.com/635