-
Notifications
You must be signed in to change notification settings - Fork 0
/
divider-and-whitespace.html
465 lines (341 loc) · 31.5 KB
/
divider-and-whitespace.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
<!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/divider-and-whitespace">
<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/03-divider-and-whitespace/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/03-divider-and-whitespace/01.jpg'>
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:url" content="https://dewberry9.github.io/divider-and-whitespace">
<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/divider-and-whitespace">
<meta property="article:pc_url" content="https://dewberry9.github.io/divider-and-whitespace">
<meta property="article:mobile_view_url" content="https://dewberry9.github.io/divider-and-whitespace">
<meta property="article:pc_view_url" content="https://dewberry9.github.io/divider-and-whitespace">
<meta property="article:talk_channel_view_url" content="https://dewberry9.github.io/divider-and-whitespace">
<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-07-30T00:00:00+09:00">
<meta property="article:modified_time" content="2018-07-30T00:00:00+09:00">
<meta property="og:regDate" content="20180730000000">
<script type="application/ld+json">
{
"@context":"https://schema.org/",
"@type":"BlogPosting",
"mainEntityOfPage":{
"@id":"https://dewberry9.github.io/divider-and-whitespace"
},
"url":"https://dewberry9.github.io/divider-and-whitespace",
"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/03-divider-and-whitespace/01.jpg"
},
"datePublished":"2018-07-30T00:00:00+09:00",
"dateModified":"2018-07-30T00: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/divider-and-whitespace">
<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/03-divider-and-whitespace/01.jpg" alt="Something Sweet" title="깜빡이 잊은 저녁열람금지 이미지" loading="lazy" /></p>
<p class="indent">잘 설계한 디자인은 잘 내놓은 디저트와 같습니다. 둘 다 번듯하고, 둘 다 손이 많이 갑니다. 달콤한 사탕, 바삭한 스콘, 그리고 시큼한 시럽이 버튼, 카드, 그리고 CTA로 바뀐 것일 뿐입니다. 아무리 맛있는 디저트라도 해괴하면 안 되고, 아무리 아름다운 것이라도 맛이 써서는 안 됩니다. 심미적이면서 기능적인 디자인, 잘 만든 디자인은 그런 것입니다. 디저트와 다를 것 없이, 한 가지만 지키면 그 두 조건을 모두 충족할 수 있습니다. 각 요소를 적절하게 구분해서 조화로이 만드는 일이 그것입니다.</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/03-divider-and-whitespace/02.jpg" alt="Down down down with Concentration Ratio" title="네 번째 줄부터 수직하락하는 노출률. 3줄 요약은 근거가 있다!" loading="lazy" /></p>
<p class="indent">구분된 상태와 조각난 상태에는 무슨 차이가 있을까요? 같은 책이라도 이리저리 내던져진 모습과 책장에 가지런히 꽂힌 모습은 다른 것처럼, 요소의 구분에는 일정한 규칙이 필요합니다. 인터랙션 디자인에서 이런 규칙의 존재는 단순히 정돈된 모습의 디자인을 만들기 위함이 아닙니다. 각 요소는 개별적으로 보면 역할이 작아보일지 모릅니다. 내비게이션의 링크는 어느 폼에 연결되고, 파란 버튼은 어느 모달에 연결되고, 어떤 입력값은 어느 토스트와 연결됩니다. 많은 콘텐츠, 다양한 경험을 디자인에 녹여낼수록 디자인은 커지고 복잡해집니다. 그런 디자인은 디자이너를 지치게 만듭니다. 그런 디자인을 경험하는 사용자도 마찬가지입니다. 구분된 요소는 그 복잡한 연결고리를 일정한 모습으로 통일시킵니다. 그렇게 형태를 학습하는 수고는 덜고, 본질적인 콘텐츠를 받아들이는데 집중할 수 있습니다.</p>
<p class="indent">가장 단순하면서, 가시적인 구분은 개행이라고 볼 수 있습니다. 장문 콘텐츠에서 서로 다른 주제를 가지고 있는 문단끼리 구분하여 독자의 집중을 갱신하고 가독성을 높여줍니다. 모든 사용자는 글 앞에서 산만해집니다. 기승전결이 완벽하고 구조적으로나 의미상으로나 뛰어나도 사용자는 읽지 않습니다. 쓱쓱 지나갈 뿐입니다. 디자이너의 의도는 흔히 무시됩니다. 모든 독자에게 매번 같은 가치, 의미가 전달되는 것은 어려운 일입니다. <a href="https://www.nngroup.com/articles/website-reading/">닐슨노먼그룹의 시선 추적 실험결과</a>에 따르면 구분된 한 문단 내에 있는 글은 그 위치에 따라 명백한 차이를 가집니다. 노출률(해당 문장을 직시한 독자의 비율, 원문 : Users who looked at the paragraph)이 확연하게 달라집니다.</p>
<ul class="indent">
<li>첫 번째 줄 : 81%</li>
<li>두 번째 줄 : 71%</li>
<li>세 번째 줄 : 63%</li>
<li>네 번째 줄 : 32%</li>
</ul>
<p class="indent">3줄 요약의 훌륭한 근거인 이 실험결과를 보면 알 수 있듯 콘텐츠의 구분은 사용자의 주의력에 강한 영향을 미칩니다. 사용자의 주의력이 요구되는 콘텐츠라면 적절한 구분은 큰 도움이 될 수 있습니다. 결국 콘텐츠의 구분은 철저하게 계산해서 의도된 바를 표현할 때 제대로 된 효과를 발휘한다는 겁니다.</p>
<h2 id="짧지도-굵지도-않은-구분선">짧지도 굵지도 않은 구분선</h2>
<p class="normal-size"><img src="https://cdn.jsdelivr.net/gh/dewberry9/dewberry9.github.io/assets/images/03-divider-and-whitespace/03.jpg" alt="Between Elements and Cool" title="멋과 요소의 경계에서" loading="lazy" /></p>
<p class="indent">구분이 얼마나 중요한지는 알겠습니다. 이제 구현을 해야 할 때입니다. 이를 위한 도구는 크게 두 가지가 있습니다. 일단 구분선(Divider)에 대해 알아봅시다. 구분선은 굉장히 오래된 요소입니다. 경계의 개념이 투사된 원시적인 모습의 요소입니다. 현실에서 다양한 모습을 가지고 있던 그것은 인터랙션 디자인에서 가장 단순한 형태로 남게 되었습니다. 길고 얇은 선의 형태가 그것입니다. 구분선은 콘텐츠와 콘텐츠, 요소와 요소 사이에 위치해서 그 둘을 분리합니다. 앞서 언급한 텍스트와 같이 경계가 모호한 요소 사이에서 경계선의 역할을 맡는 방식으로 작동합니다.</p>
<p class="indent">가시적인 여타 요소처럼 구분선 역시 형태가 존재하기 때문에 그 변형이 분명하다는 특징이 있습니다. 옅은 색상의 것이 있을 수 있고, 반대로 진한 색상의 것이 있을 수 있습니다. 어느 정도 제한 내에서 브랜드에 맞춰 변형할 수 있다는 의미입니다. 유아용품을 판매하는 쇼핑몰로 예시를 든다면, 제품 설명 그룹과 평점 그룹 사이에 짧은 점선 형태의 구분선을 삽입해서 아기자기한 바느질 느낌을 줄 수 있을 겁니다. 세세한 부분까지 브랜드의 이미지에 종속시켜 브랜드와 좀 더 가까운 디자인을 제작할 수 있는 것입니다. 그저 다른 요소에 작용해서 그들의 심미성과 기능성에 도움을 수동적인 요소로 남는 것이 아니라, 자신의 심미성과 기능성을 개선하는 능동적인 요소로서 배치되는 겁니다. 발전적인 방향으로의 사용이라고 생각할 수 있습니다.</p>
<h2 id="유령-같은-공백-">유령 같은 공백 👻</h2>
<blockquote>
<p>공백은 수동적인 배경이 아닌 능동적인 요소이다.</p>
<p>- 얀 치홀트</p>
</blockquote>
<p class="indent">구분을 위한 또 다른 도구로는 공백(White Space)이 있습니다. 난해한 요소라고 생각하실지도 모르겠습니다. 공백의 특성부터가 그렇습니다. 형태가 없고 보이지도 않습니다. 그렇기 때문에 여느 요소가 가질 만한 당연한 성질, 좌우 및 중앙 정렬이 가능하다든지, 색상을 입힌다든지, 하는 것들을 지니지 않습니다.</p>
<p class="indent">그러나 공백은 없는 걸 찾기가 더 어렵습니다. 적어도 제대로 된 인터랙션 디자인이라면 말입니다. 공백을 푸짐하게 사용한 대표적인 사례는 랜딩 페이지입니다. 헤드카피와 히어로 이미지로 이뤄진 간단한 구조의 랜딩 페이지가 최근 많은 서비스에서 활용되고 있습니다. 카피의 정렬, CTA의 유무, 이미지의 내용은 중요하지 않습니다. 사방에서 카피를 감싸고 있는 공백이 어떤 역할을 하는지를 상상해보시기 바랍니다. 키피와 이미지의 분리만을 수행하고 있는 것이 아니라 카피를 강조하고 있습니다. 공백의 본질은 부재입니다. 어떤 콘텐츠도 요소도 공백 안으로 들어올 수는 없습니다. 그리고 이 부재가 상대하고 있는 요소를 주의력 있게 부각시킵니다. 마치 흰 셔츠에 작고 검은 얼룩 하나가 눈에 잘 띄는 것처럼 말입니다.</p>
<p class="indent">이러한 공백의 특징은 텍스트 콘텐츠 내에서 좀 다르게 작용합니다. 대부분의 텍스트 콘텐츠는 가로로 읽히는 문장 요소가 위에서 아래로 쌓여가며 구성됩니다. 여기서 공백은 가로로 놓이게 됩니다. 세로로 진행되던 텍스트 콘텐츠를 끊는 것입니다. 이렇게 해서 사용자는 텍스트를 길게 이어지는 몇 개의 개체로 보는 것이 아니라 공백을 중심으로 각기 다른 위상을 가지는 블록 형태로 인식하게 됩니다. 블록을 따로따로 들여다봄으로써 콘텐츠 전달은 훨씬 수월해집니다. 복수의 주제가 혼재되어있더라도 구분을 통해 문제 없이 소통할 수 있습니다.</p>
<h2 id="수평선-vs-공백">수평선 VS 공백</h2>
<p class="normal-size"><img src="https://cdn.jsdelivr.net/gh/dewberry9/dewberry9.github.io/assets/images/03-divider-and-whitespace/04.jpg" alt="Beauty of White Space" title="정적이고, 차분하며, 일관되고, 고고하다. 공백은 아름답다" loading="lazy" /></p>
<p class="indent">이제 정리해봅시다. 수평선은 다음과 같은 특징을 가지고 있습니다 :</p>
<ul class="indent">
<li>가시적</li>
<li>다양한 변형이 있지만 원형은 확정형</li>
<li>정렬 등의 뱡향성을 띠는 조작 가능</li>
</ul>
<p class="indent">그리고 공백은 이렇습니다 :</p>
<ul class="indent">
<li>비가시적</li>
<li>변형이라고 할 수 있는 것은 공간의 크기 뿐으로, 부정형</li>
<li>뱡향성을 띠는 조작 불가능</li>
</ul>
<p class="indent">나열해 놓고 보면 공백은 분명 부자유스러운 성격을 지니고 있지만, 역설적으로 이런 성격 때문에 공백은 어디에서나 자유롭게 사용할 수 있습니다. 다른 요소가 쫓아올 수 없는 정도의 가벼움을 자랑하기 때문입니다. 이는 위에서부터 줄곧 비교의 기준이 되었던 텍스트 안에서 더욱 두드러집니다. 자리를 차지하는 건 두 요소 모두 마찬가지이지만, 그 공간의 활용은 판이합니다. 아무리 얇은 수평선도 결국에는 보입니다. 의도와는 별개로 어쩔 수 없이 시각적 긴장이 형성됩니다. 이를 자연스럽게 처리하는 건 다른 문제가 되겠지만, 이 본질적인 사실은 변하지 않습니다. 그에 비해 공백은 편합니다. 고려할 건 적절한 거리뿐입니다. 아무리 많아도 열 번의 시도 안에는 적정거리를 파악할 수 있을 겁니다.</p>
<h2 id="성공적인-밀당을-기원하며">성공적인 밀당을 기원하며</h2>
<p class="normal-size"><img src="https://cdn.jsdelivr.net/gh/dewberry9/dewberry9.github.io/assets/images/03-divider-and-whitespace/05.jpg" alt="Simple and Wonderful" 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/website-reading/">Jakob Nielsen - 「Website Reading: It (Sometimes) Does Happen」</a></p>
<p class="indent"><a href="https://uxplanet.org/the-power-of-whitespace-a1a95e45f82b">Nick Babich - 「The Power of Whitespace」</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="/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>
<a title="블러는 클릭 뒤 흐림" href="/blur-is-cloudy-after-click" class="post-list-item rise-target sequential-rise-target">
<div class="post-thumbnail">
<div class="img-source" style="background-image: url('/assets/images/04-blur-is-cloudy-after-click/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="/remodeling-of-material-design" class="post-list-item rise-target sequential-rise-target">
<div class="post-thumbnail">
<div class="img-source" style="background-image: url('/assets/images/02-remodeling-of-material-design/01.jpg')"></div>
</div>
<div class="post-description">
<div class="post-intro">
<h3>머티리얼 디자인의 리모델링</h3>
<p class="post-excerpt">2018년 5월, 머티리얼 디자인의 새로운 모습이 공개되었습니다. 많은 부분에서 수정과 개선이 이뤄졌습니다. 이제 머티리얼 디자인은 브랜드 친화적인 디자인을 지향합니다.</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>