UI/UX의 변화와 방향성 사색 (차세대 인터페이스 및 터치리스 UI를 위한 인터랙션 개발기술 세미나)

1. UI/UX의 변화와
방향성 사색
(차세대 읶터페이스 및 터치리스
UI를 위한 읶터랙션 개발기술 세미나)
2012.11.30
InnoUX CEO 최병호
InnoUX@InnoUX.com, @ILOVEHCI

2. Table of Contents
• 음성 읶식과 UX 방향성 사색
• 매직 미러, UI/UX 방향성 사색
• 자동차, UI/UX 방향성 사색
• 스마트 TV, UI/UX 방향성 사색
• UI 변화와 UX 방향성 사색
UI/UX의 변화와 방향성 사색 1 © 2012 InnoUX & Innodesign All rights reserved.

3. 음성 읶식과 UX

10. 무엇이
느껴지십니까?

15. 무엇이
느껴지십니까?

16. UX띾 Logic이 아니라 사람!
UX띾 Product나 Computing이 아니라
Social Product, Social Computing!

17. 매직 미러,
UI/UX 방향성
사색

18. 매직 미러, 어떻게 만들어야 할까요?
안드로이드 O/S에 위젯 띄우고,
음성, 동작, 안면 기술 적용하고,
터치에 리모콘 포함하면 될까요?

19. 질문을 바꿔라!
매직 미러는
사람을 위해
무엇을 할 수 있는가?

21. Magic Mirror
http://youtu.be/HlsSLRMq8X0
Mirrors installed in the Delano Hotel in Miami on every
guest floor

22. Magic Mirror
http://youtu.be/x5Lr6yW9QbQ

23. RRADA retail experience
http://youtu.be/3pXNYciHCLc

24. Miss Selfridge Magic mirror
http://youtu.be/tiBiQ-Py8jY

25. Future department stores (Digital Mirror)
http://youtu.be/oLBPhh01yiY

26. Magic Mirror - Virtual Dressing and Social Shopping
http://youtu.be/fp3i_ta01BU
Magic Mirror brings magical shopping experience into your shop.
Entice Me ! Virtually try on this season's hottest look.
Beautiful Me ! Studio quality photography
Love Me ! Share with Facebook and Twitter friends.
Surprise Me ! Personalised coupons for your next visit

27. Retail Solution - Magic Mirror
http://youtu.be/vw1i4M9sAiA

28. Magic Mirror
http://youtu.be/1pYC_twB_pc

29. The original Virtual Fitting Mirror from China
http://youtu.be/r3CbYyhx9iU
Koscar presented the first mass production ready virtual
fitting mirror in 2011 Intel Digital Singage Roadshow

30. L'Oreal Paris Magic Mirror
http://youtu.be/t5HsHaieYOI

31. 최첨단 유비쿼터스 기술을 아파트
현관 거울에 적용, 편리핚
주거생활이 가능하도록 하는 국내
최초의 최첨단 거울인
„트랚스폼(TRANSFORM) 매직
거울‟도 개발했다.
외출핛 때 현관에 다가서면 날씨에
따라 거울에서 “오늘은 비가 올
예정이오니 우산을 준비하시기
바랍니다” 등과 같은 음성이
나오고, 현재의 날씨와
온도, 주차위치 번호가 표시된다.

32. Interactive Mirror
http://youtu.be/dAI9mF_cBu0

33. DIMI digital mirror
http://youtu.be/jEvzjaEoKds

36. First iPad 2 Augmented Reality Application : AR Magic
Mirror augmented by Total Immersion
http://youtu.be/oDxCneDOgwc

37. Magic Mirror
http://youtu.be/qTxnsFlFWEk
뉴욕타임스 R&D 랩에서 개발핚 '마술 거울(Magic Mirror)'은 마치 동화 속 마녀가 사용하던 거울처럼
사용자가 거울 앞에 서면 그날의 코디 제앆 및 웹서핑, 이메일 등 여러 가지 상호작용이 가능하다.
마이크로소프트의 키넥트 기술을 기반으로 제작핚 마술 거울은 동작 및 음성인식이 가능하며 RFID
젂자태그를 읽어 처방받은 약품에 대핚 정보도 살펴볼 수 있다.
마술 거울은 아직 프로토타입 단계에 있으며 조금 더 완벽핚 마법 거울을 만들기 위해 뉴욕타임스
R&D 랩에선 지속적인 기술 개발에 몰두하고 있다고 핚다.

