읽히는 웹디자인을 만드는 타이포그래피 - 웹디자인 강좌 2-3 — Transcript

Full transcript

1. 0:00웹 디자인에서
2. 0:00이미지랑 레이아웃도 중요하지만
3. 0:02가장 중요하다고 생각하는 건 텍스트예요
4. 0:05사용자가 버튼을 누르거나
5. 0:06이미지를 보기 전에
6. 0:07먼저 글을 읽고 판단을 합니다
7. 0:10근데 이런 타이포그래피가 제대로 잡혀 있지 않으면
8. 0:13정보는 많은데
9. 0:14잘 안 읽히는 상태가 돼요
10. 0:15그래서 오늘은 웹에서
11. 0:17타이포그래피를 어떻게 잡아야 읽히는지
12. 0:19핵심만 정리를 해드릴게요
13. 0:21타이포그래피에서 가장 중요한 개념은
14. 0:23바로 위계 구조입니다
15. 0:25웹페이지의 모든 정보가 똑같은 중요도를 가지는 건 아니죠
16. 0:29예시처럼 카테고리일 수도 있고
17. 0:31제목이나 요약글, UI 내의 수치일 수도 있죠
18. 0:34각각의 역할과 중요도는 다릅니다
19. 0:37만약에 모든 폰트의 크기와 두께를 같게 하고
20. 0:40색상 구분을 없앤다면
21. 0:42어떻게 될까요?
22. 0:42마치 사전처럼 어디서부터 읽어야 할지 막막하고
23. 0:46눈에 들어오지 않을 겁니다
24. 0:48방금처럼 전체적인 내용도 그렇지만
25. 0:50텍스트는 버튼이나
26. 0:52이런 카드 타입에도 들어가죠
27. 0:54여기에서 색과 이미지를 빼볼게요
28. 0:56이 상태에서도 위계 구조가
29. 0:58한눈에 보여야 됩니다
30. 1:00만약 카드의 위계 구조를 빼버리면
31. 1:02정보들이 한눈에 다 안 들어오죠
32. 1:04모든 정보를 사용자가 짧은 시간 안에 다 캐치할 수 없기 때문에
33. 1:08읽어야 될 부분들을 강조하고 키워야 됩니다
34. 1:11디자이너 입장에서 이 위계 구조를
35. 1:13어떻게 효과적으로 만들 수 있을지
36. 1:15다섯 가지로 제가 정리를 해봤습니다
37. 1:17폰트 크기와 행간과 자간,
38. 1:19그리고 폰트 종류,
39. 1:20두께 대비 이렇게 있습니다
40. 1:23첫 번째로 폰트 크기인데요
41. 1:25화면에서 어떤 정보가 더 중요한지를 보여줄 때
42. 1:28가장 기본이 되는 게 바로 크기죠
43. 1:31제목은 크게,
44. 1:32본문은 읽기 좋게,
45. 1:33보조 설명은 작게 설정해야
46. 1:35사용자가 정보를 자연스럽게 따라갈 수가 있습니다
47. 1:39초보 디자이너들이 자주 하는 실수가 있는데요
48. 1:41페이지마다, 섹션마다,
49. 1:43뭐 문단마다 폰트 크기를 조금씩 다르게 쓰는 거예요
50. 1:46예를 들어 어떤 곳에서는 16픽셀을 썼는데
51. 1:49어디서는 15픽셀,
52. 1:50이런 식으로 규칙 없이 디자인을 하게 되면
53. 1:53디자인하는 사람도 관리가 어렵고
54. 1:55개발자도 구현할 때
55. 1:57불필요한 스타일이 늘어나게 되는 겁니다
56. 1:59그래서 폰트 크기는 감으로 정하는 게 아니고요
57. 2:01역할에 따라 규칙을 만들어야 됩니다
58. 2:04타이포그래픽 규칙에서 헤드라인, 타이틀,
59. 2:07레이블, 바디, 캡션
60. 2:08여러 가지 역할을 하는 폰트들이 있겠죠
61. 2:11그 역할에 맞게 크기를 지정하는 방식인데요
62. 2:14웹에서는 H1부터 H6까지 헤딩 구조가 있지만
63. 2:18디자이너 입장에서는 우선 시각적 위계가
64. 2:20자연스럽게 보이도록 설계하는 것이 더 중요합니다
65. 2:23이때 사용하는 개념이
66. 2:24폰트 스케일인데요
67. 2:25기본 본문 크기를 16픽셀로 두고
68. 2:28이 크기를 기준으로
69. 2:29일정한 비율에 따라서
70. 2:30제목 크기를 키워나가는 방식을 말합니다
71. 2:33제가 만든 예시로 같이 보는 게
72. 2:35이해가 빠를 것 같아서요
73. 2:36한번 보겠습니다
74. 2:37우측 상단에 기본 크기라
75. 2:39그래서 데스크탑에 16픽셀로 했거든요
76. 2:42그러면 왼쪽에 본문 기준이 있죠?
77. 2:4516픽셀이 1rem
78. 2:47REM은 저희가 저번 시간에 배웠었죠
79. 2:49이걸 기준으로 점점점 위로 가면 커지고
80. 2:53아래로 가면 작아지고
81. 2:54이런 개념이 있는데요
82. 2:55그 기준이 스케일 비율로도 조절할 수가 있습니다
83. 2:58지금은 1.25배로 해가지고
84. 3:011REM에서 한 칸 위로 올라가면 1.25배가 되고요
85. 3:05한 칸 더 위도 1.25배씩
86. 3:07계속 이렇게 점점 커지는 방식을 말합니다
87. 3:11이 부분을 비율을 점점 키우면
88. 3:14커지는 폭이 점점 커지겠죠, 이렇게
89. 3:16이렇게 과감하게 키우는 부분들은
90. 3:19주로 랜딩 페이지나 소개 페이지 같은 텍스트가 잘 보여야 되는 부분에서 사용되고요
91. 3:25비율을 이렇게 점점 줄이는 경우에는
92. 3:27차이가 크지 않잖아요
93. 3:29주로 웹 애플리케이션 디자인에서는
94. 3:32이렇게 작은 비율로도 사용이 되겠죠
95. 3:34좁은 화면 내에서도
96. 3:35위계 구조가 보여야 되니까요
97. 3:37지금은 제가 샘플로 몇 개만 만들었는데
98. 3:39위계 구조를 더 다양하게 더 많이도 만들 수 있지만
99. 3:42여러분이 만들려고 하는 사이트의 그 구조에 맞게 필요한 만큼만 만드는 게 중요합니다
100. 3:48이때 추가로 중요한 점은
101. 3:50반응형에 대응하는 건데요
102. 3:52데스크탑 기준으로는 이런 비율이 유지됐다면
103. 3:55태블릿의 기준은 예를 들어서
104. 3:5715픽셀, 모바일 기준은
105. 3:5914픽셀로 기본값이 되는
106. 4:01이 기준을 줄이면
107. 4:03나머지도 다 같이 줄어들겠죠
108. 4:05데스크탑일 때는 이렇게 보이지만
109. 4:08태블릿으로 봤을 때는
110. 4:10조금씩 줄어들었죠
111. 4:11기본 본문이 15고 모바일로 가면
112. 4:1414기준으로 처리가 되는
113. 4:17이렇게 구조를 정리할 수도 있습니다
114. 4:19이 부분을 이렇게 줄이면
115. 4:21모바일에서는 더 작아지고요
116. 4:23이 비율도 줄일 수 있겠죠
117. 4:25모바일의 기본값을 12픽셀로 해서 줄이거나
118. 4:28아니면 태블릿은 14로 할 수도 있고요
119. 4:31데스크탑은 뭐 18로 이렇게 늘릴 수도 있습니다
120. 4:35REM의 계산에 따라서 반영이 되는 거죠
121. 4:37꼭 이렇게 REM을 쓰지 않더라도
122. 4:40각 구간마다 좀 딱딱 떨어지는 픽셀을 좋아하는 사람들은
123. 4:44뭐 24, 28, 36, 44, 48 이렇게 하는 경우도 있는데
124. 4:48어찌됐든 디바이스별로
125. 4:50폰트 크기의 토큰을 만들어 두면
126. 4:52화면 크기가 달라졌을 때
127. 4:54전체적인 위계는 유지하면서
128. 4:55자연스럽게 대응이 가능하겠죠
129. 4:57다음은 행간과 자간인데요
130. 5:00행간은 줄 간격을 말하죠
131. 5:02글자와 글자 사이의 여백을 의미하는데요
132. 5:04텍스트가 읽히는 호흡을 결정하는 중요한 요소입니다
133. 5:07웹 디자인에서는 행간을 크게 세 가지 유형으로 나눠서 정의하면
134. 5:12훨씬 더 이해하기가 편할 겁니다
135. 5:14첫 번째는 제목형 텍스트 행간인데요
136. 5:17여기 예시에서도 같이 보자면
137. 5:19이렇게가 제목형이겠죠
138. 5:21주로 한 줄 또는 길어야
139. 5:23두 줄로 표현되는 경우가 많기 때문에
140. 5:25행간을 너무 크게 잡을 필요가 없습니다
141. 5:28현재는 더 큰 경우에는 1.2
142. 5:31그리고 소제목은 1.4로 정해놨는데요
143. 5:34이 부분은 조절해도
144. 5:35지금은 한 줄이라서
145. 5:37보기가 어려우니까
146. 5:38이렇게 두 줄로 바꿔서 설명을 드려볼게요
147. 5:41행간을 조절하면
148. 5:43이런 식으로 1이 100%거든요
149. 5:45100%면 너무 딱 붙어 보이겠죠?
150. 5:48그리고 1.6으로 해도 되긴 하는데
151. 5:51좀 벙벙해 보입니다
152. 5:52폰트가 크기 때문에
153. 5:54여백이 넓어졌을 때
154. 5:55보기가 좀 애매한 경우가 있어요
155. 5:57그래서 저 같은 경우는
156. 5:59120%에서 150% 사이를 권장합니다
157. 6:02소제목 같은 경우도
158. 6:04글씨가 작다 보니까
159. 6:05너무 행간이 좁으면 읽는데
160. 6:08어려움을 겪을 수가 있습니다
161. 6:09그래서 저는 1.5에서 1.4 정도를 선호하고요
162. 6:13더 줄이면 붙어 보이는 문제가 있죠
163. 6:17그리고 본문형 텍스트 같은 경우는 매우 중요한데요
164. 6:20블로그나 뉴스,
165. 6:21어떤 상세 설명글을 읽는
166. 6:24이런 긴 흐름으로 읽어야 되는 부분에서는
167. 6:26행간이 넓어야 돼요
168. 6:27지금 예시로는 글줄이
169. 6:29네 줄밖에 안 되기 때문에
170. 6:311.8로 했는데요
171. 6:32글줄을 되게 길게 해볼게요
172. 6:34이렇게 읽는다고 했을 때는 쭉 읽다가
173. 6:38이 끝 지점에서 읽고
174. 6:40다시 그다음 첫 번째로 갈 때
175. 6:42행간이 어느 정도 받쳐줘야지만
176. 6:44읽기가 편해요
177. 6:46그래서 이 글줄이 매우 긴 경우에는
178. 6:48본문을 저는 2로 합니다
179. 6:51그래야 보기가 편해요
180. 6:52만약에 줄여버리면 읽기가 매우 힘들 거예요
181. 6:571.4로 하면 벌써부터 보기가 싫어집니다
182. 7:01최소 1.8에서 2.0,
183. 7:03전 개인적으로 2를 선호합니다
184. 7:062가 200%예요
185. 7:07너무 기니까 다시 좀 줄여볼게요
186. 7:10버튼이나 인풋, 드롭다운 같은
187. 7:12정확한 높이 계산이 중요한 UI 요소에서는 행간2%로 유동적이거나
188. 7:18너무 넓으면
189. 7:18박스 높이가 커지기 때문에
190. 7:20어떤 수직 정렬이 어긋나기가 쉬워요
191. 7:22그래서 UI 내의 텍스트는
192. 7:24보통 행간을 1, 100%죠
193. 7:27100%로 하거나
194. 7:28아니면 기준이 되는 수치,
195. 7:31예를 들면 20픽셀
196. 7:32혹은 24픽셀
197. 7:33이런 식으로 규칙을 정해서
198. 7:35그 안에서 정확한 박스 높이 조절이 가능하게끔
199. 7:38설정을 하는 것을 권장드립니다
200. 7:41자간 같은 경우는
201. 7:42글자와 글자 사이 간격을 말하는데요
202. 7:45영문 사이트에서는 자간을 조절하는 경우가 종종 있는데
203. 7:48약간 올드한 느낌이 날 때 있어서
204. 7:50개인적으로는 사용하지 않습니다
205. 7:52한글 같은 경우에도
206. 7:53자간이 넓으면
207. 7:55벙벙해 보이기 때문에
208. 7:56어느 정도를 미세 조정을 했었는데
209. 7:58요즘에는 프리텐다드체 같은 게
210. 8:00거의 기본체가 돼버렸잖아요
211. 8:02이미 조정이 되어서 나온 폰트이기 때문에
212. 8:04굳이 미세 조정은 하지 않습니다
213. 8:06단지 다른 폰트를 사용했을 때
214. 8:08좀 벙벙해 보인다 했을 때는
215. 8:100에서 -0.5픽셀 정도
216. 8:13그 사이에서 여러분이 보기 편한 자간 설정하는 것을 권장드립니다
217. 8:17세 번째는 폰트 종류인데요
218. 8:19디자인할 때
219. 8:19단순히 예쁜 폰트를 고르는 게 아니라
220. 8:22웹에서 실제로 사용할 수 있는 폰트인지를 먼저 확인해야겠죠
221. 8:26크게 시스템 폰트와 웹 폰트
222. 8:28이 두 가지를 먼저 이해해야 되는데요
223. 8:30시스템 폰트는 사용자 기기에
224. 8:33이미 설치된 폰트를 말합니다
225. 8:34따로 어디 서버에서 불러올 필요가 없기 때문에
226. 8:37로딩 속도가 빠르고 안정적이에요
227. 8:40예를 들어서 Mac 유저의 입장에서는
228. 8:42애플산돌고딕 같은 게
229. 8:44기본 폰트로 되어 있고요
230. 8:45아니면 맑은 고딕 같은 게 나올 때도 있죠
231. 8:48그래서 우리는 일관된 스타일을 제공하기 위해서
232. 8:50웹 폰트를 사용하는데요
233. 8:52웹 폰트는 서버에서 별도로 불러와서
234. 8:54사용하는 폰트를 말해요
235. 8:56여기서 더 중요한 두 가지가 있는데요
236. 8:58상업적으로 사용 가능한지,
237. 9:00그리고 웹에 임베딩 라이센스가
238. 9:03가능한지를 확인하셔야 됩니다
239. 9:05그리고 두 번째는 국문이나 영문, 숫자
240. 9:08이런 거에도 다 제공을 해서
241. 9:10함께 어우러지는지를 확인하셔야 돼요
242. 9:12그리고 폰트가 너무 많으면
243. 9:14사이트가 느려질 수가 있습니다
244. 9:16그래서 사이트에 접속할 때마다
245. 9:18여러 폰트를 서버에서 불러와야 되기 때문인데요
246. 9:21로딩 속도에 영향을 주겠죠
247. 9:23그래서 저 같은 경우는
248. 9:25하나의 폰트만 사용하는데요
249. 9:26상황에 따라 제목용 폰트와
250. 9:28본문용 폰트를 구분해서 사용할 수도 있습니다
251. 9:31그리고 두께로도 위계 구조를 구분할 수 있는데요
252. 9:34같은 크기라도 두께에 따라서
253. 9:36몰입감이 달라질 수가 있습니다
254. 9:38하지만 두께 역시 마찬가지로
255. 9:40전체를 다 불러오면
256. 9:41로딩 속도에 영향을 주기 때문에
257. 9:43두 개 혹은 세 개 정도의 두께 사용을 권장합니다
258. 9:47폰트 사이즈도 당연히 조정이 돼야 되겠지만
259. 9:49두께도 같이 조정해야지만
260. 9:51더 풍성하게 위계 구조를 구분하실 수가 있겠죠
261. 9:54마지막으로 다섯 번째는 대비입니다
262. 9:56이 대비는 배경과 텍스트 간의 구분을 말하는 거예요
263. 10:00모든 텍스트가 같은 색과 같은 농도로 보이면
264. 10:03사용자는 무엇을 먼저 봐야 할지
265. 10:05알기 어렵습니다
266. 10:06그래서 UI 디자인에서는
267. 10:07중요한 정보는 조금 더 선명하게,
268. 10:10덜 중요한 정보는
269. 10:11조금 연하게 조정을 해요
270. 10:13하지만 대비를 너무 약하게 해주게 되면
271. 10:15문제가 생깁니다
272. 10:16디자이너가 보기에는
273. 10:17세련돼 보여도
274. 10:18실제 사용자는 텍스트를 읽기 어려울 수가 있어요
275. 10:21우리 모두가 같은 환경에서
276. 10:23같은 눈을 가진 게 아니기 때문에
277. 10:25이 가독성에 대한 표준을 잘 지키는 게 중요합니다
278. 10:28대비를 이야기할 때
279. 10:29꼭 알아야 하는 기준이 있는데요 WCAG입니다
280. 10:32웹 콘텐츠 접근성 가이드라인을 의미하는데요
281. 10:35웹사이트를 만들 때
282. 10:37더 많은 사용자가 문제없이 읽고 사용할 수 있도록
283. 10:40정리해둔 국제 접근성의 기준을 말해요
284. 10:43여기서 텍스트 대비는
285. 10:44글자색과 배경색이 얼마나 명확하게 구분되는지를
286. 10:47숫자로 판단합니다
287. 10:49예를 들어 밝은 회색 글자를
288. 10:51흰 배경 위에 올리면
289. 10:52보기에는 깔끔해 보일 수 있는데
290. 10:54잘 읽히지 않을 수가 있어요
291. 10:56특히 시력이 약한 사용자,
292. 10:58고령 사용자, 밝은 야외에서
293. 11:00화면을 보는 사용자에게도 읽는 데
294. 11:02문제가 생길 수 있습니다
295. 11:04WCAG 기준으로는 일반 텍스트의 경우는
296. 11:07배경과의 명도 대비가
297. 11:094.5대 1 이상이어야지만
298. 11:11더블에이 등급에 충족을 하고요
299. 11:13큰 텍스트는 글자 자체가 크기 때문에
300. 11:15상대적으로 읽기 쉬워서
301. 11:173대 1 이상이면
302. 11:18더블에이 기준을 충족을 합니다
303. 11:21여기서 말하는 큰 텍스트의 기준은
304. 11:2324픽셀 이상을 의미해요
305. 11:25그리고 굵은 글씨 같은 경우는
306. 11:2818픽셀 이상 정도로 생각하시면 됩니다
307. 11:30현재 보이는 예시처럼
308. 11:31피그마에서 이런 디자인을 했다고
309. 11:33가정을 해볼게요
310. 11:34예시에서 브레드크럼즈 부분에서
311. 11:37현재 페이지는 연하게 표현이 되어 있고요
312. 11:40이동할 수 있는 부분은
313. 11:41진하게 표현이 되어 있죠
314. 11:42두께도 차이가 있고요
315. 11:44그리고 헤드 카피는 좀 크고 두껍게,
316. 11:46그다음은 작고 연하게
317. 11:48이때 Fill 부분에서 사용된 폰트의 컬러가 다릅니다
318. 11:53여기에서 접근성이 맞는지
319. 11:54한번 테스트를 해보자면
320. 11:56스타크라는 플러그인이 있어요
321. 11:58테스팅 툴에서 콘트라스트를 한번 해볼게요
322. 12:01여기에서 원하는 부분을 클릭을 하시면
323. 12:04텍스트와 배경을 컬러로 찍어주고요
324. 12:07결과값이 어떤지 17.64대 1
325. 12:11그러면 통과가 됐죠
326. 12:12만약에 컬러를 좀 연하게 해볼게요
327. 12:16이렇게 이게 디자인에 좋아 보여라고 했을 때
328. 12:19노말 텍스트일 때는
329. 12:21통과가 안 됐지만
330. 12:22라지 텍스트일 때는 통과가 됐어요
331. 12:24여기를 조금만 더 올려보면
332. 12:27이런 식으로 통과가 안 됩니다
333. 12:30저희 눈에는 잘 보일 수 있어도
334. 12:32다른 분들 기준으로는 잘 안 읽힐 수 있기 때문에
335. 12:35텍스트 부분에는 신경을 써서 적용을 해줘야 됩니다
336. 12:38반대로 이렇게 어두운 부분에서
337. 12:40만약에 이런 부분에서
338. 12:42이 텍스트만 강조하고 싶다라고 하면은
339. 12:45이렇게 조정도 가능하겠죠
340. 12:47테스트를 하려고 하는데
341. 12:48그라디언트가 뭔가 인식이 돼서
342. 12:51방해가 되는 것 같아서
343. 12:52잠시 눈을 끄고 테스트를 해볼게요
344. 12:55그러면 6.75대 1로 통과가 된 걸 볼 수가 있습니다
345. 12:59이렇게 타이포그래피의 중요한 다섯 가지를 살펴봤는데요
346. 13:02폰트 크기와 행간과 자간, 폰트 종류,
347. 13:05두께 대비 이렇게만 잘 지켜도
348. 13:08절반은 가는 안정적인 디자인을 할 수가 있을 겁니다
349. 13:11다음 영상에서는 컬러 시스템과 컬러 활용 원칙에 대해서 알아볼게요