-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathbuild-house-with-cards.html
455 lines (329 loc) · 31.3 KB
/
build-house-with-cards.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
<!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/build-house-with-cards">
<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/01-build-house-with-cards/02.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/01-build-house-with-cards/02.jpg'>
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:url" content="https://dewberry9.github.io/build-house-with-cards">
<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="디자이너에게 카드는 좋은 재료입니다. 그러나 카드로 쌓은 집은 과연 온전할까요? 카드를 쓸 때 생각해볼 만한 활용법 3가지를 골라봤습니다.">
<meta name="author" content="이준환">
<meta name="article:media_name" content="매거진 입맛">
<meta property="article:mobile_url" content="https://dewberry9.github.io/build-house-with-cards">
<meta property="article:pc_url" content="https://dewberry9.github.io/build-house-with-cards">
<meta property="article:mobile_view_url" content="https://dewberry9.github.io/build-house-with-cards">
<meta property="article:pc_view_url" content="https://dewberry9.github.io/build-house-with-cards">
<meta property="article:talk_channel_view_url" content="https://dewberry9.github.io/build-house-with-cards">
<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-28T00:00:00+09:00">
<meta property="article:modified_time" content="2018-07-28T00:00:00+09:00">
<meta property="og:regDate" content="20180728000000">
<script type="application/ld+json">
{
"@context":"https://schema.org/",
"@type":"BlogPosting",
"mainEntityOfPage":{
"@id":"https://dewberry9.github.io/build-house-with-cards"
},
"url":"https://dewberry9.github.io/build-house-with-cards",
"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/01-build-house-with-cards/02.jpg"
},
"datePublished":"2018-07-28T00:00:00+09:00",
"dateModified":"2018-07-28T00: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/build-house-with-cards">
<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/01-build-house-with-cards/01.jpg" alt="Three Awesome Characteristics of Clients" title="삼대장" loading="lazy" /></p>
<p class="indent">아웃소싱을 하다 보면 클라이언트 측이 보내주는 시안에서는 유난히 카드가 많이 보이는 원인불명의 현상을 경험할 수 있습니다. 여기에 유난히 강렬한 배지, 알록달록한 아이콘까지 맞물리면 완벽한 클라이언트 디자인이 완성됩니다. 시안인 점은 고려 해야겠지만, 카드가 많이 사용되는 이유는 아리송하기만 합니다. 어쩌면 인터랙션 디자인 초심자에게 카드는 가장 디자이너스러운 요소로 보일지도 모릅니다. 아닌 게 아니라, 카드는 상당히 눈에 띄는 요소입니다. 디자이너라면 누구든 카드를 앞에 놓고 고민한 적이 있을 겁니다.</p>
<p class="indent">디자인 티타임의 첫 번째 이야기는 바로 이것입니다. 애정만 쏟기에는 어렵고, 무시만 하기에는 매력적인 디자인 소재, 카드에 대한 이야기입니다.</p>
<h2 id="2d라는-사실은-중요하지-않습니다-">2D라는 사실은 중요하지 않습니다 😎</h2>
<blockquote>
<p>허구는 가능성에 매달려야한다. 진상은 그렇지 않다.</p>
<p>- 마크 트웨인(Mark Twain, 작가)</p>
</blockquote>
<p class="indent">명함, 서류, 도서. 모두 일상생활 속에서 넘기고 건네고 쓰고 읽는 것들입니다. 이 네모 납작한 물건들은 그냥 편해서 마냥 익숙합니다. 정보를 담고 저장하고 쓰는데 탁월한 효율을 발휘합니다.</p>
<p class="indent">이쯤에서 디자인 이야기를 해봅시다. 잉크와 pt의 세상이 아닌, 액정과 px의 세상에서 사는 폼, 버튼, 슬라이더들은 현실에서 그 형태와 이름을 따옵니다. 모방하고 발전해서 익숙한 모습에 적절한 기능을 더합니다. 카드도 마찬가지입니다. 평면 위에 놓인 또 다른 평면. 우리는 그 모습을 쉽게 상상할 수 있습니다. 현실에서 수없이 볼 수 있는 광경이기 때문입니다. 그렇기에 현실의 카드가 가진 특징은 디자인 요소로서의 카드에 고스란히 계승됩니다.</p>
<p class="indent">카드가 가진 이 특성을 준수하는 것이 제가 말하고자 하는 세 가지 사항 중 첫 째입니다. 메타포가 원본에 가까울수록 정형화된 그 특성을 따르는 일은 중요합니다. 완성도를 좌지우지하는 일입니다.</p>
<h2 id="활용법-1-디자인을-하자-카드게임-말고">활용법 1. 디자인을 하자. 카드게임 말고.</h2>
<p class="normal-size"><img src="https://cdn.jsdelivr.net/gh/dewberry9/dewberry9.github.io/assets/images/01-build-house-with-cards/02.jpg" alt="Do not play card games when designing" title="음… 마운틴?" loading="lazy" /></p>
<p class="indent">카드에는 이미지, 텍스트, 마이크로인터랙션 등 여러 요소가 한데 묶인 형태를 가지고 있습니다. 상품을 표현하는 카드 한 장에는 상품의 이미지와 그 이름, 설명란과 더불어 장바구니에 담는 버튼까지 달려있습니다. 해당 상품을 주제로 하는, 큰 구심력의 UI가 탄생하는 것입니다. 콘텐츠와 액션의 결합, 이것이 카드의 특성이자 가장 큰 장점입니다.</p>
<p class="indent">잠깐 카드게임을 상상해봅시다. 무작위의 카드들이 손에 들어옵니다. 자신의 카드를 숨기고, 상대의 카드는 추측합니다. 카드가 늘면서 쌓이기 시작하고 긴장이 고조됩니다. 무척 평범한 카드게임의 묘사입니다만, 이 묘사는 카드를 디자인에 활용하면서 피해야 하는 것들로만 구성되었습니다. 좋은 카드란 숨기지도 않고, 추측할 수도 없으며, 쌓이지도 말아야 합니다.</p>
<p class="indent">앞서 언급한 카드의 가장 큰 장점을 떠올려봅시다. 카드는 콘텐츠와 액션의 결합체입니다. 따라서 카드는 독립적이어야 합니다. 카드 안에 카드가 들어서도 안 되고, 카드가 분열해서도 안 됩니다. 카드는 한 덩어리로 고고하게 있어야합니다. 동시에 카드는 의존적입니다. 카드 한 장에 들어찬 콘텐츠와 액션은 한 페이지에 걸쳐 풀어놓아도 문제가 없습니다. 그럼에도 불구하고 카드를 쓰는 경우는 디자인 하는 내용이 카드 한 장으로 해결되지 않을 정도로 많은 상황이죠. 이 아이러니함 때문에 카드는 보통 여러 장이 사용됩니다. 구두 사진과 가격, 구매 버튼이 모여 한 장의 카드를 이루고, 운동화 카드와 슬리퍼 카드가 더해져서 카드 묶음을 만듭니다.</p>
<p class="indent">카드는 독립적인 동시에 의존적입니다. 충분히 복잡한데, 더 꼬일 필요는 없습니다. 그래서 카드 게임을 하듯 활용하면 안 된다는 것입니다. 복잡한 트랜지션과 애니메이션으로 내용을 숨기지 말아야 합니다. 한 그룹 내에 있는 카드라면 개성보다는 통일성을 내세우며 다음 카드를 추측하는 일은 없어야 합니다. 무엇보다, 카드 앞뒤에 다른 카드가 있어서는 안 됩니다. 인터랙션 디자인에서는 그리 넓은 캔버스가 쓰이지 않습니다. 쌓여있는 카드는 아리송한 암시 이상이 될 수 없습니다.</p>
<h2 id="clear-dividerness">활용법 2. 카드를 카드답게</h2>
<p class="normal-size"><img src="https://cdn.jsdelivr.net/gh/dewberry9/dewberry9.github.io/assets/images/01-build-house-with-cards/03.jpg" alt="Shadow and Round" title="현실에 가까이" loading="lazy" /></p>
<p class="indent">가장 중요한 위의 활용법 1만 지킨다면 카드를 쓸 때 큰 문제는 생기지 않을 겁니다. 사실 활용법 2부터는 선택사항에 가까운 이야기들이긴 하지만, 유용할 테니 들어보시죠.</p>
<p class="indent">카드는 현실에서 따온 요소이고, 원본과의 틈새가 매우 좁은 것으로 꼽힙니다. 현실의 모습이 잘 녹아있을수록 ‘이것은 카드다!’라는 인식은 빨라지게 됩니다. 그렇다고 해서 스큐어모피즘 디자인을 하라는 이야기는 아닙니다. 망자는 다시 무덤에 묻어두세요. 현실의 특징을 추상화해서 도입하라는 이야기입니다. 카드는 콘텐츠와 액션을 담고 있습니다. 그럼 그 카드 자체는 어떤가요? 우리는 카드를 통해 다음 단계, 더 자세한 페이지를 비롯한 관련 콘텐츠를 접할 수 있다는 걸 알고 있습니다. 카드의 콘텐츠가 서론이 되어, 관련 콘텐츠라는 본론으로 이끄는 것입니다. 이것은 카드의 본질입니다. 결국 카드는 꽤 커다란 버튼입니다. 그리고 버튼은 누르고 싶게 생겨야 합니다. 현실의 버튼을 모방하여 그 상을 디자인할 때 쓰인 특징들이 카드에도 똑같이 쓰일 수 있는 겁니다.</p>
<p class="indent">그림자는 카드를 카드답게 만드는 대표적인 효과입니다. 요소에 만만치 않은 무게를 싣는 까다로운 효과이기는 하지만, 그 모범적인 특성에는 반박의 여지가 없습니다. 한 평면 위에 붕 떠 있는 요소는 자신을 강조함과 동시에 특정 콘텐츠로 전환될 수 있다는 가능성의 감각을 지니고 있습니다. 다시 말해, 카드의 액션을 나타낼 수 있는 효과라는 것입니다. 모깎기는 활용처가 늘고 있는 효과입니다. 카드의 둥근 모서리는 카드가 주는 비대한 느낌을 효과적으로 해소합니다. 모깎기를 활용하면 그룹의 카드 하나하나가 갖는 묵직한 존재감을 자제시켜 한 그룹으로서 조화시킬 수 있습니다.</p>
<p class="indent">이런 방식으로 카드답게 만들어진 카드는 재미있는 성질을 갖게 됩니다. 요소와 요소를 나누는 명확한 구분성을 말입니다. 말할 것도 없이, 그림자와 모깎기가 적용되는 경계선은 주변과 요소를 분리하는 유일무이한 역할을 수행합니다. 이들이 카드에 활용되면서 카드는 명확한 구분성을 갖게 됩니다. 다양한 정보를 한 곳에 묶어 상당량의 콘텐츠를 포함하는 경우가 부지기수인 카드의 특징을 고려할 때, 카드가 지닌 구분성은 놀라우리만치 적합하다는 것을 알 수 있습니다.</p>
<h2 id="활용법-3-다시-한번-생각하기">활용법 3. 다시 한번 생각하기</h2>
<p class="normal-size"><img src="https://cdn.jsdelivr.net/gh/dewberry9/dewberry9.github.io/assets/images/01-build-house-with-cards/04.jpg" alt="Take off One Post-it" title="9 - 1 = 8" loading="lazy" /></p>
<p class="indent">마지막은 활용법이라고 하기에도 그렇고, 김이 새는 이야기가 될 수도 있습니다. 그렇지만 그저 지나갈 수는 없는 이야기입니다. 카드 도입의 난해함에 대한 설명이자 주의입니다. 간소하게 꾸린 카드도 결국 복수의 콘텐츠가 포함되어있습니다. 이미지, 제목, 설명의 3단 구성에 버튼, 마이크로인터랙션과 같은 갖가지 CTA(Call To Action)를 꽁꽁 싸서 한없이 복잡하게 만들 수도 있습니다. 카드가 비대해지는 것은 한순간입니다. 당연한 이야기지만 이런 무익한 혼잡은 인터랙션 디자인에서 금기시됩니다. 사용자의 집중을 흐리는 치명적인 독입니다. 카드를 활용하려 마음먹은 순간, 어찌어찌 넘겨보려는 생각은 그만두어야 합니다. 만만하게 생각하는 순간 카드는 훌륭한 도구가 아닌 폭탄이 되어있을 겁니다.</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/01-build-house-with-cards/05.jpg" alt="Card of NICE WORK" title="Nice Work" loading="lazy" /></p>
<p class="indent">이렇게 써놓고 보니 카드를 다소 성가신 요소로 볼 수도 있겠다는 생각이 듭니다. 어느 정도는 맞는 말입니다. 우연인 듯 설계한 듯 다양한 특성이 다채로운 효과를 유도하고 있으니까요. 그 사실은 카드가 가지고 있는 매력이라고 봐야 할 것 같습니다. 다른 요소들처럼 카드 역시 계속해서 발전해나가고 있으니 말입니다. 칙칙한 색상의 그림자에도 변화의 바람이 불어 네온사인을 연상시키는 색색의 그림자가 등장하고 있습니다. 의도적으로 경계선을 넘는 콘텐츠가 포함된 카드도 최근 새로이 설계되었습니다. 이처럼 카드는 필요와 심미성을 모두 놓지 않는 발전을 지속하고 있습니다.</p>
<p class="indent">카드로 쌓은 집은 잘못 만들면 위태롭습니다. 딱히 빛나는 발전을 이륙하고 있지도 않습니다. 카드를 쓰며 느낄 수 있는 애정과 매력은 완성이나 발전에서 오는 것이 아닙니다. 한 가지 사실을 직면하는 데 있습니다. 분명 디스플레이 속 세상은 현실의 모방에서 시작되었지만, 이렇게나 아름다워지고 있습니다. 현실을 넘어서.</p>
<p class="indent refer">참고한 글들</p>
<p class="indent"><a href="https://uxdesign.cc/design-better-cards-c0d12ab581c4">Andrew Coyle - 「Design Better Cards」</a></p>
<p class="indent"><a href="https://www.nngroup.com/articles/cards-component">Page Laubheimer - 「Cards: UI-Component Definition」</a></p>
<p class="indent"><a href="https://material.io/design/components/cards.html">Material Design - Cards</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">
<!-- 동일 카테고리 -->
<!-- 3-0 -->
<!-- 2-0 -->
<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="/divider-and-whitespace" class="post-list-item rise-target sequential-rise-target">
<div class="post-thumbnail">
<div class="img-source" style="background-image: url('/assets/images/03-divider-and-whitespace/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>