웹사이트 기획의 핵심! 메인 섹션 구조와 설계 원리 - 웹디자인 강좌 1-5 — Transcript

Full transcript

1. 0:00웹페이지에서 가장 핵심이 되는 공간인
2. 0:02바로 메인에 대해서 배워볼 겁니다
3. 0:04이 메인 안을 자세히 들여다보면
4. 0:06하나의 덩어리로 되어 있는 게 아니고요
5. 0:08위에서 아래로 여러 개의 주제에 맞는
6. 0:11컨텐츠 섹션이 쌓이면서
7. 0:12하나의 페이지를 완성하는 겁니다
8. 0:14하나하나를 섹션이라고 하는데요
9. 0:16이 섹션 안에는 의미 있는
10. 0:18컨텐츠 단위를 구분하는 덩어리라고 생각하시면 돼요
11. 0:22이런 섹션을 잘 나눠야지만
12. 0:24유저 입장에서 방문했을 때
13. 0:25이해를 먼저 하고,
14. 0:27설득이 된 이후에
15. 0:28행동으로 이어지게 됩니다
16. 0:29섹션을 설계할 때
17. 0:30가장 기본적인 것은
18. 0:32각 섹션마다 한 문장으로 정의를 하는 건데요
19. 0:35예를 들어서 이 섹션은 서비스의 핵심 가치를 안내하는 구간이고
20. 0:39이 아래 구간에는
21. 0:40이 기능을 이해시키는 섹션으로 두고
22. 0:43그 아래로는 신뢰를 만들어주거나
23. 0:45행동을 유도하는
24. 0:46이렇게 각각의 섹션에 대해서
25. 0:48한 문장 문장으로 정리를 해볼 수가 있게 됩니다
26. 0:51어떤 내용이 어떻게 들어갈지가
27. 0:53머릿속에 조금 더 빠르게 결정될 수가 있겠죠
28. 0:56이 섹션의 순서는 그냥 보기 좋은 순서로
29. 0:58나열하는 건 아니고요
30. 1:00사용자의 인지 흐름을 따라가는 게 중요합니다
31. 1:02해당 사이트에 여러 번 수시로 들락거려서
32. 1:05이미 잘 알고 있는 유저라면 모르겠지만
33. 1:07처음 방문한 사용자 같은 경우는
34. 1:10애초에 이 사이트가
35. 1:11정확히 인지가 안 되어 있기 때문에
36. 1:12뭐 하는 곳일까?
37. 1:14그리고 이 사이트에서 제공하는
38. 1:16어떠한 가치가 나한테
39. 1:17어떤 도움이 될까?
40. 1:18이런 걸 고민하겠죠
41. 1:19그리고 나서 이 서비스들이 믿을만한지
42. 1:22그런 정보들을 찾게 됩니다
43. 1:24마지막으로는 신뢰가 쌓였을 때
44. 1:26이제 내가 구매하고 싶은데
45. 1:28어떻게 하면 될까?
46. 1:29뭐 이런 식으로 흐름이 발생이 되는데요
47. 1:31이 흐름에 맞게 섹션을 제공을 해주면
48. 1:34스크롤 내리면서
49. 1:35구매로 전환되기가
50. 1:36조금 더 높아질 수 있겠죠
51. 1:38랜딩 페이지라든지 서비스 소개 페이지에서
52. 1:41자주 보이는 기본 흐름이 있는데요
53. 1:43이건 정답이라기보다는
54. 1:45가장 흔한 기본값 정도로 생각하시면 좋아요
55. 1:50첫 번째로는 히어로 섹션인데요
56. 1:53스크롤을 내리지 않아도 보이는
57. 1:54가장 첫 번째,
58. 1:55제일 큰 화면을 말합니다
59. 1:57여기는 뭐 하는 곳인지를
60. 1:593초 안에 유저에게 잘 알려주면 되는 거예요
61. 2:02그래서 헤드라인이랑 짧은 설명,
62. 2:04핵심 CTL을 한두 가지를 두는 거죠
63. 2:07그리고 두 번째는 가치
64. 2:09또는 기능에 대한 설명입니다
65. 2:11그래서 나한테 뭐가 좋은데,
66. 2:12이거를 알려주는 부분인데요
67. 2:14그냥 기능을 길게 나열하기보다는
68. 2:16사용자가 얻을 결과
69. 2:18중심으로 보여주는 편이 더 설득력 있어요
70. 2:20기능이 막 2,
71. 2:2130개가 되는 다 보여주기보다는
72. 2:23사람들이 혹할 만한,
73. 2:25어 이거 진짜 내가 필요했어
74. 2:26이런 내용들을 3개에서 5개 정도만
75. 2:28대표적으로 보여주고
76. 2:30나머지는 자세히 보기를 통해서
77. 2:32별도 페이지로 넘기는 방식이 더 깔끔합니다
78. 2:34그리고 세 번째는 신뢰에 대한 섹션인데요
79. 2:37사용자들은 어느 정도 이해가 끝나면
80. 2:39그 다음으로 하는 행동이 근거를 찾습니다
81. 2:42진짜 써봐도 괜찮을까?
82. 2:43혹은 이 제품을 정말 구매해도 괜찮을까?
83. 2:46여기에 대해서는 후기를 찾아보고 싶고
84. 2:49혹은 고객사의 로고라든지
85. 2:50사례 같은 요소
86. 2:51이런 것들이 어디에 있는지
87. 2:53좀 찾아보려고 합니다
88. 2:54소셜프루프 기능이라고 생각하시면 되는데
89. 2:57이런 내용들은 가격 섹션이라든지
90. 2:59아니면 구매하기 같은
91. 3:01어떤 CTA 영역이랑
92. 3:02근처에 붙여두는 게 좋습니다
93. 3:04생각보다 사람들이 남들이 이미 썼는지 좋게 보는지
94. 3:08이런 것들을 중요하게 본다라는 거를
95. 3:10우리가 인지하고 설계를 해야 되겠죠
96. 3:12마지막은 행동 유도 섹션인데요
97. 3:15이제 다 됐어요
98. 3:16이해도 되고
99. 3:17공감도 되고
100. 3:18신뢰도 어느 정도 쌓였으면 행동을 하고 싶죠
101. 3:20예를 들면 무료로 시작하기라든지
102. 3:23상담 신청을 하고 싶거나
103. 3:25구매 혹은 다운로드
104. 3:26이런 것들을 하고 싶을 때가 있잖아요
105. 3:28그런 목표 행동을 하나로 좁혀서
106. 3:30명확하게 제시해주는 게 좋습니다
107. 3:33예시를 한번 같이 볼게요
108. 3:34믹스패널이라는 사이트인데요
109. 3:36저번에 봤던 것처럼
110. 3:37상단에는 헤더가 있고
111. 3:39헤더에는 무료로 시작하기랑 문의하기,
112. 3:42CTA 두 개를 뒀고요
113. 3:43가운데에는 본인들이 무슨 일을 하는 서비스인지
114. 3:46명확하게 있고
115. 3:47얘네들이 원하는 CTA가
116. 3:49두 가지가 있죠
117. 3:50데모를 예약하거나 직접 시작하기
118. 3:52그리고 바로 아랫부분엔 롤링으로
119. 3:55어떤 고객사들이 우리 걸 쓰는지를 대놓고 보여주고 있습니다
120. 3:59그리고 해당 서비스는 SASS다 보니까
121. 4:02이런 식으로 미리 보기를 제공하고 있고요
122. 4:05쭉 내려보면 각각 기능에 대해서
123. 4:07어떤 것들이 있는지
124. 4:08새로운 고객을 얻었을 때
125. 4:10이렇게 보여주는구나
126. 4:11데이터 인게이지먼트가 어떻게 되는지
127. 4:13이런 것들에 대해서
128. 4:144개 정도만 보여줬죠
129. 4:16그리고 본인들이 내세우는 핵심 기능들,
130. 4:19매트릭 트리 같은 것들도 보여주고 있고요
131. 4:22그리고 이 아래로 내려 보면
132. 4:24보안에 대한,
133. 4:25신뢰에 대한 이런 것들이 들어가고 있죠
134. 4:27이런 식으로 특정 서비스가
135. 4:28믹스 패널을 활용했을 때
136. 4:30어느 정도의 어떤 성과가 있었는지를
137. 4:33수치로 이렇게 표현해주고 있고
138. 4:35케이스 스터디를 따로 눌러보면 읽어볼 수 있게끔
139. 4:38제공을 하고 있죠
140. 4:39그리고 더 아래 내려 보면
141. 4:41커뮤니티라든지 문서,
142. 4:42아니면 서포트로 빠르게 이동하는 퀵링크도 제공하고 있고요
143. 4:45여기가 마무리 버튼이겠죠
144. 4:48위에도 있었지만
145. 4:49아래로도 한 번 더 마감해주고
146. 4:51그 다음 붙어
147. 4:52이런 형식이라고 보시면 됩니다
148. 4:54지금 예시는 믹스 패널로 봤는데요
149. 4:56다른 것도 한번 볼까요?
150. 4:57메일 침프 같은 것도
151. 4:59히어로 섹션이 있고
152. 5:00아래 본인들이 제공하는 기능들 나와있죠
153. 5:03그리고 여기 어떤 성과가 있었는지
154. 5:06ROI가 25배가 올라갔고,
155. 5:0924년 동안 경험을 했고
156. 5:11이런 것들 유저가 얼마나 늘었고
157. 5:13이메일이 얼마나 나갔는지
158. 5:15이런 수치로 보여주면서
159. 5:16이거 믿음직한 서비스다라는 것들을
160. 5:19우리가 알 수 있죠
161. 5:20쭉 내려보면 가격 섹션이 있고요
162. 5:22해당 서비스는 어떤 다양한 서비스와의 인테그레이션을
163. 5:25좀 강조하는 것 같아서
164. 5:27이렇게 섹션이 들어간 것 같습니다
165. 5:29그리고 마지막으로 여기도 CTA 섹션으로
166. 5:31마무리를 지었죠
167. 5:32그 이후에는 푸터고요
168. 5:34대부분 이런 구조라고 보시면 되고요
169. 5:35그리고 마지막으로 그렇다고 해서
170. 5:36모든 사이트가 다 동일하게 적용되지는 않습니다
171. 5:40이 섹션이라는 게
172. 5:40결국 사이트의 목적과 성향을 따라가게 되거든요
173. 5:43예를 들어서 커머스 사이트를 한번 볼게요
174. 5:46사용자가 설명을 보러 오는 게 아니고
175. 5:48상품을 보러 오는 거기 때문에
176. 5:50이 위에 있는 히어로
177. 5:51섹션 같은 경우는
178. 5:52메인 제품이라든지
179. 5:54기획전이 올라오는 경우가 많습니다
180. 5:56얘도 한번 보면
181. 5:57어떤 이런 기획전이 있고
182. 5:58카테고리가 있고요
183. 6:00신상품이 있고
184. 6:01이런 순으로 쭉 되어 있고요
185. 6:03이 해당 사이트는 자사몰이다 보니까
186. 6:05본인들 제품 내에서 이렇게 제공하고 있고요
187. 6:0911번가라든지 G마켓처럼 오픈마켓이라면
188. 6:12무수히 많은 제품들이 들어와 있기 때문에
189. 6:15주로 상단에 이렇게 전체 카테고리와 검색
190. 6:18이런 것들이 들어가고요
191. 6:20아래로는 밀고 있는 제품 같은 것들,
192. 6:22베스트 상품
193. 6:23이런 것들로 나열되어 있는 걸 볼 수가 있습니다
194. 6:2511번가도 마찬가지겠죠
195. 6:27오늘의 브랜드라
196. 6:28그래서 이렇게 배너들이 있고요
197. 6:31여기에 들어가는 이름들이 다 다를 뿐이지
198. 6:34본인들의 상품들을 잘 팔기 위한 섹션들이 구성되어 있는 거죠
199. 6:41섹션에 대해서는 어느 정도 이해하셨을 거라고 생각하는데요
200. 6:44추가적으로 자주 사용된 섹션 몇 가지만 더 보면요
201. 6:47블로그나 뉴스
202. 6:48이런 컨텐츠 섹션이 있는데
203. 6:50이 컨텐츠는 기업의 블로그의 경우나 에이전시라든지
204. 6:54아까 그런 서비스나
205. 6:55포트폴리오 같은 사이트에서 많이 사용되는데요
206. 6:57최신 글이나 뉴스 목록 같은 카드 UI 형태로 배치가 되는 편입니다
207. 7:02그리고 케이스 스터디나 작업물 같은 경우는
208. 7:05성과나 결과물을 보여주는 구간이라고 보시면 돼요
209. 7:08아까 봤던 B2B 서비스라든지
210. 7:10포트폴리오 사이트에서 신뢰를 만드는
211. 7:13핵심 섹션 중의 하나라고 보시면 되고요
212. 7:15자주 묻는 질문에 대한 섹션이 있는데요
213. 7:18사용자가 망설이는 포인트를
214. 7:20미리 제거하는 섹션이라고 보시면 돼요
215. 7:22되게 별게 아닌 것 같지만
216. 7:23환불이라든지 계약, 기간,
217. 7:26기능 제한 이렇게 자주 묻는 질문들을
218. 7:28FAQ 형식으로 제공을 하면
219. 7:30직접 본인이 고객센터에 문의를 하거나
220. 7:33이메일 문의를 남기고 답변받으면서
221. 7:35그 사이트에 대한 생각을 접어버리거나 잊어버리지 않고
222. 7:38질문들을 해소해서
223. 7:39전환으로 이어질 수 있도록
224. 7:41도와주는 역할을 합니다
225. 7:42우리가 해볼 예제는 포트폴리오라고 했었잖아요
226. 7:45그래서 포트폴리오 사이트를 기준으로
227. 7:47섹션을 생각을 해봐야 되겠죠
228. 7:48어떠한 기능을 설득하는 사이트가 아니고요
229. 7:51실력을 보여주고
230. 7:52신뢰를 만드는 사이트에 가깝습니다
231. 7:54최종적으로는 문의하기
232. 7:56혹은 작업 의뢰로 이어지면 좋겠죠
233. 7:58페이지마다 섹션 구조를 잡아야 되겠지만
234. 8:00홈만 예시로 먼저 이야기를 해보면
235. 8:03처음 들어왔을 때는
236. 8:04키 비주얼이 들어가는 영역에는
237. 8:06뒷부분에 쇼릴 영상이 들어가고
238. 8:08헤드 카피랑 같이 있으면
239. 8:09어떨까라는 생각을 했고요
240. 8:10그 아래로는 피처드 작업물이 들어가고
241. 8:13그 아래로는 짧은 소개가 담겨 있고
242. 8:15성과까지 같이 들어있는
243. 8:17짧은 소개
244. 8:18그 아래로는 본인들의 어떤 작업 영역을 소개해주는 섹션
245. 8:22이렇게 했고요
246. 8:23아래로는 인사이트가 담긴 글 영역을 넣고
247. 8:27최종적으로는 프로젝트 문의를 받기 위한
248. 8:30CTA 섹션이 들어가면 좋겠다라고 생각을 했습니다
249. 8:33그 이해에는 붙어고요
250. 8:34이렇게 잡아두면
251. 8:35어떻게 작업할지가 훨씬 명확해지죠
252. 8:38실제 우리가 이 기준으로 작업을 해볼 겁니다
253. 8:40그리고 섹션 설계 시에
254. 8:42마지막으로 체크해볼 게
255. 8:43세 가지가 있는데요
256. 8:44한 가지 주제나 목적에 집중이 되어 있는지를
257. 8:47먼저 살펴봐야 됩니다
258. 8:48하나의 섹션 안에
259. 8:49이것저것 다 넣고 싶어서
260. 8:51이런저런 얘기를 하다 보면
261. 8:52해당 섹션에 대한 정보 전달도 떨어지고
262. 8:55몰입감이 떨어지겠죠
263. 8:56두 번째는 흐름이 끊기거나
264. 8:58불필요한 섹션이 있는지
265. 9:00살펴보는 게 중요한데요
266. 9:01섹션이 많아져도 상관없는데
267. 9:03많아지는 게 문제라기보다는
268. 9:05생뚱맞은 섹션이 중간중간에 들어가게 되면
269. 9:07흐름이 끊기는 게 문제가 되겠죠
270. 9:09우선순위 기반으로 설계를 하시는 게 중요합니다
271. 9:12가장 내세우고 싶고
272. 9:13가장 공감되고
273. 9:15가장 중요한 내용들을
274. 9:16맨 위에서부터 보여주셔야 됩니다
275. 9:18다음 영상에서는 컴포넌트가 무엇인지를 알아보고요
276. 9:21컴포넌트에 내에서도
277. 9:23각각의 역할을 맡은 컴포넌트들이 있거든요
278. 9:26그런 것들을 이해하기 편하게 묶어서 설명을 드릴게요