[Material] Color System (색상 알아보기)

Material 디자인 색상 시스템은 개발하는 앱에 다양한 색상 테마를 적용할 수 있다. 개발자가 가장 어려워 하는 부분이 색상 팔레트 선택과 배치 문제일 것이다. 이런 문제는 조금 쉽게 해결할 수 있도록 Material에서는 제공하고 있다.

Material에서 제공하는 기능과 도구를 간단하게 정리해보고자 한다.

색상 디자인

앱 개발 사전에 디자인 색상 배치를 할 때 색상과 어디에 사용되는 색상 배치인지 정리를 할 필요가 있다. 그럴 때 사용하는 요소 이름은 다음과 같다.

참고 : https://developer.android.com/codelabs/basic-android-kotlin-compose-material-theming

• primary : 색상은 앱의 화면과 구성요소에서 가장 자주 표시되는 색상.
• secondary : 색상은 앱을 강조하고 구분하는 데 사용.
• surface : 색상은 카드, 시트, 메뉴와 같은 구성요소의 표면에 적용.
• background : 색상은 스크롤 가능한 콘텐츠 뒤에 나타납니다.
• on : 색상 요소는 팔레트의 색상 위에 나타나며, 주로 텍스트, 아이콘, 획에 적용된다. 우리의 색상 팔레트에는 surface 색상 위에 나타나는 onSurface 색상과 primary 색상 위에 나타나는 onPrimary 색상이 있다.

 

Compose에서는 어떻게 적용하는가?

위의 색상은 Compose 어플리케이션 개발 시 Color.k와 Theme.kt 파일에서 확인할 수 있다. 예를 들면 아래와 같이 정의 되어 있다.

Color.kt

//Light Theme
val Grey50 = Color(0xFFF8F9FA)
val Grey900 = Color(0xFF202124)
val Grey700 = Color(0xFF5F6368)
val Green50 = Color(0xFFE6F4EA)
val Green100 = Color(0xFFCEEAD6)

//Dark Theme
val White = Color(0xFFFFFFFF)
val Grey100 = Color(0xFFF1F3F4)
val Cyan900 = Color(0xFF007B83)
val Cyan700 = Color(0xFF129EAF)

Theme.kt

private val DarkColorPalette = darkColors(
    primary = Purple200,
    primaryVariant = Purple700,
    secondary = Teal200
)

private val LightColorPalette = lightColors(
    primary = Purple500,
    primaryVariant = Purple700,
    secondary = Teal200

    /* Other default colors to override
    background = Color.White,
    surface = Color.White,
    onPrimary = Color.White,
    onSecondary = Color.Black,
    onBackground = Color.Black,
    onSurface = Color.Black,
    */
)

Preview 로 Light, Dark 모드 확인하기

Compose에서 Light모드와 Dark모드는 아래와 같이 Theme을 적용하고, 인자로 darkTheme = true or false 를 사용하여 적용할 수 있다.

@Preview
@Composable
fun TestLightPreview() {
    TestTheme(darkTheme = false) {
        TestApp()
    }
}

@Preview
@Composable
fun TestDarkPreview() {
    TestTheme(darkTheme = true) {
        TestApp()
    }
}

 

색상 선택 도구

Material 은 색상 팔레트, 배치에 도움이 될 수 있도록 다양한 도구를 지원한다.

아래 페이지에 접속하면 Material에서 제공하는 색상 선택 도구를 사용하여 쉽고 빠르게 색상을 확인하고 선택할 수 있다.

Material Design

 

추가로 아래 페이지에서 더욱 상세한 디자인을 미리 확인할 수 있다. 아래 색상 도구를 사용하면 앱의 뷰(Activity, Fragment 등)와 버튼 등의 컴포넌트 요소의 색상 배치를 미리 확인해 볼 수 있다. 

Color Tool - Material Design

 

해당 도구를 사용한 예시 이미지이다. 좌측에 앱의 화면이 있고 우측에서 색상을 선택하여, Primary부터 선택을 하여 배치를 해볼 수 있다.

 

참고

• https://developer.android.com/codelabs/basic-android-kotlin-compose-material-theming
• https://m2.material.io/design/color/the-color-system.html