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

고혜영; 김치용

doi:10.9717/kmms.2015.18.2.277

웹사이트 이용자의 감성적 경험을 위한 Parallax Scrolling 기법 활용 가능성
Application Possibility of Parallax Scrolling Technique for Website Users' Emotional Experience 원문보기

멀티미디어학회논문지 = Journal of Korea Multimedia Society, v.18 no.2, 2015년, pp.277 - 286

고혜영 (Dept. of Contents Design, Seoul Women's University) , 김치용 (Dept. of Visual Information Engineering, Dong-eui University)

Abstract ▼ AI-Helper

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.

주제어

AI 본문요약
AI-Helper

* AI 자동 식별 결과로 적합하지 않은 문장이 있을 수 있으니, 이용에 유의하시기 바랍니다.

문제 정의

연구자는 웹의 기술적 발전과 함께 최근에 새로운 트렌드로 등장한 패럴랙스 스크롤링 기법이 적용된 웹사이트를 통해 감성적 경험을 효과적으로 유도할 수 있는 가능성을 연구하고자 하였다. 최근 주목받고 좋은 평가를 받은 패럴랙스 스크롤링 사이트들을 수집하여 대표적인 6가지 사례를 중심으로 상호작용성과 스토리텔링 측면에서의 구현 특징을 연구하였다.
연구자는 패럴랙스 스크롤링 기법이 적용된 웹사이트의 형식적인 측면이 내용적 측면과 결합하여 웹사용자에게 감성적인 경험을 향상 시킬 수 있을 것으로 보고, 그 가능성을 연구하고자 한다. 이를 위해서 2장에서는 웹의 특성을 기반으로 감성적 경험에 영향을 미치는 요소들을 조사한다.
웹사이트에서 효과적으로 감성적 경험을 향상하기 위한 방안으로 패럴랙스 스크롤링 기법의 활용 가능성을 찾기 위해 패럴랙스스크롤링 기법이 적용된 웹사이트에서 웹기반 감성적 경험 영향 요소들의 구현 특징들을 연구하고자 한다. 연구를 위해 우수 패럴랙스 스크롤링 추천 사이트와 수상작들 75가지[17,18] 중에서 상호작용성과 스토리텔링에서 서로 다른 특징을 가진 6가지를 연구자가 대표적으로 선정하였다.
10개의 혁신적인 소니 제품을 소개한다. 특히 예술과 공학기술의 결합 결과로 탄생시킨 제품들의 각 컨셉을 소개한다. 그리고 예술과 공학기술을 결합하는 것으로 사람들이 혁신적인 새로운 길로 움직일 수 있게 해줬음('Be Moved' 캠페인)을 강조하며 마무리를 한다.

제안 방법

연구를 위해 우수 패럴랙스 스크롤링 추천 사이트와 수상작들 75가지[17,18] 중에서 상호작용성과 스토리텔링에서 서로 다른 특징을 가진 6가지를 연구자가 대표적으로 선정하였다. 각 사례들은 Fig. 1에서 분류한 조작과 피드백, 스토리텔링 플로우와 목적/주제를 중심으로 구현 특징을 연구한다.
메인화면을 통해 The Lab에 대한 전체적인 정보를 제공한 후 총 3개의 카테고리별로 세부 내용을 사용자들이 순차적으로 탐색하며 정보를 제공받도록 구성하였다. 3개 카테고리 내부에는 총 13개의 세부 내용들이 있어 The Lab에서 하는 연구와 연구의 중요성을 알리며 후원을 호소한다.
이를 통해 준비되지 않은 사용자들에게는 간단명료한, 의도된 정보흐름의 전달이 가능하였고, 흥미와 관심을 가지는 준비된 사용자들에게는 세부 정보의 전달이 가능하였다. 사용자들이 제작자의 의도된 순서에서 벗어나 지난 정보나 앞선 정보를 사용자들의 의도대로 볼 수 있도록 주요 노드(node)별로 이동 가능한 메뉴 버튼도 함께 제공하였다. 이는 노드별 순차적인 스토리텔링 중 비선형적인 이동도 가능하게 하여 선형적인 스토리텔링 정보전달에서 오는 일방성에 사용자의 자율성을 보장해주고 선형적인 스토리텔링의 문제점을 보완하여 사용자에게 효과적으로 스토리를 전달할 수 있다.
스크롤링으로 전체 사이트가 구현된 후 마지막 페이지에서 자세한 정보 사이트로의 이동을 위한 클릭으로 구성되었다. 마우스 스크롤링에 대한 피드백으로는 사이트의 페이지가 시각적으로 세로 또는 가로방향으로 흘러가고, 세로방향으로 흘러갈 시 아래쪽 또는 위쪽 두 가지 방향으로 흘러가며 변화를 준다.
정보중심이나 엔터테인먼트 중심 웹사이트 모두 제작자의 의도된 순서대로 스토리텔링이 되었다. 전체 스토리텔링은 주요 내용을 담은 인위적인 분기점인 노드(node)별로 내용의 카테고리나 흐름을 분류하여 전달하였고, 복잡하거나 양이 많은 정보는 사용자들이 선택적으로 볼 수 있게 하위 카테고리로 제공하였다. 이를 통해 준비되지 않은 사용자들에게는 간단명료한, 의도된 정보흐름의 전달이 가능하였고, 흥미와 관심을 가지는 준비된 사용자들에게는 세부 정보의 전달이 가능하였다.
전체가 20개의 노드로 구성되었고, 시작부분에서 캘리포니아의 Highway One 여행에 대한 전체적인 정보를 제공한 후 18개의 캘리포니아 해변을 따라 주요 관광지를 소개한다. 그리고 마지막에는 웹사이트를 통해 가상으로 체험한 캘리포니아의 Highway One 여행을 실제로 경험하도록 유도한다.
주인공의 하루 일상을 중심으로 6개의 장소별로 노드를 나누어 스토리텔링을 진행한다. 캐릭터가 침대에서 일어난 후 4개 장소와 상황에서의 물 소비현황을 차례대로 보여주며 많은 물이 허비되고 있음을 간접적으로 드러낸다.
연구자는 웹의 기술적 발전과 함께 최근에 새로운 트렌드로 등장한 패럴랙스 스크롤링 기법이 적용된 웹사이트를 통해 감성적 경험을 효과적으로 유도할 수 있는 가능성을 연구하고자 하였다. 최근 주목받고 좋은 평가를 받은 패럴랙스 스크롤링 사이트들을 수집하여 대표적인 6가지 사례를 중심으로 상호작용성과 스토리텔링 측면에서의 구현 특징을 연구하였다. 연구 결과 상호작용성 측면에서는 불특정 다수를 대상으로 하는 웹에서 사용자들의 참여는 유도하되 준비되지 않은 사용자들도 부담되지 않으면서 간단하고 쉽게 참여할 수 있는 마우스 스크롤링 조작이 많이 활용 되었다.
페이지 이동의 방법으로는 웹툰과 같이 분할된 화면을 옮겨가며 보여주는 방식, 일반 애니메이션에서 사용하는 화면 전환 방식(Fade in/out, Dissolve), 연결된 공간(2차원 또는 3차원 공간)을 카메라가 이동하며(Tracking, Dolly in/out) 보여주는 방식이 있었다. 페이지의 이동 외에도 사용자의 마우스 스크롤링과 클릭 조작으로 화면을 구성하는 캐릭터나 오브젝트, 텍스트 정보들도 애니메이션으로 구현되어 사용자가 애니메이션을 관람하거나 이를 탐색하고 제어하는 느낌을 전하였다. 이때 시각적 피드백뿐만 아니라 청각적 피드백도 함께 구현되는 사이트가 많았는데, 페이지의 이동과 그래픽요소들의 애니메이션 속도에 맞추어 효과음과 배경음악이 구현되었다.

대상 데이터

10개의 혁신적인 소니 제품을 소개한다. 특히 예술과 공학기술의 결합 결과로 탄생시킨 제품들의 각 컨셉을 소개한다.
웹사이트에서 효과적으로 감성적 경험을 향상하기 위한 방안으로 패럴랙스 스크롤링 기법의 활용 가능성을 찾기 위해 패럴랙스스크롤링 기법이 적용된 웹사이트에서 웹기반 감성적 경험 영향 요소들의 구현 특징들을 연구하고자 한다. 연구를 위해 우수 패럴랙스 스크롤링 추천 사이트와 수상작들 75가지[17,18] 중에서 상호작용성과 스토리텔링에서 서로 다른 특징을 가진 6가지를 연구자가 대표적으로 선정하였다. 각 사례들은 Fig.
캘리포니아의 Highway One 여행을 소개하는 사이트로, 대부분 마우스 스크롤링 조작으로 사이트가 구현되고 주요한 18개의 관광지별로 관광지의 세부정보를 위한 클릭이 구성되었다. 마우스 스크롤링에 대한 피드백으로는 Fig.
한 영웅의 임무 수행과정을 Fig. 4와 같이 21개의 분할된 컷 이미지로 스토리를 전달하며, Peugeot HYbrid4 차의 4개 모드와 평행 편집하였다. 소설적 내용과 웹툰의 형식을 통해 사용자들이 몰입할 수 있게 하였고, 스토리 전개 중에 사용자들이 자연스럽게 4개 모드를 기억하게 하였다.

성능/효과

3개 카테고리 내부에는 총 13개의 세부 내용들이 있어 The Lab에서 하는 연구와 연구의 중요성을 알리며 후원을 호소한다. 13개의 세부 내용들은 관심 있는 사용자들에게 제공하고, 준비되지 않은 사용자들에게도 웹사이트 이탈 없이 The Lab의 연구의 체계와 중요성에 대한 전체적인 정보를 알릴 수 있도록 구성되었다.
마우스 스크롤링에 대한 피드백으로는 사이트의 페이지가 시각적으로 세로 또는 가로 방향으로 흘러가며 캐릭터 애니메이션, 배경 애니메이션, 텍스트 애니메이션 등이 구현된다. 그리고 Zoom in/out, Panning과 Tilting 등의 카메라 움직임과 Fade in/out의 화면전환이 일어나고, 음악과 효과음이 효과적으로 사용되었다. 사용자의 스크롤링에 대한 피드백으로 Fig.
이는 사용자들을 주목시키고 실감나는 상황 연출에 도움을 줄뿐만 아니라 감각적 만족감을 줄 수 있다. 또한 스크린으로 보여지는 주요 노드별 화면에서도 세부 정보 제공을 위해 동영상, 인포그래픽, 사진, 텍스트 등의 멀티미디어를 사용자의 마우스 클릭에 따른 피드백을 제공하여 적극적으로 정보를 탐색하는 준비된 사용자들에게 효과적인 정보전달과 감성적 경험 제공을 하였다.
최근 주목받고 좋은 평가를 받은 패럴랙스 스크롤링 사이트들을 수집하여 대표적인 6가지 사례를 중심으로 상호작용성과 스토리텔링 측면에서의 구현 특징을 연구하였다. 연구 결과 상호작용성 측면에서는 불특정 다수를 대상으로 하는 웹에서 사용자들의 참여는 유도하되 준비되지 않은 사용자들도 부담되지 않으면서 간단하고 쉽게 참여할 수 있는 마우스 스크롤링 조작이 많이 활용 되었다. 또한 이러한 조작에 대한 피드백은 공감각적 만족감을 충분히 줄 수 있는 형태로 구현되었다.

후속연구

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

질의응답

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

참고문헌 (18)

Welcome to the Information Age-174 Newspapers a Day(2011), The Telegraph, http://tgr.ph/vtsr2e (accessed Nov., 10, 2014)
How Little Do Users Read?(2008), http://bit.ly/vdDmsa (accessed Nov., 11, 2014).
E.J. Park, K.P. Lee, and J.H. Seo, “Application of Digital Storytelling for Emotional-based Website Navigation Design,” Journal of Korean Society of Design Science, Vol. 23, No. 1, pp. 173-184, 2010.
E.J. Park, “Development of Digital Storytelling Platform of by Types in Emotional-based Website,” Journal of Digital Design, Vol. 15, No. 1, pp. 387-397, 2013.
J.M. Suh, "A Study on Interactive Storytelling of Web GUI," Journal of Korea Design Knowledge, Vol. 12, pp. 111-118, 2009.
M.Y. Kim and H.J. Kim, “Analysis and Adaptation of Strategy for Designing Web Interaction through Analyzing Cases of Interactive Website,” Journal of Korea Society of Design, Vol. 17, No .4, pp. 37-50, 2004.
J.H. Rhie, "The Impact of Emotional Storytelling on Brand Attitude-compare to Humor Advertising," Journal of Digital Contents Society, Vol. 15 No. 1, pp. 61-68, 2014.

원문보기 상세보기
S.R. Kim, A Study on the Visual Fun of Interactive Digital Contents-Focused on Digital Media Art and Design, Master’s Thesis of Hansung University of Art, 2006.
J.H. Lee and J.D. Kim, "A Suggestion for Category of Participation in Interactive Storytelling," Journal of Digital Design, Vol. 13, No. 3, pp. 403-412, 2013.

상세보기
E.H. Cho, "A Study on Digital Storytelling," Journal of Modern Korea Literature, No. 15, pp. 257-281, 2007.
C.M. Park, A Study on the Visualization & Analysis of User Interaction on the WWW: with Emphasis on the Development of Web Usability Testing Tool using Mouse Tracking Method, Master’s Thesis of KAIST of Industrial Design, 2001.
B.R. Choi, S. Noh, and J.W. Park, "A Study on the Comic Direction of Webtoon using Scroll Tracking Experiment," Journal of Digital Design, Vol. 12, No. 3, pp. 33-42, 2012.

상세보기
J.H. Lee, "Structural Design of Interactive Storytelling," Journal of Korean Society of Design Science, Vol. 16, No. 4, pp. 375-384, 2003.
Y.J. Lee, A Study on Visual Perception Response According to Screen Composition, Doctor‘s Thesis of Kyungsung University of Digital Design, 2009.
H.K. Kwon and H.S. Lee, “Tendency of Immersion and Recognition on Application of Visual Cue in Graphic Information,” Journal of Korea Multimedia Society, Vol. 15, No. 9, pp. 1174-1183, 2012.

원문보기 상세보기
About Parallax Scrolling(2013), http://nuli.navercorp.com/sharing/blog/post/1132553 (accessed Jun., 20, 2014).
50 great parallax scrolling websites(2014), http://www.creat ivebloq.com/web-design/parallax-scrolling-1131762 (accessed Dec., 15, 2014).
28 AMAZING PARALLAX SCROLLING SITES(2012), http://www.webdesignerdepot.com/2012/11/28-amazing-parallax-scrolling-sites/ (accessed Nov., 2, 2014).

저자의 다른 논문 :

표제어: PCR

동의어: Packet Collision Rate

용어 설명 출처 목록 (6)

용어 설명: PCR은 세균 특이성이 있는 primer를 이용하여 적은 수의 세균이 있을지라도 쉽게 검출할 수 있는 유용한 방법이며, 이를 이용하여 구강 내 치면세균막이나 타액에서 직접 세균을 검출할 수 있게 되었다[8].

내보내기 구분	파일저장 인쇄 메일전송
구성항목	기본정보 상세정보 관리번호, 논문명, 저널/프로시딩명, 저자 , 발행년, 권, 호, 시작페이지, 끝페이지, 발행기관 관리번호, 논문명, 대등논문명, 저자 , 저널/프로시딩명, 발행기관, 발행년, 발행언어, 권, 호, 시작페이지, 끝페이지, ISBN, ISSN, 주제분야, 키워드, 초록(한글), 초록(영문), 저자(소속기관)
저장형식	Text(ASCII format) Excel format RefWorks Direct Export RIS format (for Reference Manager, ProCite, EndNote), Scholar's Aids, Mendeley
메일정보	받는사람 (필수) @ 보내는사람 (선택) @ 제목 내용 KISTI 검색결과 이메일 서비스
안내	총 건의 자료가 검색되었습니다. 다운받으실 자료의 인덱스를 입력하세요. (1-10,000) 검색결과의 순서대로 최대 10,000건 까지 다운로드가 가능합니다. 데이타가 많을 경우 속도가 느려질 수 있습니다.(최대 2~3분 소요) 다운로드 파일은 UTF-8 형태로 저장됩니다. 파일의 내용이 제대로 보이지 않을실 때는 웹브라우저 상단의 보기 -> 인코딩 -> 자동선택 여부를 확인하십시오. ~ Text(ASCII format) Excel format

연합인증