Drama & UI/UX ;Dramafication by Billy ;Dragrammatology by Billy #1. 행동패턴(behavior pattern)을 읽어야 한다! #2. 행동의 변화(behavior change)에는 특별한 스킬이 필요하다! #3. 지속가능성 (sustainable behavior change)에는 신의 한 수가 필요하다! #4. 혁신적 통찰은 시인의 능력이 필요하다! #5. 신뢰 디자인은 UX의 핵심으로 부상하였다! #6. 과도한 정보와 관계는 회피하게 만드는 주요한 원인이다! #7. 혁신을 하고 싶다면, 기존의 UI/UX 문법을 파괴하라! #8. 효율과 효과(UI)를 버리고, 마법(UX)을 채택하라! #9. ‘로직’을 버리고 ‘우연’과 ‘착각’을 시스템의 원리로 적용해라! #10. 이미지의 힘, 깨달음의 힘, 캐릭터의 힘, 콘텐츠의 힘

1. Drama & UI/UX
;Dramafication by Billy
;Dragrammatology by Billy
성균관대학교 일반대학원 휴먼ICT융합학과
최병호 교수(산학협력중점)
Email: BillyChoi@Gmail.com
Twitter/Facebook: ILOVEHCI
Blog: http://blog.naver.com/soularchitec , http://humanictconvergence.blogspot.kr/
Wednesday, June 3, 2015

2. 왜드라마처럼못만드는가?
드라마같은제품,
드라마같은S/W,
드라마같은서비스,
드라마같은UI/UX를
디자인하는위해서는
무엇을어떻게해야하는가?
Dramafication!
Dragrammatology!
1

3. Table of Contents
• #1. 행동패턴(behavior pattern)을 읽어야 한다!
• #2. 행동의 변화(behavior change)에는 특별한 스킬이 필요하다!
• #3. 지속가능성 (sustainable behavior change)에는 신의 한 수가
필요하다!
• #4. 혁신적 통찰은 시인의 능력이 필요하다!
• #5. 신뢰 디자인은 UX의 핵심으로 부상하였다!
• #6. 과도한 정보와 관계는 회피하게 만드는 주요한 원인이다!
• #7. 혁신을 하고 싶다면, 기존의 UI/UX 문법을 파괴하라!
• #8. 효율과 효과(UI)를 버리고, 마법(UX)을 채택하라!
• #9. ‘로직’을 버리고 ‘우연’과 ‘착각’을 시스템의 원리로 적용해라!
• #10. 이미지의 힘, 깨달음의 힘, 캐릭터의 힘, 콘텐츠의 힘
2

4. #1. 행동패턴(BEHAVIOR
PATTERN)을 읽어야 한다!
3

5. #1-1
4

6. 소스: 드라마 <오렌지 마말레이드>
5

7. 소스: 드라마 <오렌지 마말레이드>
6

8. 소스: 드라마 <오렌지 마말레이드>
7

9. 소스: 드라마 <오렌지 마말레이드>
8

10. 소스: 드라마 <오렌지 마말레이드>
9

11. 소스: 드라마 <오렌지 마말레이드>
10

12. 소스: 드라마 <오렌지 마말레이드>
11

13. 소스: 드라마 <오렌지 마말레이드>
12

14. 소스: 드라마 <오렌지 마말레이드>
13

15. 소스: 드라마 <오렌지 마말레이드>
14

16. #1-2
15

17. 소스: 드라마 <오렌지 마말레이드>
16

18. 소스: 드라마 <오렌지 마말레이드>
17

19. 소스: 드라마 <오렌지 마말레이드>
18

20. 소스: 드라마 <오렌지 마말레이드>
19

21. 소스: 드라마 <오렌지 마말레이드>
20

22. #1-3
21

23. 22
소스: 드라마 <나쁜 녀석들>

24. 23
소스: 드라마 <나쁜 녀석들>

25. 24
소스: 드라마 <나쁜 녀석들>

26. 25
소스: 드라마 <나쁜 녀석들>

27. 26
소스: 드라마 <나쁜 녀석들>

28. 27
소스: 드라마 <나쁜 녀석들>

