[피그마] 구글 머터리얼 스타일 - Color

[피그마 커뮤니티] 구글 머터리얼 3 커버

머터리얼 3 에서의 색깔

색상은 서비스의 고유한 스타일을 표현하고 의미를 전달하는데 아주 큰 역할을 합니다. 머터리얼3에서는 Dynamic Color를 활용하여 개인화 된 컬러스타일 적용을 우선으로 둡니다.

 

머터리얼에서 공유한 테마 빌더를 활용하여 Dynamic에서 이미지를 추가해 화면, 요소별 샘플을 확인할수있고 Custom페이지에서 Core colors를 지정해 Color Scheme와 Tonal Palettes을 확인할수있다.

 

색 구성표

색구성표는 13가지 톤의 Toanl Patettes와 개별적인 5가지의 Core Colors로 이루어집니다.

Core Colors의 설정이 완료 된다면 머터리얼의 테마빌더를 통해 상태, 에러 등 전체 색상을 지정해줍니다.

 

피그마 플러그인

https://www.figma.com/community/plugin/1034969338659738588

머터리얼 테마 빌더 (웹)

https://m3.material.io/theme-builder#/dynamic

Material Design

Core colors

색상별 의미를 큰 카테고리 5가지로 나누어둔 컬러이다.

각 색상에서 Color, On Color, Color Container, On Color Container 4가지로 구분할수있다. 이는 밝기 테마나 박스 컬러를 정의하는 색상이다.

 

Accent Colors

Primary Colors, Secondary Colors, Tertiary Colors 3가지로 나뉜다.

Primary Colors는 사용자가 지정한 색상읻. 브랜드의 관점에서는 브랜드 주 컬러이다. FAB, 활성상태, 가장 가까운 레이어의 색상등 서비스에서 가장 많이 사용하는 색상될것이다.  Secondary Colors는 필터 칩같이 Primary Color를 사용한 요소보다 낮은 순위의 요소에 사용된다. Tertialry Color는 선택사항이다. 색상의 균형 혹은 환기를 위해 사용한다.

 

Neutral Colors

Neutral의 네이밍 답게 Background나 텍스트(일반/강조) 아이콘 정의 색상이다. 여기서 Outline색상도 같이 정의해준다.

Background위로 쌓이는 고도 구분을 통해 콘텐츠간의 차별화를 줄수있다.

고도 +1 : 불투명도 5%

고도 +2 : 불투명도 8% (HAEDER, GNB)

고도 +3 : 불투명도 11% (FLOTING BTN, CHIP, POPUP)

고도 +4, 5 :  각각 불투명도 12%, 14% ( CHIP HOVER)

 

 

Error Colors

많이들 알다싶이 오류 상황에 많이 사용된다.

 

Product-specific Custom Colors

위에서 정의한 색상 이외의 컬러이다. 

 

Tonal Patettes

머터리얼 / 팔레트 / 접근성

Core Colors를 100%(흰색) ~ 0%(검정색)르로 나누어 총 13가지의 톤으로 구성한다. 이는 톤과 관련된 숫자로 표현된다.

밝을 테마에서 어두운 테마로 전환될때에는 명암비가 고정된 상태로 전환 되어야한다.

 

텍스트

왼쪽 : 큰 텍스트      오른쪽 : 표준 텍스트

큰텍스트 (18pt, ~14pt  두께: 굵음) 의 경우 표준 3:1, 접근성 향상의 경우 4.5:1 의 명암비를 지켜야한다.

표준 텍스트 경우 (17pt ~ , 14pt~ 두께 : 굵음)의 경우 표준 4.5:1, 접근성향상 7:1 의 명암비이다.

 

 

머터리얼에서는 Dynamic Color를 추구하고있다. 사용자 지정 컬러에 맞춰 머터리얼의 색상 알고리즘에 따라 기존 16진수의 컬러가 아닌 자동으로 사용자 지정 컬러에 맞춘 색상들로 변경되는 시스템 이다. 하지만 색상도 브랜딩의 하나의 시선으로써 사용자에게 앱의 색상을 변경할수있게 해주는것은 작은 스타트업에서는 아직 시기상조이지 않을까 싶다.

하지만 머터리얼의 Tonal System을 활용하고 명암비를 활용한다면 앱에서 색을 사용하기 어려운 디자이너들에게 아주 좋을 참고가 되어줄것이다.