Kotlin Academy · 강의

Kotlin/WASM: 브라우저용 WebAssembly 컴파일

Kotlin/WASM을 대상으로 설정하고 JavaScript와 통합해 브라우저 환경에서 실행합니다.

Kotlin/WASM: 브라우저용 WebAssembly 컴파일은(는) CoddyKit의 무료 Kotlin Academy 강의입니다. 이것은 4개 중 4번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Kotlin Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Kotlin Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

Kotlin/WASM이란 무엇인가요

Kotlin/WASM은 브라우저와 서버 측 WASM 런타임에서 실행할 수 있는 WebAssembly(.wasm) 모듈을 생성하는 Kotlin 컴파일 대상입니다. Kotlin/JS와는 별개이며, 계산 집약적인 코드에서 더 나은 성능과 더 작은 바이너리 크기를 제공합니다.

현재 상태(Kotlin 2.0)

Kotlin 2.0부터 Kotlin/WASM은 WebAssembly에 가비지 컬렉션 객체를 네이티브로 제공하는 W3C 표준인 WasmGC 제안을 대상으로 합니다. WasmGC는 Chrome 119 이상, Firefox 120 이상, Safari 18 이상에서 지원됩니다. Kotlin/WASM은 Kotlin 2.1부터 안정 버전입니다.

Kotlin/WASM 대상 설정하기

KMP의 build.gradle.kts에서 WASM 대상과 실행 가능한 바이너리를 선언합니다:

kotlin {
    wasmJs {
        browser()
        binaries.executable()
    }
    sourceSets {
        val wasmJsMain by getting {
            dependencies {
                implementation("org.jetbrains.kotlinx:kotlinx-browser:0.3")
            }
        }
    }
}

WASM용 Kotlin 코드 작성하기

Kotlin/WASM 코드는 일반 Kotlin 코드와 비슷합니다. commonMain을 통해 다른 KMP 대상과 로직을 공유할 수 있습니다. 브라우저 DOM에는 kotlinx-browser 라이브러리를 통해 접근합니다:

import kotlinx.browser.document
import kotlinx.browser.window

fun main() {
    val p = document.createElement("p")
    p.textContent = "Hello from Kotlin/WASM!"
    document.body!!.appendChild(p)
}

빌드 및 실행

./gradlew wasmJsBrowserDevelopmentRun을 실행하면 실시간 다시 로드를 지원하는 개발 서버가 시작됩니다. 프로덕션 빌드에는 ./gradlew wasmJsBrowserDistribution을 실행합니다. 출력은 build/dist/wasmJs/productionExecutable/에 생성됩니다.

Kotlin/WASM에서 JavaScript 상호 운용하기

@JsExport를 사용하면 Kotlin 함수를 JavaScript에 노출할 수 있습니다. Kotlin에서 JavaScript API를 호출하려면 external 선언을 사용합니다:

external fun console_log(msg: String): Unit

@JsExport
fun add(a: Int, b: Int): Int = a + b

Kotlin/WASM과 Kotlin/JS 비교

Kotlin/JS: JavaScript로 변환되며, 전체 JS 생태계에 접근할 수 있고 도구가 성숙했으며 JS가 실행되는 모든 곳에서 실행됩니다. Kotlin/WASM: WebAssembly로 컴파일되며, 계산량이 많은 코드에서 더 빠르게 실행되고 타입 안전 메모리 모델을 제공하지만 WasmGC 브라우저 지원이 필요합니다. 일반적인 웹 앱에는 Kotlin/JS를 사용하고, 성능이 중요한 모듈에는 Kotlin/WASM을 고려하세요.

웹용 Compose(WASM)

JetBrains의 Compose Multiplatform은 Android와 Desktop에서 사용하는 것과 동일한 Compose API로 웹 UI를 만들 수 있도록 Kotlin/WASM을 대상으로 합니다. 전체 UI는 WASM을 통해 Canvas 요소에 렌더링됩니다:

// build.gradle.kts with Compose Multiplatform
plugins { id("org.jetbrains.compose") }

// In wasmJsMain
@OptIn(ExperimentalComposeUiApi::class)
fun main() = CanvasBasedWindow("MyApp") {
    Text("Hello, Compose WASM!")
}

바이너리 크기 및 최적화

WASM 바이너리는 프로덕션 빌드 중에 wasm-opt로 최적화됩니다. 트리 셰이킹은 사용하지 않는 Kotlin 표준 라이브러리 코드를 제거합니다. 일반적인 Kotlin/WASM 헬로 월드의 크기는 gzip 압축 후 200–400 KB입니다. 최대한으로 최적화하려면 binaryenArgs = listOf("-O3")를 활성화합니다.

JVM 및 Native와 코드 공유하기

Kotlin/WASM은 KMP 대상이므로 commonMain의 도메인 로직, 알고리즘 및 데이터 모델이 자동으로 공유됩니다. 플랫폼별 코드(DOM 조작, 파일 입출력)는 actual 선언을 사용하여 wasmJsMain에 작성합니다.

제한 사항 및 향후 계획

현재 제한 사항은 다음과 같습니다. NPM 패키지에 직접 접근할 수 없으므로 JS 상호 운용을 사용해야 하고, Kotlin/JS에 비해 디버거 지원이 제한적이며, WasmGC 브라우저 지원이 필요합니다(구형 브라우저에서는 사용할 수 없음). Kotlin 팀은 WASM의 도구, 성능 및 표준 라이브러리 지원 범위를 적극적으로 개선하고 있습니다.

빠른 확인

Kotlin/WASM(Kotlin 2.0 이상)은 WASM에서 가비지 컬렉션 객체를 네이티브로 사용할 수 있도록 어떤 WebAssembly 제안을 대상으로 하나요?

복습: Kotlin/WASM

핵심 요점:

Kotlin/WASM은 WasmGC 제안을 통해 WebAssembly로 컴파일됩니다(WasmGC는 Kotlin 2.1에서 안정 버전)
KMP Gradle 구성에서 wasmJs { browser(); binaries.executable() }를 선언합니다
DOM에는 kotlinx-browser를 통해 접근하고, JS 상호 운용에는 external과 @JsExport를 사용합니다
wasmJsBrowserDistribution으로 빌드하고 wasmJsBrowserDevelopmentRun으로 개발 서버를 실행합니다
도메인 로직은 commonMain에서 공유하고, 플랫폼별 코드는 wasmJsMain에 작성합니다

자주 묻는 질문

“Kotlin/WASM: 브라우저용 WebAssembly 컴파일” 강의는 무료인가요?

네 — “Kotlin/WASM: 브라우저용 WebAssembly 컴파일” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Kotlin Academy 강의 전체를 잠금 해제할 수 있습니다. Kotlin Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“Kotlin/WASM: 브라우저용 WebAssembly 컴파일”에서 뭘 배우나요?

Kotlin/WASM을 대상으로 설정하고 JavaScript와 통합해 브라우저 환경에서 실행합니다. 브라우저에서 직접 실행하는 실습 코드로 Kotlin Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

Kotlin Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 Kotlin Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 4번째 강의입니다.

“Kotlin/WASM: 브라우저용 WebAssembly 컴파일” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 Kotlin Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 Kotlin Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← Kotlin Academy(으)로 돌아가기