[Kalendar] KMP에 Typograpy 적용하기

유어슈 동아리에서 캘린더 라이브러리를 KMP로 만드는 프로젝트를 진행 중이다.

 

KMP의 K와 Calendar를 합쳐서 Kalendar의 이름이 탄생하게 되었다.

 

이 프로젝트를 진행하게된 목표는 Compose Multiplatform(iOS, Desktop 포함) 환경에서 플랫폼별 의존성 관리 능력을 향상시키고, 배포 과정을 경험해서 실제 오픈소스 프로젝트를 완성하기 위함이다!

총 두 달 동안 진행될 예정이며, 각 기능을 스프린트 별로 나누어 진행하고 있다.

캘린더 디자인의 경우 유어슈 디자인 팀에 문의하여 디자인을 받았다. Material을 참고문서로 보냈기 때문에 Material과 디자인이 유사하다.

 

이번에 내가 담당한 부분은 디자인시스템을 구현하는 것이다.

KMP 환경에서의 Typograpy 적용 과정을 간단하게 알아보고자 한다.

 

KMP 디자인시스템

KMP 환경이 기존 Android 환경에서 디자인시스템을 구축하는 것과 크게 다르지 않다. 

다만 사소하게 알고 넘어가면 좋을 것 들을 담아보았다.

 

📍아래는 공식문서다!

Setup and configuration for multiplatform resources | Kotlin Multiplatform

 

✅ Typograpy 적용하기

디자인시스템 작업은 공통 모듈인 shared 모듈에서 진행하였다.

 

Typograpy를 적용하기 위해서는 font를 저장해줘야 한다.

기존 Android는 res > font 파일에 저장했지만 KMP는 다르다.

 

우선, 아래 라이브러리를 넣어줘야 한다.

sourceSets {
    commonMain {
        dependencies {
            implementation(compose.components.resources)
        }
    }
}

 

그리고 composeResources 파일 하위에 우리가 가져오고 싶은 파일들을 넣어주면 된다.

 

폰트를 적용하기 위해서는 Font

기존 Android 처럼 아래의 Font를 사용하고자 했지만 오류가 났다.

import androidx.compose.ui.text.font.Font

Argument type mismatch: actual type is 'FontResource', but 'Int' was expected.

타입이 맞지 않은 오류인 것이다.

KMP 환경에서 나오는 resources의 타입은 FontResource인 것이다.

 

따라서 아래의 Font를 임포트 해줘야 한다.

import org.jetbrains.compose.resources.Font

 

이때 주의해야 할 점은, 위의 Font는 @Composable 함수 안에서만 사용이 가능하다는 점이다.

따라서 각각의 폰트들을 @Composable 함수 안에서 변수로 지정하고, 해당 폰트가 바뀔 때만 생성될 수 있도록 remember로 감싸 robotoFamily 폰트를 만들었다.

@Composable
fun rememberTypography(): KalendarTypography {
    val bold = Font(Res.font.Roboto_Bold, weight = FontWeight.Bold)
    val regular = Font(Res.font.Roboto_Regular, weight = FontWeight.Normal)
    val medium = Font(Res.font.Roboto_Medium, weight = FontWeight.Medium)

    val robotoFamily = remember(bold, regular, medium) { FontFamily(bold, regular, medium) }

    return remember(robotoFamily) {
        KalendarTypography(
            displayLarge = TextStyle(
                fontSize = 32.sp,
                fontFamily = robotoFamily,
                fontWeight = FontWeight.Normal,
            )
        )
    }
}

@Stable
data class KalendarTypography(
    val displayLarge: TextStyle
)

 

이렇게 Typgrapy를 적용하여 CompositionLocal로 내려주면 기존 Compose처럼 사용 가능하다!

---

+) 나머지 Color 적용 과정에 대해서 별도로 언급 안 한 이유는 Android와 다를 바가 없었기 때문이다.

KMP와 Android의 다른 점을 찾는 것이 재밌었고, 그때의 적용 과정을 담고 싶어서 간략하지만 기록해본다 ㅎㅎ

 

전체 코드는 아래 PR 링크에서 확인할 수 있습니다:)

[Feature/bona] Kalendar Theme 구현 by leeeyubin · Pull Request #4 · yourssu/Kalendar