Application Possibility of Parallax Scrolling Technique for Website Users' Emotional Experience

웹사이트 이용자의 감성적 경험을 위한 Parallax Scrolling 기법 활용 가능성

Abstract

Recently, to draw the web users' attention and stay in the website for a long time to transmit information efficiently, the website designing is focused on providing emotional experience. Emotional experience is possible through the use of interactive storytelling and multimedia. Users immersion, pleasurable experience and synesthesia satisfaction is connected to the emotional experience due to the interaction operation and multimedia feedback. In this study, application of the parallax scrolling technique's possibility has been studied to induce the emotional experience of the web users that appeared in the technical development of the web. Realizing characteristics of the elements that effect emotional experience through web cases are studied and the possibility of effective emotional experience is proposed as using parallax scrolling technique on web.

1. 서 론

디지털기술의 발전과 컴퓨터의 상용화, 초고속 네트워크 보급 확산은 사회전반에 걸쳐 많은 변화를 가져왔다. 특히 정보의 디지털화로 인해 시공간을 넘어 많은 정보를 쉽고 빠르게 접할 수 있게 되었고 공유와 확산이 용이해졌다. 이러한 현상을 가능하게 해준 대표적인 서비스가 웹이라고 할 수 있는데, 일상적으로 접하고 활용하는 서비스로 자리 잡았다.

한편, 이러한 기술적 배경과 웹의 발전은 사용자들을 정보의 홍수에 빠지게 하였다. 실제로 사용자들은 정보로 가득 찬 신문 174개 분량의 정보들을 매일 접하게 된다고 한다[1]. 그리고 멀티미디어적인 속성을 가지는 웹이 다양한 미디어를 활용한다고 하더라도 많은 주요 정보들은 텍스트로 전달이 되고, 대부분의 사용자들은 이중 20%의 텍스트 정보만을 읽는다[2]. 사용자들이 더 이상 웹사이트에서 제공하는 많은 정보들, 특히 텍스트 정보에 쉽게 집중하지 못하는 것이다. 따라서 웹사이트는 짧은 시간 안에 사용자의 관심을 끌고, 머물게 하면서 효과적으로 의도를 전달하고, 나아가 재방문까지 할 수 있도록 하는것이 최근의 중요한 이슈가 되고 있다. 이를 위해서는 사용자의 경험, 특히 유희적 경험을 포함한 감성적 경험의 향상을 통해 사용자에게 친숙함을 느끼게 하고 웹 사용성과 만족에까지 영향을 미칠 수 있다[3-6].

최근 패럴랙스 스크롤링(Parallax Scrolling) 기법이 적용된 웹사이트들이 많이 개발 되고 있다. 사용 자들의 스크롤링과 같은 간단한 조작에 대해 시각적 움직임과 청각적 요소가 제공되는 기법이다. 크롬을 기반으로 원활하게 구현되는 특성 때문에 익스플로어 사용자가 아직은 많은 한국에서는 많이 제작되지 않고 있지만 해외 사이트에서는 효과적으로 활용이 늘어나고 있는 기법 중 하나이다. 기존의 일반적인 웹사이트들은 트리형식의 계층적 구조로 이루어져, 원하는 세부 정보를 찾기 위해 사용자들이 문서들을 선택적으로 옮겨 다녀야 하는 것과는 다르게 패럴랙스 스크롤링 사이트는 One page 형식으로 구성되어져 제작자의 의도된 순서대로 사용자의 시선을 움직이며 문서 또는 정보들을 제공받는다. 또한 이미지 요소들의 움직임 시차가 일어나 화면 내의 공간감을 느끼게 하고 청각적 요소들의 활용과 함께 사용자에게 시청각적 재미를 부여해준다.

연구자는 패럴랙스 스크롤링 기법이 적용 된 웹사이트의 형식적인 측면이 내용적 측면과 결합하여 웹 사용자에게 감성적인 경험을 향상 시킬 수 있을 것으로 보고, 그 가능성을 연구하고자 한다. 이를 위해서 2장에서는 웹의 특성을 기반으로 감성적 경험에 영향을 미치는 요소들을 조사한다. 3장에서는 기존에 패럴랙스 스크롤링 사이트 사례들을 중심으로 감성적 경험에 영향을 미치는 요소들이 해당 웹사이트에서 어떻게 구현되는지를 연구한다. 그리고 4장에서는 웹사이트에서 감성적 경험을 유도하기 위해 패럴랙스 스크롤링 기법 적용의 가능성을 제안 하고자 한다.

 