38. Augmented Reality Magic Mirror using Kinect
http://youtu.be/Zw_6o7AuBzk

44. DIY Magic Mirror Overview
http://youtu.be/dReYU9GoKqk

45. Mirrors Dont Lie
http://youtu.be/VwEAaINH9X0

46. Chinese Magic Mirror
http://youtu.be/jvLC5a1w-Gw

47. 매직 미러 사례에서의 UX는?
• UXD는 본질을 발견하고, 새로운 본질로 재정의하는 것이다.
• UXD는 새로운 고객층을 발굴하고, 그들이 원하는 것을
통찰하여 제공하는 것이다.
• UXD는 광범위한 비즈니스 생태계를 구축한다.
• UXD는 재미를 추구한다.
• UXD는 새로운 습관을 형성하고, 궁극적으로 문화를 만든다.
• UXD는 궁극적으로 수익을 창출한다.

48. 핚국정보과학회 학회지 4월호
http://www.kiise.or.kr/1coms/data/3004/06-%ED%8A%B9%EC%A7%911-04.pdf

49. http://www.worldweb.co.kr/articles/articles_view.html?idno=14462

50. 자동차,
UI/UX 방향성
사색

51. 1. Digital Rear-View Mirror UX
기존의 룸미러를 AMOLED 디지털 룸미러로 대체하여 고객에게 차별화된 경험을
제공하고, 현대자동차의 경쟁력을 강화하는 UX 젂략을 추구함
사례 연구 자동차 UX 젂략 방향 제언
1. 룸미러를 Digital Rear-View Mirror로 대체하면 고객과
독일 아우디 스포츠카 R8 e-tron은 룸미러를 핵심 현대자동차에 어떤 이점을 제공핛 수 있는가?
삼성의 7.7인치 AMOLED 디지털 룸미러로 2. Digital Rear-View Mirror는 경쟁사보다 차별화되고
검토사항 대체/모방이 불가능하며 희소핚 경험가치를 제공핛 수
대체함 있는가?
• 저젂력으로 제광 가능
• 차 뒤의
젂조등으로부터 반사 1. 소재: AMOLED display 채택
방지 및 야갂 주행 시 2. 크기: 7인치~10인치 중 적정핚 크기 연구
뒤 차량 불빛의 3. 제품 디자인: PUI 연구
눈부심 줄임 4. 기존 LCD 패널과의 역핛 분담 및 연동 연구
• 시야각 큼
주요 UX 5. 킬러 콘텐츠 발굴 및 단/중장기에 활용핛 수 있는 콘텐츠
• 높은 명암비와 얇은 연구과제 카테고리 정의
두께 6. 젂용 앱 스토어 정의 및 타 앱스토어 활용 방앆 도출
[디지털 룸미러] 7. 킬러 콘텐츠 기획
• 시속 200~300㎞를
넘나드는 극핚의 주행 8. 콘텐츠별 터치 UI 및 GUI 디자인
중에도 화면 끊김 9. 표준 터치 UI 및 GUI 가이드라인 개발
없이 반응속도 빠름
• 차량 후면부에 이노UX의 접귺 방법 개발사의 접귺 방법
유리창을 달 필요가
없어 유선형 타입의
미래형 자동차 디자인
이노UX와 1. 크기 적정성 연구
1. AMOLED display 부착
2. PUI 연구
가능 개발사의 3. 기존 LCD 패널 연계 연구
앆젂성 연구
2. 카메라와 AMOLED
• 기어 변속, 타이어 접귺 방법 4. 콘텐츠 및 앱스토어 연구
display 연동 연구
[디지털 룸미러와 연동된 카메라] 상태, 경고 앆내문 등 5. UI/GUI 연구
각종 운행 정도를 3. 시물레이터 개발
6. 사용자 대상 리서치
실시갂으로 표시
자동차 UX 젂략 방향성 제언 50

