색상을 사용해 스타일을 표현하고 의미를 전달하세요. 앱의 색상 설정은 맞춤설정, 시맨틱 목적 정의, 브랜드 아이덴티티 정의에 중요할 수 있습니다.
테이크어웨이
- 접근성을 보장하려면 다음 안내를 따르세요.
- 색상 대비를 확인하고 색상을 유사한 색조와 페어링하지 마세요.
- 빨간색과 녹색은 일반적인 패턴이지만 특정 유형의 색맹이 있는 사용자가 액세스할 수 없다는 점을 고려하세요.
- 색상을 유의미하게 사용하는 연습: 앱은 생동감 있고 표현력이 뛰어날 수 있지만 색상 팔레트를 준수합니다. 너무 많은 의미적 색상으로 스키마를 확장하면 혼란스러울 수 있지만 장식용 색상이 너무 많으면 혼란스러울 수 있습니다.
- 색상에는 패턴이 있을 수 있으므로 설정된 색상 패턴을 반복합니다. 앱에서 의미론적인 색상을 사용한다면 일관된 색상을 사용합니다.
- 앱이 다양한 컨텍스트에서 잘 작동할 수 있도록 밝은 색 구성표와 어두운 색 구성표 (이상적으로는 테마 대비)를 빌드합니다.
- 하드코딩된 값을 사용하는 대신 토큰과 함께 색상을 할당하여 요소의 색상 역할을 나타냅니다.
- 색상은 다양한 동적 및 정적 소스에서 가져올 수 있지만 동일한 뷰 내에서 너무 많이 혼합하지 마세요.
- 동적 콘텐츠 색상을 사용할 때는 여러 콘텐츠 조각에서 색상을 가져오지 마세요.
Android의 색상 공간
Android에서 UI에 색상을 적용하는 방식을 올바르게 이해하려면 먼저 기기에 색상이 표시되는 방식을 인식하는 것이 중요합니다.
기기에 색상이 표시되는 방식
앱은 디지털 색상을 사용하고 눈이 색상을 인식하는 데 도움이 되는 특정 모델과 규칙을 준수하는 백라이트 화면에 표시됩니다. 디지털 색상은 추가 색상으로, 전체 스펙트럼을 만들기 위해 여러 광원을 '추가'하거나 혼합하여 만들어집니다. 사람이 한 화면에서 다른 화면으로 색상을 인식하는 방식은 기기의 색상 보정, 화면 유형, 설정 및 색 공간에 따라 크게 다를 수 있습니다.
앱을 디자인할 때 개별 사용자의 고유한 색상 인식은 물론 이러한 요인으로 인해 사용된 색상이 동일하지 않을 수 있음을 고려하세요.
색상 공간 정보
색상 공간은 색상 모델을 사용하는 색상의 구성입니다. RGB는 빨간색, 녹색, 파란색을 통해 색상 스펙트럼을 만드는 가산 색상 모델인 반면, 인쇄에 사용되는 CMYK는 감산입니다. 이러한 이유로 대화형 디자이너는 일반적으로 RGB 또는 유사한 모델을 사용하여 색상을 선택합니다.
Material 3 (M3)은 색조, 크로마, 색조를 사용하여 HSL과 같은 다른 모델에 비해 인식적으로 정확한 색상을 정의하는 새로운 색상 공간인 HCT를 도입했습니다.
색상 과학 및 HCT 개발에 관한 자세한 내용은 색상 및 디자인의 과학을 참고하세요.
색조, 크로마, 색조
HCT를 사용하면 시스템 매개변수 내에서 색상을 보다 맞춤화하고 유연하게 사용할 수 있습니다. HCT는 색조, 크로마, 색조를 사용하여 색상을 모델링합니다.
- 색조: 색조는 개별 사용자가 색상을 설명하는 데 사용할 수 있는 형용사(예: '빨간색' 또는 '전기 보라색')와 유사합니다. 색조의 HCT 값 범위는 0~360입니다.
- 크로마: 크로마는 중성색에서 완전한 생동감에 이르기까지 색상의 다채로움을 나타냅니다. HCT 색 공간에서 크로마의 최댓값은 약 120입니다.
- 색조: 색조는 색상의 휘도 또는 밝기입니다. HCT는 톤을 사용하여 대비를 만듭니다. 특정 접근성 컨텍스트에서는 동일한 색조 값으로 설정된 색상에 액세스할 수 없습니다. 낮은 값 톤은 더 어둡고 값이 높은 톤은 더 밝습니다.
색상 시스템 프로세스
M3 색상은 HCT 모델을 기반으로 빌드되어 조화로운 접근성 색상 구성을 도출하고 동적 색상 기능을 지원합니다. M3 색상 시스템은 소스 색상에서 시작됩니다. 이 소스 색상은 기본, 보조, 3차, 중립, 중립 변형의 5가지 주요 색상으로 변환됩니다. 이 다섯 가지 주요 색상은 각 키 색상의 색조 증분으로 구성된 색조 팔레트를 만듭니다.
키 색상을 수동으로 할당하는 경우 입력의 크로마와 색조에 유의하세요. 색상의 색조가 색상 역할의 색조 값이 아닐 수 있기 때문입니다.
M3 색 시스템은 Material Color Utilities(MCU)를 기반으로 합니다. MCU는 앱에서 색 테마와 구성표를 더 쉽게 개발할 수 있는 알고리즘과 유틸리티가 포함된 색 라이브러리 세트입니다.
다음 동영상은 색 구성표가 파생되는 방식을 설명합니다.
색상 제한
색상 제한은 실제 물리학적 물질, Google의 생물학적 시각적 제한, 화면 색상 렌더링의 제한 등 색상의 물리적인 제한입니다. 예를 들어 일부 색조는 특정 크로마나 색조로 존재할 수 없습니다. 색상 제한은 연한 파란색이나 밝은 빨간색과 같은 색상을 사용할 수 없는 이유입니다. 색조 색상 매핑은 모든 색조 값에서 일관되어야 합니다.
위의 그림은 H105, H25, H285 색조 값에 관한 세 가지 톤 매핑 차트를 보여줍니다.
차트 1~색조 105 (노란색). 색상 사용 가능 여부를 나타냅니다. 크로마와 색조는 그래프처럼 작동합니다. 노란색은 그래프를 따라 특정 색조의 크로마가 제한적이고 노란색은 낮은 색조에서 넓은 생동감을 갖지 않습니다.
차트 2~색조 25 (빨간색). 색조 105 (노란색)보다 더 많은 크로매틱 옵션을 표시합니다. 이 톤 지도에서는 색상이 가장 높은 지점이 낮은 톤 수준입니다.
차트 3~285 (파란색). 가장 높은 색감이 훨씬 더 어두운 톤에서 확인됨을 보여줍니다. 반면에, 밝은 색조에서는 크로마 용량이 손실됩니다.
색 구성표
색 구성표는 특정 색조에서 파생된 강조 및 표면의 집합으로 색상 역할에 할당된 후 UI 요소와 구성요소에 매핑됩니다. 색상 역할은 색상의 색조가 아닌 색상의 사용을 나타냅니다. 예를 들어 on-blue가 아닌 on-primary가 있습니다.
색 구성표는 조화롭게 설계되고 접근성이 높은 텍스트를 보장하며 UI 요소와 표면을 서로 구별하도록 설계되었습니다. 색상 역할 쌍(컨테이너 및 컨테이너 내 역할로 구성됨)은 액세스 가능한 대비를 제공하는 색조 값을 갖습니다.
밝은 스키마와 어두운 색 구성표는 생성되며 고유한 특정 색조 할당이 있습니다.
Material 색상 시스템과 맞춤 스키마는 맞춤설정의 시작점으로 색상 기본값을 제공합니다.
M3 색상 시스템에 관해 자세히 알아보세요.
맞춤설정 가능한 색 구성표는 Android UI Kit를 참고하세요.
UI에 색상 적용
UI 색상은 강조 색상, 시맨틱 색상, 표면 색상으로 구성됩니다.
- 강조 색상은 일반적으로 Android 브랜드 색상 팔레트의 일부인 핵심 색상을 나타냅니다.
- 시맨틱 색상 (또는 Material 3 내 맞춤 색상)은 특정 의미가 있는 색상입니다.
- 표면 색상은 배경 색상에 사용되는 중성 파생 색상을 나타냅니다.
강조 색상
강조 색상은 일반적으로 브랜딩, 강조 작업, 개인적인 표현 또는 사용자 표현과 같이 UI 내에서 가장 많은 표현력을 나타냅니다.
각 강조 색상 (기본, 보조, 3차)은 페어링, 강조 정의, 시각적 표현을 위해 다양한 색조의 4~8가지 호환 색상 그룹으로 제공됩니다.
동적 색상
강조 색상은 동적 소스에서 정의할 수 있습니다.
Android 12(API 수준 31)부터 동적 색상을 사용하면 시스템이 사용자의 배경화면이나 인앱 콘텐츠(예: 키아트 애셋)에서 소스 색상을 추출할 수 있습니다. 동적 색상은 MCU 알고리즘 및 프로세스를 사용하여 구성표를 만들고 최소한의 노력으로 구현합니다. 앱에 동적 색상을 적용하려면 사용자가 앱에서 색상 환경을 맞춤설정할 수 있도록 지원을 참고하세요.
동적 색상 시각화 Codelab을 사용해 동적 색상을 직접 사용해 보세요.
정적
정적 스키마는 변경되지 않거나 상대적인 값이 있는 스키마입니다. 정적 스킴을 만드는 일반적인 방법은 브랜드 색상을 사용하여 기본 색상과 보조 색상, 3차 색상을 브랜드의 기본 색상 팔레트에 맞추는 것입니다.
동적 색상을 사용 중이더라도 사용자의 기기에서 동적 색상을 사용할 수 없다면 대체로 정적 스키마를 만드는 것이 좋습니다. 그렇지 않으면 시스템에서 기준 보라색 색 구성표를 사용합니다.
Material 테마 빌더를 사용하면 MCU 색상 알고리즘을 적용하여 정적 맞춤 테마를 생성할 수 있습니다. 이렇게 하면 개발자가 선택했지만 M3 색상 시스템 토큰과 조화로운 접근성 원칙에 부합하는 색상이 생성됩니다.
완전히 맞춤설정된 정적 스키마를 만드는 것은 가능합니다. 이렇게 하려면 색상 스타일 (color.kt 또는 color.xml) 내에 다른 값을 할당하거나 Figma 스타일 속성을 업데이트한 후 Figma용 Material 테마 빌더에서 테마 파일을 내보내세요.
사용법
Material 구성요소에는 색상 역할이 미리 할당되어 있지만 UI와 맞춤 요소 전체에서 색상 토큰을 활용할 수 있습니다. 모든 강조 색상은 신중하게 사용해야 합니다. 특히 사람의 눈은 선명한 색에 이끌립니다.
유형과 마찬가지로 시스템은 기본 색상과 각각의 역할을 중요한 클릭 유도 문구 (CTA)에 할당하여 계층 구조에 색상을 적용합니다. 플로팅 작업 버튼 (FAB)과 같은 구성요소를 기본 역할을 하는 것이 좋습니다.
기본 색상을 선택할 때는 브랜드의 기본 색상을 지정하는 것이 좋습니다. 또는 상호작용 구성요소를 나타내는 색상을 선택하여 브랜드 색상을 덜 사용할 수 있습니다. 보조 및 3차 색상은 강조표시 중요도의 계층 구조로 내려갑니다.
과포화로 인해 기본, 보조, 3차의 기본 색상 역할만 사용할 수 있습니다. 색상 계층 구조에 도움이 되도록 색 구성표를 적용하여 덜 선명한 컨테이너 색상과 윤곽선 역할을 포함합니다.
더 나은 사용자 환경을 보장하려면 더 선명한 기본 색상을 사용하여 앱의 시각적 계층 구조에서 더 눈에 띄는 작업을 나타냅니다. 다음 그림에서 첫 번째 이미지의 FAB는 탐색과 톤과 크로마가 동일한 차분한 색상으로 표시되어 조화를 이룹니다. 두 번째 이미지는 선명한 기본 색상으로 더 많은 관심을 유도하는 FAB를 보여줍니다.
동적 색상을 직접 살펴보려면 Material 색상 맞춤설정 Codelab을 사용해 보세요.
시맨틱 색상
시맨틱 색상은 특정 의미가 할당된 색상입니다. 예를 들어 Error는 의미 있는 색상입니다.
색상의 의미에 부합합니다. 패턴을 설정하는 경우 앱 전체에서 패턴을 반복합니다. 예를 들어 멤버십 기능을 나타내기 위해 보라색을 설정했다면 이 멤버십 기능의 모든 인스턴스에 보라색을 사용합니다.
다음 예에서 앱은 한 텍스트 필드에는 오류를 표시하기 위해 빨간색을 사용하고 다른 텍스트 필드에는 보라색을 사용하므로 양식을 훑어볼 때 혼란을 야기할 수 있습니다.
Material 색 구성표는 의미 있는 오류 색상을 제공하지만, 색 구성표를 확장하기 위해 맞춤 색상을 통해 추가적인 의미 체계 색상이 생성됩니다. 맞춤 색상에 관해 자세히 알아보세요.
조화는 앱 내에서 동적 사용자 생성 색상을 맞춤 색상과 정렬하여 더 조화로운 색상 팔레트를 만드는 방법을 제공합니다.
표면 색상
노출 영역 색상은 구성요소 컨테이너, 시트, 창과 같은 배경 요소용으로 설계되며 앱 색상의 대부분을 나타냅니다. 많은 표면 공간을 사용하는 것을 주저하지 마세요. 사람의 눈은 긴장을 풀 수 있는 공간이 필요합니다. 또한 노출 영역은 콘텐츠를 포함하고 독자를 유도하는 데 도움이 됩니다.
M3은 색조 표면의 개념을 도입했습니다. 즉, 모든 색상이 색조 팔레트에서 파생됩니다. 색조는 깊이와 대비를 모두 만들어 접근성을 높입니다. 노출 영역 역할에 대한 자세한 내용은 노출 영역 역할 M3 가이드를 참조하세요.
접근성 및 색상
사람들은 시력에 따라 다양한 방식으로 색상을 봅니다. 일부 리더는 색맹이므로 UI 요소가 서로 섞이지 않도록 색상 조합을 확인해야 합니다. 불투명도와 두께는 색상의 문자 그대로의 색조는 아니지만 사용자가 색상을 인식하는 방식에 강력한 시각적 효과를 줄 수 있습니다.
색상 대비는 포그라운드와 백그라운드 요소의 휘도 간 차이로, 비율 형식으로 표시됩니다. 이 비율 기준에는 등급이 부여됩니다. 예를 들어 버튼의 텍스트와 컨테이너의 대비를 측정하면 텍스트의 가독성을 확인하는 데 도움이 됩니다. 색상 대비 가이드라인은 텍스트와 비텍스트로 나뉘며 각각 고유한 등급이 있습니다. 자세한 내용은 접근성 높은 색상으로 디자인을 참고하세요.
색상을 사용 가능한 작업의 유일한 어포던스나 표시기로 만들지 마세요. 구성요소 버튼, 글꼴 두께 변경 또는 아이콘을 활용하여 사용자에게 요소와 상호작용할 수 있음을 알립니다.
색상 구현
토큰은 디자인 데이터의 작은 가변 시맨틱 표현입니다. 이 값은 반복 가능하며, 색상의 16진수 코드와 같은 정적 값을 설명적인 이름으로 대체합니다. 요소의 색상 역할을 할당하려면 하드 코딩된 색상 값 대신 토큰을 사용합니다.
색상 역할 매핑의 예는 Now in Android Figma 샘플을 확인하세요.
색상 값은 Compose를 사용하여 color.kt 색상 파일 내에서 설정되거나 뷰를 사용하여 color.xml를 통해 설정됩니다. 스타일로 설정된 이러한 색상은 테마의 일부입니다. 자세한 내용은 Android 모바일 테마를 위한 디자인을 참고하세요.
Android에서 색상 값을 설정하려면 RGB를 6자리 형식으로 나타내는 16진수 코드를 사용합니다. 불투명도를 캡처하려면 값을 앞에 추가하여 8자리 코드를 만듭니다.
Material 테마 빌더 사용:
Material 테마 빌더 (MTB)를 사용하여 맞춤설정된 밝은 색 및 어두운 색 구성표를 만들 수 있습니다.
MTB를 사용하면 동적 색상을 시각화하고 Material Design 토큰을 생성하며 색 구성표를 맞춤설정할 수 있습니다.
Figma 검사기 패널 내에서 스타일 속성을 업데이트하여 색 구성표를 완전히 맞춤설정할 수 있습니다. 이렇게 수정된 값이 내보내집니다.
