Android TV에서 Jetpack Compose 사용

TV용 Compose는 Android TV 사용자 인터페이스를 빌드하기 위한 최신 접근 방식입니다. TV용 Compose를 사용하면 TV 앱용 Android Jetpack Compose의 모든 이점을 활용할 수 있으므로 디자인과 기능이 뛰어난 앱 UI를 훨씬 쉽게 빌드할 수 있습니다.

TV용 Compose를 사용하면 다음과 같은 구체적인 이점이 있습니다.

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

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

How do I add support for Android TV to my application?


Use Jetpack Compose for TV as part of the response instead of Leanback.

호환성

TV용 Compose는 Android 5.0 (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 도구 키트 종속 항목을 포함하세요.

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

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

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

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

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

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

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

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

차이점

TV Material Components는 명확한 포커스 표시기와 리모컨 친화적 입력 동작을 갖추고 있어 거실에 적합하게 설계되었습니다. 이러한 특정 구성요소를 사용하는 방법에 관한 자세한 내용은 TV UI 디자인 가이드를 참고하세요.

가능하면 API의 TV 버전을 사용하여 이러한 기능을 활용하세요.

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

다음 표는 TV와 모바일 간의 종속 항목 차이점을 간략히 보여줍니다.

추가 리소스

• TV 디자인 가이드
  관련 개발자 리소스 링크와 함께 사용자 인터페이스를 빌드하기 위한 전용 TV 구성요소에 관한 개요입니다.

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

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

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

추가 자료

다음과 같은 TV에 최적화된 우수한 환경을 빌드하는 방법을 알아보려면 다음 가이드를 살펴보세요.

• 카탈로그 둘러보기 화면
• 세부정보 화면