52. 2. MMI Touch gesture-based entertainment system UX
기존의 터치 스크린 방식이 아닌 통합 컨트롤러 방식으로 대체 또는 보완하여 고객에게
차별화된 경험을 제공하고, 현대자동차의 경쟁력을 강화하는 UX 젂략을 추구함
사례 연구 자동차 UX 젂략 방향 제언
1. 터치 스크릮 방식이 아닌 통합 컨트롟러 방식을
2012 아우디 New A3의 MMI* Touch 핵심 도입핚다면, 고객과 현대자동차에 어떤 이점을 제공핛 수
system으로, 조그다이얼의 윗 부분이 터치 있는가?
검토사항 2. 통합 컨트롟러 방식에서 조그다이얼과 터치 시스템을
인터페이스로 동작하여 손가락으로 문자를 쓰면 접목핚다면, 어떤 가치를 지속적으로 제공핛 수 있는가?
인식되는 방식임
새롭게 디자인된
•
통합형 컨트롟러 MMI 1. 통합형 컨트롟러 역핛과 기능 정의
터치 시스템은 기존에
A6, A7, A8에 2. 통합형 컨트롟러의 구성 정의 등 PUI 디자인
장착되어 있던 방식을 주요 UX 3. 통합형 컨트롟러 조작과 LCD의 콘텐츠 인터랙션 연구
개선함. 기존에는
터치패드가 추가로 연구과제 4. 조그다이얼과 터치시스템의 접목 타당성 연구
달려있었지만 개선된 5. 조그다이얼 터치시스템의 핚글 인식 연구
MMI 터치
[조그다이얼의 윗 부분 터치로 문자 작성] 6. 표준 통합형 컨트롟러 UX 가이드라인 개발
시스템에서는
조그다이얼의 윗
부분에 터치 스크릮을
추가함 이노UX의 접귺 방법 개발사의 접귺 방법
1. 통합형 컨트롟러 콘셉
• MMI 터치 시스템은 이노UX와 정의 1. 통합형 컨트롟러 파일럿
화면을 보지
않더라도, 촉감으로 개발사의 2. 통합형 컨트롟러 PUI 및 시스템 개발
인터랙션 디자인 2. 조그다이얼과 터치시스템
위치를 파악하고 접귺 방법 3. 조그다이얼과 터치시스템 파일럿 시스템 개발
[„S‟ 문자 작성 후 인식된 디스플레이 화면]
조작이 가능함
콘셉 정의 및 핚글 인식 3. 시물레이션
* MMI: Multi Media Interface 개발
자동차 UX 젂략 방향성 제언 51

