스크롤로 이어지는 스토리 : Parallax 웹사이트

 

 

 

 

지난번 포스팅에서 다루었던 핀터레스트 UI와 반응형 웹사이트에 이어 이번에는 또 다른 웹 트렌드로 여겨지고 있는 스크롤링 사이트에 대해 다루도록 하겠다.

 

이전에도 하나의 페이지에서 아래로 혹은 옆으로 스크롤링을 하면서 컨텐츠를 탐색하도록 구성된 사이트는 있었다. 예전엔 단순히 세로로 가로로 큰 그림을 놓고 스크롤을 이용해서 본다는 느낌이 강했기 때문에 개인적으로 이러한 스타일을 그리 좋아하지 않았는데, 언제부턴가 이러한 스타일의 사이트가 살짝 변하면서 점점 흥미로운 사이트들이 많이 등장하고 있었다. Parallax 웹사이트라고 불리우는 것들 때문이다.

 

 

Parallex 사이트란?
Parallax 웹사이트의 의미는 간단히 말하자면 스크롤을 이동할 때마다 배경 화면이나 혹은 다른 오브젝트들이 각각 시간차를 두어 시각적으로 변화하는 사이트를 말한다. 마치 페이지가 여러 개의 레이어로 이루어져서 각각 이미지가 다르게 변화하면서 페이지에 깊이가 있는 것 같은 착각이 들게 한다.

 

간단한 예를 보자면 좌측의 사이트와 같다. (안타깝게도 변하는 모습은 한 컷에서 표현할 수가 없기에 직접 사이트에 들어가서 체험해보길 권한다) 스크롤을 올리거나 내리면, 각 섹션마다의 배경 사진과 그 위의 타이포, 이미지들이 시간차를 두며 스크롤링 된다. 배경 이미지의 구분이 딱 떨어지고 각 사진간의 조화가 전혀 이루어지지 않는 것 같아도 이런 시간차 기법을 이용하면 영상을 보듯 페이지가 진행되기 때문에 오히려 신선하게 보인다. 많지 않은 컨텐츠를 포함하고 있지 않아도 감각적인 이미지 몇 장과 타이포만 있으면 꽤나 멋진 사이트 하나가 완성되는 것 같다.

 

 

디자인적으로 멋지다는 이유도 있지만 이렇게 Parallax를 이용하여 사이트를 구성하면 전달하고자 하는 컨텐츠들에 스토리를 불어넣을 수 있게 되는 것 같다. 위에서부터 아래로(혹은 반대로) 사용자의 의식이 이어지면서 펼쳐지는 구성요소들이 하나로 이어지는 스토리를 구성해가는 것이다. Parallax 사이트들 중에도 이러한 장점을 잘 살린 아래의 사이트들을 살펴보겠다.

 

 

Parallex 사이트 사례

1. Homo Studiosus (http://www.kiinnostus.fi/autokuume)
위와 같은 사이트보다 좀 더 영상을 보는 듯한 사이트를 찾는다면 아래의 사이트를 소개한다. 이 사이트는 심지어 “플레이” 버튼도 있어서 알아서 스크롤을 내려준다. 그만큼 스크롤을 이용한 시간차 기법을 이용하여 웹사이트를 영상처럼 구현했다는 것을 잘 나타내기 위함인 것 같다.

 

 

2. Babel The King (http://babeltheking.com/eng)
Babel the king은 스크롤 효과뿐만 아니라 멋진 일러스트를 이용했다. 만약 동화책이 이런 방식으로 이루어져 있다면 아이들의 책을 읽는 재미를 더욱 돋구어 줄 것만 같은 사이트다. 스크롤을 내릴 때마다 우산을 쓴 고양이가 화면과 같이 떨어지고 마지막엔 덤불 속에 들어간다. Parallax를 이용해서 재미있는 요소를 잘 만들어낸 사이트 같다.

 

 

 

3. Phase 2 Design Studio (http://www.phase2technology.com/design)
왼쪽 상단의 로고로 보이는 이미지가 바로 물방울이었다. 스크롤을 이동하면 이 물방울이 파이프 안으로 들어가 스크롤 이동에 따라 계속되는 파이프들을 통과한다. 처음에 주의 깊게 보지 않으면 놓치기 쉬운 재미있는 요소다.

 

 

 

Parallax 사이트들을 보다 보면 네비게이션의 역할 또한 재미있게 사용하고 있는 사이트가 많다. 해당 페이지로의 링크로서의 개념뿐만 아니라 이것 또한 하나의 변화하는 오브젝트가 되면서 전체 페이지의 흐름과 함께 자연스럽게 어우러지고 있다. 다음에 기회가 된다면 눈에 띄는 네비게이션들을 갖고 있는 사이트들을 소개하도록 하겠다.