📖 Color system

Material 색상 시스템에는 다음이 포함되어 있다

• 접근 가능한 색상 관계를 갖춘 Built-in set
• Material Components에 매핑된 26개 이상의 색상 역할
• 내장된 다크 테마 색상
• 기본 색상이 각 색상 역할에 할당된 정적 기준선 색상
• 사용자 생성 및 콘텐츠 기반 색상을 포함한 동적 색상 기능

필수 용어

1️⃣ Color role

• Color role은 특정 UI 요소에 할당된다.
• primary, on primary, primary container 등
• 동일한 Color role이 밝은 테마와 어두운 테마 모두에 사용된다

2️⃣ Dynamic color

• 사용자의 배경화면이나 앱 내 콘텐츠에서 단일 색상을 가져와 UI의 요소에 할당하여 접근 가능한 color scheme을 생성한다.
• 사용자의 배경화면이나 앱 내 콘텐츠가 변경되면 UI의 색상도 일치하도록 변경된다

📌 Dynamic color 프로세스는 자동적이다.
단일 소스 색상이 사용되어 5개의 주요 색상을 생성하고, 이를 사용하여 음영 팔레트를 만든다.
팔레트에서 나온 음영은 Color role에 할당되며, 이 Color role은 UI의 요소에 할당된다

3️⃣ Static color

• 사용자의 배경화면이나 앱 내 콘텐츠에 기반하지 않고 변경되지 않는 UI 색상 - 정적 색상은 수동으로 선택하거나 Material Theme Builder와 같은 디자인 도구에서 생성할 수 있다
• 각각의 Color role과 UX 요소에 할당된 후에는 색상이 일정하게 유지된다.

💡 Baseline color

• Material 제품의 기본 정적 color scheme
• light 테마와 dark 테마 모두에 대한 색상을 포함

Dynamic color

Material Color Utilities (MCU)에 의해 제공되는 컬러 라이브러리를 통해 사용자의 배경화면이나 앱 내 콘텐츠에서 단일 색상을 가져와 UI의 요소에 할당하여 접근 가능한 color scheme을 생성한다

사용자의 배경화면이나 앱 내 콘텐츠가 변경되면 UI의 색상도 일치하도록 변경된다

source color을 얻는 세 가지 방법

1️⃣ wallpaper에서 생성

• wallpaper은 프로세스를 통해 디지털적으로 분석되고, 하나의 색상이 source color으로 선택된다

2️⃣ 앱 내 콘텐츠에서 생성

• ex. 앨범 섬네일 이미지, 로고, 또는 비디오 미리보기 등
  사용자 생성 색상과 마찬가지로, 이미지는 프로세스를 통해 디지털적으로 분석되고, 하나의 색상이 source color으로 선택된다

3️⃣ 사용자 지정 색상
수동으로 선택된 색상은 의도적으로 디자이너에 의해 선택된다
Baseline color scheme는 수동으로 선택하여 만들었다

material의 색상 알고리즘

1. 소스 색상의 색조과 크로마를 조작하여 다섯 가지 주요 색상을 생성한다

• Primary, Secondary, Tertiary, Neutral, Neutral variant

2. 톤 및 크로마 값들을 조작하여 각 주요 색상에 대한 톤 팔레트를 생성한다
3. 접근 가능한 색상 관계를 사용하여 26개의 색상 역할에 특정 톤을 할당한다

• ex. primary40 톤은 primary 역할에 할당되었고, primary100 톤은 on primary 역할에 할당

4. dark 테마 색상도 자동으로 할당된다

컬러 대비 설정

색상 시스템은 사용자가 자신의 시각적 요구에 가장 적합한 대비 설정을 선택할 수 있도록 도와준다.

선택 가능한 세 가지 대비 수준은 다음과 같습니다:

Standard
인지 장애를 가진 사람을 포함하여 모든 계층의 사람들을 위해 지원

• baseline color scheme는 표준 대비로 혼합된 대비를 사용

Medium
3:1의 최소 대비 비율을 제공

• 높은 대비로 인한 불편함을 있는 사용자를 위한 지원
• 화면 밝기를 높이면 일부 사용자에게 불편을 줄 수 있다

High

• 색상을 통한 가장 많은 시각적 지원을 제공
• 모든 부분에 대비를 증가시키는건 아니다.
• 핵심 요소를 강조하여 시각적인 혼란을 줄이고 사용자가 집중할 수 있도록 한다
• ex. 카드의 콘텐츠에는 높은 대비가 적용되지만 카드 컨테이너에는 적용되지 않는다

💡 대비 설정은 자동으로 light 테마와 dark 테마 모두 적용된다.

색조 Pairing

Material의 색상 알고리즘은 HCT(색조, 채도, 톤) 값을 조작하여 각 색상에 대한 0에서 100까지의 범위를 갖는 톤 팔레트를 생성

• 생성된 팔레트를 사용하여 대비되는 톤을 찾아 짝지어서 접근 가능한 색상 조합을 만든다
• ex. 버튼의 컨테이너 색상에 어두운 톤을 할당하고 레이블 색상에는 밝은 톤을 할당하여 색상이 3:1의 대비를 갖도록 한다