29. 28
소스: 드라마 <나쁜 녀석들>

30. 29
소스: 드라마 <나쁜 녀석들>

31. 30
소스: 드라마 <나쁜 녀석들>

32. #1-4
31

33. 32
소스: 드라마 <나쁜 녀석들>

34. 33
소스: 드라마 <나쁜 녀석들>

35. 34
소스: 드라마 <나쁜 녀석들>

36. 35
소스: 드라마 <나쁜 녀석들>

37. 36
소스: 드라마 <나쁜 녀석들>

38. 37
소스: 드라마 <나쁜 녀석들>

39. 38
소스: 드라마 <나쁜 녀석들>

40. 39
소스: 드라마 <나쁜 녀석들>

41. 40
소스: 드라마 <나쁜 녀석들>

42. #1-5
41

43. 42
소스: 드라마 <나쁜 녀석들>

44. 43
소스: 드라마 <나쁜 녀석들>

45. 44
소스: 드라마 <나쁜 녀석들>

46. 45
소스: 드라마 <나쁜 녀석들>

47. 46
소스: 드라마 <나쁜 녀석들>

48. #1-6
47

49. 48
소스: 드라마 <닥터 프로스트>

50. 49
소스: 드라마 <닥터 프로스트>

51. 50
소스: 드라마 <닥터 프로스트>

52. 51
소스: 드라마 <닥터 프로스트>

53. #1-7
52

54. 53
소스: 드라마 <닥터 프로스트>

55. 54
소스: 드라마 <닥터 프로스트>

56. 55
소스: 드라마 <닥터 프로스트>

57. 56
소스: 드라마 <닥터 프로스트>

58. 57
소스: 드라마 <닥터 프로스트>

59. 58
소스: 드라마 <닥터 프로스트>

60. #1. 행동패턴(behavior pattern)을
읽어야 한다!
• 시선의 패턴: 방향성, 시간성(고정시간),
통제불가능성
• 거리의 패턴: 초기 고정 반경, 거리의 소멸 추구
• 반복의 패턴: 초기 특정 주기, 가속화 추구
• 흔적의 패턴: 일상적이지 않은 흔적, 심리부검
• 동선의 패턴: 데이터 기반 패턴 분석, 롤플레잉
59

61. #2. 행동의 변화(BEHAVIOR
CHANGE)에는 특별한 스킬이 필요하다!
60

62. #2-1
61

63. 소스: 드라마 <오렌지 마말레이드>
62

64. 소스: 드라마 <오렌지 마말레이드>
63

65. 소스: 드라마 <오렌지 마말레이드>
64

66. 소스: 드라마 <오렌지 마말레이드>
65

67. 소스: 드라마 <오렌지 마말레이드>
66

68. 소스: 드라마 <오렌지 마말레이드>
67

69. 소스: 드라마 <오렌지 마말레이드>
68

70. 소스: 드라마 <오렌지 마말레이드>
69

71. 소스: 드라마 <오렌지 마말레이드>
70

72. #2-2
71

73. 72
소스: 드라마 <후아유 2015>

74. 73
소스: 드라마 <후아유 2015>

75. 74
소스: 드라마 <후아유 2015>

76. 75
소스: 드라마 <후아유 2015>

77. 76
소스: 드라마 <후아유 2015>

78. 77
소스: 드라마 <후아유 2015>

79. 78
소스: 드라마 <후아유 2015>

80. 79
소스: 드라마 <후아유 2015>

81. 80
소스: 드라마 <후아유 2015>

82. 81
소스: 드라마 <후아유 2015>

83. 82
소스: 드라마 <후아유 2015>

84. 83
소스: 드라마 <후아유 2015>

85. 84
소스: 드라마 <후아유 2015>

86. 85
소스: 드라마 <후아유 2015>

87. #2-3
86

88. 소스: 드라마 <오렌지 마말레이드>
87

89. 소스: 드라마 <오렌지 마말레이드>
88

90. 소스: 드라마 <오렌지 마말레이드>
89

91. 소스: 드라마 <오렌지 마말레이드>
90

92. 소스: 드라마 <오렌지 마말레이드>
91