2. 관련 연구

2.1 웹과 감성적 경험

웹은 멀티미디어를 사용한 콘텐츠들이 하이퍼텍스트로 묶인 집합체로, 링크를 통해 문서 또는 콘텐츠들 간의 이동이 가능하다. 많은 양의 정보를 효율적으로 분류하여 정리한 형태를 가지고 있어 웹 사용자들은 인터페이스 내 링크를 클릭하는 인터랙션으로 보편적인 정보에서 찾고자 하는 상세정보로 이동하며 정보를 수용하게 된다.

최근 인터넷을 기반으로 넘쳐나는 정보들은 많은 사용자들이 정보에 집중하지 못하는 현상을 야기했다. 그래서 재미와 즐거움, 호기심, 놀라움 등의 사용자 경험을 통해 웹 사용자들을 집중시키고자 하였고, 특히 감성적인 경험을 향상 시키는 것에 관심이 모아지고 있다[6,7]. 웹에서는 감성적 경험을 향상시키고 정보의 장기기억에 영향을 미칠 수 있는 방안으로 인터랙티브 스토리텔링과 멀티미디어 활용이 대표적으로 활용•연구되어지고 있다[5,6,8,9].

2.2 인터랙티브 스토리텔링

스토리텔링이란 이야기가 서사성을 갖춘 형식으로 전달되는 기법으로, 오랜 역사동안 인류에게 즐거움을 주는 커뮤니케이션 기법으로 자리잡아왔다. 최근에는 디지털기술과 디지털 매체의 발전으로 인해 스토리텔링에 상호작용성이 가미된 인터랙티브 스토리텔링이 광범위한 영역에서 활용되고 있다. 상호 작용성은 조작행동에 대한 리얼타임 피드백, 즉 반응이 수반되는 것으로 사용자들을 몰입하게 하는 가장 중요한 디지털 미디어의 특징 요소이다[6,10]. 유희나 즐거움은 행위나 놀이에서 이루어지므로[8], 조작에 따른 피드백은 몰입과 더불어 놀이를 하는 즐거움을 경험하게 한다. 상호작용성의 활용이 높은 대표적인 콘텐츠는 게임으로, 준비된 사용자들이 높은 수준의 상호작용성을 통해 게임을 즐기며 몰입하게 된다. 이때 상호작용성의 강도가 높을수록 높은 몰입감으로 연결되며 사용자들의 즐거움이 커지게 된다. 하지만 불특정 다수의 사용자들을 대상으로 하는 웹은 준비된 사용자뿐만 아니라 준비되지 않은 사용자까지 고려해야 한다. 즉, 상호작용성의 강도를 높이거나 범위를 넓이는 것은 준비되지 않은 사용자에게 혼란이나 웹사이트 이탈을 불러일으킬 수 있으므로[10] 유한의 상호작용성이 웹에는 더 적합할 것이다. 웹에서의 상호작용은 실질적으로 마우스를 이용한 커서동작 조절이 대부분을 차지한다[11]. 그리고 마우스를 사용하는 행위들 중에서 스크롤기능은 가장 사용 빈도가 많으면서 친숙한 행위로 연구되어졌다[12].

