-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcategory-design-study-case.html
594 lines (425 loc) · 56.2 KB
/
category-design-study-case.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
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
<!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="위기·성장의 순간, 고객을 잡는 카테고리 디자인. Airbnb, 배달의민족, 쿠팡, 아몬즈 사례 분석 | 매거진 입맛">
<meta property="og:url" content="https://dewberry9.github.io/category-design-study-case">
<meta property="og:type" content="article">
<meta property="og:site_name" content="매거진 입맛">
<meta property="og:description" content="카테고리는 유용한 탐색 도구입니다. 그런데 카테고리가 제품의 위기를 극복하고 성장 기회를 만든다고 한다면 어떤가요? 제품 사례 분석을 통해 알아보겠습니다.">
<meta property="og:image" content='https://res.cloudinary.com/mag-epmat/image/upload/v1655539468/design/2022-06-20-category-design/00_heuwwr.jpg'>
<meta name="by" content="이준환"><meta name="twitter:title" content="위기·성장의 순간, 고객을 잡는 카테고리 디자인. Airbnb, 배달의민족, 쿠팡, 아몬즈 사례 분석 | 매거진 입맛">
<meta name="twitter:description" content="카테고리는 유용한 탐색 도구입니다. 그런데 카테고리가 제품의 위기를 극복하고 성장 기회를 만든다고 한다면 어떤가요? 제품 사례 분석을 통해 알아보겠습니다.">
<meta name="twitter:image" content='https://res.cloudinary.com/mag-epmat/image/upload/v1655539468/design/2022-06-20-category-design/00_heuwwr.jpg'>
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:url" content="https://dewberry9.github.io/category-design-study-case">
<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="위기·성장의 순간, 고객을 잡는 카테고리 디자인. Airbnb, 배달의민족, 쿠팡, 아몬즈 사례 분석 | 매거진 입맛">
<meta name="description" content="카테고리는 유용한 탐색 도구입니다. 그런데 카테고리가 제품의 위기를 극복하고 성장 기회를 만든다고 한다면 어떤가요? 제품 사례 분석을 통해 알아보겠습니다.">
<meta name="author" content="이준환">
<meta name="article:media_name" content="매거진 입맛">
<meta property="article:mobile_url" content="https://dewberry9.github.io/category-design-study-case">
<meta property="article:pc_url" content="https://dewberry9.github.io/category-design-study-case">
<meta property="article:mobile_view_url" content="https://dewberry9.github.io/category-design-study-case">
<meta property="article:pc_view_url" content="https://dewberry9.github.io/category-design-study-case">
<meta property="article:talk_channel_view_url" content="https://dewberry9.github.io/category-design-study-case">
<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="2022-06-19T00:00:00+09:00">
<meta property="article:modified_time" content="2022-06-19T00:00:00+09:00">
<meta property="og:regDate" content="20220619000000">
<script type="application/ld+json">
{
"@context":"https://schema.org/",
"@type":"BlogPosting",
"mainEntityOfPage":{
"@id":"https://dewberry9.github.io/category-design-study-case"
},
"url":"https://dewberry9.github.io/category-design-study-case",
"headline":"위기·성장의 순간, 고객을 잡는 카테고리 디자인. Airbnb, 배달의민족, 쿠팡, 아몬즈 사례 분석 | 매거진 입맛",
"description":"카테고리는 유용한 탐색 도구입니다. 그런데 카테고리가 제품의 위기를 극복하고 성장 기회를 만든다고 한다면 어떤가요? 제품 사례 분석을 통해 알아보겠습니다.",
"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://res.cloudinary.com/mag-epmat/image/upload/v1655539468/design/2022-06-20-category-design/00_heuwwr.jpg"
},
"datePublished":"2022-06-19T00:00:00+09:00",
"dateModified":"2022-06-19T00: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/category-design-study-case">
<link rel="alternate" href="https://dewberry9.github.io/feed.xml" type="application/atom+xml" title="Atom 0.3">
<title>위기·성장의 순간, 고객을 잡는 카테고리 디자인. Airbnb, 배달의민족, 쿠팡, 아몬즈 사례 분석 | 매거진 입맛</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">위기·성장의 순간, 고객을 잡는 카테고리 디자인. Airbnb, 배달의민족, 쿠팡, 아몬즈 사례 분석</h1>
<p>이커머스 사이트 최적화 서비스 Nosto에 따르면, <a title="Nosto - Mastering Ecommerce Merchandising: How to Create Category Page Experiences That Sell More" href="https://www.nosto.com/playbook/merchandising-strategies-ecommerce?refer=mag_epmat" target="_blank" rel="noopener">구매의 70%가 카테고리를 통해 발생</a> 했습니다. 카테고리 페이지는 개별 상품 상세 페이지보다 <a title="Jill Kocher Brown - Scalable Ecommerce SEO for Category Pages" href="https://www.slideshare.net/jillkocher/scalable-ecommerce-seo-for-category-pages-smx-west-2020?refer=mag_epmat" target="_blank" rel="noopener">트래픽이 4배 더 많은 곳</a>이기도 합니다.</p>
<p>카테고리는 유용한 도구입니다. 고객은 카테고리로 제품의 수많은 정보와 기능 가운데 필요한 것을 쉽게 찾을 수 있습니다. 그런데 카테고리의 역할은 거기서 그치지 않습니다. 카테고리는 전환율을 높이고, 비즈니스 확장과 시장 변화로 추가·감소하는 고객을 잡고, 제품 성장 기회를 만듭니다. 이게 어떻게 하면 가능할까요? 실제 사례를 보여드리겠습니다.</p>
<p>이번 글에서는 우선 배경지식으로 카테고리의 종류와 설계 방식을 설명하고, 그다음 아몬즈, 쿠팡, 배달의민족, 에어비앤비(Airbnb)의 사례를 분석해보겠습니다.</p>
<h2 id="수평적-카테고리-vs-수직적-카테고리">수평적 카테고리 vs 수직적 카테고리</h2>
<p class="normal-size"><img src="https://res.cloudinary.com/mag-epmat/image/upload/v1655533540/design/2022-06-20-category-design/01_sq7tze.jpg" alt="Horizontal vs Vertical Categories" title="Horizontal vs Vertical Categories" loading="lazy" /></p>
<p>본격적인 사례 분석에 앞서 배경지식으로 카테고리의 구조에 대해 잠깐 살펴보겠습니다.</p>
<p>탐색과 선택. 고객의 제품 사용법은 2가지뿐입니다. 디테일에 차이가 있을 뿐 어떤 활동도 이 범주를 벗어나지 않습니다. 고객은 니즈를 충족시킬 최선책을 원하고, 이를 위해 여러 선택지를 검토합니다. 디지털 프로덕트는 기술로 막대한 양의 정보를 획득·비교할 수 있게 도와 고객의 탐색과 선택 활동을 지원합니다. 배달 앱으로 수십 여개 음식점의 품목, 가격, 평점을 비교할 수 있습니다. 스트리밍 서비스로 학습, 여가 등 목적에 맞는 콘텐츠를 쉽게 찾아 시청할 수 있습니다. 그러나 단순히 제품이 제공하는 정보와 기능이 많다고 해서 고객의 활동이 순탄해지는 것은 아닙니다. 원하는 결과에 쉽고 빠르게 접근하는 방법도 선택지의 양만큼이나 중요합니다. 여기서 카테고리가 등장합니다. ‘자동차용품은?’ 이쪽. ‘유아용품은?’ 저쪽. 카테고리는 특정 기준으로 묶인 그룹 앞에 고객을 데려다 놓는 방식으로 탐색의 난이도를 낮춥니다. 즉, <strong>카테고리는 항목을 구분·제한하는 탐색 경험</strong>입니다. 일정 기준으로 분리된 카테고리의 요소는 계층을 이룹니다.</p>
<p class="normal-size"><img src="https://res.cloudinary.com/mag-epmat/image/upload/v1655533541/design/2022-06-20-category-design/02_a3mccm.jpg" alt="Toss All Tab" title="Toss All Tab" loading="lazy" /></p>
<p>토스의 ‘전체’ 탭에서는 대출, 결제, 보험, 카드… 무수히 많은 서비스에 한 번의 탭으로 접근할 수 있습니다. 이 서비스는 같은 계층에 있습니다.</p>
<p class="normal-size"><img src="https://res.cloudinary.com/mag-epmat/image/upload/v1655533541/design/2022-06-20-category-design/03_s7w2ee.jpg" alt="29CM Category" title="29CM Category" loading="lazy" /></p>
<p>반면 29CM의 ‘Shop’ 탭에서 ‘홈’, ‘뷰티’를 고르는 카테고리와, 홈 → 가구를 거쳐 ‘침대’, ‘행거’를 선택하는 카테고리는 서로 다른 층에 있습니다.</p>
<p>이처럼 카테고리는 수평적인 것과 수직적인 것으로 구분됩니다. 몇 단계부터 수평이고 수직이고 결정된다는 말이 아니라, 카테고리 형태에 수평적 방향과 수직적 방향이 있다는 이야기입니다.</p>
<p>수평적 카테고리와 수직적 카테고리는 각각의 장단점이 있습니다.</p>
<p><strong>수평적 카테고리</strong></p>
<ul>
<li>단순합니다. 많은 단계를 거칠 필요 없이 비교적 최종 카테고리에 도달하기가 쉽습니다.</li>
<li>카테고리 규모가 크면 하나의 계층에서 주어지는 선택지가 너무 많을 수 있습니다.</li>
</ul>
<p><strong>수직적 카테고리</strong></p>
<ul>
<li>고객이 각 카테고리의 하위 항목을 잘 파악할 수 있다면, 많은 양의 선택지에서 원하는 항목을 빠르게 골라낼 수 있습니다.</li>
<li>복잡합니다. 계층, 곧 분류 기준이 늘어날수록 상위 카테고리의 분류와 하위 카테고리의 분류에 괴리가 생길 수 있습니다. 가령 호신용 스프레이를 생활용품에서 찾아야 하는 경우가 발생합니다.</li>
</ul>
<p>정리하자면, <strong>수평적 카테고리는 다루는 항목이 적을 때, 수직적 카테고리는 상위 단계와 하위 단계의 연관성이 분명할 때 효과적</strong>입니다.</p>
<p>카테고리는 고객의 탐색 활동에 맥락성 있는 방향을 제안합니다. 카테고리가 제품 구조를 반영하기에 가능한 일입니다. 이러한 특성이 있는 카테고리는 퍼널에 부분적인 영향을 주는 것뿐만 아니라, 고객과 시장 상황의 변화로 위기에 빠진 제품이 이를 극복하도록 돕기도 합니다. 카테고리의 영향력이 실제 제품에서 어떤 모습으로 드러나는지, 그 난이도와 규모 순서로 나열한 사례 분석을 통해 알아보겠습니다.</p>
<h2 id="구매-퍼널-전환율을-높이는-카테고리---아몬즈">구매 퍼널 전환율을 높이는 카테고리 - 아몬즈</h2>
<p>아몬즈는 주얼리 플랫폼입니다. 고객은 아몬즈에서 여러 브랜드의 주얼리를 찾을 수 있습니다. 아몬즈는 카테고리 개선으로 <a title="이영석 - 카테고리 UX 개선하기" href="https://brunch.co.kr/@dldudtjr2205/46?refer=mag_epmat" target="_blank" rel="noopener">상품 노출량을 늘리고 구매 전환율을 높였습니다.</a></p>
<p class="normal-size"><img src="https://res.cloudinary.com/mag-epmat/image/upload/v1655533541/design/2022-06-20-category-design/04_ctjmjn.jpg" alt="amondz as-is" title="amondz as-is" loading="lazy" /></p>
<p><strong>문제/기회 : 얕은 카테고리로 경직된 탐색 활동</strong><br />
아몬즈의 기존 카테고리는 ‘귀걸이’, ‘목걸이’, ‘반지’, ‘발찌’ 등의 항목이 포함된 한 계층의 카테고리만으로 구성되어 있었습니다. 간단한 구조지만, 카테고리가 화면 상단에 제한된 탭 UI의 형태로 노출돼 전체 구조를 파악하는데 어려웠습니다. UI가 수평적 카테고리가 지닌 장점을 상쇄하고 있었습니다.</p>
<p>가격과 소재만 선택할 수 있는 필터 역시 단순하기 그지 없었습니다. 아몬즈의 카테고리와 필터는 조작하기는 쉽지만, 고객의 탐색 활동에 도움을 줄 만큼 유의미한 상품 분류를 실현하지 못했습니다. 항목이 고정된 카테고리로는 할인 이벤트 같은 트렌드나, 계절적 요인을 반영한 유연한 탐색 경로를 구현하기도 어려웠습니다.</p>
<p><strong>해결 : 카테고리와 필터의 확장</strong><br />
아몬즈는 3가지 해결책을 제시해 검증했습니다.</p>
<p class="normal-size"><img src="https://res.cloudinary.com/mag-epmat/image/upload/v1655533541/design/2022-06-20-category-design/05_r2dirt.jpg" alt="amondz Category Tab" title="amondz Category Tab" loading="lazy" /></p>
<p>첫째로 기존 상품 탭을 아예 카테고리 탭으로 바꿔, 상단의 제한된 영역에서 표시했던 카테고리를 한눈에 전부 볼 수 있도록 만들었습니다. 고객은 카테고리 전반을 스캔하고 희망 항목에 단번에 접근할 수 있게 되었습니다.</p>
<p>카테고리 탭은 상단부와 하단부로 구분돼, 위쪽은 기존의 고정형 카테고리를 보여주고, 아래에는 신상품 등 제품 전략의 요구에 맞는 카테고리를 유연하게 추가·삭제할 수 있도록 설계했습니다. 고객에게 새로운 가치를 가져다주는 탐색 경로를 쉽게 소개할 수 있게 된 것입니다.</p>
<p class="normal-size"><img src="https://res.cloudinary.com/mag-epmat/image/upload/v1655533541/design/2022-06-20-category-design/06_lhdwai.jpg" alt="amondz Second Category" title="amondz Second Category" loading="lazy" /></p>
<p>2차 카테고리의 추가도 큰 변화입니다. 카테고리의 수직적 확장은 인지·조작의 복잡성을 늘리지만, 한 카테고리에서 취급하는 항목의 개수를 줄여 고객이 원하는 바를 더 쉽게 찾을 수 있도록 도와줍니다. 물론 이렇게 확장된 카테고리가 실효성 있는 기준으로 나뉘었고, 각 카테고리의 규모가 너무 작거나, 반대로 너무 크지 않을 때 통하는 이야기입니다. 아몬즈는 고객 니즈 기반으로 2차 카테고리를 세세하게 분류하고, 이를 복수 선택할 수 있도록 설계해 탐색에 유용한 규모의 검색 결과를 구성할 수 있도록 했습니다.</p>
<p class="normal-size"><img src="https://res.cloudinary.com/mag-epmat/image/upload/v1655533539/design/2022-06-20-category-design/07_nooxre.jpg" alt="amondz Filter" title="amondz Filter" loading="lazy" /></p>
<p>카테고리의 수직적 확장은 고객이 원하는 조건을 더 많이 반영할 수 있지만 그만큼 복잡성이 증가한다는 측면에서 한계가 있습니다. 이때 제품은 고객이 자신의 니즈를 선택적으로 적용할 수 있는 길을 열어 놓습니다. 검색과 필터가 바로 그 길입니다. 우선 카테고리로 큰 줄기를 정하고, 검색과 필터링으로 세밀한 조건을 반영하는 것입니다.</p>
<p>가격과 소재 정도만 고를 수 있었던 아몬즈의 필터도 브랜드, 색상, 모양까지 정할 수 있게 되면서 훨씬 상세해졌습니다.</p>
<p>확장된 카테고리와 필터링 기능으로 탐색 활동 중 원하는 조건을 훨씬 디테일하게 적용할 수 있게 되자, 카테고리를 통한 상품 노출 횟수는 22% 증가했습니다. 자연스레 카테고리를 통한 구매 전환율도 높아졌습니다.</p>
<p>이처럼 <strong>카테고리는 구매 퍼널의 일부로서 제품 전환율에 영향을 미칩니다.</strong></p>
<h2 id="새로운-사용-패턴을-검증하는-카테고리---쿠팡">새로운 사용 패턴을 검증하는 카테고리 - 쿠팡</h2>
<p>쿠팡 로켓프레시는 신선식품과 생필품을 새벽·당일 배송하는, 쿠팡의 장보기 서비스입니다. 쿠팡 로켓프레시의 <a title="Coupang Design, 2020 - 더 좋은 프로덕트를 만들기 위해 잊어야 할 것들" href="https://brunch.co.kr/@coupangdesign/41?refer=mag_epmat" target="_blank" rel="noopener">카테고리 개선</a>은 새로운 사용 패턴을 검증했습니다. 이는 카테고리를 확장하고, 고객의 추가 구매 패턴 구축에 도움을 주었습니다.</p>
<p class="normal-size"><img src="https://res.cloudinary.com/mag-epmat/image/upload/v1655533539/design/2022-06-20-category-design/08_is3rb4.jpg" alt="Coupang Rocketfresh as-is" title="Coupang Rocketfresh as-is" loading="lazy" /></p>
<p><strong>문제 : 카테고리를 통한 탐색 어려운 홈 화면</strong><br />
캐러셀, 배너… 쿠팡 로켓프레시 홈 화면은 각종 프로모션 요소로 가득 차 있습니다. 프로모션 UI는 마침 해당 상품이 필요했던 고객에게는 유용한 단축 탐색 경로를 제공하는 셈이나, 그렇지 않은 고객에게는 방해물일 뿐입니다.
어떻게 하면 양쪽 고객 모두를 만족시킬 수 있을까요?</p>
<p class="normal-size"><img src="https://res.cloudinary.com/mag-epmat/image/upload/v1655533539/design/2022-06-20-category-design/09_aqkbd3.jpg" alt="Coupang Rocketfresh to-be" title="Coupang Rocketfresh to-be" loading="lazy" /></p>
<p><strong>해결 : 카테고리 탭과 큐레이션 위젯의 조합, 마트에서 장을 보는 듯한 탐색 경험</strong><br />
쿠팡의 해법은 홈 화면을 다양한 프로모션을 모아 볼 수 있는 탭으로 포지셔닝하고, ‘과일’, ‘정육’ 등 최상위 카테고리를 같은 위계의 탭으로 배치하는 것이었습니다. 하나의 최상위 카테고리 탭으로 들어오면, 직관적인 이미지와 함께 표시된 2차 카테고리를 선택할 수 있습니다.</p>
<p>각 최상위 카테고리별 탭에서는 관련한 프로모션만 따로 볼 수도 있습니다. 브랜드 필터에 바로 접근할 수 있거나, 그밖에 해당하는 카테고리에 맞는 유용한 필터 옵션을 보여줍니다. 예를 들면 ‘수산/건어물’ 탭에서는 소금 간 유무를 바로 선택할 수 있고, ‘유아식’에서는 시기별 이유식·유아식을 나눠 파악할 수 있는 숏컷을 제공합니다.</p>
<p>고객은 원하는 카테고리만 분리해서 탐색할 수 있으면서, 동시에 관련한 프로모션 혜택과 각 카테고리에 특화된 필터링 기능에 손쉽게 접근할 수 있습니다. 필요한 상품만 정확히 찾아서 구매하는 것이 아닌, 마치 오프라인 마트에서 장을 보듯 둘러보면서 그때그때 떠오르는 니즈를 충족할 수 있는 사용 패턴이 형성된 것입니다.</p>
<p class="normal-size"><img src="https://res.cloudinary.com/mag-epmat/image/upload/v1655533539/design/2022-06-20-category-design/10_prr9cg.jpg" alt="Coupang Rocketfresh Household Goods Category" title="Coupang Rocketfresh Household Goods Category" loading="lazy" /></p>
<p><strong>기회 : 생활용품 카테고리 추가</strong><br />
로켓프레시는 원래 신선식품에 한정된 브랜드였습니다. 그래서 로켓프레시에 ‘생활용품’ 카테고리를 추가하자는 아이디어가 나왔을 때 여러 디자이너가 이에 반대했습니다. 그러나 로켓프레시의 ‘장보기’ 사용 패턴이 생활용품으로의 확장을 가능하게 했습니다. 우유를 사러 마트에 갔다고 해서 우유 하나만 사 오는 경우는 드뭅니다. 고객은 우유를 들고 계산대로 가는 길에서 진열된 상품에 노출됩니다. 이때 고객은 집에 얼마 남지 않은 휴지 등을 떠올립니다. 상품을 보여주는 것으로 잊고 있었던 니즈를 깨운 것입니다. 마찬가지 사용 패턴이 로켓프레시에서도 나타났습니다. 신선식품을 다루는 로켓프레시에서 생활용품을 팔 수 있었던 이유는 여기 있습니다.</p>
<p>생활용품 카테고리의 추가는 쿠팡의 구매 정책과 맞물리면서 시너지를 만들어 내기도 했습니다. 당시 로켓프레시는 합계 15,000원 이상의 신선식품을 구매해야 새벽 배송을 받을 수 있었습니다. 신선식품은 소량을 자주 구매한다는 특성이 있습니다. 15,000원이라는 가격을 신선식품으로만 채우는 일은 은근히 어려운 일이었습니다. 여기에 샴푸, 화장지, 세제처럼 당장의 필요는 없어도 미리 사서 나쁜 것 없는 생활용품이 추가되자, 최소 주문 가능 금액을 쉽게 채울 수 있게 되었습니다.</p>
<p>쿠팡 로켓프레시는 <strong>카테고리 디자인으로 새로운 사용 패턴을 검증해냈고, 여기서 카테고리 확장의 기회를 찾을 수 있었습니다.</strong> 제품 개발 조직이 정의한 제품의 역할은, 카테고리를 통해 고객이 생각한 실제 역할로 바뀌었습니다.</p>
<h2 id="제품-확장의-효과를-극대화하는-카테고리---배달의민족">제품 확장의 효과를 극대화하는 카테고리 - 배달의민족</h2>
<p>고객과 시장의 문제를 계속해서 발굴하고 해결하면서 제품은 끊임없이 변화할 수밖에 없습니다. 디자이너는 이 과정에서 유입된 새로운 고객과 기존에 있던 고객이 모두 잘 쓸 수 있는 제품을 만들기 위해 노력합니다. 이 작업은 대부분 기존 구조를 유지하면서 새 기능을 덧붙이는 방식으로 이뤄집니다.</p>
<p>그런데 이게 불가능한 경우, 지금까지 제품에서 제공했던 기능과 전혀 다른 항목이 등장해 기존 구조를 완전히 바꿔버린다면 어떻게 해야 할까요? 작년 배달의민족은 이 상황에 직면했고, 11년 만에 <a title="우아한Tech - 11년 만의 홈개편 디자인은 어떻게 준비했나" href="https://www.youtube.com/watch?v=M-mj8kT-1h0&list=PLgXGHBqgT2Ttcttvjy5_4GacLPcs6iM-s&index=11" target="_blank" rel="noopener">홈 화면을 개편</a>하게 되었습니다.</p>
<p><strong>문제/기회 : 신규 서비스에 대한 확장성이 떨어지는 홈 화면</strong><br />
배달의민족은 이미 몇 년 전부터 여러 분야로 비즈니스를 확장하고 있었습니다. 예를 들면 장보기 서비스 ‘B마트’, 특정 메뉴나 제품 내에서 쓸 수 있는 상품권을 선물하는 ‘선물하기’, 지역 특산품을 파는 ‘전국별미’, 라이브커머스인 ‘쇼핑라이브’ 등이 있습니다. 하지만 기존의 제품은 새롭게 추가된 제품의 가치를 고객에게 효과적으로 견인하고 있지 못했습니다. 카테고리 중심의 홈 화면 디자인 때문입니다.</p>
<p class="normal-size"><img src="https://res.cloudinary.com/mag-epmat/image/upload/v1655533539/design/2022-06-20-category-design/11_iho2ob.jpg" alt="History of Baemin Home Page" title="History of Baemin Home Page" loading="lazy" /></p>
<p>배달의민족의 홈 화면은 항상 바뀌고 있었습니다. 취급 항목이 늘어나고, 아이콘도 레트로한 배지 느낌의 3D 일러스트로 바뀌었습니다. 그러나 이 모든 요소가 표방하는 바는 항상 같았습니다. ‘한식’, ‘분식’, ‘치킨’… 홈 화면은 음식 카테고리를 모아놓는 화면이었습니다. 배달 음식 시장에서 소비자가 카테고리 중심의 관점으로 접근하는 건, 지역 상가 책자·전단지 시절부터 있었던 전통적 기준이었습니다. 그렇기에 배달의민족뿐만 아니라 요기요, 쿠팡이츠 같은 유사 제품도 모두 카테고리 선택을 탐색 활동의 첫 단추로 삼았습니다. 10년 넘게 시장의 제품이 같은 접근 방식을 취하고 고객이 여기에 적응했기 때문에, 홈 화면 개편은 요원한 일로 여겨졌습니다.</p>
<p>이 상황에서 제품은 커지다 보니 홈 화면의 항목은 일관성을 잃었습니다. 당시 배달의민족 홈 화면에는 ‘피자’, ‘야식’ 등 음식의 분류, ‘프랜차이즈’, ‘브랜드관’ 같은 음식점 브랜드의 분류, ‘배민라이더스’, ‘포장/방문’처럼 배달·수령 방식에 의한 분류처럼 여러 기준으로 나뉜 카테고리가 뒤섞인 채 시각적 톤만 간신히 맞추고 있었습니다.</p>
<p>이대로는 아무리 좋은 신규 기능을 만들어도 홈 화면의 수많은 배지 중 하나가 될 뿐이었습니다. 홈 화면 개편은 피할 수 없는 과제였습니다.</p>
<p class="normal-size"><img src="https://res.cloudinary.com/mag-epmat/image/upload/v1655533539/design/2022-06-20-category-design/12_qwilos.jpg" alt="Baemin to-be" title="Baemin to-be" loading="lazy" /></p>
<p><strong>해결 : 기존 배달 카테고리의 2차 카테고리화, 상위 카테고리 확장</strong><br />
배달의민족은 과감한 해결책을 내놓았습니다. 기존의 최상위 카테고리였던 배달 음식 항목을 새로운 최상위 카테고리인 ‘배달’에 넣어 2차 카테고리로 만들고, ‘배민원’, ‘B마트’ 등 다른 서비스를 ‘배달’과 같은 1차 카테고리로 배치한 것입니다.</p>
<p class="normal-size"><img src="https://res.cloudinary.com/mag-epmat/image/upload/v1655533540/design/2022-06-20-category-design/13_epz7ut.jpg" alt="Baemin Home Page Ideas" title="Baemin Home Page Ideas" loading="lazy" /></p>
<p>이 개편 과정에서 수많은 시안이 시험 되었습니다. 기존 배달 카테고리를 유지하고 상단에 다른 서비스로 연결되는 카드를 배치하거나, 배달 카테고리를 포함한 각 최상위 카테고리를 아코디언 UI로 묶거나, 배달 카테고리로 연결되는 카드와 기타 서비스를 목록으로 표시하는 시안 등이 제시되었습니다. 기존 기능에 어색함 없이 도달할 수 있으면서도 신규 서비스를 쉽게 추가할 수 있는 확장성을 갖춰야 했습니다.</p>
<p>결국 홈 화면은 최상위 카테고리를 그 중요도에 따라 다른 크기의 카드로 배열하고, 기능을 추정할 수 있도록 그래픽·인터랙션 요소를 추가하는 것으로 개편되었습니다. 개편 후 제품에 접속하는 고객에게 안내 콘텐츠를 노출해, 큰 변화에 당황하지 않도록 조치했습니다.</p>
<p>결과적으로 배달의민족의 모든 기능은 적어도 2 뎁스의 퍼널을 갖게 된 셈인데, 많은 고객이 여전히 배달 카테고리만 사용한다는 점을 생각해보면 이들의 경험만 악화됐다고 여길 수도 있습니다. 그러나 대부분의 배달 앱이 구매 퍼널의 첫 단계로 카테고리 선택을 제시하는 만큼, 카테고리 사용에 익숙한 고객이 개편된 홈에서 한 단계의 카테고리를 추가로 거친다고 해서 큰 문제는 생기지 않을 것입니다. 무엇보다 이 개편으로 확보한 새로운 카테고리 계층에 다양한 기능을 효과적으로 추가할 수 있게 되어, 제품의 잠재력이 크게 자랐습니다. 배달의민족에서 <strong>카테고리는 제품 확장의 효과를 극대화</strong>했습니다.</p>
<h2 id="위기의-제품-기회를-잡는-카테고리---에어비앤비">위기의 제품, 기회를 잡는 카테고리 - 에어비앤비</h2>
<p>작년 여행 업계는 힘든 시간을 보냈습니다. 2019년 14억 명이 넘는 세계 관광인구는 2020년 4억 명 이내로 급감했습니다. 코로나19의 1년이 여행 시장의 규모를 30년 전으로 후퇴시켜버린 것입니다. 공유 숙박 플랫폼 에어비앤비도 시장의 위기에서 벗어나지 못했습니다. 2020년 2분기 에어비앤비의 매출은 전년 동기 대비 67% 감소했습니다. 에어비앤비는 그해 5월 전 세계 7,500여 명의 임직원 중 1/4인 1,900명을 해고했습니다.</p>
<p>2년이 지난 지금, 에어비앤비는 15억 1천 달러의 매출과 1억 2백만 건의 예약 수로 역대 기록을 갈아치웠습니다. 단순히 여행 시장의 회복 때문일까요? 아무리 시장 상황이 나아졌다고 해도 이것을 기회로 삼아 성장하는 건 쉬운 일이 아닙니다. 에이비앤비의 부활은, 카테고리를 비롯한 제품 UX의 전반적 개편으로 여행 트렌드의 근본적 변화에 대응한 <a title="에어비앤비 2021 - 에어비앤비 전반에 걸쳐 새롭게 도입된 100개 이상의 기능" href="https://www.airbnb.co.kr/2021?refer=mag_epmat" target="_blank" rel="noopener">에어비앤비의 노력으로 성취한 결과</a>입니다.</p>
<p><strong>문제/기회 : 여행 문화의 변화</strong><br />
코로나19 이전의 여행은 장소와 시기가 비교적 명확했습니다. 그 시기 여행객은 정해진 휴가철에 유명한 관광지로 떠나거나, 비즈니스를 위해 목적지와 일정이 분명한 여행을 했습니다. 에어비앤비를 비롯한 숙소 예약 서비스는 당연히 이 같은 니즈에 맞춰 설계되었습니다.</p>
<p class="normal-size"><img src="https://res.cloudinary.com/mag-epmat/image/upload/v1655533540/design/2022-06-20-category-design/14_yayzp1.jpg" alt="Airbnb as-is" title="Airbnb as-is" loading="lazy" /></p>
<p>지역, 일정, 인원을 선택하고 나면 조건에 맞는 숙소가 나오고, 고객은 맘에 드는 숙소를 찾아 예약합니다. 이 과정에서 가격대나 시설 유무를 가지고 검색 결과를 필터링할 수는 있지만 카테고리가 쓰일 부분은 없습니다.</p>
<p class="normal-size"><img src="https://res.cloudinary.com/mag-epmat/image/upload/v1655533540/design/2022-06-20-category-design/15_hdiufw.jpg" alt="Changes in Travel Trends due to Pandemic" title="Changes in Travel Trends due to Pandemic" loading="lazy" /></p>
<p>펜데믹이 터졌고, 여행의 방식은 바뀌었습니다. 에어비앤비가 파악한 변화는 크게 3가지로 구분됩니다.</p>
<ol>
<li>여행 목적 변화에 따른 여행지의 다변화 : 이제 여행객은 유명한 관광지보다는, 잘 알려지지 않았으나 독특한 국내·근교의 장소를 찾습니다. 인구 저밀도 지역으로 여행 간 에어비앤비 고객은 2018년 전체의 26%였지만, 3년 뒤 35%까지 상승했습니다. 특히 재택근무 방식이 널리 퍼지면서, 여행지에 가서 낮에는 일하고 저녁에는 동네를 둘러보는 등 일과 여행의 경계가 모호한 문화가 생겼습니다.</li>
<li>유연한 장소·일정 선택 : 일과 생활을 양분하지 않는 라이프스타일에서 여행은 휴가보다는 일상적 행위라는 의미가 강해졌습니다. 꼭 그곳이 아니라도, 꼭 그날이 아니라도 괜찮습니다.</li>
<li>장기 일정 : 여행은 관광지를 잠깐 찍고 오는 행위가 아니라, 사는 곳을 잠시 바꾸는 행위가 되었습니다. 일주일, 심지어 한 달 이상의 여행도 비교적 흔해졌습니다. 2021년 1분기 에어비앤비 예약의 24%가 28박 이상의 장기 숙박이었습니다.</li>
</ol>
<p>에어비앤비는 이러한 변화에 어떻게 대응했을까요?</p>
<p class="normal-size"><img src="https://res.cloudinary.com/mag-epmat/image/upload/v1655533540/design/2022-06-20-category-design/16_ib0jdf.jpg" alt="Airbnb as-is" title="Airbnb as-is" loading="lazy" /></p>
<p><strong>해결 : 카테고리를 바탕으로 한 유연한 UX</strong><br />
2021년 5월, 에어비앤비는 대대적인 업데이트를 진행합니다. 핵심은 고객이 지정한 조건에서 ‘최선의 숙소’를 찾았던 기존 방식이, ‘다양한 경험을 유연하게 제안’하는 방식으로 바뀐 것입니다. 이는 다음 3가지 업데이트로 정리됩니다.</p>
<ol>
<li>주말, 일주일 등 유연한 일정으로 예약할 수 있는 숙소를 찾을 수 있습니다.</li>
<li>검색 결과에 적용한 필터가 많을 경우, 일부 조건이 달라도 결과 목록에 노출됩니다.</li>
<li>여러 지역에 산개된 숙소를 ‘섬’, ‘통나무집’, ‘해변 근처’ 등 에어비앤비가 제시한 카테고리별로 모아 탐색할 수 있습니다.</li>
</ol>
<p>유연한 여행 장소 선택 트렌드에 대응하는 마지막 업데이트는, 기존의 숙소 예약 서비스에서 볼 수 없었던 UX라는 점에서 주목할만 합니다. 여행지를 소개하고 해당 지역의 숙소를 알선하는 제품은 여럿 있었습니다. 하지만 숙소를 소개받고 여기서 여행을 시작하는 경험은? 독특합니다. 업데이트로 ‘호숫가’, ‘캠핑장’처럼 주변 환경에 따른 분류, ‘트리하우스’, ‘캐슬’처럼 건물에 따른 분류, ‘섬’, ‘북극’과 같은 지역에 따른 분류까지 다양한 테마의 숙소를 카테고리 형태로 탐색할 수 있게 되었습니다. 이 업데이트는 올해 고도화되면서 ‘에어비앤비 카테고리’라는 이름이 붙었습니다.</p>
<p>시장 변화로 위기를 맞았던 에어비앤비는 고객이 여행지를 선택하는 패턴이 바뀌었다는 점에서 기회를 봤습니다. 에어비앤비는 정확한 일정과 장소를 검색하는 기존 숙소 예약 서비스의 UX에서 벗어나, 카테고리 중심의 숙소 탐색 경험을 설계했습니다. 여행지가 아닌 숙소를 위해 떠나는 여행. 타이어 회사 미쉐린이 1920년대에 미슐랭 스타로 ‘맛있는 요리를 위한 여행’ 프레임을 만든 것만큼이나 획기적인 관점의 전환입니다. 에어비앤비에서 <strong>카테고리는 위기를 딛고 새로운 기회를 검증하는 데 활용</strong>되었습니다.</p>
<h2 id="배운-점-적용해보기">배운 점 적용해보기</h2>
<p>잠깐 지금까지의 내용을 정리하겠습니다.</p>
<p>카테고리의 형태는 수평적인 방향과 수직적인 방향이 있습니다. 수평적 카테고리는 계층이 적어, 비교적 적은 인터렉션으로 최종 카테고리에 도달할 수 있습니다. 그러나 카테고리 규모 자체가 크다면 한 계층에서 주어지는 선택지가 너무 많을 수 있습니다. 수직적 카테고리는 그런 상황에서 유용합니다. 상위 단계와 하위 단계의 연관성이 분명하게 설계되었을 때, 수직적 카테고리를 이용하는 고객은 수많은 선택지 가운데 원하는 항목에 빠르게 접근할 수 있습니다.</p>
<p class="normal-size"><img src="https://res.cloudinary.com/mag-epmat/image/upload/v1655533540/design/2022-06-20-category-design/17_u0fab6.jpg" alt="Case Studies" title="Case Studies" loading="lazy" /></p>
<p>이번 글에서는 4가지 제품의 사례를 분석했습니다.</p>
<ol>
<li>아몬즈 : 상품 카테고리의 수직적 확장으로 구매 퍼널의 입구를 늘렸습니다.</li>
<li>쿠팡 로켓프레시 : 카테고리별로 특화된 화면을 만들어 오프라인 마트와 유사한 ‘장보기’ 경험을 설계했습니다. 덕분에 ‘생활용품’ 등 신규 카테고리가 추가됐을 때 많은 기존 고객을 유입시킬 수 있었습니다.</li>
<li>배달의민족 : 기존 배달 카테고리를 2차 카테고리로 만들어, ‘배민원’, ‘쇼핑라이브’ 등 제품 확장에 유연한 최상위 카테고리를 가진 홈 화면을 만들었습니다.</li>
<li>에어비앤비 : 시장 변화로 인한 위기를, 정확한 일정·장소를 검색하는 기존 숙소 예약 서비스의 UX가 아닌 카테고리 중심의 새로운 숙소 탐색 경험을 구현해 극복했습니다.</li>
</ol>
<p>이렇게 열심히 분석한 래퍼런스, 쓰지 않으면 소용이 없잖아요? 그래서 실제 제품에 적용해보기로 했습니다.</p>
<p class="normal-size"><img src="https://res.cloudinary.com/mag-epmat/image/upload/v1655542129/design/2022-06-20-category-design/18_pil0vm.jpg" alt="Insight Shouk" title="Insight Shouk" loading="lazy" /></p>
<p>제가 최근 런칭해서 운영 중인 <a title="인사이트 요약 커뮤니티 - 슉" href="https://shouk.today?utm_source=mag_epmat&utm_medium=post" target="_blank" rel="noopener">인사이트 요약 커뮤니티 슉</a>입니다. 지금 이 글을 읽고 있는 여러분처럼, 많은 실무자가 똑똑하게 일하기 위해 매일 여러 래퍼런스를 찾아봅니다. 그런데 이러한 인사이트 수집 과정 자체는 얼마나 효율적인 걸까요? 긴 내용의 아티클은 중간중간 건너뛰고, 시간 아끼려고 다른 일 하면서 들은 팟캐스트는 기억도 안 나고, 흥미로운 제목이라 눌러봤는데 별것 없을 때도 있고… 인사이트 수집 과정에서 발생하는 ‘찾기’와 ‘읽기’의 어려움을 슉은 커뮤니티로 해결합니다. 커뮤니티 멤버가 서로 읽고 요약한 인사이트를 공유하는 겁니다.</p>
<p class="normal-size"><img src="https://res.cloudinary.com/mag-epmat/image/upload/v1655533540/design/2022-06-20-category-design/19_b9v4ry.jpg" alt="Structure of Shouk Insight" title="Structure of Shouk Insight" loading="lazy" /></p>
<p>슉의 콘텐츠 단위인 인사이트는 내용 요약과 멤버 관심의 척도인 ‘흥미로워요’ 투표 수, 그리고 태그로 구성됩니다. 태그는 원본 자료의 언어와 형태, 주제를 키워드 형식으로 표현합니다.</p>
<p class="normal-size"><img src="https://res.cloudinary.com/mag-epmat/image/upload/v1655533540/design/2022-06-20-category-design/20_xicjex.jpg" alt="Difficulty in Applying a Fixed Category Structure" title="Difficulty in Applying a Fixed Category Structure" loading="lazy" /></p>
<p><strong>문제/기회 : 고정 카테고리를 통한 분류 어려운 콘텐츠 체계</strong><br />
슉에는 별도의 카테고리가 없이 태그로만 인사이트를 탐색할 수 있도록 설계되었습니다. 찾는 인사이트의 종류는 사람마다, 상황마다 다르기에, 특정 기준을 카테고리로 강제하면 불편하기 때문입니다. 예를 들어 ‘아티클’, ‘팟캐스트’, ‘카드 뉴스’ 등 원문 콘텐츠의 형식별로 카테고리를 나눈다면, ‘설문 조사’, ‘실험·연구 결과’처럼 정량적 지표가 포함된 인사이트를 찾는 상황에는 적합하지 않을 것입니다. 이 모든 상황에 대응하는 카테고리를 개설한다면, 앞서 설명한 수평적 카테고리의 문제가 발생합니다.</p>
<p>하지만 위의 제품 사례를 보면 알 수 있듯, 카테고리를 이용한 탐색 활동에는 분명한 이점이 있습니다. 그래서 태그 검색 기능을 이용해 사용자가 직접 수평·수직적 카테고리 탐색 경험을 만들 수 있도록 해보기로 했습니다.</p>
<p class="normal-size"><img src="https://res.cloudinary.com/mag-epmat/image/upload/v1655533540/design/2022-06-20-category-design/21_bg1t4l.jpg" alt="Shouk Tag Search" title="Shouk Tag Search" loading="lazy" /></p>
<p><strong>해결 : 태그 검색 기능을 활용한 유동적 카테고리 탐색 경험</strong><br />
태그 검색바를 누르면 등록된 태그를 검색해 ‘제한’ 조건과 ‘확장’ 조건으로 설정할 수 있는 UI가 전개됩니다.</p>
<ul>
<li>제한 조건 : 검색 결과를 제한하는 조건입니다. 해당하는 태그 전부를 포함하는 인사이트를 찾습니다. 논리 연산자의 AND와 같습니다.</li>
<li>확장 조건 : 검색 결과를 확장하는 조건입니다. 해당하는 태그 중 하나라도 포함하는 인사이트를 찾습니다. 논리 연산자의 OR과 같습니다.</li>
</ul>
<p class="normal-size"><img src="https://res.cloudinary.com/mag-epmat/image/upload/v1655533540/design/2022-06-20-category-design/22_jwvxuh.jpg" alt="Shouk Tag Search Experience Like Category" title="Shouk Tag Search Experience Like Category" loading="lazy" /></p>
<p>제한 조건은 수직적 카테고리로, 확장 조건은 수평적 카테고리로 기능합니다. ‘실험·연구 결과’를 제한 조건으로 두고 ‘마케팅’과 ‘전환율’을 확장 조건으로 둔 경우를 생각해봅시다. 이는 ‘실험·연구 결과 → 마케팅’과 ‘실험·연구 결과 → 전환율’ 순서로 관계한 수직적 카테고리 2개의 결과를 합한 것과 동일한 결과를 만듭니다.</p>
<p>슉 사용자는 태그를 조합하면서 수천 가지 카테고리 탐색 경험을 직접 만들 수 있는 겁니다. 확장성 있는 구조가 완성되었으니 남은 일은 데이터를 보면서 사용자의 카테고리 구성 경험(태그 검색)을 도와줄 지원 요소만 고안하면 됩니다.</p>
<p>이상의 기능은 <a title="인사이트 요약 커뮤니티 - 슉" href="https://shouk.today?utm_source=mag_epmat&utm_medium=post" target="_blank" rel="noopener">슉</a>에서 직접 써볼 수 있습니다.</p>
<p>이번 글에서는 카테고리의 두 가지 형태와, 아몬즈·쿠팡·배달의민족·에어비앤비가 카테고리 디자인으로 문제를 해결한 사례를 살펴봤습니다. 끝으로 조사를 통해 얻은 인사이트를 실제 제품 개발에 적용해봤습니다.</p>
<p>이 글이 여러분의 고민에 조금이나마 도움이 되었다면 좋겠습니다.</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="9월 5주차 주간 프로덕트 이슈 - 게티이미지의 AI 생성 콘텐츠 공유 금지" href="/product-issue/2022-09-5th" class="post-list-item rise-target sequential-rise-target">
<div class="post-thumbnail">
<div class="img-source" style="background-image: url('https://res.cloudinary.com/mag-epmat/image/upload/v1664019914/wpi/2022-09-26/00_gyrpnx.jpg')"></div>
</div>
<div class="post-description">
<div class="post-intro">
<h3>9월 5주차 주간 프로덕트 이슈 - 게티이미지의 AI 생성 콘텐츠 공유 금지</h3>
<p class="post-excerpt">공원으로 나간 배달의민족 배달 로봇, 스포티파이 오디오북 런칭, SNS의 3가지 트렌드, '린 스타트업'이 '스타트업'에 맞지 않은 이유…. 업계 소식과 인사이트.</p>
</div>
</div>
</a>
<a title="마케팅 채널 적합성, 수익성? 먼저 Language/Market Fit부터 검증하세요." href="/start-with-language-market-fit" class="post-list-item rise-target sequential-rise-target">
<div class="post-thumbnail">
<div class="img-source" style="background-image: url('https://res.cloudinary.com/mag-epmat/image/upload/v1663161220/design/2022-09-15-start-with-language-market-fit/00_z_x5t0fl.jpg')"></div>
</div>
<div class="post-description">
<div class="post-intro">
<h3>마케팅 채널 적합성, 수익성? 먼저 Language/Market Fit부터 검증하세요.</h3>
<p class="post-excerpt">비싸진 Product/Market Fit 검증, 대안은 Language/Market Fit입니다. LMF 제품 사례, 장점, 프로세스에 대해 이야기합니다.</p>
</div>
</div>
</a>
<a title="아마존, 쿠팡의 AB 테스트 성공 방정식, 가설의 5층 구조와 설정 프레임워크" href="/conditions-for-an-effective-ab-test-hypothesis" class="post-list-item rise-target sequential-rise-target">
<div class="post-thumbnail">
<div class="img-source" style="background-image: url('https://res.cloudinary.com/mag-epmat/image/upload/v1644125703/design/conditions-for-an-effective-ab-test-hypothesis/00_l1xzea.jpg')"></div>
</div>
<div class="post-description">
<div class="post-intro">
<h3>아마존, 쿠팡의 AB 테스트 성공 방정식, 가설의 5층 구조와 설정 프레임워크</h3>
<p class="post-excerpt">AB 테스트의 영향력과 성공률을 동시에 높이면서, 동시에 실험 문화 확산까지 챙기는 전략이 있습니다. 바로 효과적인 가설이죠. 이런 가설은 어떻게 만들까요?</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="/black-and-white-with-hot-toddy" class="post-list-item rise-target sequential-rise-target">
<div class="post-thumbnail">
<div class="img-source" style="background-image: url('https://res.cloudinary.com/mag-epmat/image/upload/v1644497804/review/black-and-white-with-hot-toddy/00_aotgjl.jpg')"></div>
</div>
<div class="post-description">
<div class="post-intro">
<h3>보통 사람들의 생기, 블랙 앤 화이트와 핫토디</h3>
<p class="post-excerpt">아쿠타가와, 피츠제럴드, 이언 플레밍. 과연 블랙 앤 화이트는 예술가의 주목을 받은 스카치입니다. 블랙 앤 화이트를 쌀쌀한 날씨에 꼭 맞는 칵테일, 핫토디와 함께 마셔봅니다.</p>
</div>
</div>
</a>
<a title="만능 집사 같은 아마레또, 디사론노" href="/disaronno-and-godfather" class="post-list-item rise-target sequential-rise-target">
<div class="post-thumbnail">
<div class="img-source" style="background-image: url('https://res.cloudinary.com/mag-epmat/image/upload/v1659443331/review/disaronno-and-godfather/00_ux9xyc.jpg')"></div>
</div>
<div class="post-description">
<div class="post-intro">
<h3>만능 집사 같은 아마레또, 디사론노</h3>
<p class="post-excerpt">화려한 병 디자인만큼이나 화려한 맛을 자랑하는 디사론노. 이 술을 아몬드 리큐르라고 해야 할까요, 살구씨 리큐르라고 해야 할까요?</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>