93. 소스: 드라마 <오렌지 마말레이드>
92

94. 소스: 드라마 <오렌지 마말레이드>
93

95. 소스: 드라마 <오렌지 마말레이드>
94

96. 소스: 드라마 <오렌지 마말레이드>
95

97. 소스: 드라마 <오렌지 마말레이드>
96

98. 소스: 드라마 <오렌지 마말레이드>
97

99. #2-4
98

100. 소스: 드라마 <오렌지 마말레이드>
99

101. 소스: 드라마 <오렌지 마말레이드>
100

102. 소스: 드라마 <오렌지 마말레이드>
101

103. 소스: 드라마 <오렌지 마말레이드>
102

104. 소스: 드라마 <오렌지 마말레이드>
103

105. 소스: 드라마 <오렌지 마말레이드>
104

106. 소스: 드라마 <오렌지 마말레이드>
105

107. 소스: 드라마 <오렌지 마말레이드>
106

108. 소스: 드라마 <오렌지 마말레이드>
107

109. 소스: 드라마 <오렌지 마말레이드>
108

110. 소스: 드라마 <오렌지 마말레이드>
109

111. 소스: 드라마 <오렌지 마말레이드>
110

112. 소스: 드라마 <오렌지 마말레이드>
111

113. 소스: 드라마 <오렌지 마말레이드>
112

114. 소스: 드라마 <오렌지 마말레이드>
113

115. 소스: 드라마 <오렌지 마말레이드>
114

116. #2. 행동의 변화(behavior
change)에는 특별한 스킬이 필요하다!
• 스토리텔링: 전설, Unfocuing
• Media의 환경적 역할
• Step by step: Targeting, Triggers, Deficiency
(결핍)
• 그가 거기 있으니까
• 보상
115

117. #3. 지속가능성
(SUSTAINABLE BEHAVIOR
CHANGE)에는 신의 한 수가 필요하다!
116

118. #3-1
117

119. 118
소스: 드라마 <복면검사>

120. 119
소스: 드라마 <복면검사>

121. 120
소스: 드라마 <복면검사>

122. 121
소스: 드라마 <복면검사>

123. 122
소스: 드라마 <복면검사>

124. 123
소스: 드라마 <복면검사>

125. 124
소스: 드라마 <복면검사>

126. 125
소스: 드라마 <복면검사>

127. 126
소스: 드라마 <복면검사>

128. 127
소스: 드라마 <복면검사>

129. 128
소스: 드라마 <복면검사>

130. 129
소스: 드라마 <복면검사>

131. 130
소스: 드라마 <복면검사>

132. 131
소스: 드라마 <복면검사>

133. 132
소스: 드라마 <복면검사>

134. 133
소스: 드라마 <복면검사>

135. 134
소스: 드라마 <복면검사>

136. 135
소스: 드라마 <복면검사>

137. 136
소스: 드라마 <복면검사>

138. 137
소스: 드라마 <복면검사>

139. 138
소스: 드라마 <복면검사>

140. 139
소스: 드라마 <복면검사>

141. #3-2
140

142. 소스: 드라마 <오렌지 마말레이드>
141

143. 소스: 드라마 <오렌지 마말레이드>
142

144. 소스: 드라마 <오렌지 마말레이드>
143

145. 소스: 드라마 <오렌지 마말레이드>
144

146. 소스: 드라마 <오렌지 마말레이드>
145

147. 소스: 드라마 <오렌지 마말레이드>
146

148. #3-2
147

149. 소스: 드라마 <오렌지 마말레이드>
148

150. 소스: 드라마 <오렌지 마말레이드>
149

151. 소스: 드라마 <오렌지 마말레이드>
150

152. 소스: 드라마 <오렌지 마말레이드>
151

153. #3-3
152

154. 153
소스: 드라마 <오렌지 마말레이드>

155. 154
소스: 드라마 <오렌지 마말레이드>

156. 155
소스: 드라마 <오렌지 마말레이드>

157. 156
소스: 드라마 <오렌지 마말레이드>

158. 157
소스: 드라마 <오렌지 마말레이드>

