웹 인터랙션 인포그라피를 만나다

마우스 제스처나 휠 스크롤에 따라 반응하는 재밌는 웹사이트를 보신 적 있나요? 인포그래픽에 인터랙션을 더해 재밌게 만들어 놓은 웹사이트를 소개합니다.

1. 원 페이지 웹사이트

웹 인포그래픽을 세 가지 유형으로 나눠봤습니다. 그 중 첫 번째는 최근 유행하는 트렌드인 원 페이지 스타일입니다. 말 그대로 링크 이동 없이 사용자가 지금 보고 있는 하나의 페이지에서 모든 콘텐츠를 보여줍니다. 원 페이지 스타일의 웹사이트들을 모아 놓은 ONE PAGE LOVE(http://onepagelove.com/ )라는 사이트가 있을 정도인데요. 원 페이지 스타일은 정보를 한 눈에 보기 쉽게 정리해야 하는 인포그래픽에 적당합니다. 

ONE PAGE LOVE(http://onepagelove.com/ )

아래 웹사이트는 최근 오픈한 스티브잡스 추모 웹사이트 입니다. 하나의 페이지로 스티브잡스의 일대기에 대해 보여주고 있는데요. 상단의 고정된 메뉴를 클릭하면 웹사이트 자동으로 스크롤 되어 해당 콘텐츠로 이동하게 하는 대표적인 원 페이지 스타일 사례입니다.

스티브잡스 추모 웹사이트 (http://www.rememberum.com/steve-jobs-tribute/)

2. 패럴랙스 스크롤(parallax scroll)

두 번째 유형은 원 페이지 스타일에서 조금 진화한  패럴랙스 스크롤(parallax scroll) 유형입니다. 패럴랙스란 단어는 우리 말로 '시차'로 번역할 수 있는데요. 웹사이트를 스크롤 할 때, 배경이 시차를 두고 이동한다는 의미입니다. 아래 예시 웹사이트를 먼저 봐주세요. 

Vasona networks (http://vasonanetworks.com/)

Vasona networks를 보면 화면의 오브젝트와 배경이 스크롤 되는 속도가 약간 다르다는 걸 볼 수 있습니다. 이렇게 배경과 오브젝트가 시차(parallax)를 두고 움직인다고 해서 이러한 유형을 패럴랙스 스크롤이라고 부른답니다. 화면의 요소들이 시차를 두고 움직이면 더욱 입체감있고 생동감 넘치는 사용자 경험을 전해줄 수 있습니다.

3. 다양한 인터렉션

마지막으로 원 페이지와 패럴랙스 스크롤에 조금 더 세세한 인터랙션을 가미한 유형들을 볼 수 있습니다. The State of Financial & Economic Education(http://surveyofthestates.com/)이라는 웹사이트를 살펴보겠습니다. 

The State of Financial & Economic Education(http://surveyofthestates.com/)

The State of Financial & Economic Education는 교육자금이라는 다소 딱딱할 수 있는 주제를 재밌는 인터렉션을 넣어 재밌게 보여주고 있습니다. 화면을 스크롤하면 상단에 숫자들이 올라가거나 내려가고 말풍선이나 현재 상태를 보여주는 재밌는 애니메이션들이 나타납니다. 내용에 따라 고정되는 오브젝트도 있고 스크롤에 따라 흘러가는 오브젝트들도 있습니다. 필요에 따라 오브젝트들이 애니메이션(이동, 크기 변화)를 보여줍니다. 또한 스크롤 뿐 아니라 요소들을 클릭했을 때, 자세한 정보를 보여주거나 소셜미디어로 공유할 수 있습니다. 

4. 마치며

인포그래픽 내용을 웹으로 옮겨 화면 이동과 스크롤에 반응하는 웹사이트 사례를 살펴봤습니다. 이렇게 인터랙션이 더해진 웹 인포그래픽은 정적인 화면으로 보여주는 것보다 사용자들의 참여를 유도하고 집중하게 만들어 양질의 정보를 제공할 수 있습니다. 

이런 웹 인포그래픽, 인터랙션이 들어간 웹사이트는 마이크로 사이트로 기업의 애뉴얼리포트나 연혁, 캠페인을 소개하기에 적합합니다.

Code for America 의 annual report (http://annual.codeforamerica.org/)

Startups , this is how design works(http://startupsthisishowdesignworks.com/)

Head 2 heart (http://www.head2heart.us/)

더 많은 웹 인포그래픽를 보고 싶으시면 아래 링크를 방문해 주세요.

- http://www.wabbaly.com/parallax-scroll-effect-web-design/

- http://webdesignledger.com/inspiration/18-beautiful-examples-of-parallax-scrolling-in-web-design

- http://www.1pagewebdesign.com/

- http://onepagelove.com/

by 북극곰 발자국