포스트

[KMP] 프로젝트 시작하기

KMP(Kotlin Multiplatform)은 Kotlin으로 Android, iOS, Desktop, Web까지 다양한 플랫폼을 지원하는 크로스플랫폼이다. 여기서는 간단하게 프로젝트 생성과 앱으로 어떻게 실행하는지만 작성할 것이다.

프로젝트 생성

  1. 프로젝트 생성을 위해 아래 링크로 들어간다.

    https://kmp.jetbrains.com/

  2. Project Name, Project ID를 설정하고 어떤 플랫폼을 개발할건지 선택할 수 있다.

    여기서 나는 Android, iOS, Desktop으로 했다.

    iOS를 선택할때는 또 선택지가 있는데 Share UIDo not share UI 가 있다. Share UI 는 Compose를 사용해서 UI를 만드는 거고 다른 선택지는 SwiftUI를 사용해서 만드는 거다.

    Compose로 UI를 구성할거기 때문에 첫 번째 선택지를 선택한다.

0

  1. Download를 클릭하여 프로젝트를 다운로드 받는다. 다운로드 파일은 원하는 위치로 이동한다.

1

  1. Android Studio를 열고 Open을 클릭한다.

2

  1. 다운받은 폴더를 열고 Trust Project를 클릭해준다.

3

  1. 프로젝트의 build가 끝나면 composeApp/build.gradle.kts파일에서 material의 버전을 바꿔준다. 기존에는 compose.material로 되어있지만 compose.material3로 변경해준다.
1
2
3
4
5
6
7
8
9
10
11
12
	kotlin {
	    ...
	    
	    sourceSets {
	        ...
	        commonMain.dependencies {
			        ...
	            implementation(compose.material3)
	            ...
	        }
	    }
	}
  1. 프로젝트에 기본샘플로 주는 코드인 composeApp/src/commonMain/kotlin/App.kt에서 material로 import되어있는 것을 material3로 변경한다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
	import androidx.compose.foundation.layout.Column
	import androidx.compose.foundation.layout.fillMaxWidth
	import androidx.compose.material3.Button
	import androidx.compose.material3.Text
	import androidx.compose.runtime.*
	import androidx.compose.ui.Alignment
	import androidx.compose.ui.Modifier
	import org.jetbrains.compose.resources.painterResource
	import org.jetbrains.compose.ui.tooling.preview.Preview
	
	import todo.composeapp.generated.resources.Res
	import todo.composeapp.generated.resources.compose_multiplatform
	import ui.theme.AppTheme
	
	@Composable
	@Preview
	fun App() {
	
	    AppTheme() {
	        var showContent by remember { mutableStateOf(false) }
	        Column(Modifier.fillMaxWidth(), horizontalAlignment = Alignment.CenterHorizontally) {
	            Button(onClick = { showContent = !showContent }) {
	                Text("Click me!")
	            }
	            AnimatedVisibility(showContent) {
	                val greeting = remember { Greeting().greet() }
	                Column(Modifier.fillMaxWidth(), horizontalAlignment = Alignment.CenterHorizontally) {
	                    Image(painterResource(Res.drawable.compose_multiplatform), null)
	                    Text("Compose: $greeting")
	                }
	            }
	        }
	    }
	}

앱 실행

1. Android로 실행하기

Android 앱으로 실행하는 것은 평소에 Android Studio에서 Native 프로젝트를 시작하는 방법과 같다.

앱과 에뮬레이터를 선택한 후 플레이 버튼을 눌러준다.

4

샘플 코드가 잘 작동하는 것을 볼 수 있다.

5

2. iOS로 실행하기

iOS 앱으로 실행하는 방법은 Android 앱을 실행하는 것과 유사하다.

드롭다운에서 iosApp을 선택한 후 런 버튼을 클릭하면 된다.

실행은 XCode로 하는 것이기 때문에 XCode에서 권한 관련해서 문제가 생길수도 있다. 또한, XCode로 실행하는 것이기 때문에 맥 환경에서만 된다.

6

실행하면 아래와 같이 잘 작동하는 것을 볼 수 있다.

7

3. Desktop으로 실행하기

이제 마지막으로 Desktop으로는 어떻게 실행할지 알아보자.

  1. Android Studio 상단 메뉴에 Run 을 클릭한다.

8

  1. Edit Configurations를 클릭

9

  1. 왼쪽 상단에 플러스 아이콘 클릭

10

  1. Gradle 선택

11

  1. Task and Arguments칸에 아래 명령어 넣고 OK 클릭
1
	desktopRun -DmainClass=MainKt --quiet

12

  1. 드롭다운에서 생성한 Gradle 선택 후 런 버튼 클릭

13

1
아래와 같이 데스크톱으로도 잘 실행되는 것을 확인할 수 있다.

14

여담

앱을 개발하면서 크로스 플랫폼으로 개발할 필요를 느꼈다. 나는 일전에 JavaScript와 React Native로 크로스플랫폼을 개발한 적이 있는데 솔직히 JavaScript는 내 취향이 아니었다.

언어나 플랫폼, IDE는 개발을 하는데 필요한 도구라고 생각하는 나는 내 취향에 맞는 도구를 찾기위해 노력했다.

그렇게 찾은 도구가 바로 Kotlin MultiPlatform인데 우선 첫 프로젝트 생성은 꽤 손쉽게 했다. 앞으로도 계속 KMP에 관해 알아보고 기록할 예정이다.

이 기사는 저작권자의 CC BY 4.0 라이센스를 따릅니다.