159. #3. 지속가능성 (sustainable behavior
change)에는 신의 한 수가 필요하다!
• 예측 불가능성: 시기, 장소, 대상, 경험,
불가항력
• 우연성
• 파괴성
• Social Network에서 ‘내일’을 팔아라!; 내일이
궁금하다!
158

160. #4. 혁신적 통찰은 시인의 능력이
필요하다!
159

161. 160
소스: 드라마 <후아유 2015>

162. 161
소스: 드라마 <후아유 2015>

163. 162
소스: 드라마 <후아유 2015>

164. 163
소스: 드라마 <후아유 2015>

165. 164
소스: 드라마 <후아유 2015>

166. 165
소스: 드라마 <후아유 2015>

167. 166
소스: 드라마 <후아유 2015>

168. 167
소스: 드라마 <후아유 2015>

169. 168
소스: 드라마 <후아유 2015>

170. 169
소스: 드라마 <후아유 2015>

171. 170
소스: 드라마 <후아유 2015>

172. #4. 혁신적 통찰은 시인의 능력이
필요하다!
• 2개 이상의 개연성이 없을 것 같은 사물 또는
사건의 연결: 고정관념의 파괴, 상식의 부정
• 질문의 질문, 장벽 없는 호기심 천국
171

173. #5. 신뢰 디자인은 UX의 핵심으로
부상하였다!
172

174. 173
소스: 드라마 <후아유 2015>

175. 174
소스: 드라마 <후아유 2015>

176. 175
소스: 드라마 <후아유 2015>

177. 176
소스: 드라마 <후아유 2015>

178. 177
소스: 드라마 <후아유 2015>

179. 178
소스: 드라마 <후아유 2015>

180. 179
소스: 드라마 <후아유 2015>

181. 180
소스: 드라마 <후아유 2015>

182. #5. 신뢰 디자인은 UX의 핵심으로
부상하였다!
• 무엇보다 중요한 UX 디자인은 신뢰!
• UI는 신뢰를 가시적으로 제공할 수 있게 하고,
UX는 단계별로 신뢰도를 강화할 수 있도록
유도해야 함
181

183. #6. 과도한 정보와 관계는 회피하게
만드는 주요한 원인이다!
182

184. 183
소스: 드라마 <후아유 2015>

185. 184
소스: 드라마 <후아유 2015>

186. 185
소스: 드라마 <후아유 2015>

187. 186
소스: 드라마 <후아유 2015>

188. #6. 과도한 정보와 관계는 회피하게
만드는 주요한 원인이다!
• 다다익선은 더 이상 ‘선’이 아니다. 뇌가
회피하게 만드는 주요한 원인을 제공한다.
• 제약이 전략이다. 결핍이 전술이다.
187

189. #7. 혁신을 하고 싶다면, 기존의
UI/UX 문법을 파괴하라!
188

190. 189
소스: 드라마 <실종 느와르 M>

191. 190
소스: 드라마 <실종 느와르 M>

192. 191
소스: 드라마 <실종 느와르 M>

193. #7. 혁신을 하고 싶다면, 기존의 UI/UX
문법을 파괴하라!
• 기존 프레임의 창조적 파괴; 인지 부조화
• 라이프사이클에서 ‘소멸’에서 ‘새로운
시작’으로 재도약
192

194. #8. 효율과 효과(UI)를 버리고,
마법(UX)을 채택하라!
193

195. #8-1
194

196. 195
소스: 드라마 <가면>

197. 196
소스: 드라마 <가면>

198. 197
소스: 드라마 <가면>

199. 198
소스: 드라마 <가면>

200. 199
소스: 드라마 <가면>

201. 200
소스: 드라마 <가면>

202. 201
소스: 드라마 <가면>

203. 202
소스: 드라마 <가면>

204. 203
소스: 드라마 <가면>

205. 204
소스: 드라마 <가면>

206. 205
소스: 드라마 <가면>

207. 206
소스: 드라마 <가면>

208. 207
소스: 드라마 <가면>

209. 208
소스: 드라마 <가면>

210. 209
소스: 드라마 <가면>

211. 210
소스: 드라마 <가면>

212. 211
소스: 드라마 <가면>

