구글 매터리얼 디자인 / Sytles / Color / Color System / Key Color & Tone

Color System

UI 컴포넌트에 맞게 26가지 이상의 역할로 구성되어 있는 컬러 시스템

컬러 시스템에서는 사용자의 입력에 따라 동적으로 변경되는 색상 구성을 가변적으로 처리하고 있다. 색조의 관계(배색에 있어서의) 논리와 색조 및 채도의 변경은 색상을 유연하게 적용하기 위한 기본을 제시한다. 컬러 시스템 구성표는 고정된 상수로 결정된 값의 그룹이 아닌 상대적으로 결합된 색조로 간주될 수 있다. 

Key Colors 주요 색상

컬러 시스템의 기본은 13개의 색조로 구성된 개별적인 톤 팔레트와 각각 연결되는 5개의 주요 색상이 세트로 구성된다. 각 톤 팔레트에서의 특정 톤은 UI 전체에서 색상 역할을 할당받는다. 
주요색상(Key Colors 주조색이라고 하기에는 주조색과 보조색, 강조색이 어우러진 그룹이라 주로 사용되는 색상의 그룹 정도로 이해하면 될 것)은 동적 컬러 시스템을 만드는 토대가 된다. 주요색상이 설정된 상태에서 매터리얼의 알고리즘은 상호작용의 상태나 오류 상태 및 접근성 기준을 충족하기 위한 대비를 표현하는데 필요한 전체 색상의 스펙트럽을 규정한다. 
사용자 지정 색상을 컬러 시스템에 추가하는 것도 가능하다. 사용자 지정 색상에 대해서는 아래 링크를 참조할 수 있다. 

https://m3.material.io/styles/color/the-color-system/custom-colors

Key Colors : accent & neutral 강조색과 중간색

Accent  colors 강조색

주조색(Primary key colors)은 플로팅 액션버튼(FAB:Floating Action Button), 강조버튼, 활성화된 상태 및 입체적으로 표현된 표면의 색조 등과 같이 UI 전반에 필요한 컴포넌트의 역할을 부여하는데 사용된다. 
2차 보조색(Secondary key colors)은 필터 칩 등 UI에서 비교적 눈에 덜 띄는 컴포넌트에 사용하며 색상 표현을 풍부하게 만들어준다. (2차 보조색을 적극적으로 사용할 수 있을지 잘 모르겠다. 각각 클라이언트 브랜드가 가지고 있는 고유의 CI 컬러가 2차 보조색까지 뽑아낼 수 있을 경우 역동적인 디자인을 만들기에 사용해 볼 수는 있겠지만, 보통 BI나 CI에서 하나의 주조색만 보이는 경우도 많기 때문에 그럴 경우 대체로 난감해질 수 있다.) 
3차 보조색(Teritary key colors)은 주조색과 2차 보조색 사이의 균형을 맞추거나 구성 요소에 대한 주의집중 정도를 높일 떄 사용하여 강한 대비를 가진 강조 역할을 부여하는데 사용할 수 있다. 제품에 더 폭 넓은 색상 표현을 적용하려면 3차 보조색의 역할을 각 팀의 재량에 따라 추가로 사용할 수 있게 준비해 두었다. 

Neutral Colors 

주조색의 저채도 톤 색상(Neutral Key Color) 은 배경색 또는 아이콘 및 텍스트를 강조하는데 사용한다. 주조색의 저채도 톤에서 추가 변형된 색상(Neutral Variant Key Color)은 아이콘 및 텍스트, 컴포넌트의 윤곽선과 같은 중간 정도의 강조 요소를 표현하는 색상 역할을 한다. 

Additonal Colors : 추가적인 색상들

Error colors 오류 색상

색상 시스템에서는 강조 색상과 저채도 톤의 색상 외에도 오류에 대한 의미를 부여하는 역할에 사용하는 색상을 포함하며, 오류 자체를 표현하는 것과 오류 상태에 들어갔을 떄, 오류를 포함하고 있는 컨테이너 등을 표현할 때 사용한다. 오류에 대한 색상 역할 정의는 어떤 컬러 시스템에서든 매터리얼에서 기본적으로 추가 제공하는 사용자 정의 색상에 대한 예시이기도 하다. 

Product-sepecific custom color 제품 자체 정의 색상들

사용자 정의 색상은 UI에서 오류 등과 같은 기존 의미를 전달할 때 특정 색상을 표현하는 것처럼 색상을 지정하여 사용하는 것이다. 또한 동적 컬러 시스템 환경의 다양성을 제고하고, 사용자 정의와 정교한 조작을 가능하게 한다. 

Tonal palettes : 색조 팔레트 (명도와 채도의 혼합한 개념의 톤 단계를 표현하는 팔레트)

톤100은 언제나 100% 흰 색이며, 팔레트 범위에서 가장 밝은 톤이다. 톤0은 100% 검정 색이며, 팔레트 범위 내에서 가장 어두운 톤이다. 

• 하나의 주요 색상은 13단계의 톤으로 나누어 구분한다.
• 톤 팔레트는 흰색과 검은색을 포함한 13개의 톤으로 구성된다.
• 톤 값 100은 빛의 최대치 값과 동일한 개념으로 흰색으로 표현된다.
• 0부터 100 사이의 모든 톤 값은 특정 색상에 존재하는 빛의 양을 나타낸다. (빛의 양이라고 하니 HSL 값에서 L값만  단계별로 동등하겨 변화시키면 될 것 같은데 그렇지는 않았다. 실제 피그마에서 사용하는 매터리얼 툴 킷 플러그인으로 커스텀 팔레트를 만들어 보고 각 톤의 HSL 값을 다 들여다 보았는데, 색상값 Hue에 따라서 포화도 Saturation(채도) 값도 불규칙하게 변화하고 있었다. 구글놈들 대체 무슨 알고리즘으로 팔레트를 만들어내고 있는 것인지 궁금하다. 도저히 방법을 모르겠어서 일단 SASS를 열어서 Key Color의 HSL 값을 기준으로 단계가 만들어지도록 중간 값에서부터 밝은 쪽으로는 White를 섞고, 어두운 쪽으로는 Black을 섞어 플러그인이 뱉어낸 톤팔레트와 유사한 단계의 팔레트를 만들기는 했다.) 

각 색상의 톤 값은 해당 역할과 관련된 숫자와 함께 표현된다. 예를 들어 Primary40은 톤40 값을 가진 주조색(Primary Color)이다. 

색상 역할에 대한 내용부터 다음에 계속했어야 하는데, 정신 없이 한 포스트에 밀어 넣어서 수정합니다. 이후 색상 역할 부분은 다음에 계속 -