[DroidKaigi] CMP로 iOS 첫 빌드 도전기 (컨트리뷰션)

오늘은 필자의 두 번째 컨트리뷰션 도전기에 대해 작성해보려고 한다.
 
DroidKaigi의 앱 기여가 시작되고 있다는 소식을 접하고, 관심이 생겨서 이슈들을 눈여겨 보고 있었다.
기존에 있던 이슈들은 다른 분들이 이미 손을 드셔서, 남은 것 중에 보다가 CMP 환경에서 ContributorsScreen으로 네비게이션하는 이슈를 발견하게 되어 지원하게 되었다!
 
비교적 간단한 이슈였지만, CMP 구조를 파악하고 iOS를 빌드해보는 의미 있는 경험이었기에 기록해본다.
 
💡해당 이슈는 아래에서 확인이 가능합니다.

【ComposeMultiplatform】Implement the transition to the ContributorsScreen by leeeyubin · Pull Request #497 · DroidKaigi/con

 

---

CMP 구조

일단, DroidKaigi의 앱 구조를 살펴보자.

 
최상단에 app-android, app-desktop, app-ios 모듈이 있다.
이 모듈들은 각각 플랫폼별 진입점 역할을 담당한다.
 
그리고 그 하단에 보이는 app-shared 모듈은 공용 UI를 관리하며,
app-shared > commonMain 모듈의 KaigiAppUi 함수가 플랫폼별 진입점과 UI를 연결하는 핵심 지점이다.

@Composable
context(appGraph: AppGraph)
expect fun KaigiAppUi()

 
그리고 각 플랫폼에서는 actual 구현을 통해 실제 네비게이션을 정의한다.
(이번 이슈에서는 iOS 쪽을 수정했으므로 app-shared > iosMain 모듈을 예시로 든다.) 

@Composable
context(appGraph: AppGraph)
actual fun KaigiAppUi() { }

 
마지막으로 최하단의 feature 모듈에서 공용 UI를 구성하고 있으며, 모든 플랫폼이 동일한 화면(ContributorsScreen 등)을 이 feature 모듈에서 공유한다.
 
즉, 정리하자면!
필자가 이번 이슈에서 해결해야 할 것은 iOS로 진입하여(app-ios),  CMP로 바꾸는 버튼을 클릭하고(아래 코드), CMP 환경에서 ContributorsScreen으로 정상적으로 네비게이션 되도록 구현(app-shared) 하면 되는 것이다.

AboutButton(
    title: String(localized: "Switch to Compose Multiplatform", bundle: .module),
    systemName: "switch.2",
) {
    showSwitchToComposeMultiplatformAlert = true
}

---

iOS 빌드

그렇게 필자의 첫 iOS 빌드가 시작되었다..
이전에 KMP 프로젝트를 진행한 경험은 여러 번 있었지만, 대부분 Android에 집중된 경우가 많았다. 그 때문에 iOS에서도 제대로 동작하는지 깊게 확인해보지 못한 점이 늘 아쉬움으로 남아 있었다.
 
야심차게 Xcode로 DroidKaigi2025.xcodeproj 파일을 열어 돌려보았지만 당연하게 에러가 났다. (맥북을 처음 샀을 때 Xcode를 설치만 하고 한동안 업데이트를 안 해줘서 버전 오류가 발생한 것이다.)

 
간단한 버전 에러였음으로 Xcode를 앱 스토어에서 업데이트 해주어 해결했다!
 
이렇게 오류가 쉽게 잡히면 아쉽다.. 다음 에러가 날 마주했다. 그치만 당황하지말고 iOS 모듈의 리드미를 보면 된다! 

 
아래 절차를 그대로 따라주면 된다.
요약하자면 Kotlin 코드를 iOS에서 쓸 수 있도록 XCFramework로 빌드하고, iOS 환경을 세팅해주는 것이다.

 
더 이상 오류가 보이지 않는다면, 시뮬레이터 버전을 설정해주고, 빌드 해보면 iOS 기기가 뜨는 것을 확인할 수 있다.

---

네비게이션 구현

이제 iOS 빌드에도 성공했으니, ContributorsScreen으로 네비게이션만 연결하면 된다.
 
앞서 언급한 iosMain의 actual KaigiAppUi 내부에서 네비게이션 그래프를 구성하고, 해당 목적지를 등록해 주면 된다.
 
우선, 라우트 키(ContributorsRoute)를 정의해 준다.

@Serializable
data object ContributorsRoute

 
그리고 이 경로를 통해 ContributorsScreen으로 가는 확장함수를 구현한다.

fun NavController.navigateToContributors() {
    navigate(ContributorsRoute)
}

 
이제 항목 선택 시 호출해주면 된다.

AboutItem.Contributors -> navController.navigateToContributors()

 
마지막으로, 라우트가 가리키는 화면 목적지를 네비게이션 그래프에 등록한다.

context(appGraph: AppGraph)
fun NavGraphBuilder.contributorsNavGraph(
    onBackClick: () -> Unit,
    onLinkClick: (String) -> Unit,
) {
    composable<ContributorsRoute> {
        with(rememberContributorsScreenContextRetained()) {
            ContributorsScreenRoot(
                onBackClick = onBackClick,
                onContributorClick = onLinkClick,
            )
        }
    }
}

 
완성본은 아래와 같다!

---

마치며

DroidKaigi로 프로필도 만들어보았다 ㅎㅎ

이렇게 두 번째 컨트리뷰션이 마무리 되었다.
 
iOS 환경은 익숙하지 않아서 걱정이 많았지만 하나씩 차근차근 풀어가다 보니 무사히 해결할 수 있어서 다행이었다:)
특히 Xcode를 처음 다루다 보니까 오류는 어떻게 확인해야 하는지, 빌드 과정을 어디서 살펴야 하는 지 등이 낯설게 느껴졌는데, 몇 번 시도하다 보니 금세 익숙해질 수 있었다.
 
무엇보다도 직접 CMP 환경에서 iOS를 활용해보니 멀티플랫폼의 장점이 확실히 와닿았다.
역시, Compose는 최고라는 생각이 다시 한번 들었다!
 
필자가 작성한 PR은 아래에서 볼 수 있습니다.
➡️https://github.com/DroidKaigi/conference-app-2025/pull/497

【ComposeMultiplatform】Implement the transition to the ContributorsScreen by leeeyubin · Pull Request #497 · DroidKaigi/con