감성적 GUI 디자인 방법

감성적
GUI 디자인 방법:
(KADI UX Conference 2013)
감성을 자극시키는 그래픽디자인 방법과
흥미를 유발시키는 인터랙션 효과 구현 기법은 무엇이며,
어디에서 그 원류를 찾을 수 있는지를 소개한다.
2013.5.30
InnoUX CEO 최병호
InnoUX@InnoUX.com, @ILOVEHCI

© 2013 InnoUX & Innodesign All rights reserved.감성적 GUI 디자인 방법
Table of Contents
• 5개의 화두
• 감성적 GUI 디자인 방법
• 토롞
1

35초와 60초에
마음을 훔치지
못하는 디자인은
감성적 GUI 디자인이
아니다!
by 최병호(@ILOVEHCI)
화두 I.
Second

행동을 변화시키지
못하는 디자인은
아니다!
화두 II.
Behavior

VRIN 없는 디자인은
아니다!
* VRIN=valuable,
Rare, inimitable,
nonsubstitutable
화두 III.
VRIN

2013년에 필요핚
감성적 GUI 디자인이란
GUI을 활용하여
소비자를 한 순간에
제품에 몰입시키고,
감정을 움직이도록
흡인력 강하게
끌어당기는 디자인
화두 IV.
Definition

2013년에 필요핚
감성적 GUI 디자인을
구현핛 수 있는
방법은
시선 압류, 시선 고정,
디자인 제약
화두 V.
Methods

사례 연구를 통해
본 감성적 GUI
디자인 방법과
사람의 이해

1. 시선 압류1: 스크릮 전체를 지배핚 1개의
상품, 1개의 이미지
2. 시선 고정1: 이미지 도발로 충격, 사람 얼굴로
무의식적 주의 유도, 자동으로 이미지 로테이션
3. 디자인 제약1: 상품 또는 이미지
개수/크기/종류, 로테이션
개수/속도, 칼라, 그리드
감성적 GUI 디자인 방법

1. 도파민 시스템 응용(Dopamine system)
• 적은 양의 정보를 주고 더 많은 정보를 얻을
수 있는 방법을 제공하면 사람들이 더욱
찾게 하는 결과를 불러올 수 있다.
• 사람들은 찾은 결과를 보상으로 받게 되고,
이것은 다른 찾는 행위를 불러온다.
사람의 이해

2. FFA(방추형 얼굴 인식 영역, Fusiform Face Area)
• 사람들은 사람의 얼굴을 그 어떤 사물보다 빠르게
인식핚다.
• 사용자를 직접 응시하는 사짂은 상당히 감성적인
효과가 있는데, 이는 얼굴에서 눈이 가장 중요한
부위이기 때문이다.
• 얼굴이 잘 나온 이미지를 사용해야 핚다.
사람의 이해

3. 무의식적 선택 주의(Unconscious selective attention)
• 사람의 무의식은 특정핚 것을 감지하며 끊임없이
주변 홖경을 읽는다. 여기에는 자싞의 이름이나 음식,
섹스, 위험 등의 중요핚 메시지를 포함핚 전체
홖경이 포함된다.
• ‘가장 주의를 끄는 것’은 스스로 원하듞 원하지 않듞
이 모듞 것들에 대해서는 자동적으로 인지하게 된다.
대표적으로 움직이는 모든 것, 우리를 쳐다보고 있는
사람 얼굴 그림, 음식/섹스/위험에 대한 그림,
이야기, 큰 소음 등이다.
사람의 이해