전통적인 매체를 통한 스토리텔링은 리니어한 구조로 스토리가 전달되므로 제작자의 의도된 메시지 흐름과 전달이 용이하다. 하지만 전달자의 일방적인 전달은 사용자들을 집중시키는 데 한계가 있었다. 한편 웹은 웹사이트 제공자의 의도와 순서가 아닌 사용자의 의도와 순서에 따라 트리형 구조로 분류/구분된 정보나 스토리에 접근할 수 있어 인터랙티브 스토리텔링의 대표적인 서비스로 꼽히고 있다[13]. 하지만 엔터테인먼트 목적이 아닌 인포메이션 전달이 목적인 웹사이트에서 사용자들의 상호작용성은, 링크 클릭을 통한 하이퍼텍스트 기반의 원하는 정보를 찾기 위한 계층적인 이동과 상세 정보보기 정도에 그친다. 즉, 연결된 정보들이라고 하더라도 스토리텔링의 연결성이 구현된다고 보기는 어렵다. 따라서 일반적인 정보제공 웹사이트 형태에서는 내용적 측면의 스토리텔링을 통한 즐거움을 사용자에게 주기는 쉽지 않다고 볼 수 있다. 연결성 있는 스토리텔링을 위해 웹사이트 초기 화면에서 인트로 영상을 제공하거나 페이지 곳곳에 동영상 미디어를 활용하기도 하지만, 웹사이트를 사용하는 사용자들의 관심을 받기에 쉽지 않다. 대부분 정보를 찾아가는 과정에서 간과되는 경우가 많기 때문이다.

한편, 인터랙티브 스토리텔링은 지속적인 인지효과를 통해 장기 기억에도 영향을 미치게 된다[5]. 그러므로 기존 웹사이트에서 정보를 효과적으로 전달할 뿐 만 아니라 사용자들의 기억에 남게 하기 위해서는 연결성 있는 스토리텔링을 전하면서도 사용자의 참여가 배제되지 않도록 상호작용성을 가지는 것이 필요할 것이다.

2.3 멀티미디어 감각 자극

웹은 멀티미디어적 성격을 가지고 있어 시청각적 자극 요소를 많이 포함하고 있다. 텍스트가 많이 제공되는 콘텐츠에 더 이상 사용자들이 주목을 하지 않으므로[1,2] 텍스트보다 주목성이 좋으면서 정보전달이 효율적인 시각적 자극과 청각적 자극들이 많이 활용되고 있다. 시각적 자극 중에서 움직임은 생명감을 가지고 있는 듯한 착각을 불러일으켜, 주의력을 끄는 강한 시지각 대상으로 정보의 재현과 인식 수준에도 영향을 미친다[14,15]. 청각적 자극은 시각적 자극 다음으로 사용자의 주의력을 끌고 정보를 기억에 남기에 된다. 즉, 웹사이트에서 시청각적요소의 적절한 활용은 공감각적 만족을 통해 감성적 경험에 직접적인 영향을 미치게 된다.

2.4 패럴랙스 스크롤링(Parallax Scrolling) 기법

패럴랙스 스크롤링 기법은 배경 이미지에 입체감과 원근감을 살리기 위해 배경이 모니터 상에서 상하좌우로 이동하면서 이미지들 간에 시차가 발생하도록 하는 기법을 말한다. 1940년대의 디즈니사의 애니메이션 촬영 기법인 멀티플레인 카메라(Multiplane Camera)에서부터 시작되어 이후 1982년 Moon Patrol이라는 아케이드게임에서 이 개념을 처음으로 게임에 적용을 하였고 이후 게임분야에서 지속적으로 발전하며 활용되어져 왔다. 최근에는 이 기법을 평면적인 웹에 적용을 하여 사용자가 마우스 스크롤을 할 때 공간감이 느껴지는 애니메이션 효과가 구현이 된다. 사용자의 스크롤링 하는 속도는 이미지의 애니메이션 속도를 제어하는 것과 동일하므로 간단한 상호작용으로도 움직임의 시각자극을 사용자의 인지속도에 맞추어 제공받을 수 있게 된다. 또한 청각적 자극도 스크롤링과 함께 제공받을 수 있다. 패럴랙스 스크롤링 기법의 또 다른 중요한 특징은 웹사이트에서 활용 시 페이지 콘텐츠를 소비하지 않고 한 페이지로 모든 정보를 구성하여 사용자의 시선을 서비스 제공자가 원하는 방향으로 이끌며 정보를 전할 수 있다는 것이다[16].

 

3. 연구내용

3.1 웹 기반 감성적 경험 영향 요소

