Kotlin Multiplatform 프로젝트에 적합한 웹 타겟 선택
Kotlin Multiplatform (KMP)는 웹 개발을 위한 두 가지 접근 방식을 제공합니다:
- JavaScript 기반 (Kotlin/JS 컴파일러 사용)
- WebAssembly 기반 (Kotlin/Wasm 컴파일러 사용)
두 가지 옵션 모두 웹 애플리케이션에서 공유 코드를 사용할 수 있게 해줍니다. 하지만 성능, 상호 운용성, 애플리케이션 크기, 타겟 브라우저 지원 등 중요한 측면에서 차이가 있습니다. 이 가이드는 각 타겟을 언제 사용해야 하며, 적절한 선택을 통해 요구 사항을 충족하는 방법을 설명합니다.
빠른 가이드
아래 표는 사용 사례에 따른 권장 타겟을 요약한 것입니다.
| 사용 사례 | 권장 타겟 | 이유 |
|---|---|---|
| 비즈니스 로직 공유, UI는 네이티브 | JS | JavaScript와의 간단한 상호 운용성(interop)을 제공하며 오버헤드가 최소화됩니다. |
| UI와 비즈니스 로직 모두 공유 | Wasm | Compose Multiplatform을 사용한 렌더링에 더 나은 성능을 제공합니다. |
| 공유 불가능한 UI | JS | Kobweb, Kilua, 또는 React와 같은 HTML 기반 프레임워크로 UI를 구축할 수 있으며, 기존 JS 생태계와 툴링을 활용합니다. |
Kotlin/JS를 선택해야 하는 경우
Kotlin/JS는 다음 목표에 대한 훌륭한 솔루션을 제공합니다:
JavaScript/TypeScript 코드베이스와 비즈니스 로직 공유
Kotlin 코드 조각(도메인 또는 데이터 로직 등)을 네이티브 JavaScript/TypeScript 기반 애플리케이션과 공유하고 싶다면, JS 타겟은 다음을 제공합니다:
- JavaScript/TypeScript와의 간단한 상호 운용성(interop).
- 상호 운용성(interoperability)에서 최소한의 오버헤드(예: 불필요한 데이터 복사 없음). 이는 코드가 JS 기반 워크플로에 원활하게 통합되도록 돕습니다.
코드를 공유하지 않고 Kotlin으로 웹 앱 빌드
Kotlin을 사용하여 전체 웹 앱을 구축하려는 팀에게, 다른 플랫폼(iOS, Android 또는 데스크톱)과 코드를 공유할 의도 없이 개발하는 경우, HTML 기반 솔루션이 더 나은 선택일 수 있습니다. 이는 SEO 및 접근성을 향상시키고, 기본적으로 원활한 브라우저 통합(예: "페이지에서 찾기" 기능 또는 페이지 번역)을 제공합니다. 이 경우 Kotlin/JS는 몇 가지 옵션을 제공합니다. 다음을 할 수 있습니다:
- Kobweb 또는 Kilua와 같은 Compose HTML 기반 프레임워크를 사용하여, 익숙한 Compose Multiplatform 아키텍처를 사용하여 UI를 구축합니다.
- Kotlin 래퍼가 있는 React 기반 솔루션을 활용하여 Kotlin으로 React 컴포넌트를 구축합니다.
Kotlin/Wasm을 선택해야 하는 경우
Compose Multiplatform으로 크로스 플랫폼 앱 빌드
웹을 포함한 여러 플랫폼에서 로직과 UI를 모두 공유하고 싶다면, Compose Multiplatform과 결합된 Kotlin/Wasm이 적합합니다:
- UI 경험이 플랫폼 전반에 걸쳐 더 일관됩니다.
- Wasm을 활용하여 렌더링을 개선하고 부드럽고 반응성이 뛰어난 애니메이션을 구현할 수 있습니다.
- WasmGC에 대한 브라우저 지원이 성숙해져, Kotlin/Wasm이 모든 주요 최신 브라우저에서 거의 네이티브에 가까운 성능으로 실행될 수 있도록 합니다.
이전 브라우저 버전 지원 요구 사항이 있는 프로젝트의 경우, Compose Multiplatform의 호환성 모드를 사용할 수 있습니다: 최신 브라우저에서는 Wasm으로 UI를 빌드하되, 이전 브라우저에서는 JS로 정상적으로 전환합니다. 프로젝트에서 Wasm 및 JS 타겟 간에 공통 로직을 공유할 수도 있습니다.
어떤 경로를 선택해야 할지 아직 확신이 없으신가요? Slack 커뮤니티에 참여하여 주요 차이점, 성능 고려 사항, 그리고 올바른 타겟 선택을 위한 모범 사례에 대해 문의하세요.