Material 색상 맞춤설정

1. 소개

최종 업데이트: 2022년 4월 18일

앱은 기준 계획, 사용자가 생성한 동적 색상 또는 브랜드 색상에서 다양한 색상을 사용할 수 있습니다.

이전 Material You 색상 실험실에서는 디자인 모형 내에서 동적 색상을 시각화하는 방법을 살펴봤지만 Material Theming을 사용하여 브랜드 색상으로 앱을 맞춤설정할 수도 있습니다. 브랜드 색상과 함께 새로운 색체계를 활용하면 접근성이 좋은 색 구성표를 만들어 더욱 동적인 기능을 구현할 수 있습니다.

학습할 내용

Material Theme 빌더로 맞춤 테마를 만드는 방법
디자인 목업에 맞춤 테마를 적용합니다.
동적 색상과 맞춤 색상을 결합할 수 있습니다.

기본 요건

이 랩에서는 기본적인 디자인 개념을 사용합니다.

기본적인 디자인 개념에 관한 지식: 색상 팔레트
현재 Android 색 구성표와 역할에 관한 지식
Figma에 관한 지식
선택사항: 앱 Codelab에서 동적 색상 시각화

필요한 항목

2. 시작하기

설정

시작하려면 Designlab Figma 파일에 액세스해야 합니다. 실습에 필요한 모든 항목은 Figma 파일에 있습니다. 파일을 다운로드하여 가져오거나 Figma 커뮤니티에서 복제할 수 있습니다.

먼저 Figma에 로그인하거나 계정을 만듭니다.

Figma 커뮤니티에서 복제

Material 맞춤설정 파일로 이동하거나 Figma 커뮤니티에서 Material Design을 사용하여 앱에서 동적 색상 시각화하기를 검색합니다. 오른쪽 상단의 Duplicate(복제)를 클릭하여 해당 파일을 사용자의 파일에 복사합니다.

파일 레이아웃

파일을 살펴보면 파일이 소개로 시작하는 것을 알 수 있습니다. 각 섹션은 연결된 여러 개의 아트보드로 나뉘며, 섹션에 대한 몇 가지 핵심 개념과 연습이 이어집니다. 섹션과 연습은 서로 연결되며 순차적으로 완료되어야 합니다.

이 Codelab에서는 이러한 개념과 실습을 더 자세히 안내합니다. Codelab과 함께 새로운 Material You 기능에 관해 자세히 알아보세요.

소개 아트보드를 시작으로 아트보드를 순서대로 연결하는 버튼이 있습니다. 링크에 액세스하려면 버튼을 클릭하세요.

Figma 플러그인 설치

이 Codelab은 새로운 Figma 플러그인을 사용하여 동적 색 구성표와 토큰을 생성합니다. Figma 커뮤니티 페이지에서 직접 Figma 플러그인을 설치하거나 Figma 커뮤니티에서 'Material Theme Builder'를 검색합니다.

3. Material 색 구성표

먼저 Material 내에서 색상이 어떻게 사용되고 새로운 색상 시스템이 어떻게 작동하는지 간략하게 살펴보겠습니다.

색상은 스타일을 표현하고 사용자, 브랜딩 또는 시맨틱 의미 등 의미를 전달하는 데 사용됩니다. 색상 시스템은 사용자 입력이 변경됨에 따라 동적으로 바뀌는 색 구성표의 가변성을 처리합니다. 색조 관계와 색조 및 크로마의 변화에 관한 논리는 유연한 색상 적용의 기반을 제공합니다.

색상 공간은 소스 색상에서 추출된 접근성 높은 밝은 색 구성표와 어두운 색 구성표를 생성하는 방법을 제공합니다. 5개의 주요 색상과 색조 팔레트를 생성한 후 특정 색조 단계를 선택합니다.

이 색상 이동 기법은 접근성이 좋은 색 구성표를 제공할 뿐만 아니라 접근성이 좋고 사용자 생성 색 구성표와 일관된 브랜드 색 구성표를 만드는 방법을 제공합니다.

색 구성표는 5개의 주요 색상에서 색조 팔레트로 생성되어 접근성 좋은 구성표를 만듭니다.

브랜드 테마

M3는 브랜드에 맞는 스타일을 정의하고 유지하는 데 도움이 되는 맞춤 매개변수의 체계적인 적용을 지원합니다.

맞춤 스킴은 사용자의 기기 배경화면이 아닌 앱 제작자로부터 파생된 색 구성표입니다. M3 색체계와 맞춤 스킴은 앱에서 동적 색상을 사용 설정하는 기반입니다.

맞춤 스킴은 필요한 토큰 (색상 슬롯)을 설정하여 M2와 M3 간의 격차를 해소하고 더 브랜드화된 환경을 만듭니다.

Material 테마 빌더에 브랜드 색상 추가

4. 색 구성표: 강조 색상