53. 3. ‘Windows of Opportunity’ UX
차 유리창을 또 하나의 스크린으로 활용하여 고객에게 차별화된 경험을 제공하고,
현대자동차의 경쟁력을 강화하는 UX 젂략을 추구함
사례 연구 자동차 UX 젂략 방향 제언
1. 차 유리를 또 하나의 터치 스크릮으로 활용핚다면 고객과
GM과 이스라엘 베잘렐 예술-디자인 대학이 함께 핵심 현대자동차에 어떤 이점이 있는가?
개발핚 '기회의 창‟(Windows of Opportunity)‟ 2. 차 속의 사람과 다른 차 속의 사람 갂 소통이
검토사항 원활해지면, 새로운 리치 마켓이나 차별화된 비즈니스
기술로서, 차 유리에 스마트폰에 쓰이는 것과 모델을 발굴핛 수 있는가?
같은 터치 스크릮 화면을 띄우는 것임
1. 유리창 터치 스크릮 연구
2. 터치 스크릮 대상인 유리 위치 연구
3. 유리창 터치 스크릮과 스마트폰/스마트패드와 연동 연구
4. 킬러 콘텐츠 발굴 및 단/중장기에 활용 수 있는 콘텐츠
주요 UX 카테고리 정의 (예) 게임, 그림, 메모, 내비게이션, 관광,
연구과제 TV프로 시청, 음악 청취, 차 갂 소통 및 정보 공유, 광고 등
5. 젂용 앱 스토어 정의
[Otto 앱] [Foofu 앱] 6. 킬러 콘텐츠 기획
애니메이션 캐릭터가 차 창에 그림을 그리거나 7. 콘텐츠별 터치 UI 및 GUI 디자인
외부의 기후와 지형에 글자를 쓸 수 있음 8. 표준 터치 UI 및 GUI 가이드라인 개발
반응하는 게임
이노UX의 접귺 방법 개발사의 접귺 방법
이노UX와 1. 유리창 터치 스크릮 연구
개발사의 2. 스마트 기기와 연동 연구 1. 유리창 터치 스크릮 개발
[Spindow 앱] [Pond 앱] 3. 콘텐츠 및 앱스토어 연구 2. 스마트 기기와 연동 개발
랚드마크에 관핚 실시갂 옆 차의 음악 공유 요청 및
접귺 방법 4. UI/GUI 연구 3. 앱 파일럿 테스트
정보 제공 및 풍경 변경 공유 그리고 메시지 젂달 5. 사용자 대상 리서치
자동차 UX 젂략 방향성 제언 52

54. LG 스마트 TV UX Insight
리모컨과
스크린 입력

55. 사용자는 리모컨의 어떤 부위를 쥘 것읶가?
리모컨을 잡은 위치에서 이동하지 않고
주요한 태스크를 수행할 수 있는가?
사용자의 멘탈모델과 리모컨의 버튼 위치는
매핑이 잘 되어 있는가?

60. 매직 리모컨의 동작방식에서 읷관성이
떨어짂다면 계속해서 사용할 수 있는가?
매직 리모컨의 커서가 갑자기 사라지거나
늦게 나타난다면?
매직 리모컨의 커서를 제어하기 힘들어
포읶팅이 힘들다면?

64. 스크린에서 지칭하는 버튼 명칭은
왜 다른가?
스크린에서 지칭하는 버튼은
어디에 있는가?
셋탑박스 리모컨은 무슨 의미읶가?

67. 리모컨과 음성 명령
리모컨과 동작읶식

69. 스크린 입력 스타읷의 읷관성과
디폴트 스타읷은?
스크린 입력 시 원하는 데로
입력이 안 된다면?

74. LG 스마트 TV UX Insight
읶증 확읶

75. 프로세스는 왜 단젃되었는가?
TV에서 처리하지 못하고
왜 PC로 가야 하는가?
이메읷 읶증 방법 외
좀 더 TV스러운 방식은 없는가?

84. LG 스마트 TV UX Insight
TV채널 설정과
괴물

85. 프로세스는 왜 단젃되었는가?
왜 이중 설정을 해야 하는가?
외부입력을 왜 사용자가 선택해야 하는가?

99. LG 스마트 TV UX Insight
콘텐츠 여행

100. TV에서 앱은 또다른 채널읶가?
앱은 왜 채널처럼 쉽게 접귺이 안 되는가?
앱스토어의 메뉴 위치는 적정한가?

104. 아이들을 위해서 유용한 앱을 쉽게 검색
또는 추천 받을 수 있는 방법은?
TV 채널처럼 아이를 위한 앱의 접귺을
쉽게 만들려면?
아이가 직접 쉽게 접귺할 수 있는
아이들 앱은?

106. TV에서 검색이란?
나의 검색 패턴은 왜 녹여지지 않는가?
내가 가지고 있는 자원을 쉽게 검색할 수
있는 방법은 무엇읶가?

109. TV에서 지도란?
TV에서 읶터넷이란?
TV에서 라디오란?

113. 유료이면, 처음부터 말을 해야지!

116. 쇼셜TV의 가치는?
쇼셜TV에서 TV 데이터 저장은?
쇼셜TV에서 정보 공유와 몰입성은?

119. UI 변화와
UX 방향성 사색

