Jetpack Compose와 함께 Android 스튜디오 사용

Jetpack Compose로 최적의 환경에서 개발하려면 Android 스튜디오 Arctic Fox를 다운로드해야 합니다. Jetpack Compose와 함께 Android 스튜디오를 사용하여 앱을 개발할 때 Compose UI를 즉시 미리 볼 수 있는 기능 및 새 프로젝트 템플릿과 같은 스마트 편집기 기능을 활용할 수 있기 때문입니다.

Android 스튜디오 Arctic Fox 다운로드

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 창에서 다음을 완료합니다.
1. 평소처럼 Name, Package name 및 Save location을 설정합니다.
2. Language 드롭다운 메뉴에서는 Kotlin 옵션만 사용할 수 있습니다. Jetpack Compose는 Kotlin으로 작성된 클래스에서만 작동하기 때문입니다.
3. Minimum API level 드롭다운 메뉴에서 API 수준 21 이상을 선택합니다.
Finish를 클릭합니다.
Gradle 구성에 설명된 대로 프로젝트의 build.gradle 파일이 올바르게 구성되었는지 확인합니다.

이제 Jetpack Compose를 사용하여 앱 개발을 시작할 준비가 되었습니다. 시작에 관해 도움을 받고 도구 키트로 할 수 있는 작업을 알아보려면 Jetpack Compose 튜토리얼을 참조하세요.

Jetpack Compose 도구 키트 종속 항목 추가

아래와 같이 앱의 build.gradle 파일에 Jetpack Compose 도구 키트 종속 항목을 포함하세요.

Groovy

dependencies {
    implementation 'androidx.compose.ui:ui:1.0.1'
    // Tooling support (Previews, etc.)
    implementation 'androidx.compose.ui:ui-tooling:1.0.1'
    // Foundation (Border, Background, Box, Image, Scroll, shapes, animations, etc.)
    implementation 'androidx.compose.foundation:foundation:1.0.1'
    // Material Design
    implementation 'androidx.compose.material:material:1.0.1'
    // Material design icons
    implementation 'androidx.compose.material:material-icons-core:1.0.1'
    implementation 'androidx.compose.material:material-icons-extended:1.0.1'
    // Integration with activities
    implementation 'androidx.activity:activity-compose:1.3.1'
    // Integration with ViewModels
    implementation 'androidx.lifecycle:lifecycle-viewmodel-compose:1.0.0-alpha07'
    // Integration with observables
    implementation 'androidx.compose.runtime:runtime-livedata:1.0.1'
    implementation 'androidx.compose.runtime:runtime-rxjava2:1.0.1'

    // UI Tests
    androidTestImplementation 'androidx.compose.ui:ui-test-junit4:1.0.1'
}

Kotlin

dependencies {
    implementation("androidx.compose.ui:ui:1.0.1")
    // Tooling support (Previews, etc.)
    implementation("androidx.compose.ui:ui-tooling:1.0.1")
    // Foundation (Border, Background, Box, Image, Scroll, shapes, animations, etc.)
    implementation("androidx.compose.foundation:foundation:1.0.1")
    // Material Design
    implementation("androidx.compose.material:material:1.0.1")
    // Material design icons
    implementation("androidx.compose.material:material-icons-core:1.0.1")
    implementation("androidx.compose.material:material-icons-extended:1.0.1")
    // Integration with observables
    implementation("androidx.compose.runtime:runtime-livedata:1.0.1")
    implementation("androidx.compose.runtime:runtime-rxjava2:1.0.1")

    // UI Tests
    androidTestImplementation("androidx.compose.ui:ui-test-junit4:1.0.1")
}

기존 프로젝트에 Jetpack Compose 추가

기존 프로젝트에서 Jetpack Compose를 사용하려면 필요한 설정 및 종속 항목으로 프로젝트를 구성해야 합니다. 자세한 내용은 앱에 Jetpack Compose 추가를 참고하세요.