카드부터 캐러셀까지, 콘텐츠 UI 컴포넌트 이해하기 - 웹디자인 강좌 1-9 — Transcript

Full transcript

1. 0:00웹사이트에 방문한 사용자들은 대부분은 컨텐츠를
2. 0:03읽고 보고 비교하는데 많은 시간을 사용해요
3. 0:06이때 사용되는 것이 컨텐츠의 관련 컴포넌트인데요
4. 0:10이 컴포넌트의 역할은 정보를 보기 좋게
5. 0:12이해하기 쉽게 전달하는 것이라고
6. 0:15이해하시면 좋습니다
7. 0:16가장 대표적인 게 카드인데요
8. 0:18카드에는 이미지 혹은 제목과 설명
9. 0:21메타 정보 등을 하나로 묶어서 보여주는 구조라고
10. 0:24보시면 돼요
11. 0:25어떤 블로그 글이 라든지
12. 0:27프로젝트 리스트나 상품 목록 이런 데서
13. 0:30가장 흔하게 사용되는 컴포넌트입니다
14. 0:32이 카드를 디자인할 때 중요한 부분들은요
15. 0:35해당 서비스 내에서 혹은 그 카드 내에서
16. 0:38어떤 정보를 가장 먼저 보여줄지에 따라서도
17. 0:40디자인이 달라져야 됩니다
18. 0:42화면에 보이는 예시는
19. 0:43썸네일이 가장 먼저 보여야 되고
20. 0:45그다음 제목
21. 0:46다음 핵심 메타 라던지
22. 0:48보조 설명 이런 우선순위가 적용되면 좋고요
23. 0:51그리고 제목과 설명 길이가 달라도
24. 0:53레이아웃이 무너지지 않게 설계해야 되는데요
25. 0:56대표적인게 줄수를 제한하는 겁니다
26. 0:59예를 들어서
27. 0:59제목은 최대 두 줄
28. 1:01보조 설명은 최대 세 줄 이런식으로 하고
29. 1:03그 줄이 넘치면 말 줄임표 처리를 하는 겁니다
30. 1:06그리고 이미지 위에 텍스트를
31. 1:08올리는 카드 타입의 디자인을 할 때는
32. 1:10오버레이를 꼭 깔아서 가독성을 확보해야 됩니다
33. 1:13텍스트와 배경 간의 명암 대비를 통해서
34. 1:16접근성 기준을 통과하도록 설계를 해야 되는 거고요
35. 1:19그리고 이 카드를 디자인할 때는
36. 1:21운영 관점에서도 같이 봐야 됩니다
37. 1:23데이터가 고정되어 있는 정적인 컨텐츠라면
38. 1:26디자이너입장에서는
39. 1:27알아서 길이부터 구성 이런 것들을
40. 1:30통제가 가능하기 때문에
41. 1:32상대적으로 안정적인 디자인이 나올 수가 있는데요
42. 1:34UGC 처럼 사용자가 생성하는
43. 1:37여러 컨텐츠들의 경우에는
44. 1:39변수가 많습니다
45. 1:40그래서 운영 기준이 디자인의 품질을 좌우할 수 있기 때문에
46. 1:44썸네일 비율이라던지
47. 1:45사이즈 규격 이런 것들을 정해두면 좋고요
48. 1:48제목과 설명도
49. 1:49최대 길이 혹은 최대 줄 수 이런 것들을
50. 1:52정책으로 정하는 게 좋습니다
51. 1:53다음은 리스트인데요
52. 1:55리스트는 텍스트 중심의 정보를
53. 1:57연속적으로 보여주는 구조입니다
54. 1:59주로 알림목록이랑 설정 항목 검색 결과
55. 2:02이런 데서 많이 쓰이는데요
56. 2:04카드와의 차이는 좀 명확히 해요
57. 2:06카드는 한 덩어리로 보여주는 거고요
58. 2:08리스트는 아래로 쭉 빠르게
59. 2:10스크롤하면서 훑어보게 합니다
60. 2:12항목 간의 간격을 잘 유지하는 게 중요하구요
61. 2:15정보의 밀도가 높을수록
62. 2:17가독성이 우선이 되어야 됩니다
63. 2:18그리고 리스트 내에서
64. 2:20어떤 액션버튼이 들어가야 되는 경우라면
65. 2:22주로 우측 끝에 두는데
66. 2:24버튼이 여러개인 경우에는
67. 2:25더보기 버튼을 둬서
68. 2:27드롭다운 으로 제공하는게 중요합니다
69. 2:29다음은 테이블 인데요
70. 2:30테이블은 정형화된 데이터를
71. 2:32비교할 때 사용하는 컴포넌트죠
72. 2:34주로 가격표 라든지
73. 2:35통계 화면, 관리자 화면에서 자주 등장을 하죠
74. 2:39이 테이블 자체는 어떠한 레이아웃용이 아니구요
75. 2:42데이터용 컴포넌트라고 이해하시면 됩니다
76. 2:45테이블 자체는
77. 2:46헤더와 바디가 구분이 명확하게 되어야 되고요
78. 2:49각 셀마다 적절한 패딩을 통해서
79. 2:51서로 간의 침범이 되지 않게
80. 2:53잘 조절을 해줘야 됩니다
81. 2:55그리고 두 가지 정도만 더 알아두면 좋은데요
82. 2:57이렇게 리스트가 쭉 있을 때는
83. 2:59테이블 헤더 부분을 눌렀을 때
84. 3:01정렬이 되는 게 좋습니다
85. 3:03예를 들어 가격 부분을 클릭하면
86. 3:05오름차순 내림차순이
87. 3:07이렇게 바뀌도록 개발이 되어야 되고요
88. 3:09디자인적으로 중요한 부분은
89. 3:11이렇게 텍스트의 경우에는
90. 3:12좌측 정렬이 되는 게 중요하구요
91. 3:14이렇게 숫자들이 들어갈 때는 우측 정렬을 해야지만
92. 3:18끝의 자릿수를 기준으로
93. 3:20이게 얼마인지를 비교해서 볼 수가 있습니다
94. 3:22만약에 왼쪽 정렬로 처리가 되버리면
95. 3:24사용자가 보기에
96. 3:25이 데이터를 바로바로 이해하는 게
97. 3:27좀 어려워질 수가 있습니다
98. 3:29지금보다 숫자가 더 많아지는 경우에는
99. 3:31더더욱 복잡하게 느껴질 수 있겠죠
100. 3:33다음은 아코디언 인데요
101. 3:35아코디언 정보를 접었다 펼 수 있는 구조인데요
102. 3:39주로 FAQ라던지 설명이 긴 컨텐츠라던지
103. 3:42도움말 이런 데서 자주 사용이 됩니다
104. 3:45이런 아코디언을 디자인할 때 중요한 부분은
105. 3:47열림 닫힘 상태가 확실하게 디자인 되면 좋고요
106. 3:51아이콘을 플러스 마이너스로 하는 경우도 있고
107. 3:54저렇게 화살표 라는 경우는 위아래로 표시도 됩니다
108. 3:57한 번에 하나만 열릴지
109. 3:59아니면 독립적으로 각각 열리게 할지
110. 4:02이런 것도 선택하기도 합니다
111. 4:04현재는 믹스패널 이라는 사이트인데요
112. 4:06가격 페이지에서 맨 아래에 내려 보면
113. 4:08이렇게 FAQ 섹션이 있는데
114. 4:10여기에 사용되는 것들이 아코디언 이에요
115. 4:12누르면 마이너스가 되고 플러스 마이너스
116. 4:16이렇게도 표시됩니다
117. 4:17독립적으로 열리는 경우도 있고
118. 4:19위에가 열렸을 때 아래를 누르면
119. 4:21위에는 닫히면서 아래는 열리는
120. 4:24이런 구조도 있습니다
121. 4:25사용자가 구매를 할지 말지
122. 4:27어떤 전환의 기로에 서 있는 상태에서
123. 4:29이런 FAQ 같은 걸 보고
124. 4:31의문점을 일부 해소할 수가 있습니다
125. 4:34그래서 보통 이런 가격 페이지 하단이라던지
126. 4:36문의하기이나 상품 상세페이지 같은 곳
127. 4:39하단에 배치가 된다고 보시면 될 것 같습니다
128. 4:41다음은 캐러셀 인데요
129. 4:43회전 목마 처럼
130. 4:44컨텐츠가 이렇게 계속 회전하면서
131. 4:46보여준다고 이해하시면 되는데
132. 4:48컨텐츠를 좌우로 넘기면서 보여주는 형식입니다
133. 4:51주로 이미지 갤러리나 추천 컨텐츠나
134. 4:54배너 영역 이런 데서 많이 쓰이죠
135. 4:56이렇게 크게 배너타입으로 들어가는 경우도 있고요
136. 4:59이렇게 컨텐츠 우측으로 스크롤이 되는 것처럼
137. 5:02케로셀로 디자인 하는 경우가 있습니다
138. 5:04예를 들어 볼게요
139. 5:05삼성 닷컴이라는 사이트가 있는데요
140. 5:07당신에게 딱 추천 제품 이런 섹션이 있을 때
141. 5:10이 자체가 캐러셀 입니다
142. 5:11클릭해서 드래그하거나
143. 5:13이렇게 클릭해서 이동할 수 있어야 해요
144. 5:16현재 어느 정도 있는지를 나타내는
145. 5:18인디케이터 영역이 있고
146. 5:19좌우로 이동 가능한 버튼형의 컨트롤러가 있습니다
147. 5:23엘지전자 사이트에 들어와 볼게요
148. 5:25이렇게 크게 배너타입으로 들어가는 경우가 있죠
149. 5:28현재의 몇 개 중에 몇번째인지
150. 5:30이런 인디케이터가 있고요
151. 5:31지금 회전하는 속도를 보면 한 5초 정도 지나면
152. 5:35회전을 하거든요
153. 5:36롤링이 되는데 이 때
154. 5:38이 일시정지 이 기능이 매우 중요합니다
155. 5:41저렇게 캐러셀의 자동 롤링이 되는 경우에는
156. 5:44웹접근성 기준으로는
157. 5:46일시정지 버튼이 꼭 필수 입니다
158. 5:48사용자에게 불편함과 방해를 줄 수가 있어요
159. 5:51특히 읽을 시간이 부족한 사용자라던지
160. 5:54시각과 인지 장애가 있거나
161. 5:56주의력이 분산된 경우
162. 5:58그리고 스크린리더를 사용하는 사용자
163. 6:00이런 사람들 때문에 웹 접근성에서는
164. 6:03일시정지를 할 수 있도록 제공해야 된다고 권장하고 있습니다
165. 6:07여기에 제가 만든 예시가 있는데요
166. 6:10위에는 잘된 케이스이고 아래는 잘못된 케이스입니다
167. 6:13우선 잘못된 케이스부터 보면
168. 6:15굉장히 빠르게 회전이 되죠
169. 6:17롤링 시간도 빠르고 일시정지 기능도 없고
170. 6:20마우스가 이 안으로 들어왔을 때도
171. 6:22일시정지가 되지 않습니다
172. 6:24이러면 이 화면을 보다가 갑자기 휙휙 바뀌는 부분이
173. 6:28불편을 줄 수가 있습니다
174. 6:30윗 부분은 보다가 마우스를 이렇게 이동을 하면
175. 6:33이 부분을 보거나 혹은 클릭하려고 하는 거잖아요
176. 6:37그럴 때는 이렇게 일시정지가 되도록
177. 6:39개발이 되어 있고요
178. 6:40그리고 클릭하면 다시 재생이 되도록
179. 6:43할 수가 있습니다
180. 6:43그리고 한 페이지당의 롤링시간을
181. 6:465초 정도로 여유있게 주면 조금 더 보는데
182. 6:49조급함이 없어집니다
183. 6:50그리고 마지막으로 라이트박스 라고 있는데요
184. 6:53이미지를 클릭했을 때
185. 6:54확대해서 보여주는 오버레이 컴포넌트입니다
186. 6:57주로 갤러리라던지 포트폴리오
187. 6:59제품 이미지에서 사용될 수 있는데요
188. 7:03꽉 찬 갤러리용으로 보여줄 수가 있습니다
189. 7:06이 갤러리 디자인 에서의 핵심은
190. 7:08원래 화면으로 돌아오기 쉬운지
191. 7:10그리고 닫기 버튼과
192. 7:12배경클릭으로도 닫을 수가 있어야 되고요
193. 7:14키보드나 제스쳐로도 제어가 가능해야 되겠죠
194. 7:17라이트박스는 몰입을 위한 도구이지
195. 7:20사용자를 가두는
196. 7:21도구가 아니라는 점 염두해서 디자인하시면 됩니다
197. 7:24여기서 아무거나
198. 7:24클릭하면 라이트박스 형식으로 나오구요
199. 7:27키보드로 눌렀을 때도 좌우 이동이 가능해야 됩니다
200. 7:31이런 컨트롤러도 필요하구요
201. 7:32그리고 완전 확대한 버전이랑
202. 7:34축소한 버전 이 닦기 버튼이라던지
203. 7:37오버레이 된 부분을 눌러도 닫히도록
204. 7:39이런 식으로 디자인할 수도 있습니다
205. 7:41이렇게 이렇게 컨텐츠 관련된 컴포넌트까지
206. 7:44다양한 타입의 컴포넌트를 지금까지 쭉 배워봤는데요
207. 7:47각 컴포넌트마다의 목적이 어떤 것인지
208. 7:49그리고 디자인할 때
209. 7:50어떤 부분들이 중요한지
210. 7:52이런 것들을
211. 7:52대략 이해를 하셨을 거라 생각을 합니다
212. 7:54다음 챕터부터는
213. 7:56정말 디자이너 입장에서 레이아웃을 잡는 방법부터
214. 7:57정말 디자이너 입장에서 레이아웃을 잡는 방법부터
215. 7:59단위를 이해하고
216. 8:00타이포그래피를 이해하고
217. 8:02컬러는 어떻게 써야 되고
218. 8:04스페이싱과 사이징은 어떻게 하는지
219. 8:05그리고 그래픽과 이미지는 어떤식으로 활용하는지
220. 8:08조금 더 디자인에 집중된 기본기를 쌓는 시간을 가져볼게요