*실감나는 경험 디자인하기 한국방송공학회 3D Workshop Session 강연자료 한국과학기술회관

1. 실감나는

2. 경험

3. 디자인하기
Designing

4. Realistic

5. Experience
LSR/UX Lab.
Kim JI Hwan

6. Designing Realistic Experience 한국방송공학회 실감 UX/UI
Mourning Tree - Designing Holographic Tree , ACM SIGCHI
Depth Sensitive Layer - Designing 3D Stereoscopic Interface, KAIST
Interaction Designer
Human Computer Interaction
User Interface
User Experience
www.seokhouse.com

7. Designing Realistic Experience 한국방송공학회 실감 UX/UI
Buxton, W. and B. Myers, A study in two-handed input, Proceedings of the SIGCHI, 1986
Fitzmaurice, G.W., H.Ishii, Bricks: laying the foundations for graspable user interfaces, SIGHCHI, 1995
Brooks,J.,Frederick P., Project GROPE: Haptic displays for scientific visualization, Proceedings of the 17th annual conference on
Computer graphics and interactive techniques, 1990

8. Designing Realistic Experience 한국방송공학회 실감 UX/UI
Human–computer Interaction (HCI) involves the study, planning, and design of
the interaction between people (users) and computers

9. Designing Realistic Experience 한국방송공학회 실감 UX/UI
User Experience
“A person's perceptions and responses that result from the use or anticipated use of a product, system or service.
The ISO also list three factors that influence user experience: system, user and the context of use”
ISO FDIS 9241-210:2009.

10. Designing Realistic Experience 한국방송공학회 실감 UX/UI
Interface
User Interface
Interaction
“좋은 인터페이스는 눈에 보이지 않는다.”
Marc Weiser. The world is not a desktop. interactions 1, 1 (January 1994), 7-8. 1994.

11. Designing Realistic Experience 한국방송공학회 실감 UX/UI
“

12. 인간

13. 감각

14. 확장으로의

15. 도구

16. ”

17.
Marshall McLuhan, Understanding Media (1964)

18. Designing Realistic Experience 한국방송공학회 실감 UX/UI
Mouse Keyboard

19. Designing Realistic Experience 한국방송공학회 실감 UX/UI
Tablet Pen

20. Designing Realistic Experience 한국방송공학회 실감 UX/UI
“ We’re gonna use our fingers. It works like magic...far more accurate than
any interface ever shipped... multi-finger gestures...”
Steve Jobs, 2007

21. Designing Realistic Experience 한국방송공학회 실감 UX/UI
Touch Interaction

22. Designing Realistic Experience 한국방송공학회 실감 UX/UI
Stylus Pen

23. Designing Realistic Experience 한국방송공학회 실감 UX/UI
“ Stereoscopic display provides more engagement, preference and rich experience in comparison to 2D display.”
Hakala, T., el. (2005). Spatial interactive visualization on small screen. Human computer interaction with mobile devices services

24. Designing Realistic Experience 한국방송공학회 실감 UX/UI
“3D UI, with depth information, provides higher affordance and preference than 2D UI.”
IJsselsteijn , el. (1998). Perceived depth and the feeling of presence in 3DTV. Displays, 18, 207-214.

25. Designing Realistic Experience 한국방송공학회 실감 UX/UI
Zspace
http://zspace.com/
http://vimeo.com/32800294

26. Designing Realistic Experience 한국방송공학회 실감 UX/UI
Leonar3do
http://leonar3do.com
http://youtu.be/PlSSNrhsHwg

27. Designing Realistic Experience 한국방송공학회 실감 UX/UI
A cursor might not be the best choice for 3D UIs. People see the Object , Not the Cursor
Wolfgang S., Chadwick A., The value of Constraints for 3D User Interfaces,Virtual Realities, 2011

28. Realistic User Interface
Designing Realistic Experience 한국방송공학회 실감 UX/UI

29. Realistic User Interface
Designing Realistic Experience 한국방송공학회 실감 UX/UI

30. Designing Realistic Experience 한국방송공학회 실감 UX/UI
Realistic Virtual Object

31. Designing Realistic Experience 한국방송공학회 실감 UX/UI
Realistic Virtual Object
Auditory(Hearing)
청각
Olfactory(Smell)
후각
Tactile(Touch)
촉각
Visual(Vision)
시각
Gustatory(Taste)
미각

32. Designing Realistic Experience 한국방송공학회 실감 UX/UI
Visual(Vision)
시각

33. Designing Realistic Experience 한국방송공학회 실감 UX/UI
3D Stereoscopy Display
UHD 84” Display
초고해상도의

34. 3D

35. Stereoscopy

36.
영상이

37. 주는

38. 실감나는

39. 경험
눈앞까지

40. 3D를

41. 표현할

42. 수

43. 있는

44.
대형

45. 디스플레이
Visual(Vision)
시각

46. Designing Realistic Experience 한국방송공학회 실감 UX/UI
http://youtu.be/VJWJMh1PmR4
MIT

47. Glasses-free

48. 3-D

49. TV
Visual(Vision)
시각

