#4 반응형 웹디자인을 위한 최적화된 그리드 만들기(UI 디자인 입문이라면 꼭 봐야할 영상) - 스케치 강좌 — Transcript

Full transcript

1. 0:06where a
2. 0:08안녕하세요 이번시간에는 반응형 디젠의 효율적인 그리드 시스템에 대해서
3. 0:13배우면서 스케치에서 레이어 그리드를 쉽게 만드는 방법을 배워 볼게요
4. 0:17ui 디자인을 할 때 꼭 알아야 될 기본기 중에 하나죠
5. 0:21포토샵에서 제공하는 것처럼 스케치 에서도 레아 그리드를 손쉽게 만들어
6. 0:25주는 기능을 제공합니다
7. 0:27저번 영상에서는 앱 디자인 관련해서 해상도 사이즈나 뭐 dp 에 대한
8. 0:32혹은 레티나 디스플레이 대해서 간단하게 배워 봤었는데요 이번에는 pc
9. 0:37모바일 반응에 웹사이트를 디제 1억 가정하고
10. 0:40예제를 통해서 한번 설명을 드리겠습니다 웹 디자인을 하려고 하는데
11. 0:45해상도를 몇으로 해야 될 지 모 간격은 어떻게 해야할지 스케치에서 기능만
12. 0:50한다고 해봤자 제대로 된 수치를 모르면 소용이 없겠죠
13. 0:53해상도 부터 말씀드리자면 데스크탑에 는 정답이 없습니다
14. 0:58그 이유는 두가지 인데요 첫번째는 수많은 모니터와 수만 스타일의 사이트가
15. 1:02존재하기 때문인데요
16. 1:04지금도 이 시간에도 새로운 사이트들이 계속 만들어지고 있죠
17. 1:08정답 처럼 기억하시기 가 쉽지는 않습니다
18. 1:11두번째는 반응형 웹 이기 때문에 정확하게 뭐 1440 1024 픽셀
19. 1:17이런식으로 절대 값으로 적용시키기 쉽지 않습니다
20. 1:21왜냐하면 실제 퍼블리싱 에서는 퍼센트를 사용하기 때문이고요
21. 1:241920 모니터에서 보는 것과 1280 모니터에서 보는 것 그리고
22. 1:29개개인이 노트북으로 보든 큰 pc 모니터에서 보던 계속 다를 수가 있는
23. 1:34거죠
24. 1:35그렇다고 해서 아무렇게나 할 순 없겠죠 제가 웹 디자인에 대한 적합한 귤
25. 1:40알려드릴게요 우선 본인이 제작하는 사이트에 성향을 파악하는 게 가장
26. 1:44기본입니다 연령에 상관없이 누구나 사용하는 사이트 면서 다양한 컨텐츠를
27. 1:49제공하는 사이트 하면 가장 작은 모니터를 겨냥해서 제작하는 것이 좋습니다
28. 1:55뭐 예를 들면 1024 같은거 말이죠 대표적으로 네이버나 다음 같은 그
29. 2:00포털 사이트를 보면 이 하루에도 수많은 사람들이 방문하는 사이트 이고
30. 2:05다양한 기능과 정보들을 제공 하다보니까 가장 최적화된 기교를 사용하는
31. 2:09거죠
32. 2:10네이버 같은 경우는 가로 값이 1080 픽셀 이구요
33. 2:15그리고 다음 같은 경우는 990 픽셀 입니다
34. 2:18그 정도로 가장 최적화된 기력을 사용하는데요
35. 2:22강원도 산골짜기에 사시는 할머니가 작은 모니터에서 이 웹사이트를 들어와도
36. 2:27전혀 문제가 없도록 말이죠 뭐 잘리거나 뭐 이럼 안되겠죠
37. 2:33디자인을 멋있게 보여 주고 싶고 뭐 시원시원 해야 하는 회사 소개 사이트
38. 2:37이거나 아니면 은 쇼핑몰이라 면
39. 2:40최대 1920 6세까지 사용하는 경우도 물론 있죠
40. 2:44본인이 하고자 하는 사이트가 어떤
41. 2:46이에 따라서 다릅니다 본인의 모니터가 1920 1080 이라고 모든
42. 2:51사람이 이 해상도에서 볼 거라는 생각은 우선 버려야 합니다
43. 2:55저도 아이맥을 사용하는데 디자이너 분들이 가장 실수하는 부분이 바로 이
44. 3:00부분이 에요
45. 3:024 모니터에서는 좋아 보였는데 점점 쪽 아니면 모바일 s 디자인할 때도
46. 3:06플레타 s 플레이 때문에 360 에서 작업을 안하고 720 으로 봤을 때
47. 3:11개를 모바일로 실사 지로 보면서 채팅을 하는 디자인도 불로 많지만 가끔은
48. 3:17100% 로 확대로 720 으로 봤을 때 보기 적합하다 고 생각했는데
49. 3:21모바일로 갔을 때 텍스트가 너무 작거나 가독성이 떨어지는 부분들이 있는
50. 3:26거죠 그럼 우리 나라 혹은 전세계적으로 많이 사용하는
51. 3:30그 해상도 사이트 해상도의 귀 역의 비중을 알아봐야 더 정확해 지겠죠
52. 3:37여기 사이트에 보시면 해상도별 퍼센트가 나와있는데요
53. 3:41지금은 한국 기준으로 데스크탑 스크린 해상도에 대해서 어 통계가 나와
54. 3:46있습니다
55. 3:47가장 높은 비중이 1920 1080 이 줘 어 거의 뭐 비중은
56. 3:52비슷비슷한데 어 독보적으로 일 이라고 할 수 있겠습니다
57. 3:57그렇다고 2 비율로 1920 1080 으로만 꼭 해야할까요
58. 4:01아니죠 이 아래쪽에 있는 것도 굉장히 중요합니다
59. 4:06퍼센트가 10% 라고 해서 무시할 수가 없는 부분이거든요
60. 4:11가장 낮은 비율이 1280 이라고 되어 있습니다
61. 4:15여기 128 곳이죠 대 개체를 낮은 데요
62. 4:18그럴 경우에는 1280 을 뒤 준으로 잡은 것이 가장 좋습니다
63. 4:231 들어 1920 1080 이자 10% 라고 해서 여기에만 최적화를
64. 4:27시킨다면
65. 4:28나머지 60% 의 사람들이 볼 때는 보기가 좋지 않겠죠
66. 4:32뭐 너무 텍스트 가짜 가지고 글 줄이 밀리거나 이미지가 짤리고
67. 4:37아닐 못 반응형 차례를 잘못해서 버튼이 화면 상에서 짤려서 다 같거나
68. 4:42뭐 이런 경우가 있을 수 있겠죠 그리고 모바일 사이즈도 마찬가지입니다
69. 4:48아랫부분이 보기가 복잡하다 면 위에 부분만 봐도 알 수 있는데요
70. 4:521위가 360 의 육사 02 줘 가장 흔한 비율이 줘 아 여기서도
71. 4:56마찬가지로 큰 것의 맞추는 것이 아니라
72. 4:59작은것에 맞추는 것입니다
73. 5:03그리고 아셔야 될게 컨테이너 라는 개념인데요 컨테이너 라는 것은
74. 5:08안에 담기는 내용물에 최대 폭 을 말하는데요
75. 5:12뭐 예를 들어 b 헬스나 핀터레스트
76. 5:16뭐 드리블 뭐 어워드 이런 사이트들도 컨테이너 라는게 존재합니다
77. 5:21제가 추천드리는 컨테이너 폭은 1200 픽셀 입니다
78. 5:26전체 폭은 1920 픽셀로 카드 안에 담기는 내용물에 최대 폭은
79. 5:31컨테이너 라고 한다 그랬죠 1200 픽셀 로 가면 쳤습니다
80. 5:36그리고 알아야 될 개념이 있는데요 그래요 그리드를 만들 때는 컬럼 과거
81. 5:40터가 있습니다
82. 5:42디자이너 분들이 보내 영상의 생각하고 따로 설명 안되겠습니다
83. 5:45그럼 몇 단으로 하는게 좋을지 추천해 드릴께요
84. 5:48편집디자인 했을 때에는 꼭 8단 뭐 12단 16단 20단 쿡은
85. 5:54되게 홀수로 하는 경우도 바꾸 요 되게 다양하지만
86. 5:58저는 왜 그 기준으로 말씀 드리기 때문에 12단 을 추천드립니다
87. 6:0212단 으로 해야 하는 이유는 2단 3단 4단 6단으로 나눔 때에도 정수
88. 6:07값은 나오기 때문에
89. 6:09컵 일신 할 때도 되게 편리한 거셀 들어가 로 볼 100% 라고 했을때
90. 6:132단 레이어 아수라 할 경우에는 시 비단을 6으로 나누면 2가 되는 거죠
91. 6:19그거면 100% 중에 50% 의 면적을 차지하는 거
92. 6:233단 레이아웃 할 경우에는 뭐 4로 나누면 3단이 되는거고 이런식으로
93. 6:29레이아웃을 다양하게 사용 할 수가 있죠
94. 6:32효율적인 단어 라는게 가장 중요합니다
95. 6:35너무 단을 많이 쪽에 버리면 반응 형의 오히려 취약할 수 가 있어요
96. 6:39특정 분기마다 단을 조절하면 좋은데 어 저런식으로
97. 6:44분기점을 태워서 사이트에 그 반응형 포인트를 가져가게 되는게 되게 애매해
98. 6:50지는 거죠
99. 6:51그렇다면 거터 같은 경우는 어떻게 할까요
100. 6:54거터 는 30 픽셀을 추천드립니다 어 그 이유는 30 픽셀로 했을 때
101. 7:00컬럼 넓이가 아까 제 말한 컨테이너에 넓이가 1200 픽셀 로 정한
102. 7:05경우에는
103. 7:07뭐 거 털을 30 픽셀로 하면 1 컬럼 당 1단 당 72 픽셀이 라는
104. 7:14정수로 딱 떨어지게 됩니다
105. 7:16물론 어디까지나 건장 상해 고 뭐 2집 픽셀로 하셔도 되고 시 픽셀
106. 7:20하셔도 됩니다
107. 7:21본인이 원하는 그리드 시스템을 이용해서 작업하시면 돼요
108. 7:25대신에 그리드 시스템을 사용하는 습관을 들으셔야 좋은 디자인이 나옵니다
109. 7:30그리고 퍼블리시티 입장에서도 갈 d 라인 이라는
110. 7:33워 특정 규칙이 있어야지만 본인이 디자인 항거를 그대로 웹사이트 코드로
111. 7:38옮겨 주는 데에 더 수월해 지는 거죠
112. 7:41아트보드 에 한번 만들어 볼게요 그리드 를 설정하는 건 굉장히 쉬운데요
113. 7:46아트보드 를 선택한 상태에서 비해서 레이아웃의 팅 을 눌러줍니다
114. 7:51그러면 레이에어 세팅하는 창이 뜨게 되는 거죠 그럼 이 컬럼의
115. 7:57아까 말했던 이 컨테이너 넓이를 정 하는데요 1200 픽셀로 정하시고
116. 8:022 전체 폭은 1920 으로 잡아 주는 것이 좋습니다
117. 8:061920 을 최대의 맥스 위스 라고 정하고
118. 8:10그렇게 되면 옵 쎄쎄쎄 360 피스를 정합니다 그리고 센터 를 눌러
119. 8:14주시고요
120. 8:15컬럼은 몇 단어로 나은지 인데 씰이 단으로 나누겠습니다
121. 8:19그리고 거터 당과 단사 의 간격을 30 픽셀로 잡아줍니다
122. 8:25그리고 ok 를 누르면 이런 글이 대선이 나오게 되는 거죠
123. 8:32네모를 그릴 때에도
124. 8:36다 내 이런식으로 5
125. 8:39붙게 되거든요 자석처럼
126. 8:44제가 아래 다가 인쇄로 한번 만들어 보겠습니다
127. 8:50으
128. 8:50여기서 다시 주에서 레어 셋팅 쓰 를 들으면 아까 설정한 값이 있을
129. 8:56거에요
130. 8:56여기서 뭐 힐 글이 들어 하면은
131. 9:00그리드가 면으로 채워진 걸 볼 수 있고요
132. 9:03스트로크가 보기 타다 보면 스트로크를 체크 해 주실 수 있습니다
133. 9:07이 컬러를 조절할 수도 있구요
134. 9:10필요로 했을 때도 컬러를 뭐 조절해 줄 수가 있습니다
135. 9:18이런식으로요 조절할 수가 있고
136. 9:21선 상태에서 뭐 디자인을 한다고 가정하면
137. 9:29뭐 간단하게 상단으로
138. 9:34으 으
139. 9:39톡
140. 9:40으 그래서 얘를
141. 9:44끌려면 다시 체크해 줘 다 했는데 단축키는 컨트롤 엘입니다
142. 9:49컨트롤 귀해서 캔버스에
143. 9:53cola 아웃을 보면 컨트롤의 링 걸 볼 수 있죠
144. 9:58컨트롤의 를 해주시면 됩니다 으
145. 10:04이런 식으로 할 수 있구요 뭐 2단으로 작업하려면
146. 10:08[음악]
147. 10:11이렇게도 가능하겠죠
148. 10:14이런식으로 12 당 그리드를 해야 디자인하기 가 되게 편합니다
149. 10:19뭐 여기를
150. 10:22이런식으로 작업 할 수도 있겠죠
151. 10:26[음악]
152. 10:27컨트롤의 라는 없어지죠 이런식으로
153. 10:31그리드를 사용할 수 있습니다 건 모바일 해상도 교육 또한 건 알아볼게요
154. 10:36예전에 아이폰 5c 나에스 이 같은 작은 해상도의 스마트폰에서는 물리적인
155. 10:41해상도가 320 픽셀 까지 되는데요 그 비중이 상당히 없다보니까 디자인
156. 10:46상에서는 가로 값이 360 픽셀로 작업하는 것을 추천드립니다
157. 10:50아이폰 같은 경우는 375 픽셀 인데 좌우가 길어져 봤자 몇 픽셀이
158. 10:55늘어나 겠어요 사실 뭐 7 픽셀 7.5 픽셀 이렇게 했는데 그 정도
159. 11:00늘어났다고 해서 사랑 눈으로 그렇게 막 해상도가 깨져 보이거나 티가 너무
160. 11:05심하게 난다 이렇지 않습니다
161. 11:08전혀 문제가 되지 않아요 그리고 반응형 으로 제작되기 때문에
162. 11:12살상 상륙 공이나 375 나사 회사라 해도 어 되게 크게 틀어 지지
163. 11:17않습니다
164. 11:18하지만 우리는 치안 이미지 시안으로 jpg 나 png 같은 임시 한상자
165. 11:251호
166. 11:25뭐 고객사가 됐던 아니면은 뭐 본인의 서비스 던 본인의 서비스디자인 아더
167. 11:31뭔가 결과물을 하나의 이미지로 보여 주기 때문에 거기에 맞는 가장
168. 11:36최적화된 360 b 셀로 작업을 하면 좋습니다
169. 11:40위 도 마찬가지로 컬럼 과거 터에 대한 그 규정을 해야겠죠
170. 11:45근데 정수로 떨어지는게 좋잖아요 그럴 경우에는
171. 11:49360 으로 작업을 하고 자운 외에 마진을 20 씩 잡으면 320 으로
172. 11:55컨테이너와 형성이 됩니다
173. 11:57그럼 컨테이너와 320 인 상태에서 컬럼 스를 6 으로 나누고 거 털을
174. 12:0216 을 하면 모든게 정수로 떨어져요
175. 12:05그렇기 때문에 굉장히 추천드립니다 여기서 6단으로 하는 경우는 무엇이냐면
176. 12:12만약에
177. 12:13쑥 2 볼게요
178. 12:18pc 에서 이런 ui 가 있다고 가정해 봅시다
179. 12:23일으키며 있는게 아니다
180. 12:27뭐 이런 식의 컨텐츠가 래도 쭉 있다고 해 볼게요 블로그 관련 된게
181. 12:32여기로 넘어갈 때는 여기가 12 다니니 6단으로 줄었기 때문에
182. 12:370 수치에 대한 계산을 좀 정확히 할 필요가 있습니다
183. 12:40[음악]
184. 12:42으 으
185. 12:46[음악]
186. 12:47싸 이 즈 폰트 사이즈도 모바일에 맞게 좀 줄어 들겠죠
187. 12:51[음악]
188. 12:59이게 단을 유지해서 그대로 이렇게 넘어 온다고 하면 이미지가 너무
189. 13:04콩알만해지고 텍스트 포기 지금 제재 몸이라고 적었지만
190. 13:09여기서
191. 13:14이런 제목이 있다고 해 볼게요 것 모바일로 이정도 쪼금 포개 가져오면
192. 13:215 아
193. 13:24이런식으로 텍스트가 너무 폭이 좁아지게 되는 걸 볼 수 있습니다
194. 13:29그렇기 때문에 모바일 왔을 때 부적정 하는 것이 아니라
195. 13:34아 too
196. 13:38그의 만 낸 폭을 조절을 해주는 거죠
197. 13:40여기서는
198. 13:43으 이런 식으로 2단으로
199. 13:50ver
200. 13:52오오오
201. 13:59여기서는 3 단협 싸면 2단으로
202. 14:02작업을 해줄 수가 있겠죠 이미지도 적당히 보여 지겠죠
203. 14:07디자인 베이스 사이트에 가보시면
204. 14:14여기서도 어
205. 14:16모바일로 가볼게요
206. 14:21모바일로 갔을때도 이단 으로 나뉘는 것을 볼 수가 있죠
207. 14:27물론 pc 에서는 여러 단으로 이런식으로 제가 만들어 놓았지만
208. 14:31여기도 pc 에서는 삼간 세가가 보이게 했지만 모바일 환경에 맞게
209. 14:39[음악]
210. 14:39으
211. 14:45이런식으로
212. 14:47보여지게 작업을 하는 거죠
213. 14:50얘가 가셨죠 여러분이 웹 디자인 쪽으로 막 시작하시는 분 일거나 웹
214. 14:55디자인을 하고 싶은데 뭐 편집 쪽은 해봤니 중 잘 모르겠다 제대로 배우지
215. 15:00않은 상태에서 시키니까 지금까지 뭐 급하게 뭐 제품 상세페이지에 수준
216. 15:05하듯이 해왔던 분들이라면 꼭 기본 교육과 레이아웃에 대한 부분은 꼭 알고
217. 15:11가시는게 좋습니다
218. 15:13이번에는 사실 스케치에서 레이아웃을 쉽게 만드는 방법을 알려드리고 했는데
219. 15:17사실은 그 방법을 알려 드리는 것보다
220. 15:21어 반응형 때 어떻게 그 그리드를 쓰되 그 값의 어떤 수치를 먹는게 가장
221. 15:26효과적 1g 의 이러한 것들에 대해서 제가 지금까지 공부하면서 느꼈고
222. 15:31풀의 타면서 5건 퍼블리싱 공부를 하면서 느꼈던 놓아도 를 같이 전수해
223. 15:37드립니다
224. 15:38지금까지는 너무 기초 같은 것만 알려드렸는데요 다음 강자는 드디어 스케치
225. 15:43꽃이라고 불리는 식물편 에 대해서 배워보겠습니다
226. 15:47그 다음은 텍스트 스타일과 레이어스 텔 스타일을 만드는 그런 것들에
227. 15:52대해서도 근무 알아볼 거구요
228. 15:54그리고 프로토타이핑 멀리 사이징 그리고 댓글로 남겨 주셨던 것처럼
229. 15:58플러그에 램 들에 대해서 또 하나 하나 제가 상세 알아볼 예정입니다
230. 16:03어 도움이 되셨다면 구독과 좋아요를 눌러주세요
231. 16:07으 sie im
232. 16:14wae seoul
233. 16:18[음악]