Parallax Scrolling에 대해
정인호
2013-08-28 10:08:13
안녕하세요 접근성팀 정인호입니다.
Parallax Scrolling 기법에 대해 이론적으로 접근해봤습니다.
이론적인 내용이오니 참고바랍니다.
1. Parallax Scrolling이란?
1940년대부터 전통적인 애니메이션이나 게임에서 사용됐던 기법으로 화면을 구성하는 배경이미지들과
기타 이미지들간의 움직임이나 동작 시간을 다르게 주어 스크롤이 될 수 있도록 하는 디자인 표현 기법입니다.
Parallax(시차 : 관측 위치에 따른 물체의 위치나 방향의 차이)의 뜻에서도 볼 수 있듯이 물체의 위치와 방향의 차이로
사용자에게 평면적인 웹사이트가 아니라 마치 살아 숨쉬는 듯한 느낌의 웹사이트를 제공할 수 있습니다.
2. 등장배경
원래는 애니메이션이나 게임에서 사용하던 기법으로 예전에 PC나 게임기에서 하던 마리오와 같은 게임을 예로 들 수 있습니다.
마리오 게임을 보면 배경과 배경 외 다른 오브젝트들(마리오, 장애물, 아이템상자 등)로 구성되어 있습니다.
마리오가 앞으로 진행 시 배경과 다른 오브젝트들의 동작 방향과 동작 시간의 차이를 두고 있습니다.
이 때문에 사용자는 연속성을 제공하여 캐릭터를 동작시키면 게임을 진행할 수 있습니다.
웹의 발전과 시각적으로 뛰어난 웹을 요구하는 사용자들이 증가함에 따라 웹사이트에서도 이러한 기법을 사용하려고 노력했습니다.
그러나 몇 년 전까지만 해도 HTML과 CSS만으로 한계에 봉착하였습니다.
그리하여 Adobe사의 Flash를 통해 Parallax Scrolling 기법을 사용하곤 하였습니다.
최근에는 다양한 모바일 기기의 발전과 여러 보안상의 문제점들로 인하여 ActiveX나 Flash와 같은 플러그인을 배제하려는 노력하고 있으며,
이와 함께 HTML5와 CSS3, Javascript, Javascript library 등의 발전하여 Flash를 대체하여 구현이 가능하게 되었습니다.
위와 같은 상황으로 기업이나 서비스 제공자가 제약적인 환경에서 벗어나 사용자나 소비자에게 좀
더 다이나믹하고 시각적으로 뛰어난 효과들, 다양한 디바이스에서의 지원, 여러가지 마케팅 효과 등을 얻기 위해
본격적으로 Parallax Scrolling 기법을 사용하게 되었습니다.
3. 사용유형
Parallax Scrolling 기법을 보면 사용자가 웹페이지에서 마우스의 스크롤 또는 키보드의 방향키를 통해 화면을 제어하도록 하고 있습니다.
이런 기능을 통해 기업이나 서비스 제공자가 사용자의 시선을 유도하거나 호기심 유발 등과 같은 효과를 줄 수 있습니다.
그렇기 때문에 다음과 같은 유형에 많이 사용하고 있습니다.
- 제품설명
- 기업 광고
- 스토리텔링
- 스토리를 가진 브랜드 광고
- 회사소개
4. 장/단점
Parallax Scrolling을 사용함으로 장/단점은 다음과 같습니다.
- 장점
- 페이지 컨텐츠를 소비하지 않음 -> 한 페이지로 구성 가능.
- 컨텐츠에 따라 사용자의 시선을 서비스 제공자가 원하는 방향으로 이끌수 있음.
- 단순히 마우스 스크롤 뿐만이 아니라 키보드의 방향키 등을 통해 다양하고 새로운 사용자 경험을 이끌어 낼 수 있음.
- 디스플레이 크기에 영향받지 않고 효과적으로 컨텐츠를 전달할 수 있음
- 단점
- 컨텐츠가 가로 또는 세로로 너무 길 때, 사용자가 지루함이나 불편함을 느낄 수 있음.
- 하나의 페이지로 구성 시 많은 리소스가 필요하기 때문에 초기 로딩속도가 느릴 수 있음.
- 컨텐츠의 양이 많을 경우 화면 구성이 복잡해질 수 있음.
- 모바일 등의 기기에서 처리 문제가 남아 있음.
5. 국내외 사례
- 국내
- 해외
6. 마치며...
Parallax Scrolling에 대해서 조사하면서 느낀 점은 아직까지는 국내보다는
해외에서 화려하면서 편리한 사용자 경험을 이끌어 내기 위한 노력을 많이 있다는 것을 느꼈습니다.
Parallax Scrolling과 같은 기법을 사용할 수 있는 유형이 거의 정해져 있지만
우리나라에서도 이런 기법이나 새로운 사용자 경험을 이끌어 낼 수 있는 노력이 필요할 것 같습니다.
또한 Parallax Scrolling 기법을 사용 시 초기로딩 속도 문제나 화면 전환시 끊김과 같은 성능 문제를 야기할 수 있습니다.
이런 성능 문제에 대해서는 Minify와 Gzip, Javascript Loader 나 화면 전화 시 Ajax를 통한 Append 등
여러 성능 개선 노력등을 통해 충분히 개선이 가능할 것이라고 판단합니다.
해당 기법만이 아닌 사용자에게 좀 더 편리하면서 시각적으로 뛰어난 디자인 기법에 대한
노력이 필요할 것 같습니다.
Parallax Scrolling에 대한 이론만 다루었습니다.
추후에 기회가 된다면 다양한 예제를 통해 다시 한번 다루도록 해보겠습니다.
감사합니다.
※ 참고 자료
[1] http://en.wikipedia.org/wiki/Parallax_scrolling
[3] http://sir.co.kr/bbs/board.php?bo_table=pl_talk&wr_id=4187
조회수34486