웹 개발 개요

Kotlin은 Kotlin Multiplatform을 통해 웹 개발에 두 가지 접근 방식을 제공해요.

JavaScript 기반(Kotlin/JS 컴파일러 사용)
WebAssembly 기반(Kotlin/Wasm 컴파일러 사용)

두 방식 모두 웹 앱에서 코드를 공유할 수 있게 해 주지만, 지원하는 유스 케이스가 서로 달라요. 타깃 브라우저 지원과 같은 기술적 측면에서도 차이가 있답니다.

출처: Overview

본문

Kotlin/JS

Kotlin/JS는 코드, 표준 라이브러리, 그리고 지원되는 모든 의존성을 JS로 트랜스파일해서 Kotlin 앱을 JavaScript(JS) 환경에서 실행할 수 있게 해 줘요.

Kotlin/JS로 개발할 때는 브라우저 또는 Node.js 환경에서 앱을 실행할 수 있어요.

Kotlin/JS 타깃 구성에 대한 자세한 내용은 Gradle 프로젝트 구성 안내를 참고해 주세요.

Kotlin/JS 유스 케이스

Kotlin/JS는 다음과 같은 목표가 있을 때 적합해요.

JavaScript/TypeScript 코드베이스와 비즈니스 로직을 공유하는 경우
Kotlin으로 공유할 수 없는 웹 앱을 만드는 경우

JavaScript/TypeScript 코드베이스와 비즈니스 로직 공유하기

도메인 로직이나 데이터 로직 같은 Kotlin 코드를 네이티브 JavaScript/TypeScript 앱과 공유해야 한다면, Kotlin/JS 타깃은 다음과 같은 장점을 제공해요.

JavaScript/TypeScript와의 직접적인 상호 운용성
상호 운용 과정에서의 최소 오버헤드(예: 불필요한 데이터 복사 방지). 덕분에 공유 코드가 JS 기반 워크플로에 자연스럽게 통합돼요.

코드를 공유하지 않고 Kotlin으로 웹 앱 만들기

웹 앱 전체를 Kotlin으로만 구현하고, 다른 플랫폼(iOS, Android, Desktop)과 코드를 공유하지 않는 프로젝트에서는 HTML 기반 솔루션이 더 나은 제어를 제공해요.

HTML 기반 솔루션은 SEO와 접근성을 개선하고, 페이지 내 찾기(search on page)와 페이지 번역 같은 더 나은 브라우저 통합 기능도 제공해요.

HTML 기반 솔루션을 위해 Kotlin/JS는 여러 접근 방식을 지원해요.

Kobweb이나 Kilua 같은 Compose 기반 HTML 프레임워크를 사용해서 Compose 스타일 아키텍처로 UI를 구축하는 방법
Kotlin 래퍼와 함께 React 기반 솔루션을 사용해서 React 컴포넌트를 Kotlin으로 구현하는 방법

Kotlin/Wasm

Kotlin/Wasm은 Kotlin 코드를 WebAssembly(Wasm)로 컴파일해서, Kotlin 요구 사항을 충족하면서도 Wasm을 지원하는 환경과 기기 전반에서 앱을 실행할 수 있게 해 줘요.

브라우저에서는 Kotlin/Wasm으로 Compose Multiplatform을 이용해 웹 앱을 만들 수 있어요. 브라우저 밖에서는 WebAssembly System Interface(WASI)를 이용해 플랫폼 API에 접근하면서, 독립형 Wasm 가상 머신에서 실행돼요.

Kotlin/Wasm으로 개발할 때 다음과 같은 타깃을 지정할 수 있어요.

wasmJs: 브라우저나 Node.js에서 실행하기 위한 타깃이에요.
wasmWasi: Wasmtime, WasmEdge 등 WASI를 지원하는 Wasm 환경에서 실행하기 위한 타깃이에요.

Kotlin/Wasm 타깃 구성에 대한 자세한 내용은 Gradle 프로젝트 구성 안내를 참고해 주세요.

Kotlin/Wasm 유스 케이스

여러 플랫폼에서 로직과 UI를 모두 공유하고 싶다면 Kotlin/Wasm을 사용하면 돼요.

Compose Multiplatform으로 크로스 플랫폼 앱 만들기

웹을 포함한 여러 플랫폼에서 로직과 UI를 모두 공유하고 싶다면, Kotlin/Wasm과 Compose Multiplatform이 공유 UI 레이어를 제공해요.

모든 플랫폼에서 일관된 UI 구현을 보장해요.
반응형 애니메이션 같은 향상된 렌더링과 부드러운 UI 업데이트에 Wasm을 사용해요.
최신 버전의 WebAssembly Garbage Collection(WasmGC) 제안을 지원해서, Kotlin/Wasm이 모든 주요 최신 브라우저에서 실행될 수 있게 해 줘요.

웹 접근 방식 선택하기

아래 표는 유스 케이스에 따라 권장되는 타깃을 정리한 거예요.

유스 케이스	권장 타깃	설명
비즈니스 로직은 공유하되 웹 네이티브 UI 사용	Kotlin/JS	JS와의 간단한 상호 운용과 최소 오버헤드를 제공해요.
UI와 비즈니스 로직 모두 공유	Kotlin/Wasm	Compose Multiplatform 렌더링에서 더 나은 성능을 제공해요.
공유하지 않는 UI	Kotlin/JS	Kobweb, Kilua, React 같은 HTML 기반 프레임워크로 UI를 만들 수 있고, 기존 JS 생태계와 도구를 사용해요.

적절한 타깃을 선택하는 데 도움이 필요하다면 우리 Slack 커뮤니티에 참여해 보세요. 플랫폼 차이, 성능 고려 사항, 특정 유스 케이스에 권장되는 모범 사례를 물어볼 수 있어요.

웹 타깃의 호환성 모드

웹 앱에 호환성 모드를 활성화해서 모든 브라우저에서 기본적으로 동작하도록 할 수 있어요. 이 모드에서는 최신 브라우저에는 Wasm으로 UI를 구축하고, 구형 브라우저는 JS로 폴백(fallback)해요.

호환성 모드는 js 타깃과 wasmJs 타깃을 모두 대상으로 한 크로스 컴파일을 통해 구현돼요. 웹 호환성 모드와 활성화 방법에 대한 자세한 내용을 확인해 보세요.

웹 개발 개요