제품의 계층 구조, 상태 및 브랜드를 전달하는 접근하기 쉽고 개인적인 컬러 체계를 만드세요.
Color – Material Design 3 – Create personal color schemes
/How the system works
숫자별로 페인트를 칠하는 것과 같습니다.
제품 화면을 숫자로 색칠하는 캔버스라고 상상해 보세요:
- 화면의 각 요소에는 숫자가 할당됩니다.
- 각 숫자에는 색상이 할당됩니다.
모든 ‘숫자’의 색상을 직접 선택하여 정적 색 구성표(static color scheme)를 만들 수 있습니다.
하지만 이제 머티리얼의 다이나믹 컬러 시스템을 사용하여 단일 소스에서 각 “숫자”에 액세스할 수 있는 전체 색상 팔레트를 자동으로 생성할 수도 있습니다.
이 소스는 사용자의 배경화면이나 이미지(imagery)와 같은 인앱 콘텐츠일 수 있습니다. 소스가 변경되면 제품 색상도 그에 맞게 업데이트됩니다.
다음과 같이 제품에 동적 색상이 표시되는 방식을 사용자 지정할 수 있습니다:
- 색상 소스 설정
- 정적 또는 조화로운 색상 추가
- 어떤 요소에 어떤 ‘숫자’를 할당할지 변경하기
Essential terms(필수 용어)
Color role(색상 역할)
색상 역할은 “numbers” on a paint-by-number canvas 처럼 특정한 UI 요소에 할당됩니다. 이들은 primary, on primary, primary container와 같은 의미론적 이름과 일치하는 색상 토큰을 가지고 있습니다. 모든 색상 역할 보기
Dynamic color(동적 색상)
동적 색상은 사용자의 배경 화면 또는 인앱 콘텐츠에서 단일 색상을 가져와 UI의 요소에 할당된 접근 가능한 색 구성표를 만듭니다. 사용자의 배경화면이나 인앱 콘텐츠가 변경되면 UI의 색상도 그에 맞게 변경됩니다.
Static color(정적 색상)
사용자의 배경 화면이나 인앱 콘텐츠에 따라 변경되지 않는 UI 색상입니다. 정적 색상은 직접 선택하거나 머티리얼 테마 빌더와 같은 디자인 툴에서 생성할 수 있습니다. 각각의 색상 역할과 UX 요소에 할당되고 나면 색상은 일정하게 유지됩니다.
Baseline static color(베이스라인 정적 색상)
머티리얼 제품의 디폴트 정적 색 구성표입니다. See the baseline color scheme
시스템은 배경 화면 및 인앱 콘텐츠 같은 이미지에서 얻은 색상을 사용하여 동적 색 구성표를 생성합니다.
다이내믹 컬러가 색 구성표를 생성하는 방법
1. 소스 색상으로 시작합니다.
소스 색상을 얻는 방법에는 세 가지가 있습니다.
A. 배경 화면에서 생성
사용자 생성 색상은 사용자의 개인 배경 화면에서 소싱됩니다. 배경화면은 양자화(quantization)라는 프로세스를 통해 디지털로 분석되고 단일 색상이 소스 색상으로 선택됩니다.
B. 인앱 콘텐츠에서 생성
콘텐츠 기반 색상은 앨범 썸네일 이미지, 로고 또는 동영상 미리보기와 같은 인앱 콘텐츠의 소스입니다.
사용자 생성 색상과 마찬가지로 이미지는 양자화를 통해 디지털 분석되고 단일 색상이 소스 색상으로 선택됩니다.
C. 수작업으로 선택
A hand-picked source color는 디자이너에 의해 의도적으로 선택됩니다.
알고 계셨나요? 베이스라인 정적 색 구성표는 hand-picked source color를 사용합니다.
2. 알고리즘에 소스 색상 공급
동적 색상은 앱에서 색상 테마 및 구성표를 개발하는 알고리즘과 유틸리티가 포함된 색상 라이브러리 세트인 MCU(Material Color Utilities)에 의해 구동됩니다.
많은 색상 알고리즘이 있지만 가장 일반적인 알고리즘은 다음과 같습니다:
- 사용자 생성 색상 알고리즘
개인 배경 화면을 사용하여 소스 색상을 식별합니다. 시스템 디자인 선택과 사용자 선호도의 조합에 따라 특정 톤(더 밝거나 어두운)의 색상을 구성표에 매핑합니다. - 콘텐츠 기반 색상 알고리즘
이미지를 소스 색상으로 사용합니다. 접근 가능한 대비를 유지하면서 소스 이미지의 모양과 일치하도록 톤이 조정됩니다. - 사용자 지정 색상
브랜드 또는 의미론적 의미를 나타내는 색상 등 선택한 입력 색상과 거의 일치하는 색상입니다.
3. 알고리즘이 키 컬러를 생성합니다.
머티리얼의 색상 알고리즘은 소스 색상의 색조(hue)와 채도(chroma)를 조작하여 5가지 보완적인 키 색상을 생성합니다. five complimentary key colors.
- Primary
- Secondary(보조)
- Tertiary(3차)
- Neutral(중립)
- Neutral variant(중립 변형)
4. 알고리즘이 색조 팔레트를 생성합니다.
그런 다음 시스템에서 톤(tone) 및 채도(chroma) 값을 조작하여 각 주요 색상에 대한 색조(tonal) 팔레트를 만듭니다. 이 팔레트의 색상은 0에서 100까지 10 단위로 95, 98, 99와 같은 숫자로 지정됩니다. 일부 팔레트에는 더 많은 값이 포함됩니다.
5. 알고리즘이 색상 역할에 톤을 할당합니다.
알고리즘은 접근 가능한 색상 관계를 사용하여 라이트 및 다크 테마 모두에서 26개의 색상 역할에 특정 톤을 할당합니다.
예를 들어, 알고리즘은 Primary 역할에 컬러 톤 Primary40을 할당하고, 톤 Primary100을 On Primary 역할에 할당합니다.
다크 테마 색상도 자동으로 할당되므로 앱이 단일 색상 역할 세트를 통해 라이트 테마와 다크 테마를 모두 받을 수 있습니다.
6. 새로운 색상이 UI에 반영됩니다.
26개의 표준 색상 역할은 이미 UI의 요소에 할당되어 있습니다. 새 소스 색상을 선택하면 UI의 색상이 동적으로 변경됩니다.
색상 역할은 세 가지 수준의 대비를 지원합니다.
색상 역할은 라이트 및 다크 테마 외에도 3단계의 대비를 지원합니다. 이를 통해 사람들은 자신의 시력에 가장 적합한 대비 설정을 선택할 수 있습니다:
- Standard/표준 (default)
- Medium (중간)
- High(높음)
표준 대비는 고대비 및 저대비 요소를 사용하여 시각적 계층을 강조합니다. 시각 장애가 있는 사용자는 더 나은 지원을 위해 중간 또는 높은 대비 옵션을 선택할 수 있습니다.
베이스라인 색 구성표는 이미 인지 부하를 줄이기 위해 혼합 대비 수준을 사용합니다.
더 많은 대비가 필요하지만 할레이션(halation)과 같은 효과로 인해 더 높은 대비로 시각적 불편함을 느낄 수 있는 사용자를 위해 최소 대비 비율을 3:1로 제공합니다.
7:1의 명암비로 필수 요소를 더욱 강조하여 시각적 산만함을 줄이고 사용자가 집중할 수 있도록 합니다. 예를 들어 카드의 콘텐츠에는 높은 대비가 적용되지만 카드 컨테이너에는 적용되지 않습니다.
대비 설정은 라이트 및 다크 테마 모두에 자동으로 적용됩니다.
사용자 정의 컴포넌트는 머티리얼의 적절한 색상 역할을 사용하여 대비 수준을 지원할 수 있습니다. 예를 들어 primary 컨테이너와 on primary 컨테이너를 사용합니다.
디자인 토큰을 사용하여 사용자 정의 구성요소에 색상 역할을 적용합니다.
접근 가능한 톤 페어링하기
시스템은 HCT[색조(hue), 채도(chroma), 톤(tone)] 값을 조작하여 0~100 범위의 톤으로 각 색상에 대한 tonal 팔레트를 생성합니다.
색에는 물리적 한계-실제 물리학, 우리의 생물학적 시각적 한계 또는 화면상의 색상 렌더링의 한계 등 -가 있습니다. 예를 들어, 일부 색조는 특정 채도나 톤과는 함께 존재할 수 없습니다. bright light blue or bright light red와 같은 색상이 불가능한 이유는 색상의 한계 때문입니다. 이것이 색조 팔레트에서 일부 톤에 대해 채도 값이 증가하거나 감소할 수 있는 이유입니다.
머티리얼의 색상 알고리즘은 대비되는 톤을 찾고 페어링하여 접근 가능한 색상 조합을 만들기 위해 이러한 팔레트를 사용합니다.
톤은 색상의 밝기 또는 어두움을 설명할 수 있으므로 접근 가능한 색상 관계를 정의하는 데 사용됩니다. 이러한 관계는 머티리얼의 색상 알고리즘에 내장되어 있습니다.
예를 들어, 알고리즘은 버튼의 컨테이너 색상에는 어두운 톤을, 레이블 색상에는 밝은 톤을 할당하여 색상의 대비가 3:1이 되도록 합니다.
더 많은 대비를 위해 알고리즘은 톤을 더 멀리 떨어지게 할당하여 7:1의 대비를 달성합니다.
이것이 바로 사용자가 제어할 수 있는 대비 기능의 기반이 되는 개념입니다.
색조, 크로마, 톤(HCT)으로 색상 정의하기
이 시스템은 색조, 채도, 톤의 세 가지 차원을 사용하여 모든 색상을 정의하는 HCT라는 색 공간을 사용합니다.
HCT 값을 변경하면 유연하면서도 예측 가능한 방식으로 색상을 조작할 수 있습니다. 다른 색 공간(예: HSL 또는 RGB)과 달리 HCT를 사용하면 톤에 영향을 주지 않고 색의 색조와 크로마를 조작할 수 있습니다. 자세히 알아보려면 시청하세요:
색조, 채도, 톤은 접근 가능한 색 구성표를 만드는 데 사용되는 세 가지 색상 차원입니다.
Hue(색조)
색조는 빨강, 주황, 노랑, 초록, 파랑, 보라 등으로 색을 인식하는 것입니다. 색조는 0-360 범위의 숫자로 정량화(quantified)되며 원형 스펙트럼입니다(값 0과 360은 동일한 색조입니다).
Chroma(채도)
채도는 색상이 얼마나 다채롭거나 중성(회색, 검은색 또는 흰색)으로 나타나는지를 나타냅니다. 크로마는 0(완전히 회색, 검은색 또는 흰색)에서 무한대(가장 선명한 색)까지의 수치로 정량화되지만, HCT의 크로마 값은 약 120에서 최고치를 나타냅니다.
생물학적 및 화면 렌더링의 한계로 인해 색조와 톤에 따라 최대 채도 값이 달라집니다.
- 색 순도가 높을수록 채도가 높아집니다.
- 색조의 밝기와 어두움도 채도 값에 영향을 줍니다.
Note how lightening and darkening a hue also affects its chroma value
Tone(명도)
톤은 색상이 얼마나 밝거나 어둡게 보이는지를 나타냅니다. 톤은 휘도(luminance)라고도 합니다. 톤은 0(순수한 검은색, 휘도 없음)에서 100(순수한 흰색, 완전한 휘도)까지의 숫자로 정량화됩니다.
톤은 대비(contrast)를 결정하기 때문에 시각적 접근성에 매우 중요합니다. 톤의 차이가 큰 색상일 수록 대비가 높고, 차이가 작은 색상일수록 대비가 낮습니다.
[…] https://travel-in-busan.com/topics/art/material-design-3-%EC%BB%AC%EB%9F%AC-%EC%8B%9C%EC%8A%A4%ED%85… […]