http://www.myla.com/ (2013.4.26)The site Myla is a seductive store that sells women’s nightgowns and underwear. Their design
concentrates on the 2 colors black and white, and uses big strong shapes to carve out it’s layout.
(http://madewithrealjuice.com/blog/seo/11-magento-ecommerce-designs)

http://alexprager.com/#!/photography/Film-Stills (2013.4.28)ALEX PRAGER PHOTOGRAPHY
Cinematic and darkly playful The Big Valley is a series of highly saturated staged portraits by Los
Angeles based artist, Alex Prager. This site is here on Styleboost because I love the big, glossy
photos and the incredible hair-styles and clothes.
http://styleboost.com/archive/date/300

http://alexprager.com/#!/photography/Compulsion (2013.4.28)ALEX PRAGER PHOTOGRAPHY

http://alexprager.com/#!/photography/Week-end (2013.4.27)ALEX PRAGER PHOTOGRAPHY

4. 시선 압류2: 동영상 자동 실행으로
무의식적 주의 유도
5. 시선 고정2: 의인화 및 스토리텔링으로
흥미 유발
6. 디자인 제약2: 사욲드 크기
디폴트=0, 스토리 개수, 시연
시갂, 동영상 플레이 영역의 크기

http://www.smythson.com/ (2013.4.26)

7. 시선 압류3: 예상치 못핚 독특핚 레이아웃
8. 시선 고정3: 싞선핚 내비게이션 방식,
일상의 색다른 접목(wiping, planting,
alternating), 인터랙션의 주도(통제감)
9. 디자인 제약3: 싞선/이색의 범주, 모션,
오브젝트의 개수

http://fff.cmiscm.com/ (2013.4.27)

FORM FOLLOWS FUNCTION
FFF is the beautiful experimental playground of Jongmin Kim, an interactive developer at
Firstborn Multimedia in NYC. It's obvious that his inspirations date back to the now more or
less extinct era of Flash. However, don't take that as a negative in this case. This is also
reminiscent of Yugo Nakamura's work from years back, but at the same time doing its own
thing. I miss these inspirational experimental playgrounds.
http://styleboost.com/

http://fff.cmiscm.com/#!/section/wipertypo (2013.4.27)

http://fff.cmiscm.com/#!/section/planttrees (2013.4.27)

10.시선 압류4: 행동을 유도하는 타임라인
11.시선 고정4: 현재가 중요하다는 메시지
충격, 순갂을 기록하는 참여 유발, 시갂
단위로 사람들의 라이프 로그 감상(Time
navigating)
12.디자인 제약4: 배경 이미지, 타임라인

4. 인지부조화(Cognitive dissonance)
• 기존에 사용자가 학습하거나 인지하고 있던
특정 개념에 대해 상반되는 어떤 현상이
나타났을 때 발생하는 불편핚 감정이다.(레온
페스팅거 Leon Festinger, 1956)
• 싞념을 바꾸게 하는 가장 좋은 방법은
대상으로 하여금 아주 작은 일부터
참여시키는 것이다.
사람의 이해

5. 습관 형성(The Habit loop)
• 새로운 습관을 들이게 하려면 자그마한 일로
동기를 부여하라.
• 사람들에게 매일(혹은 거의 매일) 돌아와
과업을 수행할 이유를 제공핚다.
• 인내심을 길러라. 새로욲 습관을
들이기까지는 오랜 시갂이 걸릮다.
사람의 이해

2http://www.rei1440project.com/ (013.4.27)

13.시선 압류5: 클릭을 유도하는 번호
14.시선 고정5: 호기심으로 각 번호에
숨겨짂 메시지 확인, 자동으로 흘러가는
이벤트, 마우스 방향에 따라 움직이는
효과(통제감)
15.디자인 제약5: 번호 개수, 칼라 개수,
레이아웃, 춤추는 곰

http://xctravels.com/ (2013.4.28)

http://itsashapechristmas.co.uk/ (2013.4.28)

16.시선 압류6: 사선 방식의 레이아웃, 스크릮
전체를 채욲 카툰(또는 영상 같은 이미지)과
매혹적인 선율
17.시선 고정6: 카툰/게임 스토리, 애니메이션과
인터랙션 게임, 자동으로 흘러가는 scene
18.디자인 제약6: 사선 방식의(또는 full scene의)
레이아웃과 콘텐츠 제약

http://www.brandongenerator.com/ (2013.4.28)When Microsoft asked LBi to create an interactive animated story to promote IE9, they jumped at the chance. That's not surprising considering who was on
board for the project: director Edgar Wright and Marvel and Lucasfilm illustrator Tommy Lee Edwards. "Edgar had the opinion that any technology we used
should fit the story rather than being shoehorned into the narrative," explains LBI's Simon Gill. "This led to a hectic two weeks at the outset, sorting out the
main story points, with ideas for elements to build and how they’d fit together. We wanted to try and redefine what an online film is – learning how a
Hollywood scriptwriter, an illustrator/animator and a software company could combine on something interesting.“
http://www.creativebloq.com/web-design-tips/examples-of-html5-1233547

http://www.brandongenerator.com/episode-one (2013.4.28)

http://www.brandongenerator.com/episode-one/mystery-prose (2013.4.28)

http://www.rogerdubuis.com/ (2013.4.28)
Roger Dubuis is a master craftsman: a highly skilled, talented watchmaker for those with an eye
for beautiful design and a deadly accurate timepiece. The website for his stunning range of
watches needed to reflect those qualities; built by French agency Ultranoir and using a host of
HTML5 features, the site offers memorable experiences for the user.

19.시선 압류7: 여행(탐험)을 유도하는 지도와 사짂
20.시선 고정7: 지명을 누를 때마다 선택핚
지역까지 이동하는 영상 보는 재미, 영상을
배경화면에서 처리
21.디자인 제약7: 지명 개수, 지도, 배경화면으로
처리핚 스틸컷 개수

http://share.yu-as.com/smokers/ (2013.4.28)'Clerkenwell Close – The Pathway of Smokers' takes us on a journey through the streets of London
providing messages along the way. It’s designed and developed by Duncan Deng, who wanted to see
what he could achieve to "beat Flash, which seemed to have been dominating the interactive web world".
The site uses HTML5 markup, custom data-* attributes and, most interestingly, the audio element.

22.시선 압류8: 스크릮을 가득 채우면서 내려오는
건반
23.시선 고정8: 건반을 누르는 소리와 그때마다
달라지는 건반의 비율
24.디자인 제약8: 건반 개수, 칼라(B&W, Red)

http://www.fritzo.org/keys/#style=piano (2013.4.28)
Fritzo Keys is a musical instrument app that has a continually playing, 32-voice background accompaniment. Developer Fritz
Obermeyer created it as an experiment and feels it really pushes what HTML5 audio is currently capable of.

25.시선 압류9: 재미있게 찍은 사짂들
26.시선 고정9: 웹캠으로 비춰짂 내 모습을
변형하면서 느끼는 즐거움과 공유 후
반응 기대, 타인의 모습 탐험
27.디자인 제약9: 사짂 개수, 사짂 로테이션

http://webcamtoy.com/ (2013.4.28)
Paul Neave's HTML5 Webcam Toy is a rewrite of a Flash webcam toy that he had
written previously, and is one of many examples of HTML5 replacing content
originally authored in Flash.

28.시선 압류10: 마력적인 주제와 Play 버튺
29.시선 고정10: 나레이션이 흘러나오며 자동으로
페이지가 하단으로 내려가면서 다양핚 포맷의
페이지(스토리텔링)를 보는 놀라움
30.디자인 제약10: 핚 페이지 내의 scene 구성과
자동으로 scene 갂 이동하는 시갂

http://www.the-bea.st/ (2013.4.28)Folk singer Laura Marling's latest album, A Creature I Don't Know, has an accompanying website made by
London agency Studio Juicewith illustrations by Shynola. It's a site that self-scrolls as a poem is read out,
while vivid illustrations and animations with parallax perspectives are revealed.

http://www.the-bea.st/ (2013.4.28)Folk singer Laura Marling's latest album, A Creature I Don't Know, has an accompanying website made by
London agency Studio Juicewith illustrations by Shynola. It's a site that self-scrolls as a poem is read
out, while vivid illustrations and animations with parallax perspectives are revealed.

31.시선 압류11: 해부학적 접근의 일러스트레이션
32.시선 고정11: 일러스트레이션 감상
33.디자인 제약11: 일러스트레이션 이미지 크기와
용량

http://www.mazakii.com/2011/ (2013.4.28)

http://www.mazakii.com/2011/archives/910 (2013.4.28)

34.시선 압류12: 놀라욲 실험 주제와 영상
35.시선 고정12: 다양핚 실험 주제를 스크롤 바의
움직임에 따라 즉각적인 영상으로 보여주는
방식, 실시갂 데이터의 변화
36.디자인 제약12: 실시갂 영상, 데이터
비주얼라이제이션

http://www.chromeweblab.com/en-GB/#home (2013.4.28)Chrome Web Lab launched as a partnership between Google and agency B-Reel. It's available online to all, but is also featured in the
London Science Museum. The Lab relies heavily on WebGL but also features some complex JavaScript, in particular the use of the canvas
element and heavy use of three.js, a lightweight 3D JavaScript library that supports both canvas and WebGL.
http://www.creativebloq.com/web-design/examples-of-javascript-1233964

http://www.chromeweblab.com/en-GB/universal-orchestra (2013.4.28)

http://www.chromeweblab.com/en-GB/teleporter (2013.4.28)

http://www.chromeweblab.com/en-GB/sketchbots# (2013.4.28)

http://www.chromeweblab.com/en-GB/lab-tag-explorer (2013.4.28)

37.시선 압류13: 눈을 뗄 수 없는 다양핚
퀄리티 높은 상품 이미지
38.시선 고정13: 상품 탐험, 피드백 정보
확인(faved, pinned, bought)
39.디자인 제약13: 각 그리드 내 상품
개수와 크기, 이미지 퀄리티와 파일 용량

The Five
Agenda
1. Designing for
Second
2. Change Behaviors
3. Creating for VRIN
4. Definition for 2013
5. Design Methods

경청해주셔서
고맙습니다!

감성적 GUI 디자인 방법

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie 감성적 GUI 디자인 방법

Ähnlich wie 감성적 GUI 디자인 방법 (20)

Mehr von Billy Choi

Mehr von Billy Choi (20)

감성적 GUI 디자인 방법