빠른 시작

Compose로 최적의 환경에서 개발하려면 Android 스튜디오를 다운로드하고 설치하세요. 새 프로젝트 템플릿, Compose UI와 애니메이션을 즉시 미리 볼 수 있는 기능 등 다양한 스마트 편집기 기능이 포함되어 있습니다.

Android 스튜디오 다운로드

새 Compose 앱 프로젝트를 만들거나 기존 앱 프로젝트에 Compose를 설정하거나 Compose로 작성된 샘플 앱을 가져오려면 아래 안내를 따르세요.

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

Android 스튜디오에는 Compose 지원이 기본적으로 포함된 새 프로젝트를 시작할 때 도움이 되는 다양한 프로젝트 템플릿이 포함되어 있습니다. 새 프로젝트의 Compose를 올바르게 설정하려면 다음 단계를 따르세요.

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

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

기존 앱에 Compose 설정

먼저 Compose 컴파일러 Gradle 플러그인을 사용하여 Compose 컴파일러를 구성합니다.

그런 다음 앱의 build.gradle 파일에 다음 정의를 추가합니다.

Groovy

android {
    buildFeatures {
        compose true
    }
}

Kotlin

android {
    buildFeatures {
        compose = true
    }
}

Android BuildFeatures 블록 내에서 compose 플래그를 true로 설정하면 Android 스튜디오에서 Compose 기능이 사용 설정됩니다.

마지막으로 Compose BOM과 필요한 Compose 라이브러리 종속 항목의 하위 집합을 다음 블록의 종속 항목에 추가합니다.

Groovy

dependencies {

    def composeBom = platform('androidx.compose:compose-bom:2024.10.01')
    implementation composeBom
    androidTestImplementation composeBom

    // Choose one of the following:
    // Material Design 3
    implementation 'androidx.compose.material3:material3'
    // or Material Design 2
    implementation 'androidx.compose.material:material'
    // or skip Material Design and build directly on top of foundational components
    implementation 'androidx.compose.foundation:foundation'
    // or only import the main APIs for the underlying toolkit systems,
    // such as input and measurement/layout
    implementation 'androidx.compose.ui:ui'

    // Android Studio Preview support
    implementation 'androidx.compose.ui:ui-tooling-preview'
    debugImplementation 'androidx.compose.ui:ui-tooling'

    // UI Tests
    androidTestImplementation 'androidx.compose.ui:ui-test-junit4'
    debugImplementation 'androidx.compose.ui:ui-test-manifest'

    // Optional - Included automatically by material, only add when you need
    // the icons but not the material library (e.g. when using Material3 or a
    // custom design system based on Foundation)
    implementation 'androidx.compose.material:material-icons-core'
    // Optional - Add full set of material icons
    implementation 'androidx.compose.material:material-icons-extended'
    // Optional - Add window size utils
    implementation 'androidx.compose.material3.adaptive:adaptive'

    // Optional - Integration with activities
    implementation 'androidx.activity:activity-compose:1.9.2'
    // Optional - Integration with ViewModels
    implementation 'androidx.lifecycle:lifecycle-viewmodel-compose:2.8.5'
    // Optional - Integration with LiveData
    implementation 'androidx.compose.runtime:runtime-livedata'
    // Optional - Integration with RxJava
    implementation 'androidx.compose.runtime:runtime-rxjava2'

}

Kotlin

dependencies {

    val composeBom = platform("androidx.compose:compose-bom:2024.10.01")
    implementation(composeBom)
    androidTestImplementation(composeBom)

    // Choose one of the following:
    // Material Design 3
    implementation("androidx.compose.material3:material3")
    // or Material Design 2
    implementation("androidx.compose.material:material")
    // or skip Material Design and build directly on top of foundational components
    implementation("androidx.compose.foundation:foundation")
    // or only import the main APIs for the underlying toolkit systems,
    // such as input and measurement/layout
    implementation("androidx.compose.ui:ui")

    // Android Studio Preview support
    implementation("androidx.compose.ui:ui-tooling-preview")
    debugImplementation("androidx.compose.ui:ui-tooling")

    // UI Tests
    androidTestImplementation("androidx.compose.ui:ui-test-junit4")
    debugImplementation("androidx.compose.ui:ui-test-manifest")

    // Optional - Included automatically by material, only add when you need
    // the icons but not the material library (e.g. when using Material3 or a
    // custom design system based on Foundation)
    implementation("androidx.compose.material:material-icons-core")
    // Optional - Add full set of material icons
    implementation("androidx.compose.material:material-icons-extended")
    // Optional - Add window size utils
    implementation("androidx.compose.material3.adaptive:adaptive")

    // Optional - Integration with activities
    implementation("androidx.activity:activity-compose:1.9.2")
    // Optional - Integration with ViewModels
    implementation("androidx.lifecycle:lifecycle-viewmodel-compose:2.8.5")
    // Optional - Integration with LiveData
    implementation("androidx.compose.runtime:runtime-livedata")
    // Optional - Integration with RxJava
    implementation("androidx.compose.runtime:runtime-rxjava2")

}

Jetpack Compose 샘플 앱 사용해 보기

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를 확인할 수 있습니다.

Wear OS용 Jetpack Compose를 사용하려면 Wear OS에 Jetpack Compose 설정을 참고하세요.