-
Notifications
You must be signed in to change notification settings - Fork 0
/
notch-study-of-milgram.html
449 lines (326 loc) · 32.4 KB
/
notch-study-of-milgram.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
<!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/notch-study-of-milgram">
<meta property="og:type" content="article">
<meta property="og:site_name" content="매거진 입맛">
<meta property="og:description" content="iPhone X의 등장으로 스마트폰 시장에는 반짝 노치 열풍이 불었습니다. 1년이 되어가는 금, 이 바람은 차갑게 식었습니다. 독선적이고 과도기적인 노치가 왜 문제인지 짚어보도록 하겠습니다.">
<meta property="og:image" content='https://dewberry9.github.io/assets/images/05-notch-study-of-milgram/01.jpg'>
<meta name="by" content="이준환"><meta name="twitter:title" content="현명하지 못한 선택, 노치 | 매거진 입맛">
<meta name="twitter:description" content="iPhone X의 등장으로 스마트폰 시장에는 반짝 노치 열풍이 불었습니다. 1년이 되어가는 금, 이 바람은 차갑게 식었습니다. 독선적이고 과도기적인 노치가 왜 문제인지 짚어보도록 하겠습니다.">
<meta name="twitter:image" content='https://dewberry9.github.io/assets/images/05-notch-study-of-milgram/01.jpg'>
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:url" content="https://dewberry9.github.io/notch-study-of-milgram">
<meta name="twitter:site" content="매거진 입맛">
<meta name="twitter:label1" content="Category">
<meta name="twitter:data1" content="">
<meta name="twitter:label2" content="Topic">
<meta name="twitter:data2" content="UX">
<!-- Other Basic Meta Tag -->
<meta name="title" content="현명하지 못한 선택, 노치 | 매거진 입맛">
<meta name="description" content="iPhone X의 등장으로 스마트폰 시장에는 반짝 노치 열풍이 불었습니다. 1년이 되어가는 금, 이 바람은 차갑게 식었습니다. 독선적이고 과도기적인 노치가 왜 문제인지 짚어보도록 하겠습니다.">
<meta name="author" content="이준환">
<meta name="article:media_name" content="매거진 입맛">
<meta property="article:mobile_url" content="https://dewberry9.github.io/notch-study-of-milgram">
<meta property="article:pc_url" content="https://dewberry9.github.io/notch-study-of-milgram">
<meta property="article:mobile_view_url" content="https://dewberry9.github.io/notch-study-of-milgram">
<meta property="article:pc_view_url" content="https://dewberry9.github.io/notch-study-of-milgram">
<meta property="article:talk_channel_view_url" content="https://dewberry9.github.io/notch-study-of-milgram">
<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-07T00:00:00+09:00">
<meta property="article:modified_time" content="2018-08-07T00:00:00+09:00">
<meta property="og:regDate" content="20180807000000">
<script type="application/ld+json">
{
"@context":"https://schema.org/",
"@type":"BlogPosting",
"mainEntityOfPage":{
"@id":"https://dewberry9.github.io/notch-study-of-milgram"
},
"url":"https://dewberry9.github.io/notch-study-of-milgram",
"headline":"현명하지 못한 선택, 노치 | 매거진 입맛",
"description":"iPhone X의 등장으로 스마트폰 시장에는 반짝 노치 열풍이 불었습니다. 1년이 되어가는 금, 이 바람은 차갑게 식었습니다. 독선적이고 과도기적인 노치가 왜 문제인지 짚어보도록 하겠습니다.",
"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/05-notch-study-of-milgram/01.jpg"
},
"datePublished":"2018-08-07T00:00:00+09:00",
"dateModified":"2018-08-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/notch-study-of-milgram">
<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/05-notch-study-of-milgram/01.jpg" alt="Unwanted Blueprint, Notch" title="바라지 않는 청사진, 노치" loading="lazy" /></p>
<p class="indent">최근 iOS 12의 다섯 번째 개발자 베타가 공개되었습니다. 이어 <a href="https://9to5mac.com/2018/08/01/ios-12-beta-5-bezel-less-ipad-glyph-leak/">9TO5Mac이라는 애플 전문 매체에서 차세대 iPad Pro에 대한 정보</a>를 게시했습니다. OS에 포함된 아이콘을 참고한 정보인데요, 이로써 차세대 iPad Pro는 홈버튼이 제거된 라운드 디스플레이가 장착될 가능성이 커졌습니다. 기존에 돌아다니던 루머와 유사한 모습입니다. 한 가지, 노치(Notch)를 제외하고 말입니다.</p>
<p class="indent">2017년 9월, 애플의 iPhone의 10주년을 기념하는 iPhone X가 공개되었습니다. 미래와의 조우.(Say hello to the future.)라는 캐치프레이즈에 걸맞게 기존 iPhone과는 차별화된 모습을 지니고 있었습니다. 라운드 디스플레이, 듀얼 카메라, 제거된 홈버튼. 물론 기존 iPhone에 한정된 신선함이었습니다. iPhone 제품군의 뒤떨어진 발전을 의식한 변화였을 지도 모릅니다. 그러나 문제는 그게 아니었습니다. iPhone X에는 Essential Phone의 흉측한 그것이 있었습니다. 더 길게.</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/05-notch-study-of-milgram/02.jpg" alt="It's not fine" title="자연을 닮았다고 다 괜찮은 건 아니다" loading="lazy" /></p>
<p class="indent">노치는 골짜기를 뜻하는 영어단어입니다. 스마트폰 시장에서도 비슷한 의미로 쓰이는 말입니다. 넓은 디스플레이에 골짜기처럼 파해있는 부분을 뜻합니다. 온통 얇은 베젤뿐인데 유일하게 디스플레이 쪽으로 튀어나와 있는 구조인 겁니다. iPhone X의 등장으로 관심을 받게 된 이 구조는 누구에게도 익숙지 않은 구조였습니다. 국내에서는 M자 탈모 등으로 희화화되기도 했습니다.</p>
<p class="indent">이 허무맹랑한 구조가 등장하게 된 이유가 무엇일까요? 2010년을 전후로 하이엔드 스마트폰 중심으로 성능·기능 면에서 많은 발전이 있었습니다. 오늘날에 이르러서 그러한 방향의 발전은 한계에 다다르게 되었습니다. 기술적으로도 그렇지만, 시장의 요구는 더 큰 성능을 요구하지 않았습니다. 구조의 발전이 필요한 시점이었습니다. 그중에서도 가장 비중이 큰 것이 베젤이었습니다. 디스플레이가 달린 물건 중 두꺼운 베젤을 선호할 이유가 있는 건 아무것도 없습니다. 삼성에서는 이런 기류에서 엣지 디스플레이를 내놓았지만, 시장의 반응은 시큰둥했습니다. 그쯤 들어서 분위기는 극명해졌습니다. 라운드 디스플레이를 선두로 한 제로 베젤, 그것이 시장의 선호였던 것입니다.</p>
<p class="indent">성능·기능적으로 많은 발전을 이륙한 그 시점에서 구조적 개선은 힘든 일이었습니다. 시장의 경쟁은 스마트폰을 더 얇고 빠르게 만들었습니다. 한계는 당연했습니다. 노치는 분명히 과도기적인 구조입니다. 동시에 섣불리 적용해서는 안 되는 구조였습니다. 그 단점이 명료했기 때문에, 노치의 등장은 성급한 조치였습니다. 왜일까요? 이제 디자이너의 눈으로 이 끔찍한 구조를 훑어봅시다. 노치가 나쁜 3가지 이유를 설명해드리겠습니다.</p>
<h2 id="1-낮은-활용성">1. 낮은 활용성</h2>
<p class="normal-size"><img src="https://cdn.jsdelivr.net/gh/dewberry9/dewberry9.github.io/assets/images/05-notch-study-of-milgram/03.jpg" alt="Nothing is Changed" title="디스플레이는 넓어졌지만 바뀐 건 없었다" loading="lazy" /></p>
<p class="indent">터치 디스플레이는 정말이지 멋진 구조가 아닐 수 없습니다. 입력과 출력은 디지털 세계에서 오랜 시간 동안 엮일 수 없는 일이었습니다. 각기 다른 기기로 구성되는 게 당연했습니다. 사용자의 피드백이 간접적으로 작용한다는 인상을 지울 수 없었습니다. 아무리 가까워도 입력과 출력 사이에는 항상 모니터와 마우스 간의 거리가 버티고 있었습니다. 터치 디스플레이는 이런 경험의 간극을 획기적으로 줄였습니다. 사용자는 최고의 스타일러스, 손가락으로 직접 피드백을 줄 수 있게 되었습니다. 휴대성이 좋은 스마트폰 같은 경우, 그런 터치 디스플레이의 장점이 커집니다. 디지털 세상의 경험을 언제나 가볍게 접할 수 있게 된 겁니다.</p>
<p class="indent">순간적이면서 몰입할 수 있는 경험을 위해서는 스마트폰 디스플레이의 크기가 작지 않은 비중을 가지고 있습니다. 스마트폰 시장은 휴대성과 몰입성 사이에서 그 중요성을 저울질하면서 발전해왔던 겁니다. 노치도 그런 발전을 위해 고안된 아이디어 중 하나였습니다. 불행하게도 그 의도는 정반대로 작용했습니다. 사용자에게 보이는 모든 요소, 모든 구조는 각자의 용도로 쓰입니다. 동시에 서로 조화됩니다. 사용자의 주의력을 흩뜨리지 않는 목적을 공유하고 있는 것입니다. 그러나 노치는 과하게 독립적입니다. 기존에 베젤 상단에 있던 전면 카메라 등의 요소가 밀집된 곳입니다. 수용소에 가까운 구조입니다. 자신의 활용성이 제한적일 뿐만 아니라 디스플레이에 위치한 다른 요소의 활용성마저 저해합니다.</p>
<p class="indent">대부분의 디지털 콘텐츠는 사각형의 틀에서 벗어나지 않습니다. 누구도 지정하지 않았고, 누구도 공표하지 않았지만, 이는 막강한 표준입니다. 노치는 디스플레이를 가린다는 인상이 강합니다. 앞서 언급한 표준 때문입니다. 노치는 그 특유의 위치와 맞물려 라운드 디스플레이와 비교할 수 없을 정도로 큰 부분을 가리고 있습니다. 많은 모바일 애플리케이션이 공유하는 UI 요소인 앱 바, 상단바, 내비게이션은 이러한 노치에게 방해받을 수밖에 없습니다. 이들 모두 만만치 않은 활용성을 지닌 기능적 요소라는 점을 고려하면 이는 심각한 문제입니다.</p>
<h2 id="2-구분성-저하">2. 구분성 저하</h2>
<p class="normal-size"><img src="https://cdn.jsdelivr.net/gh/dewberry9/dewberry9.github.io/assets/images/05-notch-study-of-milgram/04.jpg" alt="Flood in Bezel" title="베젤의 범람" loading="lazy" /></p>
<p class="indent">어떤 공간이든 끝은 있습니다. 거장의 캔버스에도 한계는 있고, 대양도 무한히 뻗쳐있지는 않습니다. 그러한 한계의 규정은 인터랙션 디자인에서 중요한 일입니다. 어디부터 피드백을 수용할 수 있고, 어디까지 수용할 수 없는지 명확해야 합니다. 불필요한 조작과 더불어 방해받는 집중을 방지할 수 있으니 말입니다. 작은 모바일 기기에서 이런 영역의 구분이 얼마나 까다로운지, 또 중요한지는 굳이 역설하지 않겠습니다.</p>
<p class="indent">노치의 크기와 위치적 특징은 디스플레이와 베젤 사이에서 이뤄지는 영역 구분의 효과를 크게 떨어뜨립니다. 노치가 달린 디스플레이의 면은 구불구불한 서해안의 해안선과도 같습니다. 노치에 가까워질수록 사용자의 피드백은 불편해질 수밖에 없습니다. 사용자에게 기기의 구조는 입구입니다. 일단 들어갈 수 있어야 경험을 받을 수 있고, 가치를 부여할 수 있습니다. 노치는 입구에 걸친 빗장입니다. 자물쇠도 없고, 열쇠도 없습니다.</p>
<p class="indent">iPhone X 같은 경우에는 엉뚱한 모양새의 노치를 자연스럽게 활용하기 위해 노치가 위치한 상단 부분을 검게 칠하고 상태바를 마련하는 기능이 있습니다. 노치를 숨기려고 애쓰는, 무척이나 괴이쩍은 기능입니다. 피드백 수용 영역과 그렇지 않은 영역을 구분할 수 없게 만듭니다. 이런 혼동이 좋은 반응을 낼 리 만무합니다. 노치에게는 심미적인 익숙함 이전에 제대로 된 활용처를 찾는 게 먼저입니다.</p>
<h2 id="3-생소한-메타포metaphor">3. 생소한 메타포(Metaphor)</h2>
<p class="normal-size"><img src="https://cdn.jsdelivr.net/gh/dewberry9/dewberry9.github.io/assets/images/05-notch-study-of-milgram/05.jpg" alt="Individuality and Originality are Important. But…" title="개성과 독창성을 중시하는 필자도 노치는 이해가 힘들다" loading="lazy" /></p>
<p class="indent">메타포는 은유라는 의미입니다. 문학적 의미 말고도 다양한 분야에서 사용되고 있는 단어이기도 합니다. 이는 인터랙션 디자인에서도 폭넓게 활용되고 있습니다. 이전에 했던 이야기에서 종종 언급했듯이 디자인을 이루는 많은 요소는 현실에서 그 원형을 가져와서 나름의 변형을 가하고 가치를 담아서 재탄생됩니다. 이것이 인터랙션 디자인에서 메타포가 만들어지는 과정입니다. 현실에서 원형을 가져오기 때문에 학습이 신속합니다. 그래서 디자인은 한 편의 서사시가 됩니다. 막힘없는 비유가 조화를 이루고 있는 겁니다.</p>
<p class="indent">디스플레이라는 구조 자체가 하나의 메타포를 이룹니다. 초기 역사 시대에 기록을 담는 캔버스는 무궁무진했습니다. 정해진 형태는 없었고 지켜야 하는 규칙은 없었습니다. 몇 세기가 흐른 뒤에야 가장 효과적인 구조를 발견하게 되었습니다. 사각형입니다. 이 구조는 오랜 시간 동안 통용되었습니다. 도서, 액자, 전자기기, 메모, 사물함, 심지어 6000년 전 메소포타미아의 점토판도 사각형의 형태를 띠고 있습니다.</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/05-notch-study-of-milgram/06.jpg" alt="Notch is Pollution" title="노치는 오염이다" loading="lazy" /></p>
<p class="indent">몇몇 이들은 노치가 끼어있는 풀 스크린 디스플레이를 보고 창의적인 발전을 말합니다. 각지고 네모난 오래된 디스플레이가 주는 경험은 고리타분하며, 새롭고 독특한 디스플레이의 부흥을 꿈꿉니다. 실제로 그 인상적인 위용은 부정할 수 없습니다. 얼마 전까지만 해도 하웨이의 Nova 3, 에이수스의 Zenfone 5, LG의 ThinQ처럼 노치가 붙은 풀 스크린 디스플레이를 장착한 스마트폰이 많이 출시되었습니다. 미래지향적인, 독특한 구조라고 생각했을 겁니다.</p>
<p class="indent">그러나 디스플레이가 고려해야 하는 것은 콘텐츠입니다. 노치와 동근 모서리가 멋져 보일 때, 먼저 그것에 가려질 콘텐츠를 생각해야합니다. 화면은 넓어지고 콘텐츠가 보이기에 적합한 영역 역시 그에 비례하여 넓어질 것입니다. 그 상황에서 구조와 콘텐츠는 조화를 이뤄야 합니다. 그렇지 않다면 과도기라는 꼬리표를 뗄 수는 없을 겁니다.</p>
<p class="indent">지금까지 많은 콘텐츠가 보고 만들고 느끼기에 적합한 형태로 빚어졌습니다. 디자인 도구로서 디스플레이는 콘텐츠를 보여 줄 때 비로소 가치를 갖습니다. 예술적이고 시인성 좋은 구조를 설계하기 위헤서는 많은 수고가 필요하겠지만, 우리는 비로소 그 발전이 성취될 때 어떤 일이 일어날 지 잘 알고 있습니다.</p>
<p class="indent">그래요, 우리는 새로운 눈을 가지게 될 것입니다.</p>
<p class="indent refer">참고자료</p>
<p class="indent"><a href="https://willowtreeapps.com/ideas/designing-for-a-notched-world">WILLOWTREE Ideas - Designing for a notched world</a></p>
<p class="indent"><a href="https://www.theverge.com/2017/9/14/16306298/apple-iphone-x-screen-notch">Tom Warren - 「Apple’s iPhone X notch is an odd design choice」</a></p>
<p class="indent"><a href="https://www.thesun.co.uk/tech/5699534/apple-iphone-x-design-review-sony/">Sean Keach - 「Think Apple’s iPhone X design is BAD? Rival Sony explains why」</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="/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="/design-for-contrast" class="post-list-item rise-target sequential-rise-target">
<div class="post-thumbnail">
<div class="img-source" style="background-image: url('/assets/images/06-design-for-contrast/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="/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>
<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>