TV App: Apple TV 및 Android TV 개발 기본 사항

TV App이란

TV App — 스마트 TV 플랫폼에서 실행되도록 설계된 애플리케이션: Apple TV (tvOS) 및 Android TV (Google TV). 모바일 앱과의 주요 차이점은 상호 작용 방식입니다. 사용자는 화면을 터치하지 않고 리모컨을 사용하여 인터페이스를 제어합니다. 모든 요소는 방향 탐색(D-pad: 위, 아래, 왼쪽, 오른쪽 및 선택 버튼)을 통해 접근 가능해야 합니다.

TV App 개발 특징: 화면 해상도는 Full HD (1920x1080)에서 4K (3840x2160)까지, 밀도는 xhdpi (Android) 또는 @3x (Apple)입니다. 오버스캔(이미지의 일부가 TV에서 잘릴 수 있음)을 보정하기 위해 가장자리에서 5%의 안전 영역이 필수입니다. 터치 스크린이 없으며 모든 상호 작용은 리모컨 또는 게임패드를 통해 이루어집니다. 포커스는 항상 활성 요소를 강조 표시합니다. 전력 소비는 배터리에 제한되지 않지만 앱은 절전 모드로의 전환을 올바르게 처리해야 합니다. Statista(2026년)에 따르면 글로벌 스마트 TV 시장은 신규 TV의 80% 이상을 차지하며 Apple TV와 Android TV는 2억 5천만 대 이상의 기기를 차지합니다.

TV 애플리케이션 카테고리: 비디오 서비스 (Netflix, YouTube, Apple TV+), 음악 (Spotify, Apple Music), 게임 (Apple Arcade, Google Play Games), 피트니스 (Apple Fitness+, Peloton), 교육, 뉴스, 날씨, 사진. 가장 인기 있는 카테고리는 비디오 스트리밍으로 스마트 TV 사용 시간의 70%를 차지합니다.

Apple TV (tvOS): 아키텍처

tvOS는 iOS를 기반으로 하는 Apple TV 셋톱박스용 Apple의 운영 체제입니다. 첫 번째 릴리스는 2015년 4세대 Apple TV와 함께였습니다. tvOS는 iOS와 XNU 커널, Foundation 프레임워크, UIKit (적응 버전) 및 App Sandbox 보안 메커니즘을 공유합니다. 개발은 SwiftUI 또는 UIKit을 사용하여 Swift로 수행됩니다.

tvOS의 주요 구성 요소:

• Focus Engine — 활성 인터페이스 요소를 자동으로 결정하는 포커스 관리 시스템
• tvOS용 UIKit — UIFocusGuide, UIFocusEnvironment, UIFocusAnimationCoordinator (포커스 관리용)
• SwiftUI — FocusState 및 focusable() 수정자를 갖춘 선언적 프레임워크
• TVMLKit — JavaScript/TVML 인터페이스용 프레임워크 (현대 프로젝트에서 거의 사용되지 않음)
• StoreKit — 인앱 구매 및 구독
• AVFoundation — HDR 및 Dolby Atmos 지원 비디오 및 오디오 콘텐츠 재생

tvOS 앱의 수명 주기는 iOS와 유사합니다: notRunning, foregroundActive, foregroundInactive, background. 특이 사항: 앱이 불필요하게 백그라운드 권한을 요청해서는 안 됩니다 — 시스템이 백그라운드 프로세스를 강제로 종료할 수 있습니다. 탐색 토폴로지는 "홈", "검색", "라이브러리", "설정" 탭이 있는 UISplitViewController 및 UITabBarController를 중심으로 구축됩니다.

Android TV: 아키텍처

Android TV는 TV 및 셋톱박스에 최적화된 Android 버전으로 2014년에 처음 소개되었습니다. 2020년부터 Google TV가 있습니다 — 새로운 인터페이스를 갖춘 Android TV 위의 레이어이지만 앱 개발은 Google TV와 호환되는 Android TV SDK에서 수행됩니다. 주요 언어는 Kotlin이며 UI 프레임워크는 Leanback Library (클래식) 및 Jetpack Compose for TV (실험적)입니다.

Android TV의 주요 구성 요소:

• Leanback Library — BrowseFragment, DetailsFragment, PlaybackOverlayFragment, SearchFragment, Presenter
• Android TV Input Framework — 키보드, 리모컨 및 게임패드 생성
• MediaSession — 미디어 콘텐츠 재생 관리
• Recommendations — NotificationManager를 통한 홈 화면 추천 채널
• Leanback Preferences — TV 스타일 설정 화면

Android TV와 모바일 Android의 차이점: 앱은 매니페스트에서 LEANBACK_LAUNCHER 카테고리를 선언해야 합니다. 최소 레이아웃 너비는 1920dp입니다. 터치 상호 작용은 D-pad 탐색으로 대체됩니다. Leanback 프래그먼트 사용이 권장됩니다. 하드웨어 가속이 필수입니다. 빌드에는 ARM64 및 x86 아키텍처를 지원하는 APK/AAB가 포함됩니다. 2025년 이후 현대적인 프로젝트의 경우 TvLazyColumn, TvButton, TvCard와 같은 구성 요소가 포함된 Jetpack Compose for TV가 권장됩니다.

Focus Engine 및 포커스 관리

