Jetpack Compose는 안드로이드 앱을 위한 모던한 UI 툴킷으로, UI를 프로그래밍 방식으로 작성할 수 있게 해줍니다. 이 포스트에서는 Jetpack Compose에서 테마와 스타일을 어떻게 적용하는지 알아보겠습니다.

테마 적용하기

테마는 앱의 전반적인 모양과 느낌을 정의하는 데 사용됩니다. Jetpack Compose에서는 MaterialTheme을 사용하여 테마를 적용합니다.

@Composable
fun MyApp() {
    MaterialTheme {
        // 앱 컨텐츠 작성
    }
}

테마에는 기본적인 컬러, 타이포그래피, 애니메이션 및 기타 속성들이 정의되어 있습니다.

사용자 정의 테마 적용하기

MaterialTheme을 사용하여 사용자 정의 테마도 쉽게 적용할 수 있습니다.

@Composable
fun MyApp() {
    MaterialTheme(
        typography = MyTypography,
        colors = MyColorPalette
    ) {
        // 앱 컨텐츠 작성
    }
}

위 예제에서 MyTypography와 MyColorPalette는 사용자가 정의한 타이포그래피와 컬러 팔레트입니다.

스타일 적용하기

Jetpack Compose에서는 Modifier를 사용하여 UI 요소에 스타일을 적용합니다.

@Composable
fun MyButton() {
    Button(
        onClick = { /* 클릭 처리 */ },
        modifier = Modifier
            .size(200.dp)
            .background(color = Color.Blue)
    ) {
        Text(text = "버튼")
    }
}

위 예제에서 Modifier를 사용하여 버튼의 크기와 배경 색상을 설정합니다.

테마와 스타일을 적용하여 Jetpack Compose를 통해 유연하고 일관된 UI를 작성할 수 있습니다.

이상으로 Jetpack Compose에서 테마와 스타일을 적용하는 방법에 대해 알아보았습니다.

참고 자료: Jetpack Compose official documentation