Jetpack Compose는 네이티브 Android UI를 빌드하기 위한 최신 도구 키트입니다. Jetpack Compose는 선언적 프로그래밍 모델을 기반으로 하므로 개발자는 UI의 모양을 간단히 설명하기만 하면 되며 나머지는 Compose에서 처리합니다. 즉, 앱 상태가 변경되면 UI가 자동으로 업데이트됩니다. 또한 Kotlin을 기반으로 하기 때문에 자바 프로그래밍 언어와 완벽하게 상호 운용되며 모든 Android 및 Jetpack API에 직접 액세스할 수 있습니다. 그리고 기존 UI 도구 키트와 호환되므로 기본 뷰 및 새로운 뷰를 혼합하고 매칭할 수 있으며 처음부터 머티리얼 및 애니메이션으로 설계되었습니다.
Jetpack Compose로 최적의 환경에서 개발하려면 최신 Canary 버전의 Android 스튜디오 미리보기를 다운로드해야 합니다. Jetpack Compose와 함께 Android 스튜디오를 사용하여 앱을 개발할 때 Compose UI를 즉시 미리 볼 수 있는 기능 및 새 프로젝트 템플릿과 같은 스마트 편집기 기능을 활용할 수 있기 때문입니다.
Android 스튜디오를 설치한 후 아래 안내에 따라 Jetpack Compose 샘플 앱을 사용해 보거나 새 Jetpack Compose 앱 프로젝트를 만들거나 기존 앱 프로젝트에 Jetpack Compose 지원을 추가하세요.
Jetpack Compose 샘플 앱 사용해 보기
최신 버전의 Android 스튜디오를 실행한 후 Jetpack Compose의 기능을 실험하는 가장 빠른 방법은 GitHub에서 호스팅되는 Jetpack Compose 샘플 앱을 사용해 보는 것입니다. Android 스튜디오에서 샘플 앱 프로젝트를 가져오려면 다음 단계에 따라 진행하세요.
- Welcome to Android Studio 창에 있다면 Import an Android code sample을 선택합니다. 이미 Android 스튜디오 프로젝트가 열려 있다면 메뉴 바에서 File > New > Import Sample을 선택합니다.
- Browse Samples 마법사 상단 근처의 검색창에 'compose'를 입력합니다.
- 검색결과에서 Jetpack Compose 샘플 앱 중 하나를 선택하고 Next를 클릭합니다.
- Application name 및 Project location을 변경하거나 기본값을 유지합니다.
- Finish를 클릭합니다.
Android 스튜디오는 지정된 경로로 샘플 앱을 다운로드하고 프로젝트를 엽니다. 그런 다음 각 예의 MainActivity.kt
를 검사하여 IDE 내 미리보기에서 크로스페이드 애니메이션, 맞춤 구성요소, 타이포그래피 사용, 밝은 색상과 어두운 색상 표시와 같은 Jetpack Compose API를 확인할 수 있습니다.
Jetpack Compose 지원으로 새로운 앱 만들기
기본적으로 Jetpack Compose 지원이 포함된 새 프로젝트를 시작하려고 할 때 Android 스튜디오에는 시작하는 데 도움이 되는 새 프로젝트 템플릿이 포함되어 있습니다. Jetpack Compose가 포함된 새 프로젝트를 생성하려면 다음 단계에 따라 진행하세요.
- Welcome to Android Studio 창에 있다면 Start a new Android Studio project를 클릭합니다. 이미 Android 스튜디오 프로젝트가 열려 있다면 메뉴 바에서 File > New > New Project를 선택합니다.
- Select a Project Template 창에서 Empty Compose Activity를 선택하고 Next를 클릭합니다.
- Configure your project 창에서 다음을 완료합니다.
- 평소처럼 Name, Package name 및 Save location을 설정합니다.
- Language 드롭다운 메뉴에서는 Kotlin 옵션만 사용할 수 있습니다. Jetpack Compose는 Kotlin으로 작성된 클래스에서만 작동하기 때문입니다.
- Minimum API level 드롭다운 메뉴에서 API 수준 21 이상을 선택합니다.
- Finish를 클릭합니다.
- Gradle 구성에 설명된 대로 프로젝트의
build.gradle
파일이 올바르게 구성되었는지 확인합니다.
이제 Jetpack Compose를 사용하여 앱 개발을 시작할 준비가 되었습니다. 시작에 관해 도움을 받고 도구 키트로 할 수 있는 작업을 알아보려면 Jetpack Compose 가이드를 참조하세요.
기존 프로젝트에 Jetpack Compose 추가
기존 프로젝트에서 Jetpack Compose를 사용하려면 필요한 설정 및 종속 항목으로 프로젝트를 구성해야 합니다.
Kotlin 구성
프로젝트에서 Kotlin 1.4.21 이상을 사용하는지 확인합니다.
plugins {
id 'org.jetbrains.kotlin.android' version '1.4.21'
}
Gradle 구성
아래와 같이 앱의 최소 API 수준을 21 이상으로 설정하고 앱의 build.gradle
파일에서 Jetpack Compose를 사용 설정해야 합니다. Kotlin 컴파일러 플러그인의 버전도 설정합니다.
android {
defaultConfig {
...
minSdkVersion 21
}
buildFeatures {
// Enables Jetpack Compose for this module
compose true
}
...
// Set both the Java and Kotlin compilers to target Java 8.
compileOptions {
sourceCompatibility JavaVersion.VERSION_1_8
targetCompatibility JavaVersion.VERSION_1_8
}
kotlinOptions {
jvmTarget = "1.8"
useIR = true
}
composeOptions {
kotlinCompilerVersion '1.4.21'
kotlinCompilerExtensionVersion '1.0.0-alpha10'
}
}
Jetpack Compose 도구 키트 종속 항목 추가
아래와 같이 앱의 build.gradle
파일에 Jetpack Compose 도구 키트 종속 항목을 포함하세요.
dependencies {
implementation 'androidx.compose.ui:ui:1.0.0-alpha10'
// Tooling support (Previews, etc.)
implementation 'androidx.compose.ui:ui-tooling:1.0.0-alpha10'
// Foundation (Border, Background, Box, Image, Scroll, shapes, animations, etc.)
implementation 'androidx.compose.foundation:foundation:1.0.0-alpha10'
// Material Design
implementation 'androidx.compose.material:material:1.0.0-alpha10'
// Material design icons
implementation 'androidx.compose.material:material-icons-core:1.0.0-alpha10'
implementation 'androidx.compose.material:material-icons-extended:1.0.0-alpha10'
// Integration with observables
implementation 'androidx.compose.runtime:runtime-livedata:1.0.0-alpha10'
implementation 'androidx.compose.runtime:runtime-rxjava2:1.0.0-alpha10'
// UI Tests
androidTestImplementation 'androidx.compose.ui:ui-test-junit4:1.0.0-alpha10'
}