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

Jetpack Compose는 네이티브 Android UI를 빌드하기 위한 최신 도구 키트입니다. Jetpack Compose는 선언적 프로그래밍 모델을 기반으로 하므로 개발자는 UI의 모양을 간단히 설명하기만 하면 되며 나머지는 Compose에서 처리합니다. 즉, 앱 상태가 변경되면 UI가 자동으로 업데이트됩니다. 또한 Kotlin을 기반으로 하기 때문에 자바 프로그래밍 언어와 완벽하게 상호 운용되며 모든 Android 및 Jetpack API에 직접 액세스할 수 있습니다. 그리고 기존 UI 도구 키트와 호환되므로 기본 뷰 및 새로운 뷰를 혼합하고 매칭할 수 있으며 처음부터 머티리얼 및 애니메이션으로 설계되었습니다.

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

Android 스튜디오 Canary 다운로드

Android 스튜디오를 설치한 후 아래 안내에 따라 Jetpack Compose 샘플 앱을 사용해 보거나 새 Jetpack Compose 앱 프로젝트를 만들거나 기존 앱 프로젝트에 Jetpack Compose 지원을 추가하세요.

Jetpack Compose 샘플 앱 사용해 보기

최신 버전의 Android 스튜디오를 실행한 후 Jetpack Compose의 기능을 실험하는 가장 빠른 방법은 GitHub에서 호스팅되는 Jetpack Compose 샘플 앱을 사용해 보는 것입니다. Android 스튜디오에서 샘플 앱 프로젝트를 가져오려면 다음 단계에 따라 진행하세요.

  1. Welcome to Android Studio 창에 있다면 Import an Android code sample을 선택합니다. 이미 Android 스튜디오 프로젝트가 열려 있다면 메뉴 바에서 File > New > Import Sample을 선택합니다.
  2. Browse Samples 마법사 상단 근처의 검색창에 'compose'를 입력합니다.
  3. 검색결과에서 Jetpack Compose 샘플 앱 중 하나를 선택하고 Next를 클릭합니다.
  4. Application name 및 Project location을 변경하거나 기본값을 유지합니다.
  5. Finish를 클릭합니다.

Android 스튜디오는 지정된 경로로 샘플 앱을 다운로드하고 프로젝트를 엽니다. 그런 다음 각 예의 MainActivity.kt를 검사하여 IDE 내 미리보기에서 크로스페이드 애니메이션, 맞춤 구성요소, 타이포그래피 사용, 밝은 색상과 어두운 색상 표시와 같은 Jetpack Compose API를 확인할 수 있습니다.

Jetpack Compose 지원으로 새로운 앱 만들기

기본적으로 Jetpack Compose 지원이 포함된 새 프로젝트를 시작하려고 할 때 Android 스튜디오에는 시작하는 데 도움이 되는 새 프로젝트 템플릿이 포함되어 있습니다. Jetpack Compose가 포함된 새 프로젝트를 생성하려면 다음 단계에 따라 진행하세요.

  1. Welcome to Android Studio 창에 있다면 Start a new Android Studio project를 클릭합니다. 이미 Android 스튜디오 프로젝트가 열려 있다면 메뉴 바에서 File > New > New Project를 선택합니다.
  2. Select a Project Template 창에서 Empty Compose Activity를 선택하고 Next를 클릭합니다.
  3. Configure your project 창에서 다음을 완료합니다.
    1. 평소처럼 Name, Package name 및 Save location을 설정합니다.
    2. Language 드롭다운 메뉴에서는 Kotlin 옵션만 사용할 수 있습니다. Jetpack Compose는 Kotlin으로 작성된 클래스에서만 작동하기 때문입니다.
    3. Minimum API level 드롭다운 메뉴에서 API 수준 21 이상을 선택합니다.
  4. Finish를 클릭합니다.
  5. 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'
}