빠른 시작

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 Compose Activity를 선택하고 Next를 클릭합니다.
  3. Configure your project 창에서 다음을 완료합니다.
    1. 평소처럼 Name, Package nameSave location을 설정합니다. Language 드롭다운 메뉴에서는 Kotlin 옵션만 사용할 수 있습니다. Jetpack Compose는 Kotlin으로 작성된 클래스에서만 작동하기 때문입니다.
    2. Minimum API level 드롭다운 메뉴에서 API 수준 21 이상을 선택합니다.
  4. Finish를 클릭합니다.

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

기존 앱에 Compose 설정

Compose 사용을 시작하려면 먼저 몇 가지 빌드 구성을 프로젝트에 추가해야 합니다. 앱의 build.gradle 파일에 다음 정의를 추가하세요.

Groovy

android {
    buildFeatures {
        compose true
    }

    composeOptions {
        kotlinCompilerExtensionVersion = "1.3.2"
    }
}

Kotlin

android {
    buildFeatures {
        compose = true
    }

    composeOptions {
        kotlinCompilerExtensionVersion = "1.3.2"
    }
}

참고사항:

  • Android BuildFeatures 블록 내에서 compose 플래그를 true로 설정하면 Compose 기능이 사용 설정됩니다.
  • ComposeOptions 블록에 정의된 Kotlin 컴파일러 확장 프로그램 버전 관리는 Kotlin 버전 관리에 연결됩니다. 호환성 지도를 참고하여 프로젝트의 Kotlin 버전과 일치하는 버전의 라이브러리를 선택해야 합니다.

또한 Compose BOM과 필요한 Compose 라이브러리 종속 항목의 하위 집합을 아래 블록의 종속 항목에 추가합니다.

Groovy