색 구성표의 기반은 각각 13가지 색조가 있는 별도의 색조 팔레트와 관련이 있는 5가지 주요 색상의 세트입니다. 각 색조 팔레트의 특정 색조는 UI 전반의 색상 역할에 할당됩니다. Material Theme 빌더 플러그인을 열고 첫 번째 강조 색상인 Primary를 설정해 보겠습니다.

기본 색상만 입력하면 전체 색 구성표를 생성하는 소스로 사용됩니다.

플러그인 모달에서 '맞춤'을 클릭합니다. 그러면 테마가 맞춤 테마로 전환됩니다. 이 실습에서는 이미 생성된 material-theme를 사용하지만 원하는 경우 새 테마를 만들 수도 있습니다. 자세한 내용은 동적 색 시각화를 참고하세요.
다음으로 기본 주요 색을 설정합니다. 기본 색상은 기본 브랜드 색상 또는 가장 많이 사용되는 기본 강조 색상일 수 있습니다. 나머지 주요 색상은 기본 색상을 기반으로 채워집니다. 즉, 필요하지 않은 색은 추가하지 않아도 됩니다.

5. 나머지 테마 빌드

기본 색상은 테마를 생성하는 데 사용되지만 기본 브랜드 색상을 지원하는 강조 색상이 있을 수 있습니다.

플러그인 모달에서 보조 색상 웰을 클릭하여 보조 색상을 추가합니다. 보조 역할은 색상 표현의 기회를 확대하면서 UI에서 눈에 덜 띄는 구성요소에 사용됩니다. 색 스킴과 앱 UI에서 보조 색상이 업데이트됩니다.
3차 색상도 마찬가지입니다. 3차 역할은 기본 색상과 보조 색상의 균형을 맞추거나 특정 요소로 관심을 유도하는 데 사용할 수 있는 대비 강조를 위해 사용됩니다. 3차 색상 역할은 제작자가 자유롭게 사용할 수 있으며 제품에서 더 광범위한 색상 표현을 지원하기 위한 것입니다.
이제 중립, 중립 역할은 표면과 배경, 높은 강조 텍스트와 아이콘에 사용됩니다.

보조, 3차, 중립 색상을 제공하여 색 구성표를 완전히 맞춤설정합니다.

이제 브랜드 색상이 M3 색상 공간에 맞게 이동된 핵심 색 구성표에 포함되며, 완전히 액세스할 수 있고 테마로 코드 내에서 내보내고 구현할 수 있습니다.

6. 테마 적용

역할 및 토큰

각 강조 색상 (기본, 보조, 3차)은 페어링, 강조 정의, 시각적 표현을 위한 다양한 색조의 4가지 호환되는 색상 그룹으로 제공됩니다. 그룹은 강조 색상, on 색상, 컨테이너, on 컨테이너로 구성됩니다.

중립 역할은 표면과 배경, 높은 강조 텍스트와 아이콘에 사용됩니다.

디자인 토큰은 디자인 시스템의 시각적 스타일을 구성하는 작고 반복되는 디자인 결정을 나타냅니다. 토큰은 색상의 16진수 코드와 같은 정적 값을 자명한 이름으로 대체합니다. 디자인 토큰은 명확한 관계가 없는 스타일 선택사항을 의미 있게 연결합니다.

Figma 플러그인은 토큰을 만들고 Figma 스타일 형식으로 자체 소스 색상을 입력하여 기존 모형, 브랜드 스타일 가이드, 디자인 시스템과 연결합니다.

디자인 토큰은 색상 역할과 구현 간에 공통 언어를 만듭니다.

색상 계층 구조

목업에 색상 역할을 적용할 때는 요소의 중요도 순서(계층 구조)를 고려해야 합니다. 이 개념은 브랜드 색상을 대응되는 역할에 할당하고 UI 내에서 매핑하는 데 도움이 됩니다. 일반적으로 채도가 높거나 농도가 높은 색상이 사용자의 시선을 먼저 사로잡습니다. 기본 색상 역할이 클릭 유도 문구에 더 중점을 둔 구성요소에 매핑되는 이유가 바로 이 때문입니다. Material Theme 빌더는 M3 색상 시스템을 사용하여 적절한 색상을 생성하지만 채도가 높은 보조 색상이나 3차 색상을 제공하면 기본 색상을 압도하는 색상이 생성됩니다. 사용자가 UI와 콘텐츠 간에 상호작용해야 하는 순서를 고려하여 색상 역할을 할당하세요. 모든 구성요소에 기본 색상을 사용해서는 안 됩니다.

단색의 포화된 색상이 가장 많은 관심을 끕니다.

7. 테마로 전환

만든 맞춤 테마를 디자인에 적용하려면 기존 Material 테마의 토큰에 모형을 설정해야 합니다.

Material 구성요소는 역할이 사전 매핑되어 있으며 Material Theme Builder와 자동으로 작동합니다.

Material Theme 빌더 모달에서 테마로 전환합니다.

