Kotlin/Wasm과 Compose Multiplatform 시작하기

이 튜토리얼은 IntelliJ IDEA에서 Kotlin/Wasm으로 Compose Multiplatform 앱을 실행하고, 웹사이트로 게시할 수 있는 아티팩트(artifact)를 생성하는 방법을 보여 줍니다.

출처: Get started with Kotlin/Wasm and Compose Multiplatform

본문

💡 팁 Kotlin Multiplatform IDE 플러그인을 사용하지 않는다면, KMP 웹 위저드를 사용해 동일한 프로젝트를 만들 수 있어요.

New Project 창에서 다음 필드를 지정하세요:
- Name: WasmDemo
- Project ID: wasm.project.demo

📝 참고 이 튜토리얼은 일관성을 위해 wasm.project.demo를 Project ID로 사용해요. 하지만 org.example 같은 평소 사용하는 그룹 ID를 유지하는 것을 권장합니다. 여기에 입력한 값이 향후 프로젝트에서 기본값으로 제안됩니다.

웹 애플리케이션이 브라우저에서 자동으로 열려요. 또는 빌드가 끝난 후 다음 URL을 직접 열 수도 있습니다:

http://localhost:8080/

포트 8080이 이미 사용 중이면 포트 번호가 달라질 수 있어요. 실제 포트 번호는 Gradle 빌드 출력에서 확인할 수 있습니다.

웹사이트에 게시할 프로젝트의 아티팩트를 생성하세요:

View | Tool Windows | Gradle을 선택해 Gradle 도구 창을 엽니다.
WasmDemo | Tasks | kotlin browser에서 wasmJsBrowserDistribution 태스크를 선택하고 실행하세요.

📝 참고 태스크가 제대로 로드되려면 Gradle JVM으로 최소한 Java 11이 필요해요. Compose Multiplatform 프로젝트 전반에서는 Java 17 이상을 권장합니다.

./gradlew wasmJsBrowserDistribution

태스크가 완료되면 webApp/build/dist/wasmJs/productionExecutable 디렉터리에서 생성된 아티팩트를 찾을 수 있어요.

생성된 아티팩트를 사용해 Kotlin/Wasm 애플리케이션을 배포하세요. 마음에 드는 게시 옵션을 선택하고 안내를 따라보세요:

사이트가 만들어지면 브라우저를 열고 플랫폼의 페이지 도메인으로 이동하세요. 예를 들어 GitHub pages는 다음과 같습니다:

축하합니다! 아티팩트를 게시했습니다.