머티리얼 디자인 Color System 주조색(primary color)

주조색, 브랜드 컬러

디자인에 있어서 다른 것도 중요하지만, 색은 더더욱 굉장히 중요합니다. 브랜딩, UI 디자인 등을 막론하고 색은 사용자에게 서비스와 관련해 인상을 남길 수 있습니다. 특히 브랜드 컬러는 브랜드를 나타내는 색으로 사용자에게 끊임없이 같은 메시지를 전달할 수 있어서 그 효과가 엄청납니다.

지금 당장 코카콜라를 떠올려보세요!

브랜드 컬러는 주로 주조색(primary color) 1가지와, 보조색(secondary color)으로 제안합니다. 여러 개의 색상을 사용하는 것보다 소수의 색상을 이용하는 것이 브랜드의 성격을 더 끌어올려 같은 메시지를 전달하기 쉽기 때문입니다. 

만약 같은 색상으로만 디자인하기가 너무 단조롭다면, 걱정하지 마세요. 브랜드 컬러에 채도와 명도를 더해 풍부한 표현을 할 수 있습니다.

좋은 예는 아닌것 같아요.

이거다 이거!

 

---

primary color(주조색)와 secondary color(보조색)의 비율은 어느 정도 사용되어야 할까요?

당연히 주조색의 비율이 높아야 합니다. 만약 보조색의 비율이 더 높아진다면? 보조색이 주조색이 되어야겠네요. 될 수 있으면 사용자에게 주조색에 대한 인식에 혼란을 일으킬 수 있기 때문에 주조색을 많이 사용해야 합니다.

---

브랜드 컬러에 충분한 채도와 명도를 준다?

기본값을 500으로 두고 900~0 사이의 값을 두고 만들어 적용을 해야 합니다. 주조색과 900~0의 색상 모두가 중요합니다. 그리고 반드시 사용을 해야합니다. 왜냐하면 화면 분할에 차지하는 크기와 구간이 다를 경우에 해당 색상을 정확하게 인지를 할 수 없는 경우가 생기기 때문입니다.

주조색이 아닌데 같은 색상으로 보인다. 0~900사이의 값의 컬러를 만들어야 하는 이유.

그러면 이런 색상은 어떻게 만들 수 있을까요? 굳이 내 손으로 만들 필요가 없습니다. 머터리얼 디자인이 다~! 해결해줄 거예요. 

---

인터렉션 컬러

 

http://material.io/tools/color

Color Tool - Material Design

구글 머터리얼/컬러 툴을 입장을 해보겠습니다. 

구글이 최고시다..

이렇게까지 떠먹여 주는데, 사용하지 않을 이유가 없습니다.

RED(#b71c1c)를 기본값으로 했을 때
- light 버전은 #f05545
- dark 버전은 #7f0000
이라고 알려줍니다. 

0~900까지의 값을 만들지 않아도 적어도 기본, 다크, 라이크 3가지의 값을 만들어주고 디자인을 진행해야 합니다.

물론 0~900까지도 머터리얼 디자인에서 만들어줍니다. 이렇게요. 

material.io/design/color/the-color-system.html#tools-for-picking-colors

Material Design

여기에서 0~900까지 1초 만에 만들어봅시다!