-
Notifications
You must be signed in to change notification settings - Fork 0
/
talk-with-microcopy.html
471 lines (342 loc) · 32.6 KB
/
talk-with-microcopy.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
<!DOCTYPE html>
<html lang="ko"><head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-E4YBHG63E3"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-E4YBHG63E3');
</script>
<!-- Meta Tag for Basic Setting -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta property="locale" content="ko_KR">
<meta name="google-site-verification" content="Q1Gkv54gFGh2MxaT7ehKmua6BROtBIJR_ki_z_1_EwE" />
<meta name="naver-site-verification" content="d9a8213816d39cd0b58123c579fb50704ab632a8"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="theme-color" content="#ffffff">
<meta name="mobile-web-app-capable" content="yes">
<meta name="referrer" content="always"><meta property="og:title" content="손톱만한 카피로 할 수 있는 일 | 매거진 입맛">
<meta property="og:url" content="https://dewberry9.github.io/talk-with-microcopy">
<meta property="og:type" content="article">
<meta property="og:site_name" content="매거진 입맛">
<meta property="og:description" content="마이크로카피는 아주 작은 한 덩어리의 텍스트입니다. 이 섬세한 텍스트가 피드백 루프와 Hook 모델에서 어떤 역할을 맡는지 살펴봅니다.">
<meta property="og:image" content='https://dewberry9.github.io/assets/images/11-talk-with-microcopy/04.jpg'>
<meta name="by" content="이준환"><meta name="twitter:title" content="손톱만한 카피로 할 수 있는 일 | 매거진 입맛">
<meta name="twitter:description" content="마이크로카피는 아주 작은 한 덩어리의 텍스트입니다. 이 섬세한 텍스트가 피드백 루프와 Hook 모델에서 어떤 역할을 맡는지 살펴봅니다.">
<meta name="twitter:image" content='https://dewberry9.github.io/assets/images/11-talk-with-microcopy/04.jpg'>
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:url" content="https://dewberry9.github.io/talk-with-microcopy">
<meta name="twitter:site" content="매거진 입맛">
<meta name="twitter:label1" content="Category">
<meta name="twitter:data1" content="">
<meta name="twitter:label2" content="Topic">
<meta name="twitter:data2" content="UX">
<!-- Other Basic Meta Tag -->
<meta name="title" content="손톱만한 카피로 할 수 있는 일 | 매거진 입맛">
<meta name="description" content="마이크로카피는 아주 작은 한 덩어리의 텍스트입니다. 이 섬세한 텍스트가 피드백 루프와 Hook 모델에서 어떤 역할을 맡는지 살펴봅니다.">
<meta name="author" content="이준환">
<meta name="article:media_name" content="매거진 입맛">
<meta property="article:mobile_url" content="https://dewberry9.github.io/talk-with-microcopy">
<meta property="article:pc_url" content="https://dewberry9.github.io/talk-with-microcopy">
<meta property="article:mobile_view_url" content="https://dewberry9.github.io/talk-with-microcopy">
<meta property="article:pc_view_url" content="https://dewberry9.github.io/talk-with-microcopy">
<meta property="article:talk_channel_view_url" content="https://dewberry9.github.io/talk-with-microcopy">
<meta property="article:pc_service_home" content="https://dewberry9.github.io">
<meta property="article:mobile_service_home" content="https://dewberry9.github.io">
<!-- Post Date Tag -->
<meta property="article:published_time" content="2018-10-09T00:00:00+09:00">
<meta property="article:modified_time" content="2018-10-09T00:00:00+09:00">
<meta property="og:regDate" content="20181009000000">
<script type="application/ld+json">
{
"@context":"https://schema.org/",
"@type":"BlogPosting",
"mainEntityOfPage":{
"@id":"https://dewberry9.github.io/talk-with-microcopy"
},
"url":"https://dewberry9.github.io/talk-with-microcopy",
"headline":"손톱만한 카피로 할 수 있는 일 | 매거진 입맛",
"description":"마이크로카피는 아주 작은 한 덩어리의 텍스트입니다. 이 섬세한 텍스트가 피드백 루프와 Hook 모델에서 어떤 역할을 맡는지 살펴봅니다.",
"author":{
"@type":"Person",
"name":"이준환",
"url":"https://dewberry9.github.io",
"email":"[email protected]"
},
"publisher":{
"@type":"Organization",
"name":"매거진 입맛",
"logo":{
"@type":"ImageObject",
"url":"https://dewberry9.github.io/assets/images/logo.png"
},
"url":"https://dewberry9.github.io",
"email":"[email protected]"
},
"image":{
"@type":"ImageObject",
"url":"https://dewberry9.github.io/assets/images/11-talk-with-microcopy/04.jpg"
},
"datePublished":"2018-10-09T00:00:00+09:00",
"dateModified":"2018-10-09T00:00:00+09:00"
}
</script><!-- Fonts -->
<link rel="stylesheet preload prefetch" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/pretendard-dynamic-subset.css" />
<link rel="stylesheet preload prefetch" type='text/css' as="style" crossorigin href='/assets/fonts/stylesheet.css'>
<!-- Favicons -->
<link rel="apple-touch-icon" sizes="180x180" href='/assets/favicons/apple-touch-icon.png'>
<link rel="icon" type="image/png" sizes="32x32" href='/assets/favicons/favicon-32x32.png'>
<link rel="icon" type="image/png" sizes="16x16" href='/assets/favicons/favicon-16x16.png'>
<link rel="mask-icon" href='/assets/favicons/safari-pinned-tab.svg' color="#363059">
<link rel="manifest" href="/manifest.json">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="msapplication-TileColor" content="#da532c">
<link rel="stylesheet preload prefetch" as="style" type="text/css" href='/assets/post.css'>
<link rel="dns-prefetch" href="https://res.cloudinary.com"><!-- ETC -->
<link rel="canonical" href="https://dewberry9.github.io/talk-with-microcopy">
<link rel="alternate" href="https://dewberry9.github.io/feed.xml" type="application/atom+xml" title="Atom 0.3">
<title>손톱만한 카피로 할 수 있는 일 | 매거진 입맛</title>
<script data-ad-client="ca-pub-7525347021497850" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
</head><body>
<header class="top-nav" id="nav">
<nav>
<a href="/" title="Magazine Epmat" class="logo">
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.655 0h-1.31v9.557L6.567 1.28l-1.134.655 4.779 8.277-8.277-4.779-.655 1.134 8.277 4.778H0v1.31h9.557L1.28 17.433l.655 1.134 8.277-4.779-4.779 8.277 1.134.655 4.778-8.277V24h1.31v-9.557l4.778 8.277 1.134-.655-4.779-8.277 8.277 4.779.655-1.134-8.277-4.778H24v-1.31h-9.557l8.277-4.778-.655-1.134-8.277 4.779 4.779-8.277-1.134-.655-4.778 8.277V0Z" fill="#816CF8"/>
</svg>
<span class="nosvg">매거진 입맛</span>
</a>
<div class="dynamic-nav">
<ul>
<li>
<a id="btn-article" href="/article" title="매거진 입맛 • 프로덕트 디자인" class="op75">프로덕트 디자인</a>
</li>
<li>
<a id="btn-review" href="/review" title="매거진 입맛 • 마시다" class="op75">마시다</a>
</li>
<li>
<a id="btn-read" href="/read" title="매거진 입맛 • 읽다" class="op75">읽다</a>
</li>
<!-- <li>
<a href="https://shouk.today?utm_source=mag_epmat" target="_blank" class="op75"><span class="mobile-disappear">인사이트 커뮤니티</span> 슉</a>
</li> -->
</ul>
</div>
</nav>
</header>
<div id="content">
<script>
document.getElementById('nav').classList.add('show')
</script>
<section class="post-content-container space-container">
<div class="space-left">
<div class="post-content-side-container">
<h3 class="post-share-title rise-target">매거진 입맛, 자유롭게 공유하세요.</h3>
<p class="post-share-description rise-target">개인 블로그, 메모, 사내 래퍼런스 공유 채널, 어디든지 좋습니다.
인사이트는
나눌 수록 커지니까요.
</p>
<button id="post-share" class="rise-target copy">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 16 16" fill="currentColor" class="bi bi-subtract"><path d="M0 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v2h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-2H2a2 2 0 0 1-2-2V2zm2-1a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H2z"/></svg>이 글의 공유 링크 복사
</button>
<a rel="noreferrer" class="outerlink-container rise-target" target="_blank" href="https://forms.gle/wvj73q8MWBv2j44h7" title="매거진 입맛 뉴스레터 구독 신청">
<h3>뉴스레터 구독 신청</h3>
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 16 16" fill="currentColor" class="bi bi-arrow-right-short"><path fill-rule="evenodd" d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z"/></svg>
</a>
<a rel="noreferrer" class="outerlink-container rise-target" target="_blank" href="https://forms.gle/26d5yuzwQB3D44zm7" title="콘텐츠 주제 제안">
<h3>콘텐츠 주제 제안</h3>
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 16 16" fill="currentColor" class="bi bi-arrow-right-short"><path fill-rule="evenodd" d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z"/></svg>
</a>
</div>
</div>
<!-- 본문 -->
<div class="space-right">
<div class="post-content">
<h1 class="post-title">손톱만한 카피로 할 수 있는 일</h1>
<p class="full-size"><img src="https://cdn.jsdelivr.net/gh/dewberry9/dewberry9.github.io/assets/images/11-talk-with-microcopy/01.jpg" alt="Guerrilla Copy" title="게릴라 카피" loading="lazy" /></p>
<p class="indent">자그마해서, 아니 자그맣기에 신경 쓰이는 것들이 있습니다. 주름진 셀로판테이프, 새로 난 뾰루지, 잘못 붙인 액정 필름이 거기에 속하죠.😵 마이크로카피(Microcopy)도 그렇습니다.</p>
<p class="indent">인터랙션 디자인은 시간이 흐를수록 그 영향력이 커지고 있습니다. 공공의 영역부터 한 손에 들어오는 휴대기기의 영역까지, 넓은 분야에 걸쳐 그 영향력을 지속해서 키워가고 있습니다. 이런 상황에서 비즈니스를 마주하는 디자이너는 어깨가 무거울 수밖에 없습니다. UX의 시대는 어김없이 이어지고 있고, 더 멋진 비즈니스 경험을 제공하기 위해 수없이 많은 시도가 계속되고 있습니다. 디자인 시스템, 데이터 중심 사고, 그리고 각종 ‘2.0’이 거기에 해당합니다.</p>
<p class="indent">이런 오늘날의 상황은 비대해서 작은 마이크로카피가 들어설 자리가 없는 것처럼 보입니다. 자잘한 텍스트 덩어리에 불과하다고 생각하는 것도 무리는 아닙니다. 이러한 인상과는 달리, 마이크로카피는 디자이너 어깨에 올라간 무거운 짐을 덜 수 있을지도 모릅니다. 디자인 티타임의 열한 번째 이야기는 바로 이것입니다. 작지만 매운 어떤 요소에 관한 생각.</p>
<h2 id="작은-듯-작지-않은">작은 듯 작지 않은</h2>
<blockquote>
<p>아이러니하게도, 가장 작은 카피인 마이크로카피는 가장 큰 영향을 줄 수 있다.</p>
<p>조슈아 포터(Joshua Porter, HubSpot UX 디렉터)</p>
</blockquote>
<p class="indent">유명 UX 디자이너 조슈아 포터는 마이크로카피를 가장 작은 단위의 카피(The Smallest Bits of Copy)로 정의했습니다. 말 그대로 자잘한 모습을 가지고 있습니다. 마이크로카피의 이러한 가벼운 특성은 높은 활용도로 이어졌습니다. 마이크로카피는 버튼, 힌트, 토스트, 배너를 비롯한 CTA(Call To Action)와 확인·에러 메시지, 툴팁 등 갖은 활용처를 지니고 있습니다.</p>
<p class="indent">다양한 곳에서 활용되는 이 작은 카피는 기본적으로 안내문의 역할을 가지고 있습니다. 다음 폼에는 이름을 적어라, 비밀번호를 잊어버렸다면 다음 버튼을 눌러라, 가장 귀여운 고양이 사진을 선택하라…. 무지막지하게 많은 양을 써넣지만 않는다면 마이크로카피의 존재는 친절하게 보일 것입니다. 친절한 서비스를 마다할 사용자는 없습니다. 마이크로카피는 헷갈릴 수 있는 부분을 미리 알려주고, 필요한 정보를 제때 준비합니다. 마이크로카피는 브랜딩 도구로도 유용합니다. 일관된 어조와 문법으로 구성된 마이크로카피는 브랜드의 색을 명료하게 만듭니다. 브랜드의 개성을 사용자에게 강조할 수 있는 겁니다.</p>
<p class="indent">마이크로카피가 가진 수많은 역할 중에서도 이 칼럼에서 이야기하고 싶은 것은 UX 도구로서의 역할입니다. 서비스가 사용자에 의해 동작하는 루프, 피드백 루프와 Hook 모델에서 마이크로카피가 어디서, 어떻게 관여하는지에 관한 것입니다. 인터랙션은 다회용 디자인에서 특히 유용해야 합니다. 이번 칼럼은 이러한 루프 속에서 마이크로카피가 지닌 영향력을 설명하는 글이 될 겁니다.</p>
<h2 id="설계된-몰입-피드백-루프">설계된 몰입, 피드백 루프</h2>
<p class="normal-size"><img src="https://cdn.jsdelivr.net/gh/dewberry9/dewberry9.github.io/assets/images/11-talk-with-microcopy/02.jpg" alt="Infinite Loop of Action and Feedback" title="액션과 피드백의 무한루프" loading="lazy" /></p>
<p class="indent">이메일 앱에서는 메일을 보고, 삭제하고, 작성해야 합니다. 쇼핑 앱에서는 제품을 보고, 선택하고, 구매해야 합니다. 단순하다 못해 당연하게 들리는 ‘역할’은 어떤 서비스가 제공하는 기본적인 기능으로 구성됩니다. 사용자가 서비스를 사용하는 이유입니다. 그렇지만 전부는 아닙니다. 사용자는 본질적인 기능만을 제공하는 서비스는 따르지 않습니다. 어떻게 기능을 써야 하는지 설명해줘야 하고, 적절한 보상을 쥐여줘야 하며, 이 모든 것을 포괄하는 동기도 필요합니다. 까칠한 고양이를 구슬리는 것과 같습니다. 이 과정의 총체를 피드백 루프(Feedback Loop)라고 합니다. 사용자는 피드백 루프를 계속하게 됩니다. 서비스 위에서 무한히 움직이는 이 열차의 승차감을 위해서는 다음과 같은 네 가지 주안점이 있습니다 :</p>
<ol>
<li>맥락(Context)</li>
<li>속도(Speed)</li>
<li>동기(Motivation)</li>
<li>측정가능성(Measurability)</li>
</ol>
<p class="indent">‘당신은 쿠폰 하나를 사용했습니다.’와 ‘당신은 세 개의 50% 할인 쿠폰 중 하나를 사용했습니다.’ 중 어떤 문구가 더 유용할까요? 당연히 후자입니다. 피드백 루프에서 맥락은 단순하게 사용자가 무엇을 했는지 되새김질하도록 접근하는 게 아닙니다. 사용자가 어떤 상황에 놓여있는지, 그 상황에서 무얼 했는지를 기반으로 다음 피드백을 유도하는 것입니다. 여기서 중요한 것이 속도입니다. 쌍곡형 할인(Hyperbolic Discounting)에 따르면 사람은 현재에서 멀어진(더 과거나, 더 미래로 갈수록) 사건은 비교적 덜 중요하게 느끼는 심리가 있습니다. 예를 들어, 한 달 후에 쓸 수 있는 50% 할인 쿠폰과 당장 쓸 수 있는 10% 할인 쿠폰이 제시된다면 당연히 후자를 고를 겁니다.</p>
<p class="indent">동기는 피드백 루프에서 결정적인 영향력을 가지고 있습니다. 가전제품을 원하는 사용자에게 필기구 할인 쿠폰으로 액션을 유도한다면 효과적이지 않을 겁니다. 그리고 무엇보다, 애매하고 추상적인 피드백을 제공해선 안 됩니다. 측정 불가능한 피드백과 측정 가능한 피드백의 차이는 나침반과 GPS의 차이와 같습니다. 사용자가 정확하고 빠르게 액션하려면 필수적입니다.</p>
<h2 id="습관을-만드는-hook-모델">습관을 만드는 Hook 모델</h2>
<p class="normal-size"><img src="https://cdn.jsdelivr.net/gh/dewberry9/dewberry9.github.io/assets/images/11-talk-with-microcopy/03.jpg" alt="Just Hook" title="훅 들어온다" loading="lazy" /></p>
<p class="indent">Hook 모델은 스탠퍼드 경영대학원의 강사 니르 에얄(Nir Eyal)이 Hooked: How to Build Habit-Forming Products라는 저서에서 밝힌 디지털 프로덕트 개발·운용 방법론입니다. 에얄은 설령 최고의 프로덕트가 아니더라도 인기 있는 제품이 될 수 있다며 사용자가 프로덕트를 사용하는 네 단계의 반복 과정을 밝혔습니다 :</p>
<ol>
<li>계기(Trigger)</li>
<li>액션(Action)</li>
<li>보상(Reward)</li>
<li>투자(Investment)</li>
</ol>
<p class="indent">계기는 외부 계기와 내부 계기로 나뉩니다. 외부 계기는 멋진 앱 아이콘, 서비스를 알리는 이메일 송신과 같은 것으로, 사용자가 서비스를 접하게 만드는 과정입니다. 내부 계기는 이미 서비스를 한 번 사용한 사용자가 다시 서비스를 사용하도록 만드는 과정입니다. 에얄은 내부 계기를 주의하라고 경고하는데, 내부 계기가 지루하거나 사용자에게 무가치할 때 사용자는 서비스의 사용을 그만두기 때문입니다.</p>
<p class="indent">계기가 마련되어 모델이 돌아가기 시작하면, 액션이 비집고 들어옵니다. 액션은 사용자가 무의식적으로 서비스를 사용하도록 유도하는 장치입니다. Google의 메인 페이지에 놓여있는 심플한 검색바에 무엇이든 쓰고 싶어지는 건 액션 덕분입니다. 보상은 그렇게 서비스를 사용한 사용자에게 주어지는 당근입니다. 필수적인 요소는 아닙니다. 택시 서비스를 이용하는 사용자는 택시를 타고 싶어 서비스를 사용하는 거지, 택시 이용 후 서비스에서 제공하는 포인트를 위해 사용하는 건 아니니 말입니다. 그렇지만 부가적인 효과를 더하고 싶을 때 유용한 과정인 건 사실입니다. 다음 단계인 투자도 비슷한 맥락에서 효과를 내고 있습니다. 트위터에서 트위터 공식 계정을 팔로우하면 업데이트 소식 등 트위터 사용자에게 쓸만한 정보를 받을 수 있습니다. 이런 식으로 사용자가 예측되는 장점을 취하기 위해 행동하는 것이 사용자의 투자입니다.</p>
<p class="indent">사용자의 투자는 서비스의 피드백을 낳고, 이는 내부 계기가 되어 모델의 지속적인 운용을 유도합니다. 모델에서의 마이크로카피 활용을 제처놓고서도 유용한 방법론입니다. <a title="매거진 입맛 - 알아서 팔리는 제품을 만드는 제품 주도 성장(Product-led Growth) 방법론" href="/introduce-product-led-growth" target="_blank" rel="noopener">제품 주도 성장 전략에 이와 유사한 플라이휠 모델</a>이 있습니다.</p>
<h2 id="마이크로카피-한-꼬집">마이크로카피 한 꼬집</h2>
<p class="normal-size"><img src="https://cdn.jsdelivr.net/gh/dewberry9/dewberry9.github.io/assets/images/11-talk-with-microcopy/04.jpg" alt="Little, but Tough" title="작은 고추가 맵다" loading="lazy" /></p>
<p class="indent">이제 마이크로카피 이야기로 돌아가 봅시다. 가볍고 활용성 좋은 이 카피는 피드백 루프와 Hook 모델 어디에서나 손쉽게 사용할 수 있습니다. 두 방법론의 공통점은 UX를 고려하는 게 본질적으로 사용자와의 소통을 위한 것이라는 사실을 기반으로 하고 있다는 점입니다. 모든 대화가 그렇듯, 잘 듣는 것이 전부가 아니라는 사실 역시 다루고 있습니다. 마이크로카피는 그 부분에서 활용됩니다. 사용자가 잘 듣고 잘 말할 수 있도록 이끌어주는 것입니다.</p>
<p>피드백 루프 속에서 마이크로카피는 서비스와 사용자의 상태를 알리는 역할에 몰두합니다. 마이크로카피는 사용자가 처한 상황을 알리는 것에 그치지 않고, 상황을 창조합니다. 접근성이 좋은 카피를 지속해서 배치해서 맥락을 조립하고 제공합니다. 마이크로카피가 작고 가벼우므로 그 모든 과정은 신속합니다. 이렇게 잘 짜인 마이크로카피는 사용자가 자신의 동기가 어떤 것인지 효과적으로 판단할 수 있게 돕습니다. 측정 가능한 상태를 보고하는 것은 물론입니다. 마이크로카피는 결국 문장입니다. 어떤 일러스트도, 어떤 아이콘도 문장 한 줄보다 직관적일 수는 없습니다.</p>
<p>Hook 모델에서 마이크로카피는 훌륭한 액션입니다. 짧은 단락의 문장보다 잘 읽히는 요소는 인터랙션 디자인에서 찾아보기 힘들 겁니다. 보상과 투자, 그리고 내부 계기에서도 마찬가지입니다. 마이크로카피는 사용자가 서비스를 사용하면서 어떤 이점을 얻었는지, 앞으로 어떻게 활용할 수 있는지를 끊임없이 부각합니다. 결과적으로 사용자는 서비스와 브랜드를 신뢰하게 됩니다.</p>
<h2 id="사소하지만-큰-만족">사소하지만 큰 만족</h2>
<p class="normal-size"><img src="https://cdn.jsdelivr.net/gh/dewberry9/dewberry9.github.io/assets/images/11-talk-with-microcopy/05.jpg" alt="Simple Outside, Complex Inside" title="겉이 단순하다고 속까지 그런 건 아니다" loading="lazy" /></p>
<p class="indent">마이크로카피를 효과적으로 활용하는 일은 쉽지 않습니다. UX라는 것이 본래 신경 써야 할 것이 원체 많습니다. 당장 <a href="https://www.invisionapp.com/inside-design/microcopy-destructive-actions">버튼에 활용되는 마이크로카피</a>부터도 머리를 쥐어짜야 하는 일인데, 피드백 루프와 Hook 모델을 의도적으로 설계하는 건 더 많은 시간과 노력을 요구하는 일이 될 수밖에 없습니다.</p>
<p class="indent">그런데도 마이크로카피를 고려해야 하는 이유는, 그것이 서비스에 인강성과 생동감을 주기 때문입니다. 일란성 쌍둥이도 사소한 부분에서는 상당한 차이를 보입니다. 말투, 걸음걸이, 표정 같은 습관이 거기에 속합니다. 이런 사소한 개성이 쌍둥이를 한 명이 아닌 두 명의 인간으로 만듭니다. 마이크로카피도 같습니다. 브랜딩, 마케팅, 그리고 UX적 측면에서 서비스 고유의 개성을 만들어냅니다. 완성도 높은 마이크로카피는 사용자에게 신선하고 독특한 경험으로 남습니다.</p>
<p class="indent">인간다운 디자인은 거창하게 시작하지 않습니다. 사소한 질문에서 사소한 완성으로 흘러가는 사소한 과정으로 시작될 뿐입니다.</p>
<p class="indent refer">참고자료</p>
<p class="indent"><a href="http://bokardo.com/archives/writing-microcopy/">Joshua Porter - 「Writing Microcopy」</a></p>
<p class="indent"><a href="https://uxd.so/h/%ec%95%a1%ec%85%98%ea%b3%bc-%ed%9a%a8%ea%b3%bc%ec%9d%98-%eb%a9%94%ec%b9%b4%eb%8b%88%ec%a6%98-%ed%9b%8c%eb%a5%ad%ed%95%9c-%ed%94%bc%eb%93%9c%eb%b0%b1-%eb%a3%a8%ed%94%84-%eb%94%94%ec%9e%90%ec%9d%b8/">H HOUR - 액션과 효과의 메카니즘 : 훌륭한 피드백 루프 디자인하기</a></p>
<p class="indent"><a href="https://blog.elpassion.com/build-habit-forming-products-with-hook-model-lean-startup-d6be3e0b911">Aleksandra Bis - 「Build Habit-Forming Products with Hook Model & Lean Startup」</a></p>
<p class="indent"><a href="https://www.invisionapp.com/inside-design/ux-writing-microcopy">Kinneret Yifrah - 「Why we can’t let UX writing steal microcopy’s thunder」</a></p>
</div>
<div class="post-feedback">
<p>이번 글은 어땠나요? 피드백을 나눠주세요.</p>
<a href="https://forms.gle/EMf71iYTEXAbEL868" target="_blank" rel="noopener noreferrer" title="좋았어요 피드백 남기기">👍 좋았어요!</a>
<a href="https://forms.gle/bXJA17sczKPTqtLR7" target="_blank" rel="noopener noreferrer" title="별로였어요 피드백 남기기">👎 별로였어요.</a>
</div>
<!-- <a class="shouk-container" target="_blank" href="https://shouk.today?utm_source=mag_epmat&utm_medium=content_banner">
<div class="container-left">
<h3>적게 읽고 많이 알아가세요.<br>인사이트 요약 커뮤니티 슉</h3>
<p>
팟캐스트, 영문 뉴스레터, 아티클, 1분 내외 분량 단순명료 요약
</p>
</div>
<div class="container-right">
<img src="/assets/images/shouk_banner.png" alt="banner">
</div>
</a> -->
</div>
</section>
<!-- 관련된 포스트 목록 -->
<section class="post-list related-post-list three-row">
<!-- 동일 카테고리 -->
<!-- 2-1 -->
<a title="인간 VS AI 카피라이팅 대결" href="/human-vs-ai-copywriting-competition" class="post-list-item rise-target sequential-rise-target">
<div class="post-thumbnail">
<div class="img-source" style="background-image: url('/assets/images/design/human-vs-ai-copywriting-competition/01.jpg')"></div>
</div>
<div class="post-description">
<div class="post-intro">
<h3>인간 VS AI 카피라이팅 대결</h3>
<p class="post-excerpt">인간의 카피와 GPT-3의 카피라이팅 대결. 누가 승리했을까요?</p>
</div>
</div>
</a>
<a title="사실 우리는 불편하다" href="/next-step-the-cozy" class="post-list-item rise-target sequential-rise-target">
<div class="post-thumbnail">
<div class="img-source" style="background-image: url('/assets/images/12-next-step-the-cozy/01.jpg')"></div>
</div>
<div class="post-description">
<div class="post-intro">
<h3>사실 우리는 불편하다</h3>
<p class="post-excerpt">유용한 디자인, 쉬운 디자인을 겨쳐 오늘날의 디지털 프로덕트가 안고 있는 문제점을 편안한 디자인이 해결책이 됩니다.</p>
</div>
</div>
</a>
<a title="그리드 VS 리스트" href="/grid-list-and-spaghetti" class="post-list-item rise-target sequential-rise-target">
<div class="post-thumbnail">
<div class="img-source" style="background-image: url('/assets/images/10-grid-list-and-spaghetti/01.jpg')"></div>
</div>
<div class="post-description">
<div class="post-intro">
<h3>그리드 VS 리스트</h3>
<p class="post-excerpt">레이아웃은 디자인 분야의 오래된 고민거리입니다. 구성주의와 국제주의 양식의 부흥부터 현대 인터랙션 디자인의 라이벌, 그리드와 리스트에 대해 사유합니다.</p>
</div>
</div>
</a>
<div class="ads-container ads-container-mobile-feedcard rise-target">
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7525347021497850" crossorigin="anonymous"></script>
<ins class="adsbygoogle"
style="display:block"
data-ad-format="fluid"
data-ad-layout-key="-6h+cl+f-1w+d1"
data-ad-client="ca-pub-7525347021497850"
data-ad-slot="9019438848"></ins>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
</div>
<!-- 비동일 카테고리 -->
<a title="" href="" class="post-list-item rise-target sequential-rise-target">
<div class="post-thumbnail">
<div class="img-source" style="background-image: url('')"></div>
</div>
<div class="post-description">
<div class="post-intro">
<h3></h3>
<p class="post-excerpt"></p>
</div>
</div>
</a>
<a title="한참 이른 여름맛. 아드벡 10년" href="/ardbeg-for-the-beginning-of-the-summer" class="post-list-item rise-target sequential-rise-target">
<div class="post-thumbnail">
<div class="img-source" style="background-image: url('/assets/images/daily/01-ardbeg/01.jpg')"></div>
</div>
<div class="post-description">
<div class="post-intro">
<h3>한참 이른 여름맛. 아드벡 10년</h3>
<p class="post-excerpt">피트향 가득, 쾌청한 풍미의 싱글 몰트 아일라 위스키 아드벡 10년 리뷰.</p>
</div>
</div>
</a>
<div class="ads-container ads-container-relative-feedcard rise-target third-position">
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7525347021497850" crossorigin="anonymous"></script>
<ins class="adsbygoogle"
style="display:block"
data-ad-format="fluid"
data-ad-layout-key="-6h+cl+f-1w+d1"
data-ad-client="ca-pub-7525347021497850"
data-ad-slot="9019438848"></ins>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
</div>
</section>
<script src="/assets/post-share.js"></script>
<script>document.getElementById('btn-article').classList.remove('op75');
document.getElementById('btn-article').classList.add('nav-item-act');</script>
</div>
<footer id="footer" class="">
<section>
<div class="link-group"><a id="home-page" href='/' title="Main">매거진 입맛</a></div>
<div class="link-group">
<p class="group-title">Category</p>
<a href="/article" title="매거진 입맛 • 프로덕트 디자인">프로덕트 디자인</a>
<a href="/review" title="매거진 입맛 • 마시다">마시다</a>
<a href="/read" title="매거진 입맛 • 읽다">읽다</a>
</div>
<div class="link-group">
<p class="group-title">Social</p>
<a rel="noreferrer" id="fb-link" href="https://www.facebook.com/magepmat" title="Facebook" target="_blank">Facebook</a>
<a rel="noreferrer" id="insta-link" href="https://www.instagram.com/mag_epmat/" title="Instagram" target="_blank">Instagram</a>
<a rel="noreferrer" id="rss-link" href="/feed.xml" title="RSS" target="_blank">RSS</a>
</div>
<div class="link-group">
<p class="group-title">Contact</p>
<a id="mail-link" href="mailto:[email protected]" title="Email">Email</a>
<a href="https://www.linkedin.com/in/junhwanlee" target="_blank" rel="noopener noreferrer">LinkedIn</a>
<a href="https://www.rocketpunch.com/@junhwanlee" target="_blank" rel="noopener noreferrer">Rocketpunch</a>
</div>
<div class="link-group">
<p class="group-title">Request</p>
<a href="https://forms.gle/wvj73q8MWBv2j44h7" target="_blank" rel="noopener noreferrer">뉴스레터 구독</a>
<a href="https://forms.gle/26d5yuzwQB3D44zm7" target="_blank" rel="noopener noreferrer">주제 제안</a>
</div>
</section>
</footer>
</body>
<script src="/assets/scroll-animation.js"></script>
</html>