Compose Multiplatform

Compose Multiplatform

Google의 최신 툴킷을 기반으로 하고 JetBrains에서 제공하는 Kotlin용 빠른 반응형 데스크톱 및 웹 UI 프레임워크

Compose Multiplatform을 사용하면 데스크톱 및 웹 애플리케이션의 UI 개발 작업이 간단해지고 빨라지며 Android와 데스크톱, 웹 간에 광범위한 UI 코드 공유가 가능합니다.

시작하기

데스크톱 앱

Compose for Desktop은 Kotlin으로 데스크톱 사용자 인터페이스 제작 시 선언적이고 반응적인 접근방식을 제공합니다. 구성 가능한 기능을 결합하여 사용자 인터페이스를 빌드하고, IDE 및 빌드 시스템에서 완벽한 도구 지원을 누리세요. XML이나 템플릿 언어는 필요 없습니다.

Compose for Desktop은 JVM을 대상으로 하며 강력한 네이티브 Skia 그래픽 라이브러리를 활용하여 모든 주요 데스크톱 플랫폼(macOS, Windows 및 Linux)에서 고성능 하드웨어 가속 UI 렌더링을 지원합니다. 클릭 한 번으로 네이티브 애플리케이션 배포를 생성할 수 있습니다.

Windows

Windows

macOS

macOS

Linux

Linux

웹 앱

Compose for Web에서는 Jetpack Compose의 개념과 API를 사용하여 Kotlin으로 웹용 반응형 사용자 인터페이스를 구축함으로써 애플리케이션의 상태, 동작 및 논리를 표현할 수 있습니다.

Compose for Web은 Kotlin 코드에서 사용자 인터페이스를 선언할 수 있는 여러 가지 방법을 제공하므로 선언적 DOM API로 웹 사이트 레이아웃을 완벽하게 제어할 수 있습니다.

웹

Compose for Desktop 기능

메뉴, 키보드 단축키, 창 조작, 알림 관리 등을 위한 데스크톱 확장 프로그램

Skia로 하드웨어 가속 렌더링

다양한 언어를 위한 강력한 텍스트 렌더링 및 레이아웃

탁월한 AWT 및 Swing 상호 운용성

Kotlin Multiplatform을 통해 Jetpack Compose Android 애플리케이션과 코드 공유

UI 요소 수준의 Android Compose 호환성

독립 실행형 애플리케이션 번들 제작 지원

모든 기능 보기

Compose for Web 기능

Android/데스크톱에서 사용되는 것과 동일한 반응 엔진으로 공통 코드베이스를 사용 가능.

Kotlin/JS용 풍부한 UI 생성을 위한 프레임워크.

일반적인 모든 프런트엔드 개발 시나리오를 포괄하는 편리한 Kotlin DOM DSL.

포괄적인 CSS-in-Kotlin/JS API.

모든 기능 보기

Compose for Desktop 시작하기

튜토리얼을 따라가며 Compose for Desktop에서 제공하는 기능을 알아보세요.

튜토리얼 시작하기

이 튜토리얼에서는 Compose UI 프레임워크를 사용하여 간단한 데스크톱 UI 애플리케이션을 제작하는 방법을 알아봅니다.

튜토리얼 보기

이미지 뷰어 애플리케이션

Compose for Desktop 및 Compose for Android를 사용하여 원격 서버의 이미지를 표시하는 이미지 갤러리의 예시입니다.

앱 살펴보기

이슈 브라우저 예시

Compose for Desktop으로 작성된 GitHub 이슈 뷰어

앱 살펴보기

GitHub에 대해 자세히 알아보기

Compose for Web 시작하기

튜토리얼을 따라가며 Compose for Web에서 제공하는 기능을 알아보세요.

튜토리얼 시작하기

이 튜토리얼에서는 Compose for Web을 사용하여 첫 웹 UI 애플리케이션을 제작하는 방법을 알아봅니다.

튜토리얼 보기

랜딩 페이지 예시

Composable DOM API 및 Stylesheet DSL을 사용하여 구축된 랜딩 페이지의 예시입니다.

소스 코드 탐색하기

Falling Balls 앱 예시

이 예는 Compose for Desktop과 Compose for Web 사이에서 사용자 인터페이스 코드를 공유하는 다중 플랫폼 위젯의 사용을 보여줍니다.

소스 코드 탐색하기

플레이

GitHub에 대해 자세히 알아보기

코드 샘플

Pointer Events

fun main() = singleWindowApplication {

var isActivated by remember { mutableStateOf(false) }

var isHovered by remember { mutableStateOf(false) }

val size by animateDpAsState(if (isActivated) 300.dp else 200.dp)

Box(

Modifier

.size(size)

.background(if (isHovered) Color.Red else Color.Blue)

.onPointerEvent(PointerEventType.Enter) { isHovered = true }

.onPointerEvent(PointerEventType.Exit) { isHovered = false }

.onPointerEvent(PointerEventType.Press) {

if (it.buttons.isPrimaryPressed) {

isActivated = true

} else if (it.buttons.isSecondaryPressed) {

isActivated = false

}

}

)

}

Compose Multiplatform의 데스크톱 부분에 관심이 있다면 Kotlin Slack의 #compose-desktop 채널에, Compose Multiplatform의 웹 부분에 관심이 있다면 #compose-web에, 일반 Compose 및 Jetpack Compose 토론에 참여하려면 #compose 채널에 가입하세요.