dependencies {

    def composeBom = platform('androidx.compose:compose-bom:2022.10.00')
    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:material3-window-size-class'

    // Optional - Integration with activities
    implementation 'androidx.activity:activity-compose:1.5.1'
    // Optional - Integration with ViewModels
    implementation 'androidx.lifecycle:lifecycle-viewmodel-compose:2.5.1'
    // 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:2022.10.00")
    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:material3-window-size-class")

    // Optional - Integration with activities
    implementation("androidx.activity:activity-compose:1.5.1")
    // Optional - Integration with ViewModels
    implementation("androidx.lifecycle:lifecycle-viewmodel-compose:2.5.1")
    // 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 nameProject location을 변경하거나 기본값을 유지합니다.
  5. Finish를 클릭합니다.

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

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

재료명세서 사용

Compose 재료명세서(BOM)를 사용하면 BOM 버전만 지정하여 모든 Compose 라이브러리 버전을 관리할 수 있습니다. BOM 자체에는 서로 잘 작동하는 방식으로 다양한 Compose 라이브러리의 안정화 버전에 대한 링크가 있습니다. 앱에서 BOM을 사용할 때는 Compose 라이브러리 종속 항목 자체에 버전을 추가할 필요가 없습니다. BOM 버전을 업데이트하면 사용 중인 모든 라이브러리가 새 버전으로 자동 업데이트됩니다.

특정 BOM 버전에 매핑되는 Compose 라이브러리 버전을 알아보려면 BOM과 라이브러리 버전 매핑을 확인하세요.

Compose 컴파일러 라이브러리가 BOM에 포함되지 않는 이유는 무엇인가요?

Compose Kotlin 컴파일러 확장 프로그램(androidx.compose.compiler)은 Compose 라이브러리 버전에 연결되지 않습니다. 대신 Kotlin 컴파일러 플러그인 버전에 연결되고 Compose의 나머지 부분과 별도의 주기로 출시되므로 Kotlin 버전과 호환되는 버전을 사용해야 합니다. Compose와 Kotlin 호환성 지도에서 플러그인의 각 버전에 매핑되는 Kotlin 버전을 확인할 수 있습니다.

BOM에 지정된 것과 다른 라이브러리 버전을 사용하려면 어떻게 해야 하나요?

build.gradle 종속 항목 섹션에서 BOM 플랫폼 가져오기를 유지합니다. 라이브러리 종속 항목 가져오기에서 원하는 버전을 지정합니다. 예를 들어 다음은 BOM에 지정된 버전과 관계없이 Material 3의 알파 버전을 사용하려는 경우 종속 항목을 선언하는 방법입니다.

dependencies {
    // Import the Compose BOM
    implementation platform('androidx.compose:compose-bom:2022.10.00')

    // Override Material Design 3 library version with a pre-release version
    implementation 'androidx.compose.material3:material3:1.1.0-alpha01'

    // Import other Compose libraries without version numbers
    // ..
    implementation 'androidx.compose.foundation:foundation'
}

BOM이 모든 Compose 라이브러리를 앱에 자동으로 추가하나요?

아니요. 실제로 Compose 라이브러리를 앱에 추가하고 사용하려면 모듈(앱 수준) Gradle 파일(일반적으로 app/build.gradle)에서 각 라이브러리를 별도의 종속 항목 줄로 선언해야 합니다.

BOM을 사용하면 앱의 모든 Compose 라이브러리 버전이 호환되지만 BOM은 이러한 Compose 라이브러리를 실제로 앱에 추가하지는 않습니다.

앞으로 Compose 라이브러리는 독립적으로 버전이 지정되므로 버전 번호가 자체 속도로 커지기 시작합니다. 각 라이브러리의 최신 안정화 버전은 테스트를 거쳐 함께 잘 작동하도록 보장됩니다. 그러나 각 라이브러리의 최신 안정화 버전은 찾기가 어려울 수 있으며 BOM을 사용하면 이러한 최신 버전을 자동으로 사용할 수 있습니다.

BOM을 사용해야 하나요?

아니요. 각 종속 항목 버전을 수동으로 추가해도 됩니다. 하지만 BOM을 사용하는 것이 좋습니다. 보다 쉽게 모든 최신 안정화 버전을 동시에 사용할 수 있기 때문입니다.

BOM은 버전 카탈로그와 함께 작동하나요?

예. 버전 카탈로그에 BOM 자체를 포함하고 다른 Compose 라이브러리 버전을 생략할 수 있습니다.

[libraries]
androidx-compose-bom = { group = "androidx.compose", name = "compose-bom", version.ref = "androidxComposeBom" }
androidx-compose-foundation = { group = "androidx.compose.foundation", name = "foundation" }

모듈의 build.gradle에서 BOM을 가져와야 합니다.

dependencies {
    val composeBom = platform(libs.androidx.compose.bom)
    implementation(composeBom)
    androidTestImplementation(composeBom)

    // import Compose dependencies as usual
}

BOM 관련 문제를 신고하거나 의견을 보내려면 어떻게 해야 하나요?

Issue Tracker에서 문제를 신고할 수 있습니다.

BOM과 라이브러리 버전 매핑

라이브러리 그룹 2022.10.00의 버전 2022.11.00의 버전
androidx.compose.animation:animation 1.3.0 1.3.1
androidx.compose.animation:animation-core 1.3.0 1.3.1
androidx.compose.animation:animation-graphics 1.3.0 1.3.1
androidx.compose.foundation:foundation 1.3.0 1.3.1
androidx.compose.foundation:foundation-layout 1.3.0 1.3.1
androidx.compose.material:material 1.3.0 1.3.1
androidx.compose.material:material-icons-core 1.3.0 1.3.1
androidx.compose.material:material-icons-extended 1.3.0 1.3.1
androidx.compose.material:material-ripple 1.3.0 1.3.1
androidx.compose.material3:material3 1.0.0 1.0.1
androidx.compose.material3:material3-window-size-class 1.0.0 1.0.1
androidx.compose.runtime:runtime 1.3.0 1.3.1
androidx.compose.runtime:runtime-livedata 1.3.0 1.3.1
androidx.compose.runtime:runtime-rxjava2 1.3.0 1.3.1
androidx.compose.runtime:runtime-rxjava3 1.3.0 1.3.1
androidx.compose.runtime:runtime-saveable 1.3.0 1.3.1
androidx.compose.ui:ui 1.3.0 1.3.1
androidx.compose.ui:ui-geometry 1.3.0 1.3.1
androidx.compose.ui:ui-graphics 1.3.0 1.3.1
androidx.compose.ui:ui-test 1.3.0 1.3.1
androidx.compose.ui:ui-test-junit4 1.3.0 1.3.1
androidx.compose.ui:ui-test-manifest 1.3.0 1.3.1
androidx.compose.ui:ui-text 1.3.0 1.3.1
androidx.compose.ui:ui-text-google-fonts 1.3.0 1.3.1
androidx.compose.ui:ui-tooling 1.3.0 1.3.1
androidx.compose.ui:ui-tooling-data 1.3.0 1.3.1
androidx.compose.ui:ui-tooling-preview 1.3.0 1.3.1
androidx.compose.ui:ui-unit 1.3.0 1.3.1
androidx.compose.ui:ui-util 1.3.0 1.3.1
androidx.compose.ui:ui-viewbinding 1.3.0 1.3.1