120. 디지털
제품
디지털
서비스
정보
사회 집단 개인 컴퓨터 디지털
기기
콘텐츠
UX 1.0
UX 2.0
UX 1.0은 개인 사용자와 컴퓨터 간의 기술적인 상호작용에 초점
UX 2.0은 다양한 디지털 기술을 통해 개인 또는 집단의 사람들에게 새롭고 유익한 경험을 제
공하는 데 초점

121. User Experience이란 일상 생활에서 사람들이 컴퓨터와
상호작용하면서 사람들 속에 축적하게 되는 모든 지식과
기억과 감정을 의미한다.
좀 더 구체적으로 정의하자면 사용자가 디지털 제품이나
서비스를 사용하거나 사용 상황을 예상하면서 갖게 되는 모든
감정과 지각과 인지적인 결과를 의미하는 개념이다. (ISO 9241
2120)
UX는 제품의 사용 전이나 사용 중 그리고 사용 후에 일어나는
사용자의 감정, 신념, 선호도, 지각, 신체적/정신적 반응이나
행동을 포함하는 매우 넓은 개념이다.

122. Customer journeys with stings in their tails
http://twitter.com/jasontill

127. 자기효능감
(self-efficacy)

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

132. References

133. 읶용/참조 문헌
• Winning Hearts and Minds: Tips for Embedding User Experience in Your Organisation (Michele Ide-Smith on May 21, 2012)
• How User Experience Evolves in a Company - a New Look at UX Maturity Models (UPABoston on May 22, 2012)
• Big experience - A concept model for digital strategy & product management with UX and SXD (Jason Till on Jan 03, 2012)
• HCI (Meet Shah, Sep 2012)
• HCI (Alejandro Ruiz, Aug 2012)
• History of Human-Computer Interaction (Erik Duval, Mar 2012)
• Human-Computer Interfaces: How is Technology Change Creating New Opportunities in Them? (Jeffrey Funk, Mar 2012)
• Human Computer Interaction 개롞 (김짂우, 2012)
• 100 Things Every Designer Needs to Know About People, http://www.scribd.com/doc/104454035/100-Things-Every-Designer-Needs-to-Know-
About-People-Weinschenk-New-Riders-2011 (Susan M. Weinschenk, 2011), The W Blog, http://www.theteamw.com/blog/ (Susan M.
Weinschenk)
• HCI to UX to HCI - Parte A (Cristiano Rastelli, Dec 2011)
• Brief Introduction to HCI (Bao Nguyen, Dec 2011)
• Critical Thinking forUX Designers (Workshop) (Stephen Anderson on Mar 28, 2011)
• Human-Computer Interaction: An Overview (Sabin Buraga, Feb 2010)
• Introduction to HCI (Deskala, Jul 2010)
• HCI Quick Guide (Emanuel Fernandes, May 2010)
• The Ten Commandments Of User Experience (Nick Finck, Mar 2010)
• 10 Things CEOs Need to Know About Design (Jason Putorti, May 2010)
• UX design. What, how and why (Serena Facchinetti, Feb 2010)
• Metrics-Driven Design (Joshua Porter, May 2010)
• TUTORIAL: Repositioning User Experience (Jon Innes on Feb 26, 2010)
• UX Deliverables in Practice (Peter Boersma, May 2009)
• 10 Most Common Misconceptions About User Experience Design (Whitney Hess, Apr 2009)
• UX design, service design and design thinking (Sylvain Cottong, Aug 2009)
• Foundations of Interaction Design (Karen McGrane, Jan 2009)
• UX Vision, Strategy and Teams by Susan Wolfe, Optimal Experience (UIDesign Group on Oct 15, 2009)
• User Experience Best Practices (Nick Finck, May 2008)
• User Centered Design 101 (Frank Spillers, Mar 2007)
• Experience Is The Product (Peterme, Oct 2007)
• Are You An User Experience Designer (Vinay Mohanty, Oct 2007)
UI/UX의 변화와 방향성 사색 132 © 2012 InnoUX & Innodesign All rights reserved.