Skip to content

[4] Jetpack Compose theming

Sukmin Kang edited this page Mar 9, 2022 · 1 revision

Jetpack Compose theming

Material Theming

Jetpack Compose는 디지털 인터페이스를 만들기 위한 종합적인 디자인 시스템인 Material Design을 제공함
Material Design component는 Material Theme를 기반으로 구축되며, 이는 Material Design을 커스터마이징하여 제품 브랜드를 더 잘 반영 하는 체계적인 방법

Material Theme은 color, typography, shape 속성으로 구성 되고 이를 사용자 정의하면 앱을 빌드하는데 사용하는 구성 요소에 자동으로 반영

Color

Materail Design은 앱 전체에서 사용할 수 있는 의미상 이름이 지정된 여러 Color 를 사용
예를 들어, Primary는 주요 브랜드 색상, Secondary는 악센트를 제공하는 데 사용

Typography

마찬가지로 Material은 여러 유형의 스타일을 제공
Theme별로 typography 스타일을 다양하게 할 수는 없지만 typography scale을 사용하면 앱 내의 일관성을 높일 수 있다.
자체 typography 및 기타 유형 사용자 정의를 제공하면 앱에서 사용하는 material component에 반영
예를 들어, App Bars는 h6 스타일을 기본으로 사용하고 Buttons 는 button을 사용

Shape

Material은 shape를 체계적으로 활용하여 브랜드를 전달할 수 있도록 지원한다.
소형, 중형, 대형의 세 가지 카테고리로 구성, 각각은 모서리 스타일 및 크기를 사용자 정의하여 모양을 정할 수 있음

Define Theme

MaterialTheme

Jetpack Compose에서 테마를 구현하기 위한 핵심 요소는 MaterialTheme composable 이다.
compose hierarchy안에 두면 그 안의 모든 구성요소에 대한 color, typography, shape를 사용자 정의 할 수 있다.

Clone this wiki locally