관련 연구를 통해 웹의 감성적 경험을 유도할 수 있는 장치로 인터랙티브 스토리텔링과 멀티미디어 활용이 있음을 알 수 있다. 멀티미디어의 활용은 상호작용성 중 피드백과 관련 있는 것으로, 웹의 감성적 경험에 영향을 미치는 요소들을 상호작용성과 스토리텔링 측면에서 분류할 수 있을 것이다. 상호작용성은 조작과 피드백으로 나뉘는데 조작은 사용자의 참여를 위한 행위이고, 패드백은 조작에 따른 웹사이트의 멀티미디어적인 피드백으로, 크게 시각적 피드 백과 청각적 피드백으로 나뉠 수 있다. 스토리텔링은 이야기를 전달하는 순서, 즉 플로우(flow)와 플로우 전반을 통해 전달하고자 하는 이야기의 목적/주제로 요소를 나눌 수 있다(Fig. 1).

Fig. 1.Elements that effects the Emotional Experience.

3.2 사례별 연구내용

웹사이트에서 효과적으로 감성적 경험을 향상하기 위한 방안으로 패럴랙스 스크롤링 기법의 활용 가능성을 찾기 위해 패럴랙스스크롤링 기법이 적용 된 웹사이트에서 웹기반 감성적 경험 영향 요소들의 구현 특징들을 연구하고자 한다. 연구를 위해 우수 패럴랙스 스크롤링 추천 사이트와 수상작들 75가지 [17,18] 중에서 상호작용성과 스토리텔링에서 서로다른 특징을 가진 6가지를 연구자가 대표적으로 선정하였다. 각 사례들은 Fig. 1에서 분류한 조작과 피드백, 스토리텔링 플로우와 목적/주제를 중심으로 구현 특징을 연구한다.

