Wear Material 3 Expressive 색상 시스템은 주요 구성요소에 세 가지 강조 레이어(기본, 보조, 3차)와 두 가지 중성 표면 레이어를 사용합니다. 각 역할은 일관된 대비를 가진 다양한 값을 제공하므로 표현력이 뛰어나면서도 접근하기 쉬운 색상 조합을 사용하여 모든 테마에서 통일된 환경을 제공할 수 있습니다.
색상 역할이란 무엇인가요?
색상 역할은 색칠하기 캔버스의 '숫자'와 같습니다. 색상은 UI 요소와 색상이 적용되는 위치를 연결하는 역할을 합니다.
- 색상 역할이 Material 구성요소에 매핑됨: 정적 기준 색 구성표를 사용하든 동적 색상을 사용하든 이러한 색상 역할을 사용합니다. 제품에 맞춤 구성요소가 포함된 경우 이 색상 역할 세트에 맞춤 구성요소를 올바르게 매핑해야 합니다.
- 색상 역할이 접근성을 지원: 색상 시스템은 접근성이 더 뛰어난 색상 조합을 기반으로 합니다. 이러한 색상 쌍은 최소 3:1의 색상 대비를 제공합니다.
- 색상 역할이 토큰화됨: 역할은 토큰을 통해 디자인과 코드에 구현됩니다. 디자인 토큰은 디자인 시스템의 시각적 스타일에 포함된 작고 재사용 가능한 디자인 결정을 나타냅니다.
필수 용어
색상 역할 이름에 표시되는 주요 용어는 다음과 같습니다.
- 표시 경로: 배경과 강조도가 낮은 대형 화면 영역에 사용되는 역할입니다.
- Primary, Secondary, Tertiary: 포그라운드 요소를 강조하거나 강조하지 않기 위해 사용되는 강조 색상 역할입니다.
- 컨테이너: 버튼과 같은 포그라운드 요소의 채우기 색상으로 사용되는 역할입니다. 텍스트나 아이콘에는 사용해서는 안 됩니다.
- 사용: 이 용어로 시작하는 역할은 페어링된 상위 색상 위에 텍스트 또는 아이콘의 색상을 나타냅니다. 예를 들어 on primary는 기본 채우기 색상과 대비되는 텍스트와 아이콘에 사용됩니다.
- 대안: 이 용어로 끝나는 역할은 변형이 아닌 쌍에 대한 강조도가 낮은 대안을 제공합니다. 예를 들어 윤곽선 변형은 윤곽선 색상의 강조가 덜 된 버전입니다.
기본 역할
기본 역할은 UI의 주요 구성요소(예: 가장자리 맞춤 버튼, 눈에 띄는 버튼, 활성 상태, 색조 버튼 스타일의 아이콘)에 사용됩니다.
기본
- 기본
- 기본(대비)
기본 버튼이나 클릭 유도 문구와 같이 UI에서 가장 중요한 작업에는 기본 역할을 사용합니다. 이 색상은 눈에 띄고 즉시 알아볼 수 있어야 사용자가 주요 상호작용으로 이동할 수 있습니다.
Primary-Dim
- Primary-Dim
- 기본(대비)
어둡게 표시 역할은 일반적으로 기본 작업과 시각적으로 구분되어야 하지만 즉각적인 사용자의 주의나 상호작용이 필요하지 않은 요소에 사용됩니다.
Primary-Container
- Primary-Container
- On-Primary-Container
카드나 모달과 같은 배경 요소에 기본 컨테이너를 적용하여 섹션이나 선택한 상태를 강조 표시합니다. UI 내에서 중요한 콘텐츠 또는 진행 중인 활동에 사용자의 주의를 끌 수 있습니다.
보조 역할
보조 역할은 UI의 주요 구성요소에 사용되며, 기본 역할만큼 중요하지는 않지만 눈에 띄어야 합니다. 기본 및 보조를 레이아웃에서 함께 사용하여 차별화와 포커스를 만들 수 있습니다.
보조
- 보조
- 보조(대비)
보조 버튼이나 보조 작업과 같이 UI가 밀집된 영역에서 작업을 지원하는 데 보조 역할을 사용합니다. 복잡한 레이아웃에서 기본 요소를 가리지 않고 가시성을 유지합니다.
Secondary-Dim
- Secondary-Dim
- 보조
Secondary-Dim 역할은 밀집된 영역의 수동 요소에 차분한 대비를 제공합니다. 보조 색상을 보완하면서 미묘한 깊이를 더하여 UI를 깔끔하게 유지하고 사용자가 탐색할 수 있도록 도와줍니다.
Secondary-Container
- Secondary-Container
- On-Secondary-Container
빽빽한 레이아웃에서 보조 요소를 정렬하려면 Secondary-Container를 적용합니다. 구조와 구분을 만들어 보조 콘텐츠가 구별되도록 하지만 강조되지 않도록 합니다.
고등 역할
3차 역할은 기본 색상과 보조 색상의 균형을 맞추거나 입력란과 같은 특정 요소로 관심을 유도하는 데 사용할 수 있는 대비 강조를 위해 사용됩니다. 또한 목표 달성 등 콘텐츠가 변경되거나 눈에 띄어야 할 때 이를 나타내는 데 도움이 될 수 있습니다.
3차
- 3차
- On-Tertiary
Tertiary 역할은 핵심 요소에 관심을 끌기 위해 사용됩니다. 서드 파티 역할은 배지, 스티커, 특수 작업 요소와 같이 눈에 띄어야 하는 구성요소에 특히 효과적입니다.
Tertiary-Dim
- Tertiary-Dim
- 3차
3차 작업과 관련 있지만 즉각적인 포커스가 필요하지 않은 버튼이나 작업에는 3차 어둡게 역할이 사용됩니다.
Tertiary-Container
- Tertiary-Container
- On-Tertiary-Container
배지에 관한 컬렉션이나 스티커와 같은 3차 관련 콘텐츠를 그룹화하는 배경에는 Tertiary-Container를 적용합니다. UI의 균형과 구조를 유지하면서 3차 요소를 강조합니다.
시맨틱 역할
Error-Red는 오류, 삭제, 긴급과 관련된 모든 항목을 심각한 문제로 표시하는 데 사용됩니다. 문제나 경고에 즉각적인 관심을 끌도록 설계되어 사용자가 수정 조치가 필요한 영역을 빠르게 파악할 수 있습니다. 오류-빨간색의 색조는 접근성 표준을 충족하기 위해 배경과 충분히 대비되어야 하며, 명확하게 표시되고 경고나 성공 메시지와 같은 다른 상태 색상과 구분되어야 합니다.
오류
- 오류
- On-Error
의미적이지만 약간 테마 색조가 있는 빨간색으로, 삭제, 닫기 또는 닫기 작업(예: 스와이프하여 표시)을 나타냅니다. 오류-어두운 색상보다 약간 덜 경고적이고 긴급한 컨테이너 대안으로 추가되었습니다.
Error-Dim
- Error-Dim
- On-Error
의미적이지만 약간 테마 색조가 있는 빨간색으로, 안전 알림, 실패한 대화상자 오버레이 또는 중지 버튼과 같이 우선순위가 높은 오류 또는 긴급 작업을 나타냅니다.
Error-Container
- Error-Container
- On-Error-Container
오류 상태를 사용하는 구성요소의 눈에 덜 띄는 컨테이너 색상입니다. 활성 상태의 긴급 상황 공유 버튼이나 카드, 실패한 오버레이 대화상자와 같이 채워진 상태보다 상호작용이 적은 활성 오류 상태를 나타낼 수도 있습니다.
노출 영역 컨테이너 및 고도
노출 영역 컨테이너는 UI 내에서 깊이와 높이를 정의하는 데 중요한 역할을 하며, 색상을 통해 구조와 계층 구조를 제공하여 구성요소의 중요도와 상호작용에 따라 구성요소를 구분하는 데 도움이 됩니다.
Surface-Container-Low
- Surface-Container-Low
- 노출 영역(대비)
- On-Surface-Variant
Surface-Container 아래에 있어야 하는 펼쳐진 컨테이너(예: 알림의 펼쳐진 카드)에 적합합니다. 콘텐츠가 여전히 제한된 공간에서 이점을 얻을 수 있는 비대화형 카드에도 사용할 수 있습니다.
Surface-Container
- Surface-Container
- 노출 영역(대비)
- On-Surface-Variant
대부분의 요소의 기본 컨테이너 색상입니다. 중립적이고 적당한 강조 표시를 제공하므로 일반적인 UI 구성요소에 적합합니다.
Surface-Container-High
- Surface-Container-High
- 노출 영역(대비)
- On-Surface-Variant
Surface-Container 위에 배치되거나 Surface-Container와 함께 사용해야 하는 강조된 구성요소에 적합합니다. 이 색상은 UI의 중요한 영역에 초점과 계층 구조를 제공하는 데 도움이 됩니다.