213. #8-2
212

214. 213
소스: 드라마 <가면>

215. 214
소스: 드라마 <가면>

216. 215
소스: 드라마 <가면>

217. 216
소스: 드라마 <가면>

218. 217
소스: 드라마 <가면>

219. 218
소스: 드라마 <가면>

220. 219
소스: 드라마 <가면>

221. 220
소스: 드라마 <가면>

222. 221
소스: 드라마 <가면>

223. #8-3
222

224. 223
소스: 드라마 <가면>

225. 224
소스: 드라마 <가면>

226. 225
소스: 드라마 <가면>

227. 226
소스: 드라마 <가면>

228. 227
소스: 드라마 <가면>

229. 228
소스: 드라마 <가면>

230. #8-4
229

231. 230
소스: 드라마 <가면>

232. 231
소스: 드라마 <가면>

233. 232
소스: 드라마 <가면>

234. 233
소스: 드라마 <가면>

235. 234
소스: 드라마 <가면>

236. #8-5
235

237. 소스: 드라마 <오렌지 마말레이드>
236

238. 소스: 드라마 <오렌지 마말레이드>
237

239. 소스: 드라마 <오렌지 마말레이드>
238

240. 소스: 드라마 <오렌지 마말레이드>
239

241. 소스: 드라마 <오렌지 마말레이드>
240

242. 소스: 드라마 <오렌지 마말레이드>
241

243. 소스: 드라마 <오렌지 마말레이드>
242

244. 소스: 드라마 <오렌지 마말레이드>
243

245. 소스: 드라마 <오렌지 마말레이드>
244

246. 소스: 드라마 <오렌지 마말레이드>
245

247. 소스: 드라마 <오렌지 마말레이드>
246

248. 소스: 드라마 <오렌지 마말레이드>
247

249. 소스: 드라마 <오렌지 마말레이드>
248

250. 소스: 드라마 <오렌지 마말레이드>
249

251. 소스: 드라마 <오렌지 마말레이드>
250

252. 소스: 드라마 <오렌지 마말레이드>
251

253. 소스: 드라마 <오렌지 마말레이드>
252

254. 소스: 드라마 <오렌지 마말레이드>
253

255. 소스: 드라마 <오렌지 마말레이드>
254

256. 소스: 드라마 <오렌지 마말레이드>
255

257. 소스: 드라마 <오렌지 마말레이드>
256

258. 소스: 드라마 <오렌지 마말레이드>
257

259. 소스: 드라마 <오렌지 마말레이드>
258

260. 소스: 드라마 <오렌지 마말레이드>
259

261. 소스: 드라마 <오렌지 마말레이드>
260

262. 소스: 드라마 <오렌지 마말레이드>
261

263. #8. 효율과 효과(UI)를 버리고,
마법(UX)을 채택하라!
• Augment human, Augment real
• ‘악몽’을 ‘팝페라’로 상상케하라.
• ‘나’는 ‘상상의 나’라는 사실을 마법으로
보여준다.
• 보이지 않는 것을 보이게 하고, 보이는 것을
보이지 않게 한다.
262

264. #9. ‘로직’을 버리고 ‘우연’과
‘착각’을 시스템의 원리로 적용해라!
263

265. 264
소스: 드라마 <가면>

266. 265
소스: 드라마 <가면>

267. 266
소스: 드라마 <가면>

268. 267
소스: 드라마 <가면>

269. 268
소스: 드라마 <가면>

270. 269
소스: 드라마 <가면>

271. 270
소스: 드라마 <가면>

272. 271
소스: 드라마 <가면>

273. 272
소스: 드라마 <가면>

274. 273
소스: 드라마 <가면>

275. 274
소스: 드라마 <가면>

276. 275
소스: 드라마 <가면>

277. #9. ‘로직’을 버리고 ‘우연’과 ‘착각’을
시스템의 원리로 적용해라!
• 루만의 시스템 이론
• ‘로직’으로만 사람의 마음은 움직이지 않는다.
‘우연’의 ‘인연’과 ‘환상’의 ‘착각’으로 역사를
만들어지도록 시스템을 구성해야 한다.
276

