Material Design 3 – 색상 역할(번역)

색상 페어링 및 레이어링

앱에서 접근 가능한 시각적 대비를 보장하기 위해, 다음 섹션에서 설명하는 의도된 페어링 또는 레이어링 순서대로만 색상을 적용하세요.

색상을 부적절하게 조합하면 시각적 접근성에 필요한 대비가 깨질 수 있으며, 특히 사용자 제어 대비와 같은 동적 색상 기능을 통해 색상을 조정하는 경우 더욱 그렇습니다.

• Primary roles 1차 역할은 새 메시지를 시작하는 FAB(Floating Action Button)과 같이 가장 강조할 필요가 있는 중요한 동작 및 요소에 사용됩니다.
  
• Secondary roles 2차 역할은 내비게이션 아이콘의 선택된 상태나 해제 버튼과 같이 즉각적인 주의가 필요하지 않고 강조할 필요가 없는 요소에 사용됩니다.
  
• Tertiary roles 3차 역할은 배지나 알림과 같이 특별히 강조해야 하지만 즉각적인 주의가 필요하지 않은 작은 요소에 사용됩니다.

• Primary – Surface(표면)에 대한 강조도가 높은 채우기, 텍스트 및 아이콘
  
• On primary – Primary에 대한 텍스트 및 아이콘
  
• Primary container – Surface(표면)에 대비되는 두드러진 채우기 색상, FAB와 같은 주요 구성 요소용
  
• On primary container – Primary container에 대비되는 텍스트 및 아이콘

Secondary 역할에는 네 가지가 있습니다:

• Secondary – Surface(표면)에 대한 덜 두드러지는 채우기, 텍스트 및 아이콘
  
• On secondary – Secondary에 대한 텍스트 및 아이콘
  
• Secondary container – 색조(tonal) 버튼과 같은 열성(recessive)구성 요소에 대해, 표면 대비 덜 눈에 띄는 채우기 색상
  
• On secondary container – secondary container에 대한 텍스트 및 아이콘

Tertiary 역할에는 네 가지가 있습니다:

• Tertiary – 표면에 대한 보완적인 채우기, 텍스트 및 아이콘
  
• On tertiary – Tertiary에 대한 텍스트 및 아이콘
  
• Tertiary container – 입력 필드와 같은 컴포넌트의 경우 표면에 대한 보완적인 컨테이너 색상
  
• On tertiary container – Tertiary container에 대한 텍스트 및 아이콘

에러 역할에는 네 가지가 있습니다:

• Error – 채우기, 아이콘 및 텍스트의 표면에 주의를 끄는 색상으로 긴급함을 나타냅니다.
  
• On error – 오류에 대한 텍스트 및 아이콘
  
• Error container – 표면에 대비되는 주의를 끄는 채우기 색상
  
• On error container – Error container에 대한 텍스트 및 아이콘

에러는 정적 색상의 예입니다(동적 색상 구성표에서도 변경되지 않음). 오류 색 역할은 모든 동적 색상 구성표에서 기본적으로 정적으로 만들어집니다.

Surface 역할에는 세 가지가 있습니다:

• Surface – 배경의 기본 색상
  
• On surface – 모든 surface 색상에 대한 텍스트 및 아이콘
  
• On surface variant – 모든 표면 색상에 대한 텍스트 및 아이콘의 강조도가 낮은 색상

또한 강조 수준에 따라 이름이 지정된 5가지 surface 컨테이너 역할이 있습니다:

• Surface container lowest – 가장 낮은 강조 컨테이너 색상
  
• Surface container low – 낮은 강조의 컨테이너 색상
  
• Surface container – 기본 컨테이너 색상
  
• Surface container high – 강조도가 높은 컨테이너 색상
  
• Surface container highest – 가장 높은 강조도의 컨테이너 색상

Surface container가 기본 역할이지만, 다른 컨테이너는 확장 화면용 레이아웃에서 계층 구조 및 중첩된(nested) 컨테이너를 만드는 데 특히 유용합니다.

The five surface container roles, shown in light and dark theme

가장 일반적인 surface 역할 조합은 배경 영역에는 서피스를, 내비게이션 영역에는 서피스 컨테이너를 사용합니다.

Inverse colors(반전 색상)

역방향 역할은 컴포넌트에 선택적으로 적용되어 주변 UI의 색상과 반대되는 색상을 구현하여 대비 효과를 만듭니다.

• Inverse surface – 표면과 대비되는 요소의 배경 채우기
  
• Inverse on surface – Inverse surface에 대한 텍스트 및 아이콘
  
• Inverse primary – Inverse surface에 적용되는 텍스트 버튼과 같은 동작 가능 요소(Actionable elements)

Surface에 대해 사용될 윤곽선 색상은 두 가지가 있습니다:

• Outline – 텍스트 필드 윤곽선과 같은 중요한 경계선
  
• Outline variant – 구분선과 같은 장식 요소

Fixed accent colors(고정 액센트 색상)

Primary fixed, secondary fixed, and tertiary fixed는 surface에 사용되는 채우기 색상입니다. 이러한 색상은 테마 간에 톤이 바뀌는 일반 컨테이너 색상과 달리 라이트 테마 및 다크 테마에서 동일한 톤을 유지합니다. 이러한 고정 동작이 필요한 상황에서는 동등한(equivalent) 컨테이너 역할 대신 고정 색상 역할을 사용할 수 있습니다.

The primary fixed dim, secondary fixed dim, and tertiary fixed dim(1차 고정 어둡기, 2차 고정 어둡기 및 3차 고정 어둡기) 역할은 동등한 고정 색상에 비해 더 강하고 강조된 톤을 제공합니다. 더 진한 색상이 필요하지만 동일한 고정 동작이 필요한 경우에 사용할 수 있습니다.

On fixed 액센트 컬러

On fixed colors는 상응하는 Fixed color 위에 있는 텍스트 및 아이콘에 사용됩니다. 예를 들어, on primary fixed는 primary fixed 색상과 대비되는 텍스트 및 아이콘에 사용됩니다. 동등한 secondary and tertiary 색상에도 동일한 사용법이 적용됩니다.

On fixed variant 색상은 상응하는 Fixed color에 비해 강조를 낮출 필요가 있는 텍스트 및 아이콘에 사용됩니다. 예를 들어, on primary fixed variant는 primary fixed 색상과 대비하여 강조도가 낮은 텍스트 및 아이콘에 사용됩니다. 동등한 secondary and tertiary 색상에도 동일한 사용법이 적용됩니다.