50. Designing Realistic Experience 한국방송공학회 실감 UX/UI
http://youtu.be/ATLeU_avV-o
EyeFly

51. 3D
Visual(Vision)
시각

52. Designing Realistic Experience 한국방송공학회 실감 UX/UI
http://youtu.be/uzCwczY1jTM
Oculus Rift
Visual(Vision)
시각

53. Designing Realistic Experience 한국방송공학회 실감 UX/UI
Sony

54. HMZ-T1
http://youtu.be/uzCwczY1jTM
Visual(Vision)
시각

55. Designing Realistic Experience 한국방송공학회 실감 UX/UI
Contact

56. Lens

57. Display
Visual(Vision)
시각
http://youtu.be/-btRUzoKYEA

58. Designing Realistic Experience 한국방송공학회 실감 UX/UI
http://youtu.be/re1EatGRV0w
Microsoft IllumiRoom
Visual(Vision)
시각

59. Designing Realistic Experience 한국방송공학회 실감 UX/UI
http://youtu.be/re1EatGRV0w
Microsoft IllumiRoom
Visual(Vision)
시각

60. Designing Realistic Experience 한국방송공학회 실감 UX/UI
http://youtu.be/bDL0xwe1IRg
Philips DesignLine
MIT Infinity-by-Nine
http://youtu.be/koLOyFbqFDU
프레임의

61. 경계를

62. 허무는

63. 영상

64. 디스플레이Visual(Vision)
시각

65. Designing Realistic Experience 한국방송공학회 실감 UX/UI
http://youtu.be/JHL5tJ9ja_w
HoloDesk
Visual(Vision)
시각
Mirage - 3D Hologram Generator
Light Field Holographic Display
http://youtu.be/YKCUGQ-uo8c

66. Designing Realistic Experience 한국방송공학회 실감 UX/UI
http://youtu.be/JHL5tJ9ja_w
HoloDesk
Visual(Vision)
시각

67. Designing Realistic Experience 한국방송공학회 실감 UX/UI
http://vimeo.com/59231624
SpaceTop
Visual(Vision)
시각

68. Designing Realistic Experience 한국방송공학회 실감 UX/UI
Tactile(Touch)
촉각

69. Designing Realistic Experience 한국방송공학회 실감 UX/UI
Touchable

70. Holography

71.
http://youtu.be/Y-P1zZAcPuw
Tactile(Touch)
촉각

72. Designing Realistic Experience 한국방송공학회 실감 UX/UI
Touchable

73. Holography

74.
http://youtu.be/Y-P1zZAcPuw
Tactile(Touch)
촉각

75. Designing Realistic Experience 한국방송공학회 실감 UX/UI
http://youtu.be/I4dKlTobUWQ
Syntact

76. -

77. touch

78. the

79. sound
공중에서도

80. 물리적

81. 피드백을

82. 느낄

83. 수

84. 있게

85. 해주자
Tactile(Touch)
촉각

86. Designing Realistic Experience 한국방송공학회 실감 UX/UI
http://youtu.be/WV-oYrPreTI
Senseg

87. Touch-Feedback

88. Technology

89.
Tactile(Touch)
촉각

90. Designing Realistic Experience 한국방송공학회 실감 UX/UI
http://youtu.be/L7DGq8SddEQ
Disney

91. Tesla

93. Revel
Tactile(Touch)
촉각

94. Designing Realistic Experience 한국방송공학회 실감 UX/UI
http://youtu.be/L7DGq8SddEQ
Disney

95. Tesla

97. Revel
Tactile(Touch)
촉각

98. Designing Realistic Experience 한국방송공학회 실감 UX/UI
실제와

99. 같은

100. 텍스처

101. 질감을

102. 느끼고

103.
만질

104. 수

105. 없어도

106. 멀리서

107. 느낀다.
Tactile(Touch)
촉각

108. Designing Realistic Experience 한국방송공학회 실감 UX/UI
Temperature

109. Feedback
http://youtu.be/zxhVZ-rzGHs
Tactile(Touch)
촉각

110. 다만

111. 터치

112. 패널이

113. 진동하는

114. 것은

115. 기술적인

116. 측면의

117.
햅틱으로

118. 커다란

119. 단서의

120. 시작일

121. 뿐이며,

122. 감성적으로

123. 햅
틱의

124. 개념을

125. 확장시켜야

126. 할

127. 것
Hara

128. Kenya,

129. Haptic

130. Designing Realistic Experience 한국방송공학회 실감 UX/UI
Auditory(Hearing)
청각

131. Designing Realistic Experience 한국방송공학회 실감 UX/UI
http://youtu.be/dqLFdCE1J2o
NTT

132. Virtual

133. communication

134. space
Auditory(Hearing)
청각

135. Designing Realistic Experience 한국방송공학회 실감 UX/UI
http://youtu.be/dqLFdCE1J2o
NTT

136. Virtual

137. communication

138. space
Auditory(Hearing)
청각

139. Designing Realistic Experience 한국방송공학회 실감 UX/UI
http://youtu.be/5R7zf30z_cg
http://youtu.be/QbOmya3X4kw
Binaural

140. 3D

141. Sound
Auditory(Hearing)
청각