레이아웃 프레임을 선택하고 바꾸기를 클릭하여 이 테마를 활용하도록 오른쪽 레이아웃의 모든 토큰 (Figma 스타일)을 설정해 보겠습니다. 선택 색상에서 스타일 접두사가 업데이트된 것을 확인할 수 있습니다.
일부 항목이 업데이트되지 않았나요? 식물 관리 팁 카드와 같은 맞춤 구성요소는 먼저 Figma 스타일을 적용해야 합니다. 관리 팁 컨테이너를 선택하고 컨테이너가 선택된 상태에서 점 4개 아이콘을 클릭하여 스타일을 할당하고 3차 컨테이너를 선택합니다. 관리 팁 카드의 콘텐츠에도 동일한 작업을 실행하되 on-tertiary container를 할당합니다. 목록의 작은 라벨도 맞춤 구성요소이지만 나중에 다시 살펴보겠습니다.
Material Design 구성요소는 기본 매핑을 사용하지만 스타일 할당을 실험하여 UI에 가장 적합한 스타일을 찾을 수 있습니다. 다양한 색상 계층 구조와 브랜드 표현을 잠시 살펴보세요.

(코드의 내보내기 파일에는 테마만 포함됩니다. 엔지니어와 협력하는 경우 토큰 매핑을 전달하기 위해 모의를 공유하세요(내보내기에 포함되지 않음).

테마 없이 플러그인을 열면 시작하기 위한 설정 화면이 표시됩니다. '시작하기'를 사용하면 모형에 연결하거나 Material Design 키트와 함께 사용할 수 있는 기본 기준선 'material-theme'이 Figma 스타일 그룹으로 생성됩니다.

8. 핵심 스키마를 넘어 확장

이제 구성요소와 디자인 목에 매핑된 브랜드 색상 테마가 있지만 포함해야 하는 추가 색상이 있을 수 있습니다. 이때 맞춤 색상을 추가할 수 있는 확장된 스킴이 필요합니다.

이러한 색상은 시맨틱 색상, 브랜드별 색상, 제품별 색상일 수 있으며, 역할이 할당되고 색상 알고리즘을 통해 이동하거나 입력된 대로 유지되어야 합니다.

확장된 색 구성표에서는 동적 (사용자 생성) 색상을 브랜드 색상과 결합할 수도 있습니다. 핵심 스킴은 맞춤설정된 사용자 영향을 받도록 허용하고 브랜드 색상은 확장 스킴에 설정합니다. 즉, UI 요소를 사용자에게 더 개인화할 수 있고 앱에서 브랜드 색상이 더 정확하고 효과적인 순간을 만들 수 있습니다.

맞춤 색상을 포함하도록 핵심 스킴을 확장할 수 있습니다.

9. 확장 및 맞춤설정

맞춤 색상으로 스킴을 확장하면 시맨틱 색상이나 추가 브랜딩 색상과 같은 색상을 추가할 수 있습니다.

맞춤 색상이 추가된 맞춤 스킴

플러그인 모달의 주요 색상 아래에서 색상 추가를 클릭합니다.
현재 테마가 새로운 Custom0 행으로 업데이트됩니다. 색상 웰을 클릭하고 새 색상을 선택하여 이 색상을 업데이트합니다.
이러한 확장 색상은 읽기 전용 스타일 내에서 Custom0으로 스타일로 확인할 수 있습니다. 톤 팔레트와 색 구성표가 모두 있습니다. 라벨 배경을 선택하여 목록 라벨을 새 색상에 매핑하고 추가된 색상의 역할 (on-custom0 컨테이너) 중 하나를 할당합니다.

선택한 색상에서 맞춤 색상을 설정합니다.

Material Theme 빌더는 색상을 Custom#으로 자동 생성합니다. 추가된 맞춤 색상의 이름을 바꾸려면 스타일 패널에서 테마의 스타일 그룹을 펼칩니다 (아무것도 선택하지 않으면 표시됨). 그런 다음 소스 하위 그룹 내에서 Custom0을 찾습니다. 여기에서 소스의 이름을 바꾸면 플러그인 모달 내에서 색상의 이름이 바뀝니다.

맞춤 색상 스타일은 스타일 패널에서 확인할 수 있습니다.

추가된 색상을 삭제하려면 스타일을 마우스 오른쪽 버튼으로 클릭하고 삭제하면 됩니다. 다음에 플러그인을 열면 추가된 색상이 삭제됩니다. 이름 변경 및 삭제는 색상 다이어그램에 반영되지 않을 수 있습니다.

10. 축하합니다

Material 테마 빌더를 사용하여 맞춤 색상 테마를 빌드하고, 디자인 모형에 적용하고, 색 구성표에 추가하는 방법을 잘 배우셨습니다. 새로운 Material 3 색체계는 접근성이 좋고 유연하며 일관된 색상을 디자인에 제공합니다. 여러분이 이 색상을 어떻게 사용할지 기대됩니다.

궁금한 사항은 언제든지 Twitter의 @MaterialDesign으로 문의해 주세요.

youtube.com/MaterialDesign에서 더 많은 디자인 콘텐츠 및 튜토리얼을 기대해 주세요.