Google Material Style Guide (컬러)

스타일이란?

스타일은 UI에 고유한 분위기와 인상을 부여하는 시각적 요소입니다. 

색상, 고도, 아이콘, 운동, 형태, 타이포그래피 같은 것들.

• 색상: 스타일을 표현하고 의미를 전달하는 데 사용됩니다. 
• 고도: z축을 기준으로 두 표면 간의 상대적인 거리입니다. 모든 표면과 컴포넌트는 고유한 elevation 값을 가집니다.
• 아이콘: 일반적인 동작을 시각적으로 나타내는 데 사용됩니다. 
• 운동: UI를 더 직관적이고 표현력 있게 만드는 데 사용됩니다. Material 전환 애니메이션은 사용자가 앱을 탐색할 때 자연스럽게 흐름을 안내합니다.
• 형태: 컨테이너 모서리의 스타일을 정의하며, 각진 형태부터 완전히 둥근 형태까지 다양한 둥글기 옵션을 제공합니다.
• 타이포그래피: 텍스트를 읽기 쉽고 아름답게 만드는 데 사용됩니다.

---

1. 컬러

색생 체계 : 제품의 계층 구조, 상태, 그리고 브랜드를 전달하는 접근 가능하고 개인화된 색상 체계

톤 팔레트의 음색들은 서로 다른 역할에 할당됩니다

UI에 할당된 색상 역할

 

접근 가능한 톤 조합 (Pairing accessible tones)

시스템은 색상(Hue), 채도(Chroma), 명도(Tone) 값(HCT)을 조작하여 각 색상마다 0에서 100까지의 톤 범위를 가진 톤 팔레트를 생성합니다. 하지만 색상에는 물리적인 한계가 존재합니다. 이는 실제 물리적 제약, 인간의 시각적 한계, 또는 디스플레이의 색상 표현 한계 때문입니다.

예를 들어, 일부 색상은 특정 채도나 톤과 결합하여 존재할 수 없습니다. 밝은 연한 파랑이나 밝은 연한 빨강 같은 색이 완전히 구현되기 어려운 이유도 여기에 있습니다. 이 때문에 톤 팔레트에서는 일부 톤에서 채도 값이 증가하거나 감소할 수 있습니다. 톤 값은 0(검정)부터 100(흰색)까지이며, 값이 낮을수록 색은 더 어두워집니다.

 

버튼의 컨테이너 색상에는 어두운 톤, 라벨 색상에는 밝은 톤을 할당하여 두 색상 간 3:1 대비를 확보합니다.

• 톤 50(버튼) + 톤 98(라벨) → 3:1 대비 (접근성 충족)

더 높은 대비가 필요한 경우, 톤 간의 간격을 더 크게 설정하여 7:1 대비를 만듭니다.

• 톤 30(버튼) + 톤 98(라벨) → 7:1 대비 (높은 접근성)

 

 

출처: 구글 Material Desgin