Material Design 적용) Color에 대해 이해하기(1)

현재 앱의 모든 색상을 하드 코딩해서 Compose에 포함되어 있는 Color들을 모두 정리해야 하는 일이 생겼다...

 

Material Design 규칙을 알아보고 Material Design에서 제공해 주는 Theme을 골라 설정해 보자

 

 

 

1. 규칙

 

Material Design에서는 색상을 규칙에 따라 몇 가지 분류로 나누고 있다.

 

엄청 많은 색상이 존재하는 듯 하나 일정 규칙이 숨어있는 것을 볼 수 있다.

위의 색상을 자세히 보면 

 

Primary 색상에 On, Container, On-Container, Fixed, Variant이 접두, 접미도 붙어있는 게 보인다.

이러한 규칙성에 따른 규칙은 아래와 같다.

 

1. 중요도에 따른 구분 : Primary, Secondary, Tertiary

2. 백그라운드에 사용되는 색상 : Surface

3. Container : 버튼, Text와 같은 사용자와 Interact 하는 포그라운드 요소들에게 적용

4. On{any} : Text나 Icons와 같이 {any}안의 요소들에 입히는 색상

5. {any}Variant : {any}에 비대 덜 강조되는 색상

 

위의 규칙에 따라 View를 만들면 된다.

나와 같이 미적감각이 하나도 없는 상황에서는 어느 부분에 어떤 걸 써야 하는지 모를 수 있는데

Primary, Secondary, Tertiary를 구분하여 자신의 앱에 따라 일관성 있게 만들어 주는 게 중요하다.

 

Primary(주색상) : 사용자 눈에 띄어야 하거나 가장 자주 사용되는 주요 액션 버튼(저장. 제출 등)

Secondary(보조 색상) : 주 색상과 대체적인 액션이나 다른 중요한 요소(취소, 뒤로 가기)

Tertiary(3차 색상) : 가장 덜 강조된 색상(자세히 보기, 더 보기 등)

 

적용하는 규칙은 MaterialDesign의 Component Spec을 찾아보면서 적용하면 괜찮을 것 같다.

 

 

 

 

정리하자면,

 

1. 해당 뷰의 중요도에 따라 Primary, Secondary, Teritairy를 설정(자신의 앱에 맞는 일관적인 규칙 설정)

2. 그 후 뷰의 세부 색상은 Spec에 따라 Container, On, Variant 등 Material규칙에 따라 적용

 

 

 

 

 

2. 자동 Theme 제작

 

그럼 어느 세월에 색상을 지정하고 글자모양을 설정하고 하냐?

그걸 위한 툴이 제공되고 있다.

 

Material Theme Builder를 사용하면 초보자인 나도 Theme을 설정 적용이 가능하다.

 

https://material-foundation.github.io/material-theme-builder/

Material Theme Builder

 

 

 

---

참고

 

https://m3.material.io/styles/color/roles

Color – Material Design 3