색상 선택

머티리얼 디자인에 따라 색상을 선택하는 방법의 요점은 아래 이미지에 포장되어 있습니다.
지금부터 이 이미지를 보면서 설명해 갑니다.

메인 브랜드 색상

이미지 을 보면 1과 2는 색이 비슷하다는 것을 알 수 있습니다.
그리고 Primary라고 적혀 있습니다.
이 두 가지 색상은 사용자가 만드는 앱 전체에서 사용하는 색상이며 앱의 브랜드 색상입니다.
이들은 앱에서 중요한 구성 요소, 예를 들어 헤더 등에서 사용됩니다.
아래 이미지에 사용 예가 나와 있습니다.

보조 브랜드 색상

다시 이미지 을 보면 3과 4도 색이 비슷하고 Secondary로 쓰여져 있음을 알 수 있습니다.
이 두 가지 색상은 앱 내에서 보조 브랜드 색상으로 사용됩니다.
예를 들어 버튼이나 셀렉션 등의 UI 부품에 사용하는 것이 좋은 것 같습니다.
아래 이미지는 버튼 색상에 사용됩니다.

기타 색상

이미지 안의 5~7은 각각, 배경색, 범용적인 컴퍼넌트(카드나 메뉴등)의 색, UI의 에러를 전하는 색을 나타내고 있습니다.
앱 내에서 널리 사용되는 색상은 5와 6 색상입니다.
아래 이미지에서 브랜드 색상은 생략된 상태에서 위의 3 가지 색상의 사용 예가 표시되어 있습니다.

문자와 아이콘 색상

이미지 안의 8~12는 1~7의 컴퍼넌트 위의 문자나 아이콘의 색을 나타내고 있습니다.
각각 On Primary처럼, 각각의 머리에 On이라는 것이 붙어 있습니다.
예를 들어 On Primary는 흰색이고 Primary는 진한 파란색입니다.
이것은 어두운 파란색 위에 흰색 문자를 쉽게 볼 수 있도록 그렇게 선택됩니다.
다른 색상도 비슷한 생각으로 흰색인지 검정인지를 결정합니다.

아래 이미지에서 각 구성 요소 위의 문자와 색상에 대해 의식해보십시오.

요약

앱에서 색상을 선택할 때 먼저 메인 브랜드 색상을 선택합니다. 그리고 다른 브랜드 색상을 원할 때 보조 브랜드 색상을 선택합니다. 이들은 비슷한 색상을 선택하는 것이 좋습니다.
그리고, 배경색이나 범용적인 컴퍼넌트나 문자등은, 이 브랜드색의 방해를 하지 않는 색을 선택하도록(듯이) 합니다.

참고문헌

The Color System