[머티리얼 디자인] Color System (1)
Material Design의 Color System에 대해서 알아보자
색은 굉장히 중요하며. 디자인에 있어서는 더욱 그렇다. 브랜딩, UI 디자인을 막론하고 색은 사용자에게 강렬한 인상을 남긴다.
디자인에서 사용되는 색은 간단하게 주조색, 보조색으로 나뉘며, 이 색들을 모아놓은 것을 Color Scheme 혹은 Color palette라고 한다. 물론 주조,보조만으로는 부족하다. 주조, 보조색을 명암비를 다르게 한 색들 역시 필요하다. 아래는 UI 디자인 시에 필요한 색들이다. 주조색, 주조색 변화, 보조색, 보조색 변화, 배경색, 전경색, 에러와 타이포그래피와 아이콘에 필요한 색들까지 포함되어 있다
https://material.io/design/color/the-color-system.html#color-usage-palettes팔레트를 선정할 때는 크게 여섯 가지 요소를 고려한다. 색이 디자인 컴포넌트들의 구조를 드러내는가?, 색이 읽기에 적합한가? 색이 브랜드를 잘 표현하는가? 등등...
https://material.io/design/color/the-color-system.html#color-usage-palettes
https://material.io/design/color/applying-color-to-ui.html#usage이 모든 걸 고려해서 Color palette를 만들기는 쉽지 않다. 브랜딩 과정에서 주조색을 선택하는데도 긴 회의가 필요하며, 보조색도 마찬가지다. 특히 디자이너의 의견이 잘 반영되지 않는 조직에 있다면 더욱 그렇다.
다행스럽게도 우리에게는 머티리얼 디자인이 있다. 2014년에 UI 디자인에 필요한 색들을 뽑아서 정리해놓았다.
위에 색들을 활용하면 주조, 보조색을 선택하는데 도움을 받을 수 있다. 색의 선택 과정은 이러하다.
주조색 -> 주조색 변화(밝음/어두움) -> 보조색 -> 보조색 변화(밝음/어두움)예를 들어 주조색을 보라색 계열에서 선택하였다면 주조색 변화 역시 보라색 계열에서 해야 한다. 아래 그림에 P는 주조색(Primary)고 700은 주조색 변화(Primary Variant)이다. 변화는 밝거나 어둡게 모두 가능하다.
주조색을 선택하였다면 보조색을 선택한다. 보조색을 선택할 때도 여러 고려 사항이 있으나, UI에 직접 적용해보는 것이 좋다. 아래 사이트에서 주조, 보조색을 선택하여 직접 머리티얼 디자인 UI에 적용해볼 수 있다.
이 글은 머티리얼 디자인의 Color System을 짧게 다루고 있으니 시간이 된다면 https://material.io/design/color/the-color-system.html#에 들어가서 직접 읽어보기를 강력 추천한다.
