웹디자인 컬러 사용법 | UI 컬러 시스템과 디자인 토큰 이해하기 - 웹디자인 강좌 2-4 — Transcript

Full transcript

1. 0:00웹 디자인을 하다 보면 브랜드 컬러도
2. 0:02정해져 있고 화면에 색상을 적용을
3. 0:05했는데 이상하게 정돈되어 보이지 않을
4. 0:07때가 있습니다. 버튼은 눈에 띄지
5. 0:10않고 글자는 흐릿하고요. 이런 문제는
6. 0:13색을 잘못 골라서라기보다는
7. 0:15색의 역할을 정하지 않고 시작했기
8. 0:17때문에 발생하는 경우가 많습니다.
9. 0:20디자인을 처음 하시는 분들은 컬러를
10. 0:22잘 사용하고 싶어서 이것저것 넣고
11. 0:24싶을 때가 있는데요. UI에서는
12. 0:26컬러를 많이 쓴다고 해서 좋은게
13. 0:28아닙니다. 이번 영상에서는 웹
14. 0:31UI에서 컬러를 어떻게 구분하고
15. 0:33일관되게 사용하는지를 알아볼게요.
16. 0:35가장 먼저 컬러의 역할을 한마디로
17. 0:38설명하면 구분하는 도구입니다. 화면에
18. 0:41있는 모든 요소가 비슷한 색과 강도로
19. 0:44표현되면은 사용쟁에서는 무엇이
20. 0:46중요한지 판단하기가 어렵죠. 그래서
21. 0:49색상을 무조건 고르기 전에 기준이
22. 0:51있어야 돼요. 그 기준점에 대해서
23. 0:53이야기를 먼저 해 보자면 어떤 행동이
24. 0:55가장 중요한지, 어떤 요소를 클릭할
25. 0:58수 있는지, 어떤 메뉴가 현재
26. 0:59선택되어 있는지, 그리고 작업이
27. 1:02성공했는지 실패했는지, 마지막으로는
28. 1:04어떤 정보가 핵심이고 보조인지 이런
29. 1:07우선 순위에 대한 기준이 있어야
30. 1:09돼요. 그걸 구분하기 위해서 UI
31. 1:11작업할 때는 컬러를네 가지 역할로
32. 1:13나닙니다. 첫 번째로 브랜드 컬러
33. 1:15같은 경우는 해당 브랜드의 정체성을
34. 1:18나타내는 세이죠. 해당 로고나 브랜드
35. 1:21그래픽이나 핵심 이미지처럼 브랜드의
36. 1:23인상을 전달하는데 사용돼요. 네이버면
37. 1:26초록색, 뭐 카카오면 노란색,
38. 1:28삼성이면 파란색 이런 고유한 컬러들이
39. 1:30있죠. 그걸 브랜드 컬러라고 하고요.
40. 1:32액션 컬러 같은 경우는 사용자의 주요
41. 1:35행동이나 뭐 현재 선택된 상태를
42. 1:37나타낼 수 있는 색상인데요. 링크나
43. 1:40버튼 이런 곳에 많이 사용이 되죠.이
44. 1:42이 액션 컬러 같은 경우는 브랜드
45. 1:44컬러가 같이 연결해서 사용되는 경우가
46. 1:47흔하지만 예를 들어 SSF몰을 보면
47. 1:51브랜드 컬러인 보라색을 활용해서 뭐
48. 1:53엑센트 컬러 부분들이 곳곳에 적용된
49. 1:56걸 볼 수가 있습니다. 바로 구매
50. 1:59버튼도 마찬가지고요.
51. 2:01그렇다고 꼭이 브랜드 컬러를 액션
52. 2:03컬러랑 동일하게 사용되지 않는 경우도
53. 2:06있고요. 그리고 컨텐츠가 중심일 때는
54. 2:09컬러가 없는 경우도 있습니다.
55. 2:11그다음은 중립 컬러가 있는데요.
56. 2:13배경이나 카드나 텍스트, 테두리 같은
57. 2:16화면의 대부분을 구성하는 색이에요.
58. 2:18실제에서는이 중립색이 가장 중요해요.
59. 2:21컬러라고 하면 브랜드 컬러라든지
60. 2:23포인트 컬러들을 떠올리기가 쉽지만
61. 2:25실제에서 가장 많이 사용되는
62. 2:28구간이죠. 그래서 해당 컬러는 한
63. 2:30가지 색상 혹은 두 세 가지로만
64. 2:32쓰이는게 아니고요. 50에서 900
65. 2:34혹은 1000까지 쭉 연결을 해서
66. 2:37단계별로 팔레트 형식으로 제공을
67. 2:39합니다. 그냥 그레이를 쓸 수도
68. 2:41있지만 블루기가 조금 돌겠으면 쿨
69. 2:43그레이 계열을 쓸 수도 있고요. 조금
70. 2:45더 따뜻한 느낌으로 갈 때는 웜그레이
71. 2:47계열을 쓸 수도 있습니다. 해당
72. 2:49컬러를 기준으로는 텍스트에 대한
73. 2:51부분들을 쓸 수도 있고요. 아니면
74. 2:53배경이나 입력창이나 테두리 구분선
75. 2:56이런 곳에도 자주 사용되기 때문에
76. 2:59이런 부분들이 매우 중요하다고 볼 수
77. 3:01있습니다. 여기 예시로 대시보드의
78. 3:03사이드바 부분이 본문이랑 구분이 잘
79. 3:06안 되잖아요. 이럴 때는 사이드바와
80. 3:09헤더 부분에 연한 그레이를 깔아서
81. 3:12구분을 줄 수도 있고요. 아니면
82. 3:14반대로 안쪽 영역에다가 배경을 깔아서
83. 3:17사이드바와도 구분을 주면서 안쪽에
84. 3:20있는 요소와도 구분을 주는 이런
85. 3:22식으로 활용할 수도 있습니다. 그리고
86. 3:24마지막은 시멘틱 컬러인데요. 성공,
87. 3:26주의, 오류, 안내 이런 시스템의
88. 3:29상태를 전달하는 색상이에요. UI
89. 3:31내에서는 어느 정도 통용되는 색상이기
90. 3:34때문에 그런 상태일 때는 꼭 관련된
91. 3:36색상을 사용하시는 걸 권장드립니다.
92. 3:39그리고 강조 컬러를 활용할 때는
93. 3:41제한적으로 사용을 해야 되는데요.
94. 3:43곳곳에 쓰이면 시각적 분산이 되기
95. 3:45때문에 사용자가이 버튼을 눌렀으면
96. 3:48좋겠고이 부분을 집중해서 봤으면
97. 3:50좋겠어라는 부분에만 사용하는게 강조
98. 3:53컬러라고 보시면 돼요. 디자이너라면
99. 3:55자주 방문하는 사이트 중에 하나가
100. 3:57비엔스죠. 여기에 프리랜서 채용이
101. 3:59부분을 좀 강조해서 보여 준 거
102. 4:01같습니다. 우측 상단에서는 로그인보다
103. 4:04지금 구매에 대해서 조금 더 컬러를
104. 4:06많이 쓰고 있고요. 어 무신사 같은
105. 4:08쇼핑몰에서도 마찬가지입니다. 뭐
106. 4:10상반기 결산 세일이라든지 뭐 이런
107. 4:12쿠폰 관련된 부분 그리고 타임
108. 4:14세일이랑 이런 할인율 이런 부분에는
109. 4:17컬러를 적용해서이 부분에 집중할 수
110. 4:20있도록 하고 있습니다. 그리고
111. 4:21컬러에서 시멘틱 컬러에 대해서
112. 4:23설명드렸는데 의미와 상태를 전달할
113. 4:26때도 사용된다고 했었죠. 어떠한
114. 4:28상태에서 토스트가 떴을 때 이게
115. 4:31성공했다는 의미인지 그냥 정보인지
116. 4:33에러가 나는 건지 이런 것들을
117. 4:35컬러만으로도 구분을 할 수가
118. 4:37있는데요. 이때 중요한게 그냥
119. 4:39컬러로만 하는 거보다 주변에 아이콘을
120. 4:42넣어서 조금 더 부가적인 정보를 같이
121. 4:44제공하는 걸 권장드립니다. 그리고
122. 4:47컬러에서 가장 핵심은 읽을 수 있어야
123. 4:49좋은 컬러예요. 내 눈에 보기 좋다가
124. 4:51아니라 대부분의 사용자들이 보기에
125. 4:54좋은 것들을 좋은 기준으로 만들어야
126. 4:56됩니다. 타이포그래피에서도 웹
127. 4:58접근성에 대한 설명을 제가
128. 4:59했었잖아요. 그것처럼이 텍스트에 대한
129. 5:02컬러를 적용할 때도 배경과에 어느
130. 5:04정도 대비가 정확하게 있어야지만
131. 5:06올바르게 컬러가 적용이 된 겁니다.
132. 5:09그리고 하나의 컬러에도 단계가
133. 5:11필요해요. 만약에 제가 파란색을
134. 5:13좋아한다 해서 한 가지 색상만 두고
135. 5:15사용하는게 아니고요. 그 컬러를
136. 5:17팔레트 형식으로 50에서 900까지
137. 5:19이렇게 쭉 펼쳐 놓고이 가운데에서
138. 5:21기본값이 뭔지 정하고요. 그걸 버튼에
139. 5:23연결해서 사용한다고 했을 때 버튼에도
140. 5:26상태가 있다고 제가 말씀드렸죠.
141. 5:28마우스 오버나 프레스트 됐을 때에
142. 5:30대한 컬러를 각각 몇으로 사용할지를
143. 5:33정할 수가 있어야 돼요. 이때 디자인
144. 5:34시스템에 대한 토큰 개념이 있는데요.
145. 5:36프리미티브 토큰은 고정된 값이고요.
146. 5:39엘리아스 토큰은 목적에 맞게 가져다가
147. 5:42쓰는 걸 말합니다. 여러 가지가 있을
148. 5:44수 있겠죠. 디폴트나 호버,
149. 5:46프레스트, 포커스, 그리고 디세이블드
150. 5:49뭐 등등이 있을 수 있습니다. 그리고
151. 5:51저는 버튼만 예시로 드렸지만 실제로는
152. 5:54역할 중심으로 관리가 돼야 돼요.
153. 5:55프리미티브 컬러는 변하지 않는
154. 5:57컬러입니다. 블루만 있는게 아니고요.
155. 5:59레드나 뭐 그린, 옐로우 뭐 여러
156. 6:01가지에 대한 프리미티브 컬러가 있을
157. 6:03텐데 거기서 자주 사용될 엘리어스
158. 6:06토큰으로만 텍스트 컬러에 대한
159. 6:08부분이라든지 백그라운드 컬러, 보더
160. 6:10컬러나 시멘티 컬러 이렇게 연결해서
161. 6:13사용한다고 보시면 될 거 같아요.
162. 6:14그리고 그 연결된 컬러는 다크
163. 6:17모드에서도 역할이 유지가 되는데요.
164. 6:19라이트 모드일 때는 백그라운드 컬러의
165. 6:21프라이머리가 화이트였다면 다크에서는
166. 6:24그레이 900이라든지 혹은
167. 6:26블랙이라든지 이렇게 일대일 매칭을
168. 6:28해서 반전이 됐을 때 다크 모드가
169. 6:31적용하게 하는 그런 개념이라고 보시면
170. 6:33돼요. 이렇게 컬러에 대해서
171. 6:34배웠는데요. 실무에서 자주 생기는
172. 6:37어떤 실수를 줄이기 위해서네 가지만
173. 6:40정리하고 가면 좋을 것 같아요. 첫
174. 6:41번째는 브랜드 컬러를 많이 남용하지
175. 6:44않는다. 정말 중요한 주인공한테만
176. 6:46몰아 준다라고 보시면 되고요. 그리고
177. 6:49두 번째는 텍스트의 컬러를 활용할
178. 6:51때는 위계에 대한 컬러 구분이 되면
179. 6:54좋다. 제목과 본문에는 좀 세게
180. 6:56주고요. 부가 정보에는 연한 컬러를
181. 6:58적용한다라고 보시면 되고요. 세
182. 7:00번째는 낮은 대비는 피해야 됩니다.
183. 7:03웹 접근성은 여러분이 꼭 알아야 되는
184. 7:05개념이기 때문에 통과될 수 있을
185. 7:07정도의 배경과 텍스트 간의 대비를 잘
186. 7:10주셔야 됩니다. 그리고네 번째는
187. 7:12생만으로 상태를 전달하는 것보다는
188. 7:15아이콘이나 어떤 이런 문장으로 같이
189. 7:17부과 정보를 전달해 주는게 좋습니다.
190. 7:20이렇게 컬러에 대해서도 마무리를 지어
191. 7:22보고요. 다음 영상에서는 스패싱과
192. 7:25사이징 규칙에 대해서 설명을 드려
193. 7:27보겠습니다. 습니다.
194. 7:35[음악]