Android 해상도와 단위 DPI, DP, SP 완벽 이해 - UXUI 디자인 강좌 3-2 — Transcript

Full transcript

1. 0:00안녕하세요 이제 가장 기본이 되고
2. 0:02중요한 해상도와 단위에 대해서 배워볼
3. 0:04건데요 안드로이드에서만 사용하는
4. 0:06해상도에 따른 단위 개념이 있는데
5. 0:08처음 접하는 경우에는 조금 헷갈릴
6. 0:10수가 있습니다 제가 최대한 쉽게
7. 0:12풀어서 설명을 좀 드려볼게요
8. 0:13해상도라는 것은
9. 0:15종이나 스크린 등의 표현된 그림이나
10. 0:17글씨 따위가 표현된 섬세함의 정도를
11. 0:19말합니다 주로 스마트폰이나 모니터
12. 0:21tv와 같은 디지털 기기의 스크린이나
13. 0:24프린터 스캐너 이런 각종 이미지
14. 0:26입출력 기기에 관해 말할 때 사용이
15. 0:28되죠 픽셀은 화면에 이미지를 표현하는
16. 0:30기본 단위인데요이 픽셀이라는 것은
17. 0:33픽쳐와 엘리먼트의 합성으로 각 픽셀은
18. 0:35개별적인 색상을 가지고 있습니다이
19. 0:37픽셀의 개수에 따라서 해상도가 결정이
20. 0:40되죠 많으면 고해상도고 적으면
21. 0:42저해상도라고 불리웁니다 그리고
22. 0:44dpi라는 개념이 있죠 1인치
23. 0:46기준으로 몇 개의 픽셀로 이미지를
24. 0:49표현할 수 있는가 이런 개념이죠 예를
25. 0:51들어서 10dpi는 1인치 안에
26. 0:53100개 점으로 그래픽을 표현하는
27. 0:54거구요
28. 0:5520dpi 같은 경우는
29. 0:57400개의 점으로 표현하는 거죠이
30. 0:59수치가 높을수록 선명하다는 건
31. 1:01여러분이 당연히 아실 겁니다 여기서
32. 1:03안드로이드에서 dpi라는 개념이
33. 1:05나오는데요 이걸 이해하는게 중요합니다
34. 1:07지금 이렇게만 보면 조금 헷갈릴 수가
35. 1:09있는데요이 디벨로퍼 사이트의 설명을
36. 1:11좀 참고하자면이 아랫부분에 이런
37. 1:14식으로 나와 있습니다 1dp는 중밀도
38. 1:16화면에서 여기에 중밀도가 기준 밀도
39. 1:18그리고 160 dpi라고 써 있는게
40. 1:21보이시죠 1픽셀과 거의 동일한 가상
41. 1:24픽셀 단위입니다라고 나와 있죠
42. 1:25160dpi가
43. 1:27기준이다라고 이해하시면 좋을 것
44. 1:29같습니다 왜 하필 160이냐라고
45. 1:31물어보면 제가 드릴 수 있는 답은
46. 1:33없습니다 그냥 안드로이드에서 그렇게
47. 1:35지정을 한 거고요 그래서 여기에
48. 1:37설명에 따르면이 mdpi라고 하는
49. 1:40부분이
50. 1:41160dpi이고 이때 값은 1dp와
51. 1:441픽셀 일대일 비율이라는 거죠 이게
52. 1:47기준이 된다고
53. 1:48먼저 이해를 하시면 좋습니다 이걸
54. 1:50기준으로
55. 1:51점점 기술이 발전하면서
56. 1:53스마트폰 해상도가 좋아지게 됐겠죠
57. 1:55그러면서 hdpi xhdpi x가
58. 1:582개인 xx
59. 2:00dpi 그리고 최근에는 xx
60. 2:03hdpi까지 나왔습니다 이때 dpi
61. 2:05수치를 보시면은
62. 2:06640이에요 다리기 이야기하면
63. 2:09mdpi 기준이 일대일 비율이면
64. 2:11수치만으로 봐도
65. 2:134배가 커지는 걸 볼 수가 있습니다
66. 2:14다르게 이야기에서
67. 2:16xx
68. 2:17hdpi에서는 1dp가 4픽셀과
69. 2:19같다라고 이해하시면 좋을 것 같습니다
70. 2:22정말 과거에는
71. 2:23용량이나 최적화 등 이슈로 ldpi로
72. 2:26덴시티라고 되어 있죠 120dpi
73. 2:29정도로 굉장히 해상도가 떨어지는
74. 2:30스마트폰이 있었는데요 지금 이렇게
75. 2:32좋아진 시점에 사용하는 입장에서는
76. 2:35ldpi는 굳이 신경 쓸 필요가
77. 2:36없습니다 일단 이건 건너뛰고요
78. 2:39mdpi가 기준이지만 1.5배 2배
79. 2:413배 4배 이렇게 커진다 이것만
80. 2:43이해하시면 일단 첫 번째는 이해를
81. 2:45하신 겁니다
82. 2:46그렇지만
83. 2:47물리적인 크기와는 전혀 다릅니다
84. 2:48저렇게 해상도가 높아졌다고 해서
85. 2:51스마트폰 크기가 커지냐 전혀 아니죠
86. 2:53화면의 크기는 사실 그대로인데이
87. 2:561인치 안에
88. 2:57점의 수가 많아졌기 때문에 더
89. 2:59해상도가 해상도로 보이는 것 뿐이지
90. 3:01실제 물리적인 크기는 다르지 않습니다
91. 3:03그리고 같이 알아둬야 되는 단위인게
92. 3:06dp라고 되어 있는데요
93. 3:08풀네임으로 말씀드리면 덴시티
94. 3:10인디펜던트 픽셀이라고 합니다
95. 3:12직역하면
96. 3:13밀도의 독립적인 픽셀이라는 의미로
97. 3:15쓰이는데요 어떠한 디스플레이
98. 3:16해상도와도 관계없이 다를 수 있는
99. 3:18단위입니다
100. 3:19조금 전에 mdpi hdpi
101. 3:21xsdpi 뭐 이런 거 보셨잖아요
102. 3:23그렇게 다양한 픽셀의 밀도에 지원하기
103. 3:25위한 안드로이드만의 단위라고 보시면
104. 3:28됩니다 이러한 상대 값이 왜 필요한
105. 3:30거야 이럴 수 있죠 이해상도는 또
106. 3:32뭐고 세로폰이 또 나왔어 폴더블은 또
107. 3:34뭔데 이번에는 매픽셀로 작업을 해야
108. 3:36하는 거지 이미지는 어떻게 처리하지
109. 3:38이런 다양한 고민이 되실겁니다
110. 3:40처음 접하면
111. 3:41당연히이 머릿속에 개념이 잡히지
112. 3:43않으면 어려우실 수가 있는데요 이러한
113. 3:45상대값을 쓰는 이유는
114. 3:47여러 해상도의 디바이스에 디자인과
115. 3:49개발을 효율적으로 적용하기 위해서
116. 3:51나온 값이라고 보시면 됩니다 그래서
117. 3:53우리가 다양한 UI 2를 사용하잖아요
118. 3:56피그마나 스케치 XD 뭐 이런 벡터
119. 3:58기반의 UI 전용 툴에서는
120. 4:00mdpi 기준으로 작업을 해야 합니다
121. 4:01왜냐면 픽셀과 dp가 1대1인
122. 4:04환경이라서
123. 4:06디자이너가 OS 가이드한을 지키기도
124. 4:08편하고요 개발자도 역으로 DP 단위로
125. 4:10역계산할 필요가 없습니다
126. 4:12과거에는 이런 벡터 기반의 툴을
127. 4:14제공하지 않았기 때문에
128. 4:15포토샵으로 ui 디자인 할 때는 2배
129. 4:18혹은 3배 이렇게 키워서 작업하는
130. 4:20회사들도 있었는데요 지금 시점에서
131. 4:22그렇게 작업을 하면 절대 안 됩니다
132. 4:23이런 UI 툴을 사용해서 UI 작업을
133. 4:26할 때는 mdpi 기준 1픽셀이
134. 4:281dp인 환경에서 작업을 하셔야 된다
135. 4:30이것만 이해하시면 좋을 것 같습니다
136. 4:33dp와 픽셀의 단위변환에 대한이 값이
137. 4:36있는데요
138. 4:37픽셀은 DP 곱하기 dpi 나누기
139. 4:39160이라고 돼 있는데이 수치만 보면
140. 4:41좀 어려울 수 있어요
141. 4:43근데 쉽게 말해서 그냥 mdpi가
142. 4:45아까 160 dpi였죠 그래서 앞에
143. 4:48dpi 값이 달라지면 그에 따라서 몇
144. 4:50배를 하냐 라고만 이해하시면 좋은데요
145. 4:52아까 비슷한 표를 같이 가져와서
146. 4:54예시를 아이콘으로 들어 드릴게요
147. 4:56만약에 mdpi가 항상 기준이었죠
148. 4:59MD
149. 5:00기준으로 아이콘 사이즈를 24b
150. 5:0224로 제작을 했다라고 한다면 이때는
151. 5:051dp가 1픽셀인 상황이죠 이게 각
152. 5:08디바이스의 밀도에 따라서 최적화된
153. 5:10사이즈로 자동으로 적용이 됩니다 예를
154. 5:12들어서 가장 큰 640dpi에서는
155. 5:16곱하기 4배를 해줘야 되기 때문에
156. 5:1896바이 96으로 적용이 되겠죠
157. 5:20그렇다고 무조건 사이즈에 맞게 다
158. 5:22픽셀로 저장을 해야 할까요라는 질문을
159. 5:24드려보면
160. 5:25꼭 그럴 필요는 없습니다
161. 5:27특히 벡터 기반인 아이콘은 자동으로
162. 5:29사이즈가 늘어나고 해상도가 달라져도
163. 5:32깨지지 않는 파일이기 때문에
164. 5:33각각 이러한 밀도에 따라서 이미지를
165. 5:36별도로 만들어 줄 필요가 없는 겁니다
166. 5:37지금까지 설명드린 것처럼 이런 DP
167. 5:40단위를 쓸 때 상황에 따른 단위를
168. 5:42사용하면 좋은데요 일단 코드로 구현
169. 5:44가능한 ui나 벡터로 저장이 가능한
170. 5:47스타일의 그래픽 같은 경우는 dp로
171. 5:49제작하면 되고요 해상도 손실이 없이
172. 5:52확대가 되지 않는 비트맵 기반의
173. 5:54이미지인 경우는 최상위 해상도로
174. 5:56제작을 해야 됩니다
175. 5:57단위는 당연히 픽셀로 작업을
176. 5:59하셔야겠죠 예를 들어서 mdpi
177. 6:01기준에 UI 작업을 했지만
178. 6:03실제 그 ui의 배너 영역 사이즈가
179. 6:05360 곱하기 80이라면
180. 6:08그래픽에 들어갈 이미지는 곱하기
181. 6:104배를 해서 작업해야 제대로 해상도가
182. 6:12깨지지 않고 보이게 되겠죠 이게
183. 6:14정석이지만 이미지의 크기가 앱 성능에
184. 6:16영향을 줄 수가 있기 때문에
185. 6:18압축을 통해서 팔 크기를 최소화해야
186. 6:20합니다
187. 6:21다음은 sp라는 단위인데요 스킬드
188. 6:23픽셀이라고 되어 있죠 텍스트 크기를
189. 6:25상대적인 값으로 지정할 때
190. 6:27사용되는데요 dp와 동일한 개념이지만
191. 6:30텍스트에만 적용되는 단위라고 보시면
192. 6:32됩니다 그래서
193. 6:33레이아웃을 잡을 때는 sp 단위를
194. 6:34사용할 수가 없습니다
195. 6:36근데 이런 sp가 왜 필요하냐 이런
196. 6:38궁금증이 있을 수 있죠
197. 6:39시스템 설정에 따른 가독성 때문인데요
198. 6:41사용자의 의도에 따라 설정에 들어가서
199. 6:44글꼴의 크기를 조정을 하면 그 앱에
200. 6:47따른 앱 내에 사이즈도 바뀌어야
201. 6:49합니다 여기 예시처럼
202. 6:51글자 크기를 작게 중간 크기 이렇게
203. 6:53늘리면 안쪽 ui가 늘어나고 줄어나고
204. 6:56바뀌는 걸 볼 수가 있죠
205. 6:57그렇다고 무조건 sp 단위를 꼭 써야
206. 6:59하는 것은 아닙니다 반대로 모바일의
207. 7:02특성상 좁은 화면 안에서 레이아웃을
208. 7:04짜기 때문에
209. 7:05텍스트 때문에 많이 틀어지지 않게
210. 7:07하기 위해서는
211. 7:08sp를 적용해야 할 범위를 정해놓고
212. 7:10적용하는 것도 방법입니다 예를 들어
213. 7:13탭바 같은 경우에도
214. 7:14레이블 값에
215. 7:15폰트 사이즈를 sp로 적용하지 않아서
216. 7:17이런 사용자의 폰트 사이즈 설정에
217. 7:19관여받지 않도록 하는 것도 하나의
218. 7:21방법입니다 이렇게 해상도와 단위의
219. 7:23배워봤는데요 처음 이러한 개념을
220. 7:25접하면
221. 7:26낯설 수가 있습니다 이해가 바로 안
222. 7:28될 수가 있는데요 이해 안 되는
223. 7:29부분을 돌려 보면서 다시 공부를 하면
224. 7:31좋을 것 같고요 아무리 돌려봐도
225. 7:32이해가 안 된다라고 하면은 언제든지
226. 7:35댓글로 남겨주시면 좋을 것 같습니다
227. 7:37다음 영상에서는 레이아웃에 대해서
228. 7:38배워보도록 할게요
229. 7:44[음악]
230. 7:51[음악]