-
Notifications
You must be signed in to change notification settings - Fork 0
/
future-of-design-system.html
446 lines (336 loc) · 34.9 KB
/
future-of-design-system.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
<!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/future-of-design-system">
<meta property="og:type" content="article">
<meta property="og:site_name" content="매거진 입맛">
<meta property="og:description" content="앞으로 디자인 시스템이 가야할 길은 어디일까요? 지원 툴, 코딩, 의사결정 민주화... 트렌드 분석을 통해 얻은 3가지 방향성을 설명하겠습니다.">
<meta property="og:image" content='https://dewberry9.github.io/assets/images/design/future-of-design-system/00.jpg'>
<meta name="by" content="이준환"><meta name="twitter:title" content="토스, 에어비앤비로 알아보는 디자인 시스템의 내일 | 매거진 입맛">
<meta name="twitter:description" content="앞으로 디자인 시스템이 가야할 길은 어디일까요? 지원 툴, 코딩, 의사결정 민주화... 트렌드 분석을 통해 얻은 3가지 방향성을 설명하겠습니다.">
<meta name="twitter:image" content='https://dewberry9.github.io/assets/images/design/future-of-design-system/00.jpg'>
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:url" content="https://dewberry9.github.io/future-of-design-system">
<meta name="twitter:site" content="매거진 입맛">
<meta name="twitter:label1" content="Category">
<meta name="twitter:data1" content="">
<!-- Other Basic Meta Tag -->
<meta name="title" content="토스, 에어비앤비로 알아보는 디자인 시스템의 내일 | 매거진 입맛">
<meta name="description" content="앞으로 디자인 시스템이 가야할 길은 어디일까요? 지원 툴, 코딩, 의사결정 민주화... 트렌드 분석을 통해 얻은 3가지 방향성을 설명하겠습니다.">
<meta name="author" content="이준환">
<meta name="article:media_name" content="매거진 입맛">
<meta property="article:mobile_url" content="https://dewberry9.github.io/future-of-design-system">
<meta property="article:pc_url" content="https://dewberry9.github.io/future-of-design-system">
<meta property="article:mobile_view_url" content="https://dewberry9.github.io/future-of-design-system">
<meta property="article:pc_view_url" content="https://dewberry9.github.io/future-of-design-system">
<meta property="article:talk_channel_view_url" content="https://dewberry9.github.io/future-of-design-system">
<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="2021-10-07T00:00:00+09:00">
<meta property="article:modified_time" content="2021-10-07T00:00:00+09:00">
<meta property="og:regDate" content="20211007000000">
<script type="application/ld+json">
{
"@context":"https://schema.org/",
"@type":"BlogPosting",
"mainEntityOfPage":{
"@id":"https://dewberry9.github.io/future-of-design-system"
},
"url":"https://dewberry9.github.io/future-of-design-system",
"headline":"토스, 에어비앤비로 알아보는 디자인 시스템의 내일 | 매거진 입맛",
"description":"앞으로 디자인 시스템이 가야할 길은 어디일까요? 지원 툴, 코딩, 의사결정 민주화... 트렌드 분석을 통해 얻은 3가지 방향성을 설명하겠습니다.",
"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/design/future-of-design-system/00.jpg"
},
"datePublished":"2021-10-07T00:00:00+09:00",
"dateModified":"2021-10-07T00: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/future-of-design-system">
<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="normal-size"><img src="/assets/images/design/future-of-design-system/01.jpg" alt="Design System" title="Design System" loading="lazy" /></p>
<p>디자인 시스템(Design System)은 일관성 있고 효과적인 제품을 만들기 위해 조직 내에서 공용으로 사용하는 도구입니다. 디자인 시스템은 모듈식 UI 컴포넌트, 색상, 서체, 여백과 같은 스타일 가이드, 보이스 톤까지 여러 범주에 속한 요소를 포함합니다. 디자인 시스템은 제품 만드는 과정에 일정한 규칙을 세워 조직 구성원 간 협업의 속도와 확실성을 끌어올립니다. 제품 개발에 필요한 노력은 줄지만 유사하거나 더 나은 품질의 제품이 나옵니다. 더 중요한 일, ‘제품으로 무엇을 하려는가’에 집중할 수 있도록 해줍니다.</p>
<p>재사용되는 UI 컴포넌트를 라이브러리로 만드는 일, 특정 디자인 규칙을 설계하고 적용하는 아이디어는 디자이너, 개발자, 기획자를 가리지 않고 광범위하게 활용되어 왔습니다. 하지만 그건 자기 일을 조금 편하게 하는 노하우의 영역에 머물러 있었고, 조직화되지 못한 채 흩뿌려져 있었습니다. 조직이 커질수록 한계가 보였습니다. UI 키트에서 컴포넌트를 꺼내 썼는데 구버전이었다던가, 수정된 리소스가 개발단에 넘어가지 않아 혼선이 생겼습니다. 분산된 라이브러리를 통합하려는 시도는 잘못된 구조로 실패하기 일쑤였습니다.</p>
<p>2013년 <a title="Brad Frost, 2013 - Atomic Design" href="https://bradfrost.com/blog/post/atomic-web-design?refer=mag_epmat" target="_blank" rel="noopener">아토믹 디자인(Atomic Design)</a>이라는 개념이 디자인 업계에 등장했습니다. 원자로 비유되는 최소단위 디자인 요소들이 모여 버튼 그룹이, 내비게이션 바가, 랜딩 페이지가, 하나의 제품이 됩니다. 아토믹 디자인을 적극 차용한 구글의 <a title="Racheal Hooks, 2021 - The Evolution of Material Design" href="https://1brand.design/blog/the-evolution-of-material-design?refer=mag_epmat" target="_blank" rel="noopener">머티리얼 디자인(Material Design)</a>이 2014년 발표되었을 때 반응은 뜨거웠습니다. 면과 그림자의 플랫 디자인으로 대표되는 머티리얼 디자인의 통일된 시각 언어는 수많은 디바이스와 플랫폼에서 활용하도록 만들어졌습니다. 마이크로소프트(Microsoft)의 Fluent Design, IBM의 Carbon Design System처럼 대기업은 물론이고 에어비앤비(Airbnb), 메일침프(Mailchimp), 트렐로(Trello) 등 여러 유니콘·스타트업도 그들만의 디자인 시스템을 만들어 공개했습니다. 찬양과 <a title="Pascal Barry, 2020 - Design System Are Bullsh*t" href="https://uxplanet.org/design-systems-are-bullsh-t-7ecdb795cc62?refer=mag_epmat" target="_blank" rel="noopener">비판</a>, 2010년대 중후반 디자인 업계의 큰 화두는 단연 디자인 시스템이었습니다.</p>
<p>그렇다면 오늘날은 어떤가요? 트렌드 분석을 통해 디자인 시스템의 지금과 방향성을 3가지 포인트로 알아보겠습니다.</p>
<ul>
<li>툴 안에서 디자인에 참견하는 시스템이 있다고요?</li>
<li>디자인 시스템으로 디자이너가 코딩을 배우게 된다고요?</li>
<li>디자인 시스템이 조직 내 의사결정 민주화에 관여한다고요?</li>
</ul>
<h2 id="거저-얻는-일관성---토스-보이스톤-메이커">거저 얻는 일관성 - 토스 보이스톤 메이커</h2>
<p class="normal-size"><img src="/assets/images/design/future-of-design-system/02.jpg" alt="Design Lint" title="Design Lint" loading="lazy" /></p>
<p>토스의 디자인 컨퍼런스 Simplicity 21가 지난 8월 30일부터 9월 2일까지 나흘간 진행됐습니다. Simplicity 21의 마지막 날에 <a title="Simplicity 21 - 어느 날 토스가 말을 걸기 시작했다." href="https://toss.im/simplicity-21/sessions/4-3" target="_blank" rel="noopener">토스 보이스톤 메이커를 공개</a>했습니다.</p>
<p>보이스톤 메이커는 토스 내부에서 활용하는 UX 라이팅 도구입니다. <a title="김강령(Toss), 2021 - 토스가 보이스톤 메이커를 만들게 된 배경" href="https://brunch.co.kr/@thinkaboutlove/396?refer=mag_epmat" target="_blank" rel="noopener">토스의 상황</a>을 알아보자면, 더 좋은 카피에 대한 고민은 모든 디자이너가 하고 있었지만 가진 경험은 제각각이었습니다. 송금 완료 상황에 사용한 문구만 해도 ‘송금을 완료했어요’, ‘송금합니다’, ‘송금했어요’, ‘보냈어요’ 등 뜻은 같아도 표현의 통일이 이뤄지지 않았습니다. 가이드와 인사이트가 산발적으로 만들어졌지만 공유되고 실제로 적용되는 일은 부족했습니다. 관리되지 않은 UX 라이팅은 제품의 일관성을 해칠 뿐만 아니라 어디선가 더 나은 카피가 쓰일 수 있다는 여지를 남겨두는 것이기도 합니다.</p>
<p>토스의 모든 프로덕트 디자이너는 현재의 UX 라이팅 상황에 일관성이 절실히 필요하다는 점을 인지했습니다. 처음에는 관련 인원이 해당 디자이너에게 시안을 받아 카피의 수정 제안과 그 수정안이 나올 수 있었던 원리를 설명하는 방법이 실행되었습니다. 그러나 이 방법은 실행자의 부담이 큰, 비영속적인 방식이었을 뿐만 아니라 카피 검수는 토스의 린(Lean)한 제품 개발 프로세스에 맞지 않았습니다.</p>
<p>두 번째로 디자이너에게 공통된 카피 선정 원칙을 교육, 검수 없이 처음부터 일관성 있는 UX 라이팅이 나오도록 했습니다. 하지만 이는 전 방식의 실행자가 지고 있던 부담을 디자이너에게 넘겨준 것에 불과했습니다.</p>
<p>제플린(Zeplin) 등에 공유된 디자인 시안을 직접 찾아가 수정 코멘트를 남기는 방법, 구체적 규칙이 명시된 가이드라인을 배포하는 방법도 시도되었으나 모두 특정 조직 구성원의 업무 부담을 키우는 단점을 극복하지 못했습니다.</p>
<p>방법은 ‘사람 디자이너의 일을 키우지 않는’ 방향으로 전환되었습니다. 디자인 툴 내부에서 실시간으로 카피를 체크해 가이드라인에 맞는 용어를 제안하는 보이스톤 메이커는 그렇게 채택되었습니다. 보이스톤 메이커는 템플릿을 통해 많은 부분을 자동으로 생성한 8천 개 이상의 규칙을 기반으로 작동합니다. 이 빠르고 직관적인 툴은 업무량이나 학습비용의 증가 없이 일관성 있는 제품을 만들도록 도왔습니다. 토스는 이렇게 짜인 일관성 위에서 개성 있고 효과적인 UX 라이팅을 도입할 수 있었습니다.</p>
<p>UX 라이팅보다 더 단순한 분야, 특정 속성값을 비교하는 수준에서는 이미 디자인 시스템을 적용 툴이 나와 있습니다. Figma의 <a title="Figma - Design Lint" href="https://www.figma.com/community/plugin/801195587640428208/Design-Lint" target="_blank" rel="noopener">Design Lint</a>, Sketch의 <a title="Saransh Solanki, 2019 - Validate your designs against your defined design guidelines, within seconds" href="https://uxdesign.cc/sketch-lint-2f292ef87084?refer=mag_epmat" target="_blank" rel="noopener">Lint for Sketch</a>가 그렇습니다. 디자인 툴 외부에서 독립되어 작동하는 <a title="Tanner Christensen, 2020 - What design system tools will look like in the future" href="https://tannerchristensen.com/blog/2020/4/9/what-design-system-tools-will-look-like?refer=mag_epmat" target="_blank" rel="noopener">Superb</a>는 JSON으로 정리된 가이드라인과 각종 디자인 리소스를 주기적으로 최신화해서 디자이너가 디자인 시스템의 수정사항에 빠르게 대응할 수 있도록 합니다. Superb는 자체 사용 데이터를 축적해서 디자인 시스템을 개선하는데 필요한 유의미한 인사이트를 제공하기도 합니다.</p>
<p>이처럼 디자인 시스템의 무수한 <strong>가이드라인을 그저 구성하는 데 그치지 않고 실무 적용 단계에서 적극적으로 지원하는 건 디자인 시스템의 명확한 발전 방향</strong>입니다. 더 쉽고 빨라진 디자인 시스템의 실용은 제품 개발 속도를 극적으로 줄여주고 시스템 자체에 대한 학습도 빠르고 깊게 만들어줍니다.</p>
<h2 id="디자이너와-개발자-더-가깝게---airbnb-react-sketch">디자이너와 개발자, 더 가깝게 - Airbnb React Sketch</h2>
<p class="normal-size"><img src="/assets/images/design/future-of-design-system/03.jpg" alt="Code and Component" title="Code and Component" loading="lazy" /></p>
<p>오늘날 대부분의 디지털 프로덕트는 디자이너의 기획과 개발자의 구현으로 만들어집니다. 중요한 협업 관계나 하는 일이 다르기에 제품 개발을 보는 관점이 다른 두 직군의 조화는 어렵습니다.</p>
<p>디자인 시스템에서도 마찬가지입니다. 디자인 시스템의 주요 기능 중 하나는 동기화입니다. 조직의 디자이너와 개발자는 작업물에 포함된 리소스가 구형이라면 최신 버전으로 쉽게 갱신할 수 있어야 합니다. 이 부분은 세세한 설정을 다룰 수 있는 개발자가 더 유리했습니다. 어떤 디자인 툴에서 버튼 하나를 라이브러리로 만들어 공유했다고 가정합시다. 그다음 크기를 두 배쯤 키운 버전으로 업데이트합니다. 이 버튼이 들어간 카드, 리스트, 배너… 이런 컴포넌트의 레이아웃이 깨지지 않았을 확률이 얼마나 될까요? 보통 엉망진창이 되어있을 겁니다. 물론 세밀하게 상황을 나누어 각 상황에 맞는 컴포넌트를 제작하거나, 컴포넌트의 레이아웃을 자세하게 설정한다면 문제가 없을 수도 있습니다. 그러나 이런 조정이 계속해서 수정되고, 그때마다 개발자가 반영해야 한다면 업무량이 어마어마하게 커집니다. 디자이너와 개발자 모두 더 본질적인 작업에 집중할 시간이 필요합니다.</p>
<p>에어비앤비도 같은 고민에서 <a title="Jon Gold(Airbnb) - Painting with Code : Introducing our new open source library React Sketch.app" href="https://airbnb.design/painting-with-code?refer=mag_epmat" target="_blank" rel="noopener">React Sketch.app</a>을 만들었습니다. 디자이너 팀이 합의해서 디자인 시스템을 Sketch 라이브러리로 만들면 개발자가 받아 제품에 반영했습니다. 2가지 문제점이 있었습니다.</p>
<ol>
<li>Sketch에서 업데이트하는 것만으로는 실제 디자인 시스템 요소가 곳곳에 적용된 제품에 어떤 영향을 미칠지 쉽게 알 수 없었습니다.</li>
<li>하나의 컴포넌트가 여러 상태를 가질 수 있는 디지털 프로덕트 특성상 Sketch의 컴포넌트는 실제로 개발된 컴포넌트를 직관적으로 반영하지 못했습니다.</li>
</ol>
<p>위와 같은 문제는 에어비앤비가 커질수록 심각해졌습니다. 에어비앤비는 이 문제를 디자인 시스템의 원천을 바꾸는 것으로 해결했습니다. 기존에 디자인 시스템이 Sketch 설계를 바탕으로 구현되는 것이었다면, 이미 개발된 디자인 시스템을 바탕으로 Sketch에서 디자인하는 것입니다. 이제 디자이너는 실제 제품에서 사용 중인 컴포넌트를 실시간으로 가져다 디자인하고, 개발자는 수정된 디자인 시스템이 제품에서 완벽하게 작동한다는 확신 위에서 작업할 수 있게 되었습니다.</p>
<p>협업 효율을 위해 디자이너가 코딩을 배워야 한다는 이야기는 전부터 있었습니다. 디지털 시스템의 보편화로 디자이너의 개발 능력은 더 각별해졌습니다. 개발 지식은 디자이너가 디자인 시스템을 쓰고 고칠 것을 염두에 두며 작업하게 합니다. 이는 디자인 시스템과 협업 자체의 효율을 높입니다. <strong>디자인 시스템의 기반이 개발로 넘어간 것은 이미 트렌드이고, 디자이너의 개발 작업 이해도는 더 중요해질 것</strong>입니다.</p>
<h2 id="결정은-앎에서-비롯하니까---storybook-리소스-센터">결정은 앎에서 비롯하니까 - Storybook, 리소스 센터</h2>
<p>디자인 시스템은 사용하고 개선하는 사람이 많아질수록 더 나아지고, 다시 더 많은 사용자를 불러오는 선순환을 가질 수 있습니다. 이를 위해서는 동료를 디자인 시스템에 온보딩하는 과정이 필요합니다. 디자인 시스템을 이해하고 활용하는 사람은 제품을 만들고 디자인 시스템을 개선하는데 더 효과적인 의사결정을 할 수 있게 됩니다. 개방적이고 투명한 디자인 시스템이 <a title="Jalita Aspelin(Columbia Road), 2018 - The future of design systems" href="https://www.columbiaroad.com/blog/the-future-of-design-systems?refer=mag_epmat" target="_blank" rel="noopener">제품과 조직의 기량을 끌어올리는 것</a>입니다.</p>
<p class="normal-size"><img src="/assets/images/design/future-of-design-system/04.jpg" alt="SSOT" title="SSOT" loading="lazy" /></p>
<p>SSOT 구조가 위와 같은 디자인 시스템이 될 수 있습니다. <a title="Wikipedia - Single source of truth" href="https://en.wikipedia.org/wiki/Single_source_of_truth" target="_blank" rel="noopener">SSOT(Single Source of Truth)</a>는 단일한 원천에서 모든 데이터가 참조되는 것을 의미합니다. 하나의 디자인 시스템 소스가 디자인 파일에, 마케팅 콘텐츠에, 제품 개발 코드에, 디자인 시스템 가이드 문서에 활용됩니다.</p>
<p><a title="Storybook: UI component explorer for frontend developers" href="https://storybook.js.org?refer=mag_epmat" target="_blank" rel="noopener">Storybook</a>은 디자인 시스템 가이드 문서를 기준으로 SSOT형 디자인 시스템을 구축하는 도구입니다. Storybook에 문서화된 UI는 실제 제품에서 작동하는 형태입니다. 디자이너, 개발자, 기획자, 제품을 만드는 모든 사람은 <strong>공개된 디자인 시스템을 바탕으로 더 나은 의사결정을 할 기회를 평등하게 나눠 갖습니다.</strong></p>
<h2 id="디자인-시스템의-내일">디자인 시스템의 내일</h2>
<p class="normal-size"><img src="/assets/images/design/future-of-design-system/05.jpg" alt="Future of Design System" title="Future of Design System" loading="lazy" /></p>
<p>디자인 시스템은 일관성 있고 효과적인 제품을 만들기 위해 조직 내에서 공용으로 사용하는 도구로, 제품 만드는 과정에 일정한 규칙을 세워 조직 구성원 간 협업의 속도와 확실성을 끌어올립니다. 오늘날의 트렌드에서 확인할 수 있는 디자인 시스템의 발전 방향은 다음 3가지로 압축할 수 있습니다.</p>
<ol>
<li>디자인 시스템 실무 적용 지원 툴</li>
<li>협업 효율 향상을 위한 코드 기반 디자인 시스템</li>
<li>조직 구성원 전체의 효과적 의사결정을 위한 디자인 시스템 개방·투명화</li>
</ol>
<p>고객과 시장이 변하듯 제품과 디자인 시스템도 바뀌고 있습니다. 디자인 시스템이 다음에는 어떤 모습을 가지게 될지 기대가 됩니다.</p>
<p class="right-infor">위시켓의 지원과 함께 제작된 콘텐츠입니다.</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="로빈후드, 토스뱅크가 출시 전에 100만 고객을 모은 방법. 대기자 명단 바이럴" href="/waitlist-viral" class="post-list-item rise-target sequential-rise-target">
<div class="post-thumbnail">
<div class="img-source" style="background-image: url('/assets/images/design/waitlist-viral/00.jpg')"></div>
</div>
<div class="post-description">
<div class="post-intro">
<h3>로빈후드, 토스뱅크가 출시 전에 100만 고객을 모은 방법. 대기자 명단 바이럴</h3>
<p class="post-excerpt">어떻게 하면 고객이 다른 고객을 데려오도록 할 수 있을까요? 대기자 명단 바이럴(Waitlist Viral)의 3가지 핵심을 분석하며 알아봅니다.</p>
</div>
</div>
</a>
<a title="MVP가 실패하는 5가지 이유와 해답. MVT(최소기능검증)" href="/why-mvp-as-a-product-fails-try-mvt" class="post-list-item rise-target sequential-rise-target">
<div class="post-thumbnail">
<div class="img-source" style="background-image: url('/assets/images/design/why-mvp-as-a-product-fails-try-mvt/00.jpg')"></div>
</div>
<div class="post-description">
<div class="post-intro">
<h3>MVP가 실패하는 5가지 이유와 해답. MVT(최소기능검증)</h3>
<p class="post-excerpt">어정쩡한 고객 피드백과 프로덕트 마켓 핏 사이에서 갈팡질팡하고 있다면, MVP보다 더 MVP스러운 전략 MVT가 나설 때입니다.</p>
</div>
</div>
</a>
<a title="혁신은 (또) 없었던 애플의 자신감. 9/14 애플 이벤트 리뷰" href="/2021-september-apple-special-event-review" class="post-list-item rise-target sequential-rise-target">
<div class="post-thumbnail">
<div class="img-source" style="background-image: url('/assets/images/design/2021-september-apple-special-event-review/00.jpg')"></div>
</div>
<div class="post-description">
<div class="post-intro">
<h3>혁신은 (또) 없었던 애플의 자신감. 9/14 애플 이벤트 리뷰</h3>
<p class="post-excerpt">모바일 디바이스만 7개가 나왔던 이번 애플 이벤트. 역시 새로운 건 없었습니다. 그러나 애플의 고객은 큰 폭으로 확장될 것입니다. 왜일까요?</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="사랑하거나 싫어하거나, 피트의 마술적 매력. 라프로익 10년" href="/laphroaig-10" class="post-list-item rise-target sequential-rise-target">
<div class="post-thumbnail">
<div class="img-source" style="background-image: url('/assets/images/daily/laphroaig-10/00.jpg')"></div>
</div>
<div class="post-description">
<div class="post-intro">
<h3>사랑하거나 싫어하거나, 피트의 마술적 매력. 라프로익 10년</h3>
<p class="post-excerpt">피트로 유명한 아일라의 싱글 몰트 위스키 중에서도 라프로익은 강렬한 개성으로 손에 꼽힙니다. 10년에 불과한 숙성 기간에도 충분히 짜릿합니다.</p>
</div>
</div>
</a>
<a title="로얄 워런트가 증명하는 화사함. 듀어스 12년" href="/dewars-12" class="post-list-item rise-target sequential-rise-target">
<div class="post-thumbnail">
<div class="img-source" style="background-image: url('/assets/images/daily/dewars-12/00.jpg')"></div>
</div>
<div class="post-description">
<div class="post-intro">
<h3>로얄 워런트가 증명하는 화사함. 듀어스 12년</h3>
<p class="post-excerpt">빅토리아 여왕부터 6명의 국왕을 거치는 동안 로얄 워런트를 유지하고 있는 블렌디드 위스키, 듀어스 12년의 화사한 매력을 알아봅니다.</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>