Android TV에서 Jetpack Compose 사용

TV용 Compose는 Android TV 사용자 인터페이스를 빌드하는 데 권장되는 접근 방식입니다. 이를 통해 TV 앱을 위한 Android Jetpack Compose의 모든 이점을 활용할 수 있으므로 아름답고 기능적인 앱 UI를 훨씬 더 쉽게 빌드할 수 있습니다. TV용 Compose를 사용할 때 얻을 수 있는 구체적인 이점은 다음과 같습니다.

  • 유연성: Compose를 사용하여 간단한 레이아웃부터 복잡한 애니메이션에 이르기까지 모든 유형의 UI를 만들 수 있습니다. 구성요소는 즉시 사용할 수 있지만 앱의 요구사항에 맞게 맞춤설정하고 스타일을 지정할 수도 있습니다.
  • 단순화 및 가속화된 개발: Compose는 기존 코드와 호환되며 개발자가 더 적은 코드로 앱을 더 효율적으로 빌드할 수 있습니다.
  • 직관적: Compose는 UI를 변경하고 코드를 디버그, 이해, 검토할 수 있는 선언적 문법을 사용합니다.

Jetpack Compose 도구 키트를 사용하는 데 익숙하지 않다면 Compose 개발자 과정을 확인하세요. 모바일 Compose의 여러 개발 원칙이 TV에도 적용됩니다. 선언적 UI 프레임워크의 일반적인 이점에 관한 자세한 내용은 Compose를 사용해야 하는 이유를 참고하세요. 자세한 내용은 GitHub의 TV용 Compose 샘플 저장소도 참고하세요.

호환성

TV용 Compose는 API 수준 21 이상의 Android TV에서 작동합니다. TV용 Compose 버전 1.0을 사용하려면 androidx.compose 라이브러리 버전 1.3.0과 Kotlin 1.7.10이 필요합니다.

설정

Android TV에서 Jetpack Compose를 사용하는 방법은 다른 Android 프로젝트에 Jetpack Compose를 사용하는 방법과 비슷합니다. 주요 차이점은 TV용 Compose는 TV에 최적화된 구성요소를 제공하고 TV에 맞춤설정된 사용자 인터페이스를 더 쉽게 만들 수 있는 라이브러리를 추가한다는 것입니다. 이러한 구성요소는 androidx.tv.material3.Button, androidx.compose.material3.Button 등 TV가 아닌 구성요소와 동일한 이름을 공유하는 경우도 있습니다.

Jetpack Compose 도구 키트 종속 항목

TV용 Compose를 사용하려면 다음과 같이 앱의 build.gradle 파일에 Jetpack Compose 도구 키트 종속 항목을 포함해야 합니다.

Kotlin

dependencies {
   val composeBom = platform("androidx.compose:compose-bom:2024.06.00")
   implementation(composeBom)

   // General compose dependencies
   implementation("androidx.activity:activity-compose:1.9.0")

   implementation("androidx.compose.ui:ui-tooling-preview")
   debugImplementation("androidx.compose.ui:ui-tooling")

   // Compose for TV dependencies
   implementation("androidx.tv:tv-foundation:1.0.0-alpha10")
   implementation("androidx.tv:tv-material:1.0.0-beta01")
}

Groovy

dependencies {
   def composeBom = platform('androidx.compose:compose-bom:2024.06.00')
   implementation composeBom

   // General compose dependencies
   implementation 'androidx.activity:activity-compose:1.9.0'

   implementation 'androidx.compose.ui:ui-tooling-preview'
   debugImplementation 'androidx.compose.ui:ui-tooling'

   // Compose for TV dependencies
   implementation 'androidx.tv:tv-foundation:1.0.0-alpha10'
   implementation 'androidx.tv:tv-material:1.0.0-beta01'
}

차이점

가능하면 TV 버전의 API를 사용합니다. 기술적으로는 Compose Material의 모바일 버전을 사용할 수 있지만 Android TV의 고유한 상호작용 스타일에 최적화되어 있지는 않습니다. 또한 Compose Material을 TV용 Compose의 Compose Material과 혼합하면 예기치 않은 동작이 발생할 수 있습니다. 예를 들어 각 라이브러리에는 자체 MaterialTheme 객체가 있으므로 두 버전을 모두 사용하면 색상, 서체 또는 도형이 일관되지 않을 수 있습니다.

다음 표에는 TV와 모바일의 종속 항목 차이가 요약되어 있습니다.

TV 종속 항목
(androidx.tv.*)
비교 모바일 종속 항목
(androidx.compose.*)
androidx.tv:tv-material 오른쪽 대신 androidx.compose.material3:material3
androidx.tv:tv-foundation 오른쪽 항목에 추가 androidx.compose.foundation:foundation

추가 리소스

  • TV Material Catalog 샘플
    TV용 Compose를 사용하여 Material Design 원칙을 구현하는 방법을 보여주는 카탈로그 앱입니다.

  • JetStream 샘플
    일반적인 Material 앱과 실제 아키텍처로 TV Compose를 사용하는 방법을 보여주는 미디어 스트리밍 앱입니다.

  • TV용 Compose 소개
    이 Codelab에서는 카탈로그 브라우저 화면과 세부정보 화면이 있는 동영상 플레이어 앱을 빌드하는 방법을 단계별로 설명합니다.

추가 자료

이 가이드에서 TV에 최적화된 우수한 환경을 빌드하는 방법을 알아보세요.