1. 프로젝트 설정
Kotlin을 WebAssembly로 컴파일하려면, 먼저 build.gradle.kts 파일을 설정해야 합니다. Kotlin/JS를 사용하여 WebAssembly로 컴파일할 수 있습니다. kotlin-wasm 플러그인 설정을 추가하고, WebAssembly 타겟을 지정합니다.
plugins {
kotlin("js") version "2.1.0" // Kotlin 버전은 최신 버전으로 설정
}
kotlin {
wasm {
browser()
}
}
2. Kotlin 코드 작성
Kotlin 코드에서는 간단한 HTML 페이지와 함께 Hello, WebAssembly! 메시지를 출력하는 예제를 작성합니다. 이 코드는 브라우저에서 실행되며, WebAssembly로 컴파일된 Kotlin 코드를 활용하여 웹 페이지에 출력할 수 있습니다.
import kotlinx.browser.document
fun main() {
val heading = document.createElement("h1")
heading.textContent = "Hello, WebAssembly!"
document.body?.appendChild(heading)
}
이 코드는 Kotlin에서 document.createElement()를 사용하여 웹 페이지에 h1 요소를 생성하고, Hello, WebAssembly!라는 텍스트를 출력하는 예제입니다. WebAssembly로 컴파일된 이 코드는 브라우저에서 Kotlin의 기능을 활용하여 실행됩니다.
3. HTML 파일 작성
이제, Kotlin 코드를 WebAssembly로 컴파일한 후 웹 페이지에서 사용할 수 있습니다. index.html 파일을 작성하여, 컴파일된 Kotlin/WebAssembly 모듈을 불러옵니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kotlin WebAssembly Example</title>
</head>
<body>
<script src="kotlin.js"></script>
<script src="main.js"></script> <!-- 컴파일된 Kotlin 파일 -->
</body>
</html>
4. 컴파일 및 실행
이제 위의 Kotlin 코드를 WebAssembly로 컴파일하려면, gradle build 명령을 실행하여 프로젝트를 빌드합니다. 빌드된 결과물은 main.js와 함께 WebAssembly 바이너리 파일이 생성됩니다. 이 파일들을 웹 서버에 올리거나 로컬에서 실행하여, 브라우저에서 Kotlin으로 작성된 WebAssembly 애플리케이션을 실행할 수 있습니다.
5. 결과
브라우저에서 실행하면, “Hello, WebAssembly!“라는 텍스트가 출력되는 웹 페이지를 볼 수 있습니다. 이 과정에서 Kotlin 코드가 WebAssembly로 컴파일되어, 네이티브 성능에 가까운 속도로 실행되는 것을 확인할 수 있습니다.
댓글