278. #10. 이미지의 힘, 깨달음의 힘,
캐릭터의 힘, 콘텐츠의 힘
277

279. #10-1. 이미지의 힘
278

280. 279
소스: 드라마 <나쁜 녀석들>

281. 280
소스: 드라마 <나쁜 녀석들>

282. 281
소스: 드라마 <나쁜 녀석들>

283. 282
소스: 드라마 <나쁜 녀석들>

284. 283
소스: 드라마 <나쁜 녀석들>

285. 284
소스: 드라마 <나쁜 녀석들>

286. 285
소스: 드라마 <나쁜 녀석들>

287. #10-2. 깨달음의 힘
286

288. 287
소스: 드라마 <나쁜 녀석들>

289. 288
소스: 드라마 <나쁜 녀석들>

290. 289
소스: 드라마 <나쁜 녀석들>

291. 290
소스: 드라마 <나쁜 녀석들>

292. 291
소스: 드라마 <나쁜 녀석들>

293. 292
소스: 드라마 <나쁜 녀석들>

294. 293
소스: 드라마 <나쁜 녀석들>

295. 294
소스: 드라마 <나쁜 녀석들>

296. #10-3. 캐릭터의 힘
295

297. 296
소스: 드라마 <나쁜 녀석들>

298. 297
소스: 드라마 <나쁜 녀석들>

299. 298
소스: 드라마 <나쁜 녀석들>

300. 299
소스: 드라마 <나쁜 녀석들>

301. 300
소스: 드라마 <나쁜 녀석들>

302. 301
소스: 드라마 <나쁜 녀석들>

303. 302
소스: 드라마 <나쁜 녀석들>

304. 303
소스: 드라마 <나쁜 녀석들>

305. 304
소스: 드라마 <나쁜 녀석들>

306. 305
소스: 드라마 <나쁜 녀석들>

307. #10-4. 콘텐츠의 힘
306

308. 307
소스: 드라마 <후아유 2015>

309. 308
소스: 드라마 <후아유 2015>

310. 309
소스: 드라마 <후아유 2015>

311. 310
소스: 드라마 <후아유 2015>

312. 311
소스: 드라마 <후아유 2015>

313. 312
소스: 드라마 <후아유 2015>

314. 313
소스: 드라마 <후아유 2015>

315. 314
소스: 드라마 <후아유 2015>

316. 315
소스: 드라마 <후아유 2015>

317. 316
소스: 드라마 <후아유 2015>

318. 317
소스: 드라마 <후아유 2015>

319. 318
소스: 드라마 <후아유 2015>

320. 319
소스: 드라마 <후아유 2015>

321. 320
소스: 드라마 <후아유 2015>

322. 321
소스: 드라마 <후아유 2015>

323. #10-5. 콘텐츠의 힘
322

324. 323
소스: 드라마 <후아유 2015>

325. 324
소스: 드라마 <후아유 2015>

326. 325
소스: 드라마 <후아유 2015>

327. 326
소스: 드라마 <후아유 2015>

328. 327
소스: 드라마 <후아유 2015>

329. 328
소스: 드라마 <후아유 2015>

330. 329
소스: 드라마 <후아유 2015>

331. 330
소스: 드라마 <후아유 2015>

332. 331
소스: 드라마 <후아유 2015>

333. 332
소스: 드라마 <후아유 2015>

334. 333
소스: 드라마 <후아유 2015>

335. 334
소스: 드라마 <후아유 2015>

336. 335
소스: 드라마 <후아유 2015>

337. #10-5. 콘텐츠의 힘
336

338. 337
소스: 드라마 <후아유 2015>

339. 338
소스: 드라마 <후아유 2015>

340. 339
소스: 드라마 <후아유 2015>

341. 340
소스: 드라마 <후아유 2015>

342. 341
소스: 드라마 <후아유 2015>

343. 342
소스: 드라마 <후아유 2015>

344. 343
소스: 드라마 <후아유 2015>

345. 344
소스: 드라마 <후아유 2015>

346. 345
소스: 드라마 <후아유 2015>

347. 346
소스: 드라마 <후아유 2015>