Focus Engine — 어떤 인터페이스 요소가 활성화되어 있는지 결정하는 모든 TV 플랫폼의 핵심 구성 요소입니다. tvOS에서 Focus Engine은 UIKit에 내장되어 자동으로 작동합니다. D-pad 버튼을 누르면 시스템이 모든 포커스 가능 요소의 위치를 분석하고 누른 방향에서 가장 가까운 후보를 계산하여 애니메이션(UIFocusAnimationCoordinator)과 함께 포커스를 부드럽게 이동시킵니다.

Focus Engine 규칙: 시스템은 이동 축을 따른 요소 간의 거리, 요소 투영의 교차(요소의 투영이 현재 포커스의 투영과 교차하는 경우 후보로 간주), 동일한 거리에 있는 요소의 우선 순위(직선에서 가장 가까운 것이 선택됨)를 고려합니다. 개발자는 UIFocusGuide를 사용하여 포커스에 영향을 줄 수 있습니다 — 특정 방향으로 누를 때 포커스를 특정 요소로 리디렉션하는 보이지 않는 가이드 직사각형입니다.

Android TV에서 포커스는 focusable 및 nextFocus*(nextFocusDown, nextFocusUp, nextFocusLeft, nextFocusRight) 속성을 사용하여 표준 Android 포커스 시스템을 통해 구현됩니다. 애니메이션은 StateListAnimator를 통해 구성됩니다. Google은 모든 대화형 요소에 focusable을 설정하고 정확한 탐색 제어를 위해 nextFocus를 사용할 것을 권장합니다. 포커스 애니메이션은 UX에 중요합니다 — 포커스가 변경될 때 150~250ms의 지속 시간으로 부드러운 배율 애니메이션(1.0 → 1.05~1.2)이 발생해야 합니다.

코드 예제: Swift 및 Kotlin

Focus Engine 지원과 함께 영화 목록을 표시하는 Apple TV용 SwiftUI의 간단한 TV 애플리케이션 예제입니다.

import SwiftUI

struct Movie: Identifiable {
    let id = UUID()
    let title: String
    let subtitle: String
}

struct ContentView: View {
    @FocusState private var focusedMovie: UUID?

    let movies: [Movie] = [
        Movie(title: "Inception", subtitle: "2010, Sci-Fi"),
        Movie(title: "Interstellar", subtitle: "2014, Sci-Fi"),
        Movie(title: "The Matrix", subtitle: "1999, Action"),
        Movie(title: "Blade Runner 2049", subtitle: "2017, Sci-Fi"),
    ]

    var body: some View {
        VStack(alignment: .leading, spacing: 40) {
            Text("영화").font(.title).padding(.leading, 60)
            ScrollView(.horizontal, showsIndicators: false) {
                HStack(spacing: 40) {
                    ForEach(movies) { movie in
                        VStack {
                            Image(systemName: "film.fill")
                                .resizable()
                                .frame(width: 200, height: 300)
                                .cornerRadius(12)
                                .focusable()
                                .focused($focusedMovie, equals: movie.id)
                            Text(movie.title).font(.headline)
                            Text(movie.subtitle).font(.subheadline).foregroundColor(.secondary)
                        }
                        .scaleEffect(focusedMovie == movie.id ? 1.15 : 1.0)
                        .animation(.easeInOut(duration: 0.2), value: focusedMovie)
                    }
                }
                .padding(.horizontal, 60)
            }
        }
        .onAppear { focusedMovie = movies.first?.id }
    }
}

핵심 사항: @FocusState — 현재 포커스 추적; .focusable() — 요소를 포커스 가능하게 만듦; .scaleEffect() — 포커스 시 확대 애니메이션, TV에서 시각적 피드백에 중요합니다.

Kotlin에서 Leanback Library를 사용한 Android TV용 유사한 예제:

// MainActivity.kt
class MainActivity : FragmentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
    }
}

class MainFragment : BrowseSupportFragment() {
    private val moviePresenter = MoviePresenter()

    override fun onActivityCreated(savedInstanceState: Bundle?) {
        super.onActivityCreated(savedInstanceState)
        title = getString(R.string.app_name)
        headersState = HEADERS_ENABLED
        setupAdapter()
    }

    private fun setupAdapter() {
        val rowsAdapter = ArrayObjectAdapter(ListRowPresenter())
        val listRowAdapter = ArrayObjectAdapter(moviePresenter)
        listRowAdapter.add(Movie("Inception", "2010", R.drawable.poster_1))
        listRowAdapter.add(Movie("Interstellar", "2014", R.drawable.poster_2))
        rowsAdapter.add(ListRow(HeaderItem(0, "Movies"), listRowAdapter))
        adapter = rowsAdapter
    }
}

data class Movie(val title: String, val subtitle: String, val imageResId: Int)

class MoviePresenter : Presenter() {
    override fun onCreateViewHolder(parent: ViewGroup): ViewHolder {
        val cardView = ImageCardView(parent.context).apply {
            isFocusable = true
            setMainImageDimensions(200, 300)
        }
        return ViewHolder(cardView)
    }

    override fun onBindViewHolder(viewHolder: ViewHolder, item: Any) {
        val movie = item as Movie
        (viewHolder.view as ImageCardView).apply {
            titleText = movie.title
            contentText = movie.subtitle
        }
    }

    override fun onUnbindViewHolder(viewHolder: ViewHolder) {}
}

핵심 사항: BrowseSupportFragment — 헤더가 있는 주요 Leanback 프래그먼트; Presenter — RecyclerView.Adapter와 유사한 ViewHolder 생성을 위한 추상화; ImageCardView — 이미지, 제목 및 부제목이 있는 표준 카드; isFocusable = true — TV 요소의 필수 속성.