142. Designing Realistic Experience 한국방송공학회 실감 UX/UI
http://youtu.be/YNNN3IQuKE4
Siri

143. songs

144. :

145. 사물이

146. 노래하고

147. 사람처럼

148. 말을

149. 한다.
Auditory(Hearing)
청각

150. Designing Realistic Experience 한국방송공학회 실감 UX/UI
Olfactory(Smell)
후각

151. Designing Realistic Experience 한국방송공학회 실감 UX/UI
Google

152. Nose
Olfactory(Smell)
후각
http://youtu.be/VFbYadm_mrw

153. Designing Realistic Experience 한국방송공학회 실감 UX/UI
Scent

154. Scape
Olfactory(Smell)
후각
http://youtu.be/aerm7N8zoDc

155. Designing Realistic Experience 한국방송공학회 실감 UX/UI
Scented

156. image

157. spaces
http://youtu.be/p7FEf03OraQ
Olfactory(Smell)
후각

158. Designing Realistic Experience 한국방송공학회 실감 UX/UI
Scented

159. image

160. spaces
http://youtu.be/p7FEf03OraQ
Olfactory(Smell)
후각

161. Designing Realistic Experience 한국방송공학회 실감 UX/UI
Meta

162. Cookie

163.
http://youtu.be/3GnQE9cCf84
Olfactory(Smell)
후각

164. Designing Realistic Experience 한국방송공학회 실감 UX/UI
Gustatory(Taste)
미각

165. Designing Realistic Experience 한국방송공학회 실감 UX/UI
Electric

166. Taste

167.
http://youtu.be/6NjkW4aSWvo
Gustatory

168. (Taste)
미각

169. Designing Realistic Experience 한국방송공학회 실감 UX/UI
Electric

170. Taste

171.
http://youtu.be/6NjkW4aSWvo
Gustatory

172. (Taste)
미각

173. Designing Realistic Experience 한국방송공학회 실감 UX/UI
Nikkei Business Publications, Inc.

174. Designing Realistic Experience 한국방송공학회 실감 UX/UI
http://youtu.be/1dgLEDdFddk
Arrival of a Train at La Ciotat
The Lumière Brothers, 1895

175. Designing Realistic Experience 한국방송공학회 실감 UX/UI
http://youtu.be/1dgLEDdFddk
Arrival of a Train at La Ciotat
The Lumière Brothers, 1895

176. Designing Realistic Experience 한국방송공학회 실감 UX/UI
Visibility
Time
Technology Trigger
Peak of Inflated Expectations
Trough of disillusionment
Slope of Enlightenment
Plateau of Productivity

177. Designing Realistic Experience 한국방송공학회 실감 UX/UI
Visibility
Time
Technology Trigger
Peak of Inflated Expectations
Trough of disillusionment
Slope of Enlightenment
Plateau of Productivity
Technology
WoW Effect
Design

178. Designing Realistic Experience 한국방송공학회 실감 UX/UI
Time
Type
Technology
WoW Effect
Design
Tactile
촉각
Auditory
청각
Olfactory
후각
Gustatory
미각
Visual
시각
Now

179. 멘탈모델은 디자이너의 멘탈모델을 기초로 어떻게 시스템이
디자인되고 실행되었는가를 설명하기 위해 사용되어 졌고, 사
용자는 시스템과의 상호작용을 통해 시스템의 작동방식을 사
용자의 멘탈모델로 만든다.
결국, 디자이너의 멘탈 모델은 시스템을 통해서 사용자에게
전달된다.
Don

180. Norman

181. ,

182. The

183. Design

184. of

185. Everyday

186. Things
Mental Model

187. Designing Realistic Experience 한국방송공학회 실감 UX/UI
Figure 1 (adapted from Norman (1988) p. 16): The problem of ensuring that the user's mental model corresponds to the designer's model arises because
the designer does not talk directly with the user. The designer can only talk to the user through the system image - the designer's materialised mental
model. The system image is, like a text, open to interpretation
Designer
User’s
Mental Model
Designer’s
Mental Model
User

188. Designing Realistic Experience 한국방송공학회 실감 UX/UI
Real Experience
Life
Digital Experience
Mobile, Tablet, TV, Movie, HMD, VR, AR
User’s
Mental Model
User
Designer’s
Mental Model

189. Designing Realistic Experience 한국방송공학회 실감 UX/UI
“Natural User Interface are not Natural”
Donald Noman, Interactions, volume 17, issue 3.

190. Designing Realistic Experience 한국방송공학회 실감 UX/UI
Leap Motion

191. Designing Realistic Experience 한국방송공학회 실감 UX/UI
도구(

192. Interface)에

193. 따라

194. 사용자의

195. 사고방식과

196. 행동을

197. 결정

198. 짓는다.
“우리가

199. 도구를

200. 만들어

201. 내지만

202. 그

203. 후엔

204. 도구가

205. 우리를

206. 만든다.”
마샬 맥루한 (1911-1980, 미디어의 이해 )

207. 감사합니다.
www.seokhouse.com
www.facebook.com/seokTrendWatching
Designing

208. Realistic

209. Experience
seokjihwan.kim@lge.com