-
Notifications
You must be signed in to change notification settings - Fork 0
/
design-for-contrast.html
459 lines (335 loc) · 33.2 KB
/
design-for-contrast.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
<!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/design-for-contrast">
<meta property="og:type" content="article">
<meta property="og:site_name" content="매거진 입맛">
<meta property="og:description" content="좋은 디자인은 보기 쉬운 디자인입니다. 이를 위해서는 요소를 불균형하게 채울 필요가 있습니다. 대비를 고려하면 좋은 디자인을 만들 수 있습니다.">
<meta property="og:image" content='https://dewberry9.github.io/assets/images/06-design-for-contrast/01.jpg'>
<meta name="by" content="이준환"><meta name="twitter:title" content="편향된 디자인이 좋은 디자인이다 | 매거진 입맛">
<meta name="twitter:description" content="좋은 디자인은 보기 쉬운 디자인입니다. 이를 위해서는 요소를 불균형하게 채울 필요가 있습니다. 대비를 고려하면 좋은 디자인을 만들 수 있습니다.">
<meta name="twitter:image" content='https://dewberry9.github.io/assets/images/06-design-for-contrast/01.jpg'>
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:url" content="https://dewberry9.github.io/design-for-contrast">
<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="UI">
<!-- Other Basic Meta Tag -->
<meta name="title" content="편향된 디자인이 좋은 디자인이다 | 매거진 입맛">
<meta name="description" content="좋은 디자인은 보기 쉬운 디자인입니다. 이를 위해서는 요소를 불균형하게 채울 필요가 있습니다. 대비를 고려하면 좋은 디자인을 만들 수 있습니다.">
<meta name="author" content="이준환">
<meta name="article:media_name" content="매거진 입맛">
<meta property="article:mobile_url" content="https://dewberry9.github.io/design-for-contrast">
<meta property="article:pc_url" content="https://dewberry9.github.io/design-for-contrast">
<meta property="article:mobile_view_url" content="https://dewberry9.github.io/design-for-contrast">
<meta property="article:pc_view_url" content="https://dewberry9.github.io/design-for-contrast">
<meta property="article:talk_channel_view_url" content="https://dewberry9.github.io/design-for-contrast">
<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-08-17T00:00:00+09:00">
<meta property="article:modified_time" content="2018-08-17T00:00:00+09:00">
<meta property="og:regDate" content="20180817000000">
<script type="application/ld+json">
{
"@context":"https://schema.org/",
"@type":"BlogPosting",
"mainEntityOfPage":{
"@id":"https://dewberry9.github.io/design-for-contrast"
},
"url":"https://dewberry9.github.io/design-for-contrast",
"headline":"편향된 디자인이 좋은 디자인이다 | 매거진 입맛",
"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://dewberry9.github.io/assets/images/06-design-for-contrast/01.jpg"
},
"datePublished":"2018-08-17T00:00:00+09:00",
"dateModified":"2018-08-17T00: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/design-for-contrast">
<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/06-design-for-contrast/01.jpg" alt="Garden VS Yard" title="앞뜰만의 매력이 있지 않을까" loading="lazy" /></p>
<p class="indent">멋지게 꾸며진 공원과 멋지게 꾸며진 앞뜰. 둘을 구분하는 건 간단합니다. 애정의 편향입니다. 전자의 경우, 어떤 곳은 숨을 죽이고 어떤 곳은 부각시키면서 전체적인 조화를 이루도록 다듭습니다. 앞뜰이란 공간은 그렇지 않습니다. 모든 화초에 각자의 이름이 있고 모든 구조에 애정이 묻었습니다. 결과적으로는 조화롭지 못하게 되지만, 주인에게 그런 건 상관없습니다.</p>
<p class="indent">흙과 꽃이 아닌 빛과 색의 공간, 인터랙션 디자인의 세상은 그런 공원의 특성이 극대화되서 나타나는 공간입니다. 목적은 사용자에게 콘텐츠를 전달하는 것이고, 이를 위해서 애지중지 만들었던 요소를 전체적인 조화를 위해 배제해야할 상황도 종종 나타나기 마련입니다. 인위적으로 배치된 버튼, 토스트, 이미지가 사용자를 생면부지의 사막으로 데려다놓기 때문에 길을 제시하려면 어쩔 수 없는 일입니다.</p>
<p class="indent">그래도 시행착오는 짧은 게 낫습니다. 디자인 티타임의 여섯 번째 이야기는 이를 위해 생각해봐야하는 중심 개념입니다. 어떤 디자인도 이것 아래에서 자유롭지 못합니다. 이것은 빛이 만든 마지막 모습, 대비입니다.</p>
<h2 id="강약중강약">강약중강약</h2>
<p class="normal-size"><img src="https://cdn.jsdelivr.net/gh/dewberry9/dewberry9.github.io/assets/images/06-design-for-contrast/02.jpg" alt="Three Contrast of Interaction Design" title="인터랙션 디자인의 세 가지 대비" loading="lazy" /></p>
<p class="indent">대비는 다른 요소를 서로 다르게 만들어주는 특성, 다시 말해 시각적인 차이입니다. 녹음이 우거진 열대우림에서 빨간 독버섯을 찾을 수 있는 이유, 드넓은 밤하늘에 떠 있는 북극성을 가리킬 수 있는 이유입니다. 각 요소의 인식을 용이하게 만드는 성질입니다. 부조화와는 의미가 다릅니다. 적정한 대비라는 것은 요소가 다른 요소를 방해하고 우위를 점하려는 상황이 아닌 자신의 고유한 모습을 드러내고 있는 것을 뜻합니다. 대비를 철저하게 설계하면 되레 조화로운 디자인을 만들 수 있습니다.</p>
<p class="indent">인터랙션 디자인에서 대비가 갖는 가치는 각별합니다. 기본적으로 인터랙션 디자인이 조립의 예술이기 때문입니다. 인터랙션 디자인은 사용자와의 소통을 목적으로 합니다. 이런 의사소통에 필요한 도구를 나열할 것이 인터랙션 디자인의 본질입니다. 이 나열마저 하나의 소통입니다. 하나의 글입니다. 논리적인 글은 구조적입니다. 설득하는 디자인은 완벽한 구성을 가지고 있어야 하는 겁니다.</p>
<ul>
<li>명도와 채도</li>
<li>투명도</li>
<li>크기</li>
</ul>
<p class="indent">이 세 가지가 인터랙션 디자인에서 대비를 다룰 때 고려해야하는 부분입니다. 명도와 채도는 풀어 말하면 밝기와 색입니다. 이미지를 덮는 텍스트, UI의 전체적인 분위기를 구성할 때 생각해봐야 하는 성분입니다. 투명도는 전경과 배경의 차이를 설계할 때 비중 있게 고려되는 성분입니다. 크기라는 성분이야말로 어디에나 쓰이는 중요 요소입니다. 텍스트의 위계, 카드의 비율, 공백 등 거의 모든 부분에 관여합니다.</p>
<h2 id="아니-이것도-저것도-중요한데">아니, 이것도 저것도 중요한데?🤔</h2>
<p class="normal-size"><img src="https://cdn.jsdelivr.net/gh/dewberry9/dewberry9.github.io/assets/images/06-design-for-contrast/03.jpg" alt="Selection and Concentration" title="선택과 집중" loading="lazy" /></p>
<p class="indent">마음 가는 대로 조화를 챙기다가 의식적으로 대비를 따지면 분명 어려움이 닥칠 것입니다. 지금껏 눈을 감고 레고를 조립하고 있었다는 생각이 들지도 모릅니다. 그도 그럴 것이, 대비의 잣대는 눈에 보이는 모든 것에 적용합니다. 차이를 계산하고 구분을 이루는 일은 유난스러워 보일지도 모릅니다. 그럼에도 불구하고 대비를 강조하는 이유는 자명합니다. 디자이너는 수 시간을 들여 구석구석 설계하고 구상하지만, 사용자는 수 초 동안 넘겨보기 때문입니다.</p>
<p class="indent">사용자가 유용하다고 느끼는 디자인은 빠진 구석이 없는 완벽한 디자인이 아닙니다. 사용자가 원하는 것이 적재적소에 놓여있는 디자인을 보고 유용하다고 말합니다. 다른 페이지로 넘어가기 위해 내비게이션을 본다고 했을 때, 자신이 있는 페이지조차 알 수 없다면 그건 좋은 디자인일까요? 요소의 시작과 끝을 알 수 없어 자꾸만 클릭과 터치가 빗나간다면 그건 편안한 디자인일까요? 대비를 다룬다는 것은 부족한 부분과 출중한 부분을 만든다는 뜻입니다. 그런 디자인은 생동감이 있고, 시나리오에 적합합니다. 신속하고 정확한 피드백을 유도할 뿐만 아니라 학습 시간을 크게 단축하고, 결과적으로는 브랜드와 서비스를 다시 찾도록 합니다.</p>
<p class="indent">구체적인 지침으로는 <a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html">W3C의 웹 콘텐츠 접근성 가이드라인</a>이 있습니다. 이 문서에서는 텍스트 콘텐츠와 그 배경 간의 정량적인 대비에 대해서 다룹니다. 일반적인 상황에서 텍스트와 그 배경의 명도 차이는 최소한 4.5:1을 이뤄야 합니다. 위에서 인터랙션 디자인은 사용자와의 소통을 목적으로 한다고 말했습니다. 이런 방식으로 대비에 대해서 고민하는 일은 사용자에게 어떻게 말을 걸까 고민하는 것과 방향이 같습니다. 디자이너는 제시하고, 사용자는 봅니다. 그들의 눈을 가려서는 안 됩니다. 그래서 대비를 생각하는 겁니다. 디자이너의 실수에 관대한 이들은 언제나 적습니다.</p>
<h2 id="레이아웃에서-대비-챙기기">레이아웃에서 대비 챙기기</h2>
<p class="normal-size"><img src="https://cdn.jsdelivr.net/gh/dewberry9/dewberry9.github.io/assets/images/06-design-for-contrast/04.jpg" alt="Butterfly on Sight" title="눈 앞의 나비" loading="lazy" /></p>
<p class="indent">많은 인터랙션 디자인은 내비게이션-콘텐츠-CTA 그룹의 3단 구성을 따르고 있습니다. 필수적인 요소만 모아놓은 형태입니다. 내비게이션으로 안내하고, 콘텐츠를 보여주며, CTA로 피드백을 받습니다. 사용자와 대화하기에 부족함이 없고, 복잡하지도 않습니다. 말 그대로 안성맞춤인 셈입니다. 이 레이아웃은 세부적인 대비를 조정할 때 기준이 되기도 합니다. 3단 구성의 세 부분은 모두 중요합니다. 내비게이션이나 콘텐츠 둘 중 하나만을 부각할 수는 없습니다. 각종 요소를 레이아웃에 맞게 그룹으로 묶고, 해당 그룹 내에서 대비를 조정해야 합니다. 내비게이션에 위치한 드롭 박스와 본문의 하이퍼링크가 같은 스타일을 공유할 필요는 없다는 의미입니다.</p>
<p class="indent">사람은 절대적인 밝기보다 <a href="https://ko.wikipedia.org/wiki/%EC%BD%98%ED%8A%B8%EB%9D%BC%EC%8A%A4%ED%8A%B8">대비에 더 민감한 시각을 가지고</a>있습니다. 흑백으로 이뤄진 각종 착시 이미지에 쉽게 당하는 것도 이 때문입니다. <a href="https://medium.com/@lukejones/optical-adjustment-b55492a1165c">시각 보정</a>도 이 현상에 기반한 작업입니다. 포그라운드를 이루는 물체의 면적과 공백이 백그라운드와의 대비로 도드라져 보이는 것입니다. 크기는 대비를 극명하게 표현할 수 있는 기본적인 속성입니다. 개념은 단순하지만, 효과는 거대합니다. 위계에 따른 크기의 변화는 시각적 이정표가 되어줍니다. 큰 요소에서 작은 요소로 자연스럽게 시선이 움직이는 겁니다.</p>
<p class="indent">위치도 레이아웃에서 중요하게 다뤄지는 속성 중 하나입니다. 정렬만 보아도 그렇습니다. 소수의 요소로 긴밀하게 구축된 레이아웃이 중앙 정렬을 가졌다면 획일적인 시나리오와 함께 깔끔한 멋을 강조할 수도 있을 겁니다. 콘텐츠의 양이 불어날수록 좌우 및 중앙 정렬 하나로는 모든 요소를 조작하기 어려울 겁니다. 역할과 기능을 고려한 위치 설정이 필요한 시점입니다. <a href="https://www.nngroup.com/articles/logo-placement-brand-recall/">사용자의 89%가 좌측에 위치한 웹 사이트의 로고를 익숙하게 여겼습니다.</a> 이런 합리적인 연구와 실험의 과정을 통해 제공하는 콘텐츠에 어울리는 레이아웃을 찾는 일이 필요합니다.</p>
<h2 id="텍스트에서-대비-챙기기">텍스트에서 대비 챙기기</h2>
<p class="normal-size"><img src="https://cdn.jsdelivr.net/gh/dewberry9/dewberry9.github.io/assets/images/06-design-for-contrast/05.jpg" alt="The Unbiased Readiness" title="편견 없는 편독" loading="lazy" /></p>
<p class="indent">이제 읽고 싶어지는 줄글에 대해서 이야기해봅시다. 인터랙션 디자인에서 줄글은 수없는 고민을 낳는 골칫거리입니다. <a href="https://www.nngroup.com/articles/f-shaped-pattern-reading-web-content-discovered/">닐슨노먼그룹의 연구결과</a>처럼 디지털에서 구현된 줄글이 잘 읽히지 않는다는 사실은 많은 실험이 증명하고 있습니다. 내용뿐만 아니라 구성까지 신경 써야 합니다. 그뿐만 아니라 직관성을 위해 충분한 텍스트를 쓰고 싶지만 과하게 텍스트 중심적인 UI가 탄생할까 고심하기도 합니다. 수만 가지 서체에 둘러싸여 선택과 집중을 강요받기도 합니다. 고려해야 하는 점이 만만치 않은 것들뿐이라 텍스트가 삐끗하는 일은 다반사입니다.</p>
<p class="indent">가장 빈번히 일어나는 실수는 텍스트 간 위계 설정에서 일어납니다. 이는 텍스트에서 의미론적인 구분을 만들기 위해서 단계를 나누는 일입니다. 단순하게 제목-소제목-본문 위계부터 시작해서, 헤드카피, 캡션, 버튼까지 설정하는 일도 빈번합니다. 여기서 발생하는 대표적인 실수는 위계가 지나치게 많다거나, 위계 간 대비가 부족하든가 하는 일입니다. 텍스트 간 위계는 길고 긴 시스템이라서 한번 망설이다가는 수정이 힘들 수 있습니다. 그렇다고 잘못된 시스템을 차용하면 사용자는 디자이너와 함께 혼돈에 빠질 겁니다. 곧바로 해결책을 말씀드리자면, 다음과 같습니다 :</p>
<ol class="indent">
<li>위계의 수를 줄인다</li>
<li>텍스트 양을 줄인다</li>
<li>최소 단위부터 시작한다</li>
</ol>
<p class="indent">위계를 줄이는 일은 최선의 해결책입니다. 제목, 소제목, 작성자, 작성일, 본문, 하이퍼링크, CTA…. 텍스트 콘텐츠에는 갖가지 요소가 함께하고 있습니다. 그러나 그들 모두에게 다른 옷을 입힐 필요는 없습니다. 필요 내에서, 통일성을 해치지 않는 방향으로, 깔끔한 설계를 지향해야 합니다. 그에 비해 텍스트의 양을 줄이는 건 차선책입니다. 위에서 언급했듯 사용자는 많은 양의 텍스트를 전부 읽지 않습니다. 그들 모두가 중요하다고 아무리 설명해도 변하는 건 없을 겁니다. 텍스트의 양을 줄이면 사용자의 한정된 집중력을 효과적으로 사용할 수 있습니다. 마지막 해결책인 최소 단위부터 시작하는 건 본질적인 방법이라기보다는 팁에 가깝습니다. 방대한 위계를 고려하지 못하고 적당한 크기와 투명도, 굵기를 기준으로 삼았다가 최하위에 이르러서는 감당할 수 없을 정도로 텍스트가 작고 흐린 경우가 있습니다. 이 팁은 그런 상황을 방지하기 위해 있는 겁니다.</p>
<h2 id="불균형의-미학">불균형의 미학</h2>
<p class="normal-size"><img src="https://cdn.jsdelivr.net/gh/dewberry9/dewberry9.github.io/assets/images/06-design-for-contrast/06.jpg" alt="The Design is not a Copy of Reality " title="디자인은 결코 현실의 복사판이 아니다" loading="lazy" /></p>
<p class="indent">대비를 귀찮은 개념이라고 여길 수도 있겠습니다. 생각해야하는 건 많고, 대충하기도 어렵고, 영향이 미미한 것도 아닙니다. 수십 가지를 함께 생각해야하는 디자인을 하는 사람으로서 만만하게 여기기는 어렵습니다. 현실의 빛이 만들어낸 장난과도 같은 기교는 디지털 공간에서 난해한 숙제가 되었습니다.</p>
<p class="indent">사람의 눈은 사람의 생각만큼이나 복잡합니다. 상식적이지 않은 경우도 많습니다. 바꿔말하면 수많을 가능성이 혼재되어있는 기관이라고 할 수 있습니다. 그러나 우리는 모두 이를 통해 세상을 봅니다. 분명한 한 가지 사실이 숨어있는 겁니다. 좋은 디자인을 보고, 아름다운 조화를 보고 괜찮다, 놀랍다고 느낄 가능성이 숨어있는 것입니다. 그 약간의 가능성을 위해서 디자이너는 끊임없이 생각해야 합니다. 괜찮았다고 생각했던 것을 버리고, 비우고, 다시 채우는 과정을 겪어야 합니다. 그리고 그 끝에서 결국 깨달을 겁니다.</p>
<p class="indent">디자이너는 현실을 베끼는 것이 아니라, 상상을 이루는 것임을.</p>
<p class="indent refer">참고자료</p>
<p class="indent"><a href="https://www.nngroup.com/articles/text-over-images/">Aurora Harley - 「Ensure High Contrast for Text Over Images」</a></p>
<p class="indent"><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html">W3C Web Content Accessibilty Guidelines 2.0 - Contrast(Minimum) Understanding Success Criterion 1.4.3</a></p>
<p class="indent"><a href="https://www.nngroup.com/articles/low-contrast/">Katie Sherwin - 「Low-Contrast Text Is Not the Answer」</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="그라디언트 활용법" href="/gradient-manual" class="post-list-item rise-target sequential-rise-target">
<div class="post-thumbnail">
<div class="img-source" style="background-image: url('/assets/images/08-gradient-manual/01.jpg')"></div>
</div>
<div class="post-description">
<div class="post-intro">
<h3>그라디언트 활용법</h3>
<p class="post-excerpt">그다리언트는 화려하고 이색적입니다. 이는 인터렉션 디자인에서 활용되기 어려운 조건입니다. 두 가지 활용법에 대해 알아보겠습니다.</p>
</div>
</div>
</a>
<a title="래퍼런스 다시 읽기" href="/how-to-swims-in-inspiration" class="post-list-item rise-target sequential-rise-target">
<div class="post-thumbnail">
<div class="img-source" style="background-image: url('/assets/images/07-how-to-swims-in-inspiration/02.jpg')"></div>
</div>
<div class="post-description">
<div class="post-intro">
<h3>래퍼런스 다시 읽기</h3>
<p class="post-excerpt">만성적인 영감 부족에 시달리는 오늘날의 디자이너, 어떻게 하면 영감을 얻을 수 있을까요? 디자인 사고를 바탕으로 이를 해결합니다.</p>
</div>
</div>
</a>
<a title="현명하지 못한 선택, 노치" href="/notch-study-of-milgram" class="post-list-item rise-target sequential-rise-target">
<div class="post-thumbnail">
<div class="img-source" style="background-image: url('/assets/images/05-notch-study-of-milgram/01.jpg')"></div>
</div>
<div class="post-description">
<div class="post-intro">
<h3>현명하지 못한 선택, 노치</h3>
<p class="post-excerpt">iPhone X의 등장으로 스마트폰 시장에는 반짝 노치 열풍이 불었습니다. 1년이 되어가는 금, 이 바람은 차갑게 식었습니다. 독선적이고 과도기적인 노치가 왜 문제인지 짚어보도록 하겠습니다.</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>