[Compose] Design System 구축하기 - 1

Custom Design System Module를 구축하기 전에 Compose 내 테마 분석을 먼저 진행해보려고 합니다.

 

Jetpack Compose의 테마는 여러 개의 하위 수준 구성과 관련 API로 이루어져 있습니다.

이러한 요소는 MaterialTheme의 소스 코드에서 확인할 수 있으며 맞춤 디자인 시스템에 적용할 수도 있습니다.

 

Theme System Class

일반적으로 테마는 공통된 시각적 개념과 동작 개념을 그룹화하는 여러 개의 하위 시스템으로 구성됩니다.

이러한 시스템은 테마 설정 값이 있는 클래스를 사용하여 모델링할 수 있습니다.

 

예를 들어 MaterialTheme에는 아래와 같은 시스템들이 존재합니다.

- ColorScheme(색상 시스템),

- Typography(서체 시스템),

- Shapes(도형 시스템)

- ...

@Immutable
data class ColorSystem(
    val color: Color,
    val gradient: List<Color>
    /* ... */
)

@Immutable
data class TypographySystem(
    val fontFamily: FontFamily,
    val textStyle: TextStyle
)
/* ... */

@Immutable
data class CustomSystem(
    val value1: Int,
    val value2: String
    /* ... */
)

 

참고로 @Immutable 대신 @Stable 이노테이션으로 대체 가능합니다.

 

 

Theme System Composition Local

테마 시스템 클래스는 컴포지션 트리에 CompositionLocal 인스턴스 형태로 암시적으로 제공됩니다.

그러면 구성 가능한 함수에서 테마 설정 값을 정적으로 참조할 수 있습니다.

 

CompositionLocal은 주로 테마, 설정, 또는 다른 전역적인 데이터를 관리하는 데 사용됩니다.

 

CompositionLocal의 기본 개념

CompositionLocal은 특정 타입의 데이터를 저장하고 관리할 수 있는 장소입니다.

이 데이터는 컴포저블 트리의 특정 범위 내에서만 유효합니다.

 

사용방법은 다음과 같습니다.

• CompositionLocal을 정의
• CompositionLocalProvider를 사용하여 데이터를 제공
• 컴포저블 함수 내에서 해당 데이터를 읽음

// 1. CompositionLocal 정의
val LocalExampleData = compositionLocalOf<String> { error("No value provided") }

// 2. CompositionLocalProvider 사용
@Composable
fun ExampleProvider(content: @Composable () -> Unit) {
    CompositionLocalProvider(LocalExampleData provides "Hello, Compose!") {
        content()
    }
}

// 3. CompositionLocal 데이터 사용
@Composable
fun ExampleConsumer() {
    val value = LocalExampleData.current
    Text(text = value) // "Hello, Compose!" 출력
}

@Composable
fun MainScreen() {
    ExampleProvider {
        ExampleConsumer()
    }
}

@Preview(showBackground = true)
@Composable
fun PreviewMainScreen() {
    MainScreen()
}

1. CompositionLocal 정의:
   compositionLocalOf 함수를 사용하여 LocalExampleData라는 로컬 데이터를 정의합니다.
   기본값을 설정할 수 있지만, 여기서는 에러를 발생시키도록 설정했습니다.
2. Provider 사용:
   CompositionLocalProvider를 사용하여 LocalExampleData에 "Hello, Compose!"라는 값을 제공합니다.
   이 값은 CompositionLocalProvider의 자식 컴포저블에서 사용할 수 있습니다.
3. 데이터 소비:
   ExampleConsumer 함수에서 LocalExampleData.current를 통해 제공된 값을 읽어옵니다.
   이 값을 사용하여 UI를 구성합니다.

 

Theme Method

테마 함수는 진입점이자 기본 API입니다.

이 함수는 로직에 필요한 경우 실제 값을 사용하여 테마 시스템 CompositionLocal의 인스턴스를 구성합니다. 

content 매개변수를 사용하면 중첩된 컴포저블이 계층 구조를 기준으로 테마 설정 값에 액세스할 수 있습니다.

@Composable
fun Theme(
    /* ... */
    content: @Composable () -> Unit
) {
    val colorSystem = ColorSystem(
        color = Color(0xFF3DDC84),
        gradient = listOf(Color.White, Color(0xFFD7EFFF))
    )
    val typographySystem = TypographySystem(
        fontFamily = FontFamily.Monospace,
        textStyle = TextStyle(fontSize = 18.sp)
    )
    val customSystem = CustomSystem(
        value1 = 1000,
        value2 = "Custom system"
    )
    /* ... */
    CompositionLocalProvider(
        LocalColorSystem provides colorSystem,
        LocalTypographySystem provides typographySystem,
        LocalCustomSystem provides customSystem,
        /* ... */
        content = content
    )
}

 

 

Theme Object

테마 시스템에 액세스하는 방법은 편의성 속성이 있는 객체를 사용하는 것입니다.

일관성을 위해 객체 이름은 테마 함수와 동일하게 지정되는 경향이 있습니다.

편의성 속성은 현재 컴포지션 로컬을 가져오기만 합니다.

object Theme {
    val colorSystem: ColorSystem
        @Composable
        get() = LocalColorSystem.current
    val typographySystem: TypographySystem
        @Composable
        get() = LocalTypographySystem.current
    val customSystem: CustomSystem
        @Composable
        get() = LocalCustomSystem.current
    /* ... */
}

 

 

 

다음 편에서는 Custom design systems in Compose에 대해 작성할 예정입니다.

[Compose] Design System 구축하기 - 2

---

Reference

Compose 내 테마 분석  |  Jetpack Compose  |  Android Developers