HCT 색상 정의

색상을 Hue(색조), Chroma(채도), 및 Tone(톤)이라는 세 가지 차원을 사용하여 정의

Hue

• 색상을 빨강, 주황, 노랑, 초록, 파랑, 보라 등으로 인식하는 것입
• 색조는 0부터 360까지의 숫자로 양자화
• 원형 스펙트럼(값 0과 360은 동일한 색조입니다)

Chroma
색상이 얼마나 생생하거나 중립적(회색, 검정 또는 흰색)으로 보이는지를 나타낸다

• 채도는 0에서 무한대까지의 숫자로 양자화되지만, HCT에서의 채도 값은 대략 120에 머무른다.

Tone

• 색상이 얼마나 밝거나 어두워 보이는지를 나타냅니다(=휘도)
• 톤은 0(순수한 검정)에서 100(순수한 흰색)까지의 숫자로 양자화됩니다.

📌 톤은 시각적 접근성에 중요하다

• 톤이 대비를 결정
• 톤에 큰 차이가 있는 색상은 높은 대비를 만들고, 차이가 작은 색상은 낮은 대비를 만든다.

📖 Color roles

UI 요소들과 어떤 색상이 어디에 들어가는지를 연결

Color roles

• Material Components에 매핑된다
• 사용자 정의 컴포넌트가 포함되어 있다면 Color roles 올바르게 매핑해야 한다
• Color roles은 접근성을 보장
• 토큰화, 토큰을 통해 디자인 및 코드에서 구현

Color role 주요 단어

Surface: 중립적인 배경에 사용되며, 카드, 시트, 대화 상자 등과 같은 구성 요소에 대한 컨테이너 색상에 사용된다.

• UI의 배경이나 큰 부분을 채우는 데 사용
• 큰 주목을 받는 요소가 아니다
• ex 화면의 기본 배경이나 패널 등이 Surface의 역할이다
• 가장 일반적인 조합 중 하나는 배경 영역에 surface을 사용하고 내비게이션 영역에 표면 container를 사용하는 것

Primary: 전경 요소를 강조하는 데 사용

• 주로 UI의 주요 요소나 특별한 부분에 사용되어 화면에서 두드러지게 표시된다

📌 전경
그림이나 디자인에서 화면의 주요 부분 또는 주요 객체를 가리키는 용어이다

• 전경은 배경과 대비를 이루며, 시선을 끌거나 주요한 내용을 강조하는 데 사용
• UI 디자인에서는 주로 버튼, 텍스트, 이미지 등 사용자에게 직접적으로 보여지는 요소들이 전경에 해당한다

Secondary: Primary보다 낮은 강도로 사용

Tertiary: 강조를 더욱 감소시킨 역할

• 주요 및 보조 색상을 균형있게 조화시키거나 입력 필드와 같은 요소에 높은 주목을 불러일으키기 위한 대비 있는 강조 효과를 위해 사용
• 주로 부가적인 요소나 중요도가 낮은 부분에 사용
• 전경 요소를 덜 강조하고 백그라운드와 잘 조화를 이룬다.

Container: 주로 전경 요소의 채우기 색상으로 사용

• ex. 버튼의 배경색으로 Container 역할이 사용될 수 있다.
• 텍스트나 아이콘 같은 다른 요소에는 사용되지 않아야 한다

On: On으로 시작한다면, 해당 부모 색상 위에 있는 텍스트나 아이콘을 나타낸다

• ex. on primary는 주요 배경색 위에 텍스트나 아이콘에 사용
• On 역할은 전경 요소와 관련된 색상을 나타낸다

Variant: Variant로 끝난다면, 해당 역할에 비해 낮은 강도의 대체 옵션을 제공

• ex. outline variant는 아웃라인 색상의 덜 강조된 버전
• Variant 역할은 주로 강조를 줄이거나 보다 부드러운 시각적 효과를 위해 사용

Error: error color는 동적 색상 체계에서도 정적으로 유지되며, 어떠한 동적 색상 테마에서도 변경되지 않는다.

• 에러를 시각적으로 강조하여 사용자에게 중요한 정보를 전달하는 데 도움을 준다

Inverse: 주변 UI와 대조되는 색상을 만들기 위해 구성 요소에 선택적으로 적용된다

• 대비 효과를 내기 위해 사용
• UI에서 대비를 강조하거나 특정 구성 요소를 부각시키는 데 사용

Outline: UI 구성 요소에 대한 강조를 나타내는 데 사용된다

• 테두리는 주로 대화 상자, 입력 필드, 버튼 등과 같은 구성 요소 주위에 적용
• Surface 역할과 다르게 외곽선 형태로 강조를 제공하며, 특히 텍스트나 아이콘이 있는 요소 주위에 사용
• 분할선, 다양한 요소를 포함한 구성 요소, 칩과 같이 서로 가까이 있는 UI요소에는 Outline을 사용하는 대신에 테두리 변형을 사용해야 한다
  📌 예시

1. On primary 2. Primary	1. On primary container 2. Primary container

On 은 말 그대로 Primary 색상 위에 올리는 색상이고, Container는 배경을 강조할 때 사용하면 된다.