반응형 vs 적응형 차이점 완벽 정리! 모바일 퍼스트 개념까지 - 웹디자인 강좌 1-3 — Transcript

Full transcript

1. 0:00이번에는 반응형 디자인과 적응형 디자인
2. 0:03그리고 데스크탑 퍼스트와 모바일 퍼스트 같은 걸 알아볼 거예요
3. 0:06우리가 왜 다양한 화면 크기를 고려해야 될까요?
4. 0:09대부분의 사용자들은 더 이상
5. 0:11하나의 기기로만 웹을 보진 않습니다
6. 0:14회사나 집에서는
7. 0:15데스크탑 혹은 노트북으로도 보죠
8. 0:17이동 중에는 스마트폰이나 태블릿으로 보기도 합니다
9. 0:21그래서 웹디자인은 어떤 기기에서도
10. 0:23정보가 자연스럽게 보이도록 설계하는 것이 중요해요
11. 0:26이 문제를 해결하기 위한
12. 0:28대표적인 방식이
13. 0:29바로 반응형 디자인입니다
14. 0:31조금 더 자세히 설명을 드리자면
15. 0:33화면의 크기에 따라
16. 0:34레이아웃이 유연하게 변하는 방식을 말하는데요
17. 0:37예를 들어서 데스크탑에서는 3단, 태블릿에서는 2단, 모바일에서는
18. 0:421단 같은 컨텐츠를
19. 0:43화면 너비에 맞춰서
20. 0:45자연스럽게 재배치를 하는 걸 말합니다
21. 0:47여러 사이트가 있지만
22. 0:48네이버라는 사이트를 기준으로 설명을 드려보면
23. 0:51현재 메인 화면에는
24. 0:52이렇게 레이아웃이 있는데요
25. 0:54아래로 내려보면
26. 0:55컨텐츠 부분을 3단 레이아웃으로 표현이 되고 있습니다
27. 0:58정확히 설명드리면
28. 1:00마소니 그리드 형식으로
29. 1:01벽돌 쌓는 듯이
30. 1:02이렇게 표현이 되어 있는데요
31. 1:03이런 것들이 반응형으로 처리했을 때
32. 1:05어떻게 변화를 시켰는지
33. 1:07같이 볼게요
34. 1:07맥 기준으로는 커맨드 옵션 I 누르면
35. 1:10요소보기 창이 열립니다
36. 1:12두 번째에 있는 기기 툴바 전환이라는 부분을 클릭하면
37. 1:16반응형 처리로 볼 수가 있어요
38. 1:18이때 이 왼쪽 위에
39. 1:20아이폰 이런 부분이 아니라
40. 1:21반응형이라는 부분을 클릭해줍니다
41. 1:24그러면 오른쪽 부분에 마우스를 잡고
42. 1:27이동을 해볼 수가 있을 거예요
43. 1:28잡고 이동을 해볼게요
44. 1:30쭉 줄여보면 바뀌는 구간이 있습니다
45. 1:33이 위에 부분에서
46. 1:34아마 1024 기준으로 바뀌는 것 같은데요
47. 1:36이렇게 바뀌면
48. 1:38오른쪽에 있던 요소가
49. 1:40이렇게 아래로 3단으로 표시가 됐고요
50. 1:42아래 내려보면 3단이었던 게 2단으로 표시가 되고 있죠
51. 1:46더 줄여볼게요
52. 1:47어느 정도 더 줄이면
53. 1:49위에 3단이 오른쪽으로 이렇게 배치되어 있던 게
54. 1:52아래 방향으로 쌓이게 됐습니다
55. 1:54그리고 아래도 1단으로 표현이 되죠
56. 1:57655라는 사이즈는 거의 없기 때문에
57. 2:00쭉 줄여서 모바일 사이즈인
58. 2:03이 라인이 우리가 일반적으로 쓰는 비율일 겁니다
59. 2:06다시 늘려보면 이렇게 잘 보이죠
60. 2:08하나의 구조로 모든 기기에 대응을 하기 때문에
61. 2:11유지보수가 쉽고요
62. 2:12요즘 가장 많이 쓰이는 방식 중에 하나입니다
63. 2:15다른 사이트도 한번 볼까요?
64. 2:16드리블 사이트인데요
65. 2:18여기서도 같이 한번 볼게요
66. 2:19요소 보기를 해주고
67. 2:22어느 기준점을 넘어서면
68. 2:24오른쪽에 있던 영역이 사라지고
69. 2:26꽉 차게 되죠
70. 2:27그리고 아래는 4단이었던 게
71. 2:293단으로 바뀌었습니다
72. 2:314단이었던 게 3단으로 더 줄이면
73. 2:342단으로 그리고 더 줄이면
74. 2:36이 위에 있던 검색바가 사라지고
75. 2:39버튼으로 바뀌었습니다
76. 2:40눌러보면 숨어있던 검색바가 토글 되도록
77. 2:45그리고 더 줄이면
78. 2:461단으로 이렇게 적용이 되는 게
79. 2:48반응형 디자인이라고 보시면 돼요
80. 2:50하나의 HTML 구조로
81. 2:51모든 디바이스에 대응하기 때문에
82. 2:54도메인 주소를 보시면 Dribbble.com,
83. 2:56그리고 naver.com 이런 식으로 변화가 되지 않고 있는데요
84. 3:01적응형 디자인도 한번 살펴볼게요
85. 3:03적응형 디자인은 기기 크기별로
86. 3:05미리 정해진 화면을 따로 준비해두는 방식을 말합니다
87. 3:08예를 들면 데스크탑에서는 데스크탑용,
88. 3:11모바일에서는 모바일용을 화면에 보여주는
89. 3:14이런 식으로 각각 만들어주고
90. 3:16접속한 기기에 맞는 버전을 선택해서 보여주는 구조입니다
91. 3:20대표적인 예시로는 네이버가 있습니다
92. 3:22네이버 포털사이트에 들어오면
93. 3:24데스크탑에 맞게 네이버 닷컴이 되어있고
94. 3:27폭이 넓다 보니까
95. 3:28그 안에 수많은 내용들을 담고 있습니다
96. 3:30네이버의 모바일 메인을 보면요
97. 3:32데스크탑이랑 확연히 다른 걸 볼 수가 있죠
98. 3:35어찌 보면 모바일에 최적화된 디자인이 적용된 건데요
99. 3:38디자인이 이렇게 다르다는 말은
100. 3:40그만큼 다양한 버전을 따로 제작하고 관리해야 하기 때문에
101. 3:43유지보수와 일관성을 유지하는 데
102. 3:45어려움이 있을 수 있습니다
103. 3:47그리고 제가 말씀드렸던 것처럼
104. 3:49모바일로 들어갔을 때는
105. 3:50앞에 M.이 들어가서
106. 3:52모바일 전용 주소를 따로 두는 경우가 많습니다
107. 3:55앞에 M이 붙던지 뒤에
108. 3:57슬래시 M이 들어가던지
109. 3:58이런 식으로 구분하는 걸 말하고요
110. 4:00반응형과 적응형에 대해서
111. 4:01표로 구분을 해봤는데요
112. 4:03뭐가 더 좋다 나쁘다
113. 4:05이런 개념이 아니라
114. 4:06목적에 맞는 선택이 필요합니다
115. 4:08그 다음으로 알아볼 개념은
116. 4:09데스크탑 퍼스트와 모바일 퍼스트 개념이 있는데요
117. 4:12데스크탑 퍼스트는 말 그대로
118. 4:14데스크탑 화면을 기준으로 큰 화면이죠
119. 4:17먼저 설계를 하고,
120. 4:18그 다음에 랩탑이나 태블릿,
121. 4:20모바일 이런 식으로 화면이 줄어드는 상황에 맞게 대응하는 방식을 말합니다
122. 4:25큰 화면에서 시작하다 보니까
123. 4:26처음부터 정보가 많이 들어갈 수가 있고,
124. 4:29요소가 풍부해지기 쉽습니다
125. 4:31그런데 모바일로 내려오면서
126. 4:33뭘 빼야 할지 고민하게 되는데요
127. 4:35이때 정리가 잘 안되면
128. 4:36화면이 답답하거나 복잡해질 수가 있습니다
129. 4:39그리고 모바일 퍼스트는
130. 4:41데스크탑 퍼스트의 반대 개념이에요
131. 4:43모바일 환경을 기준으로
132. 4:44먼저 디자인을 하고요
133. 4:45그 이후에 태블릿, 데스크탑
134. 4:47이런 식으로 점점 큰 화면에 대응하는 방식을 말합니다
135. 4:51모바일 사용 유저가 많은 서비스에서는
136. 4:53모바일 퍼스트 디자인 전략을 채택하기도 하는데요
137. 4:56사실 실무에서
138. 4:57우리가 모바일 퍼스트로 갑시다,
139. 4:59데스크탑 퍼스트로 갑시다
140. 5:00이렇게 딱딱 구분해서
141. 5:02선언하면서 작업하는 경우는 흔치 않은데요
142. 5:05특히 웹앱까지 같이 만드는 형태가 아니라면
143. 5:08현실적으로는 데스크탑 기준으로
144. 5:10레이아웃을 먼저 잡고 시작하는 경우도 많은 것 같습니다
145. 5:13중요한 건 어떤 방식으로 시작하든
146. 5:15결과물은 결국 반응형까지 고려한 레이아웃으로 설계된다는 점이에요
147. 5:20그리고 어떠한 퍼스트 전략
148. 5:22이런 것보다 최적화와 웹 접근성
149. 5:25그리고 컨텐츠의 우선순위처럼
150. 5:27더 중요한 기준들이 함께 따라오기 때문에
151. 5:29복합적인 고려가 필요합니다
152. 5:31이런 부분들은 뒤에서 조금 더 자세히 다뤄볼 거고요
153. 5:34제가 오늘 설명드린 개념들은
154. 5:36정답을 알려드린 게 아니고요
155. 5:37어떤 기준에서 출발하느냐의 차이이고
156. 5:40결국 목표는 다양한 화면에서 읽기 쉽고
157. 5:43우선순위가 명확하고
158. 5:44일관된 레이아웃을 만드는 것이라고
159. 5:46생각하시면 좋을 것 같습니다
160. 5:48다음 영상에서는 웹사이트의 공통 사이트 맵을 이해하는 시간을 가져보겠습니다 감사합니다