3.2.1 Flat design vs Realism(http://www.flatvsrealism.com/)

(1) 상호작용성

대부분 마우스 스크롤링 조작으로 사이트가 구현된다. 사이트 흐름 중간에 게임 콘텐츠가 포함되어 있는데 캐릭터 선택을 위한 클릭, 게임 플레이 시작을 위한 enter 키 클릭, 그리고 게임 플레이를 위한 키보드 내의 6개의 키 클릭이 전체 조작이다. 마우스 스크롤링에 대한 피드백으로는 사이트의 페이지가 시각적으로 세로 또는 가로 방향으로 흘러가며 캐릭터 애니메이션, 배경 애니메이션, 텍스트 애니메이션 등이 구현된다. 그리고 Zoom in/out, Panning과 Tilting 등의 카메라 움직임과 Fade in/out의 화면 전환이 일어나고, 음악과 효과음이 효과적으로 사용되었다. 사용자의 스크롤링에 대한 피드백으로 Fig. 2와 같이 일반적인 애니메이션과 유사한 애니메이션이 연출 되는 것이다.

Fig. 2.Screen captures from ‘http://www.flatvsrealism.com/’

사이트 내에 포함된 게임은 사용자가 캐릭터를 선택 한 후 상대 캐릭터와 결투를 하는 게임이다. 간단한 키보드의 키 조작으로 캐릭터 결투가 플레이 되는데, 사용자가 다소 게임을 잘 조작하지 못하더라도 시각적으로 화려한 결투가 펼쳐지고 짧은 시간에 게임의 결말이 나서 웹사이트의 다음 스토리텔링으로 넘어가게 된다. 즉, 준비되지 않은 사용자들도 이탈을 막고 웹사이트 전체 스토리텔링에 동참하게 할 수 있게 된다. 사이트 말미에는 실사 촬영된 영상이 스크롤링 속도에 따라 플레이가 되어 새로운 경험을 제공한다.

(2) 스토리텔링

스토리는 주요한 5개 노드(node), 즉, 인위적인 분기점으로 구성되어, 각 노드별 스토리의 내용은 텍스트와 그래픽요소들의 애니메이션으로 명확하게 전달하였다. 애니메이션 스토리텔링과 유사한 형태로 전달되며, 디자인 스타일간의 싸움은 무의미하다는 주제를 드러낸다.

3.2.2 Every last drop(http://everylastdrop.co.uk/)

(1) 상호작용성

대부분 마우스 스크롤링 조작으로 사이트가 구현된다. 사이트 말미에는 본 사이트의 주제인 물 절약을 유도하기 위한 영상을 클릭으로 재생하도록 구성되었다. 마우스 스크롤링에 대한 피드백으로는 Fig. 3과 같이 중앙에 동일한 캐릭터가 고정되어 있고 사이트의 페이지가 세로방향으로 움직이며 뒷 배경만 바뀜으로써 캐릭터가 마치 여러 개의 다른 장소에 배치되는 것 같은 애니메이션이 구현된다. 장소의 변화는 캐릭터 주변 오브젝트가 사방에서 조합되어 한 장면이 완성 된 후 다음 장면을 위해 조합된 장면이 다시 흩어진 후 다른 오브젝트가 다시 조합되는 애니메이션의 반복으로 구현된다. 중앙에 있는 캐릭터에 고정적으로 집중하면서 오브젝트 조합 애니메이션 피드백을 통해 사용자들이 흥미를 가지고 집중할 수 있게 한다.

Fig. 3.Screen captures from ‘http://everylastdrop.co.uk/’

(2) 스토리텔링

주인공의 하루 일상을 중심으로 6개의 장소별로 노드를 나누어 스토리텔링을 진행한다. 캐릭터가 침대에서 일어난 후 4개 장소와 상황에서의 물 소비현황을 차례대로 보여주며 많은 물이 허비되고 있음을 간접적으로 드러낸다. 그리고 마지막에는 일상생활을 하는 공간에서 벗어나 우주로 나온 캐릭터가 여전히 10억 명의 지구인은 깨끗한 물을 공급받지 못하는 실정을 알리며 물 절약의 필요성과 당위성을 직접적으로 전달한 후 마무리 영상을 통해 물 절약을 위한 사용자 동참유도의 메시지를 구체적으로 전달한다.

3.2.3 Peugeot HYbrid4(http://graphicnovel-hybrid4.peugeot.com/start.html)

(1) 상호작용성

스크롤링으로 전체 사이트가 구현된 후 마지막 페이지에서 자세한 정보 사이트로의 이동을 위한 클릭으로 구성되었다. 마우스 스크롤링에 대한 피드백으로는 사이트의 페이지가 시각적으로 세로 또는 가로방향으로 흘러가고, 세로방향으로 흘러갈 시 아래쪽 또는 위쪽 두 가지 방향으로 흘러가며 변화를 준다. 웹툰과 같이 스크롤링으로 화면에서 구현이 되나, 한 컷에서 다음 컷 장면으로 전환될 때 장면전환 효과와 함께 화면 내 이미지들 중 일부분에 시차 애니메이션이 구현된다. 그리고 상황에 적합한 효과음과 배경음악도 같이 구현된다. 즉, 발전된 웹툰의 형태로 볼 수 있다.

(2) 스토리텔링

한 영웅의 임무 수행과정을 Fig. 4와 같이 21개의 분할된 컷 이미지로 스토리를 전달하며, Peugeot HYbrid4 차의 4개 모드와 평행 편집하였다. 소설적 내용과 웹툰의 형식을 통해 사용자들이 몰입할 수 있게 하였고, 스토리 전개 중에 사용자들이 자연스럽게 4개 모드를 기억하게 하였다. 영웅이 임무를 수행하는 과정에서 적들에게 쫓기며 Peugeot HYbrid4차의 4가지 모드처럼 상황에 따라 4가지 모드를 이용해서 집에 무사히 도착하며 미션을 완수한다는 주제를 담고 있다.

Fig. 4.Screen captures from ‘http://graphicnovel-hybrid4.peugeot.com/start.html’

3.2.4 Sony (http://www.sony.com/be-moved/)

(1) 상호작용성

대부분 마우스 스크롤링 조작으로 사이트가 구현된다. 총 11개의 노드로 구성되어 각 노드별로 SNS 공유, 제품 설명이나 판매처 연결, 회사 연결과 같은 세부 정보와의 연결을 위한 클릭이 구성되어 있다. 마우스 스크롤링에 대한 피드백으로는 사이트의 페이지가 세로방향으로 흘러가며 Fig. 5와 같이 페이지별 홍보 제품이 3차원적으로 부품의 결합을 통해 제품이 완성되는 애니메이션이 구현된다. 제품 조합이 완성되면 컨셉 설명글이 나타나 주요 정보를 전달한다.

Fig. 5.Screen captures from ‘http://www.sony.com/be-moved/’

(2) 스토리텔링

10개의 혁신적인 소니 제품을 소개한다. 특히 예술과 공학기술의 결합 결과로 탄생시킨 제품들의 각 컨셉을 소개한다. 그리고 예술과 공학기술을 결합하는 것으로 사람들이 혁신적인 새로운 길로 움직일 수 있게 해줬음('Be Moved' 캠페인)을 강조하며 마무리를 한다. 이는 'Be Moved' 캠페인 홍보 사이트로 마지막 내용을 통해 전체 주제를 파악하고 기억할 수 있게 하였다.

3.2.5 Highway One (http://www.exsus.com/highway-one-roadtrip)

(1) 상호작용성

캘리포니아의 Highway One 여행을 소개하는 사이트로, 대부분 마우스 스크롤링 조작으로 사이트가 구현되고 주요한 18개의 관광지별로 관광지의 세부정보를 위한 클릭이 구성되었다. 마우스 스크롤링에 대한 피드백으로는 Fig. 6과 같이 중앙에 캐릭터들이 탄 자동차가 고정된 채로 사이트의 뒷배경이 세로방향으로 움직여, 마치 캐릭터가 차를 몰며 주요 관광지를 여행하는 듯한 애니메이션이 구현된다. 관광지별 배경은 관광지의 특성을 담은 이미지로 표현되었고, 배경에 있는 작은 오브젝트들은 간단한 움직임이 있고, 주요설명 글자나 말풍선이 생기거나 사라지는 애니메이션이 구현된다. 카메라가 하늘에서 지면을 촬영하는 듯 한 화면으로, 일반적으로 평면적인 이동거리가 많은 게임화면과 유사한 형태로 연출된다. 각 관광지별로 세부 정보들은 배경에서 애니메이션 되는 오브젝트들을 클릭하여 멀티미디어로 볼 수 있게 하였다.

Fig. 6.Screen captures from ‘http://www.exsus.com/highway-one-roadtrip’

(2) 스토리텔링

전체가 20개의 노드로 구성되었고, 시작부분에서 캘리포니아의 Highway One 여행에 대한 전체적인 정보를 제공한 후 18개의 캘리포니아 해변을 따라 주요 관광지를 소개한다. 그리고 마지막에는 웹사이트를 통해 가상으로 체험한 캘리포니아의 Highway One 여행을 실제로 경험하도록 유도한다.

3.2.6 The Lab(http://www.dementialab.org/theclinic)

(1) 상호작용성

The Lab 의 알츠하이머 연구 정보 전달 및 후원을 유도하는 사이트로, 대부분 마우스 스크롤링 조작으로 사이트가 구현되고 세부 정보 확인을 위한 클릭이 곳곳에 활용되었다. 마우스 스크롤링에 대한 피드백으로는 Fig. 7과 같이 3개의 세션별로 3차원 연구실 내부를 x, y, z축으로 카메라가 움직이며 화면이 연출된다. 즉, 사용자가 연구실을 직접 돌며 구경을 하는 듯 한 영상이 구현된다. 연구실 내부의 특정 위치에 다다르면 세부 정보에 대한 간략한 내용이 제공되며, 클릭을 통해 세부 페이지가 팝업 정보를 동영상, 인포그래픽, 사진자료 등의 다양한 방식으로 제공한다.

Fig. 7.Screen captures from http://www.dementialab.org/the-clinic/

(2) 스토리텔링

메인화면을 통해 The Lab에 대한 전체적인 정보를 제공한 후 총 3개의 카테고리별로 세부 내용을 사용자들이 순차적으로 탐색하며 정보를 제공받도록 구성하였다. 3개 카테고리 내부에는 총 13개의 세부 내용들이 있어 The Lab에서 하는 연구와 연구의 중요성을 알리며 후원을 호소한다. 13개의 세부 내용들은 관심 있는 사용자들에게 제공하고, 준비되지 않은 사용자들에게도 웹사이트 이탈 없이 The Lab의 연구의 체계와 중요성에 대한 전체적인 정보를 알릴 수 있도록 구성되었다.

3.3 연구 결과

위의 사례들을 중심으로 패럴랙스스크롤링 기법이 적용된 웹사이트에서 웹기반 감성적 경험에 영향을 미치는 요소들의 구현 특징들은 다음과 같다.

3.3.1 상호작용성 측면

(1) 조작

웹사이트 화면 전개와 내용 전달의 대부분은 사용자들에게 가장 친숙하게 많이 사용되는 마우스 스크롤링 조작으로 구현되었고, 주요 내용 외에 세부 콘텐츠나 세부 정보 소비를 위해 클릭을 일부 사용하기도 하였다. 즉, 사용자들이 가장 간단하고 쉽게 조작할 수 있는 마우스 스크롤링으로 대부분의 웹사이트 주요 정보의 스토리텔링을 경험할 수 있도록 구성하였다. 이는 사용자들이 웹사이트에 상호작용성을 기반으로 참여를 하되 준비되지 않은 사용자들의 이탈을 최소화 할 수 있을 것이다.

(2) 피드백

마우스 조작에 따른 피드백 중 시각적 피드백은 페이지의 이동과 그래픽요소들의 애니메이션, 청각적 요소들의 활용이 있었다. 우선, 한 개의 페이지 콘텐츠로 구성된 특징으로 인해 정보를 스크린으로 보여주기 위해서는 페이지가 이동을 해야 한다. 페이지의 이동 방향은 가로와 세로의 x, y축 방향의 이동뿐만 아니라 3차원 공간으로의 이동과 같은 효과를 내는 z축 방향으로도 이동하였다. 페이지 이동의 방법으로는 웹툰과 같이 분할된 화면을 옮겨가며 보여주는 방식, 일반 애니메이션에서 사용하는 화면 전환방식(Fade in/out, Dissolve), 연결된 공간(2차원 또는 3차원 공간)을 카메라가 이동하며(Tracking, Dolly in/out) 보여주는 방식이 있었다. 페이지의 이동 외에도 사용자의 마우스 스크롤링과 클릭 조작으로 화면을 구성하는 캐릭터나 오브젝트, 텍스트 정보들도 애니메이션으로 구현되어 사용자가 애니메이션을 관람하거나 이를 탐색하고 제어하는 느낌을 전하였다. 이때 시각적 피드백 뿐만 아니라 청각적 피드백도 함께 구현되는 사이트가 많았는데, 페이지의 이동과 그래픽요소들의 애니메이션 속도에 맞추어 효과음과 배경음악이 구현되었다. 이는 사용자들을 주목시키고 실감나는 상황 연출에 도움을 줄 뿐만 아니라 감각적 만족감을 줄 수 있다. 또한 스크린으로 보여지는 주요 노드별 화면에서도 세부 정보 제공을 위해 동영상, 인포그래픽, 사진, 텍스트 등의 멀티미디어를 사용자의 마우스 클릭에 따른 피드백을 제공하여 적극적으로 정보를 탐색하는 준비된 사용자들에게 효과적인 정보전달과 감성적 경험 제공을 하였다.

3.3.2 스토리텔링 측면

(1) 스토리텔링 flow

정보중심이나 엔터테인먼트 중심 웹사이트 모두 제작자의 의도된 순서대로 스토리텔링이 되었다. 전체 스토리텔링은 주요 내용을 담은 인위적인 분기점인 노드(node)별로 내용의 카테고리나 흐름을 분류하여 전달하였고, 복잡하거나 양이 많은 정보는 사용 자들이 선택적으로 볼 수 있게 하위 카테고리로 제공하였다. 이를 통해 준비되지 않은 사용자들에게는 간단명료한, 의도된 정보흐름의 전달이 가능하였고, 흥미와 관심을 가지는 준비된 사용자들에게는 세부 정보의 전달이 가능하였다. 사용자들이 제작자의 의도된 순서에서 벗어나 지난 정보나 앞선 정보를 사용자들의 의도대로 볼 수 있도록 주요 노드(node)별로 이동 가능한 메뉴 버튼도 함께 제공하였다. 이는 노드별 순차적인 스토리텔링 중 비선형적인 이동도 가능하게 하여 선형적인 스토리텔링 정보전달에서 오는 일방성에 사용자의 자율성을 보장해주고 선형적인 스토리텔링의 문제점을 보완하여 사용자에게 효과적으로 스토리를 전달할 수 있다.

(2) 주제

정보를 홍보하거나 사용자들을 설득하는 사이트가 대부분으로 스토리텔링의 flow를 통해 사용자들에게 정보제공이나 감정 이입을 유도한 후 마지막 장에서 의도하는 주제를 명확하게 전달하는 공통점을 가졌다. 이는 사용자들

 

4. 결 론

기존에 많은 웹사이트들이 정보의 홍수 속에서 사용자들을 주목시키는데 어려움을 겪으며 사용자들에게 의도된 정보를 효과적으로 전하기 위한 방안으로 사용자의 경험을 향상 시키는 노력이 많이 이루어지고 있다. 특히 즐거움이나 유희, 만족감 등의 감성으로 이어질 수 있는 감성적 경험 제공에 대해 많은 관심을 가지고 있는데, 웹기반 감성적 경험을 유도하는 장치로 인터랙티브 스토리텔링과 멀티미디어의 활용 등이 많이 연구되어졌다. 사용자들의 참여를 유도하고, 몰입을 통해 주요한 정보를 공감각적으로 수용하며 정보의 장기기억에까지 영향을 미칠 수 있기 때문이다.

연구자는 웹의 기술적 발전과 함께 최근에 새로운 트렌드로 등장한 패럴랙스 스크롤링 기법이 적용된 웹사이트를 통해 감성적 경험을 효과적으로 유도할 수 있는 가능성을 연구하고자 하였다. 최근 주목받고 좋은 평가를 받은 패럴랙스 스크롤링 사이트들을 수집하여 대표적인 6가지 사례를 중심으로 상호작용성과 스토리텔링 측면에서의 구현 특징을 연구하였다. 연구결과 상호작용성 측면에서는 불특정 다수를 대상으로 하는 웹에서 사용자들의 참여는 유도하되 준비되지 않은 사용자들도 부담되지 않으면서 간단하고 쉽게 참여할 수 있는 마우스 스크롤링 조작이 많이 활용 되었다. 또한 이러한 조작에 대한 피드백은 공감각적 만족감을 충분히 줄 수 있는 형태로 구현되었다. 특히 애니메이션 구현이 많이 이루어졌는데, 기존의 영상을 재생 시키는 것과는 달리 사용자의 스크롤링 조작에 반응하여 속도가 조절되므로 사용자들에게 맞추어 정보를 탐색하고 인지할 수 있을뿐만 아니라 조작에 따른 공감각적 피드백에 대한 즐거움을 얻게 된다. 스토리텔링 측면에서는 사용자들에게 웹의 주요 정보나 스토리를 의도된 순서대로 전달할 수 있었다. 선형적인 스토리텔링 진행이라고 하더라도 사용자의 스크롤링 조작에 따른 피드백으로 구현이 되는 점에서 사용자들의 상호작용성이 포함되어 있고, 사용자들이 스토리의 선형적인 진행을 원하지 않을 때는 비선형적으로 원하는 스토리의 분기점으로 이동할 수 있는 메뉴 버튼을 제공하여 사용자들에게 자율성을 보장해줬다.

연구결과를 통해 패럴랙스 스크롤링 기법이 적용 된 웹사이트는 감성적 경험를 유도하는 인터랙티브 스토리텔링과 멀티미디어의 활용을 충분히 하면서 불특정 다수의 웹 사용자들을 고려한 효과적인 정보전달 형태로 볼 수 있다. 하지만, 정보의 양이 많을경우 화면구성이 복잡해져 사용자들의 집중도를 떨어뜨릴 수 있고, 화면의 길이나 스토리텔링 노드가 길 때 사용자들에게 지루함을 줄 수 있어 기획적인 측면에서 이를 효과적으로 통제하고 의도하는 목적과 맞는 분야에서 활용하는 것이 필요하다. 또한 하나의 페이지로 구성된 특징으로 인해 많은 리소스가 필요하여 초기 로딩이 느려질 수 있는 한계와 모바일 기기에서의 구현되지 못하는 문제 [16]등이 있어 향후 기술적인 보완을 통한 지속적인 변화와 발전이 필요할 것이다.