휴대전화를 넘어: JioHotstar가 적응형 UX를 빌드한 방법

JioHotstar는 인도 최고의 스트리밍 플랫폼으로 4억 명이 넘는 사용자에게 서비스를 제공하고 있습니다. 33만 시간이 넘는 VOD (주문형 동영상)와 주요 스포츠 이벤트의 실시간 전송을 포함하는 방대한 콘텐츠 라이브러리를 갖춘 이 플랫폼은 대규모로 운영됩니다.

JioHotstar는 방대한 잠재고객에게 프리미엄 환경을 제공하기 위해 폴더블 및 태블릿용 앱을 최적화하여 시청 환경을 개선했습니다. Google의 적응형 앱 가이드에 따라 샘플, Codelab, Cookbook, 문서와 같은 리소스를 활용하여 모든 디스플레이 크기에서 일관되게 원활하고 몰입도 높은 환경을 만들었습니다.

JioHotstar의 대형 화면 문제

JioHotstar는 표준 휴대전화에서 우수한 사용자 환경을 제공했으며 팀은 새로운 폼 팩터를 활용하고자 했습니다. 먼저 팀은 대형 화면 앱 품질 가이드라인에 따라 앱을 평가하여 사용자 환경을 폴더블 및 태블릿으로 확장하는 데 필요한 최적화를 파악했습니다. Tier 1 대형 화면 앱 상태를 달성하기 위해 팀은 다양한 폼 팩터에 맞게 앱을 조정하고 폴더블에서 차별화하기 위한 두 가지 전략적 업데이트를 구현했습니다. JioHotstar는 폴더블 및 태블릿 기기에서 발생하는 고유한 문제를 해결하여 모든 디스플레이 크기와 가로세로 비율에서 고품질의 몰입형 환경을 제공하는 것을 목표로 합니다.

해야 할 작업

주로 표준 휴대전화 디스플레이용으로 설계된 JioHotstar의 사용자 인터페이스는 다른 폼 팩터의 다양한 화면 크기와 해상도에 맞게 히어로 이미지 가로세로 비율, 메뉴, 쇼 화면을 조정하는 데 어려움을 겪었습니다. 이로 인해 특히 가로 모드에서 이미지 자르기, 레터박스, 낮은 해상도, 사용되지 않는 공간이 발생하는 경우가 많았습니다. JioHotstar는 태블릿과 폴더블의 기능을 최대한 활용하고 이러한 기기 유형에서 최적화된 사용자 환경을 제공하기 위해 더 광범위한 기기에서 최적의 레이아웃 유연성, 이미지 렌더링, 탐색을 보장하도록 UI를 개선하는 데 중점을 두었습니다.

수행한 작업

JioHotstar는 대형 화면에서 더 나은 시청 환경을 제공하기 위해 WindowSizeClass를 통합하고 소형, 중형, 확장된 너비에 맞게 최적화된 레이아웃을 만들어 앱을 개선하는 데 주력했습니다. 이를 통해 앱은 사용자 인터페이스를 다양한 화면 크기와 가로세로 비율에 맞게 조정하여 다양한 기기에서 일관되고 시각적으로 매력적인 UI를 보장할 수 있었습니다.

JioHotstar는 Material 3 적응형 라이브러리를 사용하여 앱에서 사용할 수 있는 공간을 파악하는 데 이 패턴을 따랐습니다. 먼저 currentWindowAdaptiveInfo() 함수를 호출한 다음 세 가지 창 크기 클래스에 따라 새 레이아웃을 사용합니다.

val sizeClass = currentWindowAdaptiveInfo().windowSizeClass

if(sizeClass.isWidthAtLeastBreakpoint(WIDTH_DP_EXPANDED_LOWER_BOUND)) {
    showExpandedLayout()
} else if(sizeClass.isHeightAtLeastBreakpoint(WIDTH_DP_MEDIUM_LOWER_BOUND)) {
    showMediumLayout()
} else {
    showCompactLayout()
}

내부적으로 API는 크거나 같은지 확인하므로 EXPANDED보다 크거나 같은 너비는 항상 MEDIUM보다 큽니다. 따라서 중단점은 가장 큰 것부터 가장 작은 것까지 순서대로 표시됩니다.

JioHotstar는 폴더블 기기 고유의 프리미엄 환경인 탁자 모드를 제공할 수 있습니다. 이 기능은 폴더블 기기가 핸즈프리 환경을 위해 부분적으로 접힐 때 동영상 플레이어를 화면의 상단 절반으로, 동영상 컨트롤을 하단 절반으로 편리하게 재배치합니다.

이를 위해 Material 3 적응형 라이브러리를 사용하여 동일한 currentWindowAdaptiveInfo()를 사용하여 탁자 모드를 쿼리할 수 있습니다. 기기가 탁자 모드로 유지되면 열을 사용하여 플레이어를 상단 절반에 배치하고 컨트롤러를 하단 절반에 배치하여 자세의 상단 절반과 하단 절반에 맞게 레이아웃을 변경할 수 있습니다.

val isTabletTop = currentWindowAdaptiveInfo().windowPosture.isTabletop
if(isTabletopMode) {
   Column {
       Player(Modifier.weight(1f))
       Controls(Modifier.weight(1f))
   }
} else {
   usualPlayerLayout()
}

이제 JioHotstar는 대형 화면 앱 품질 가이드라인을 충족합니다. 팀은 적응형 앱 가이드를 활용하여 샘플, Codelab, Cookbook, 문서를 활용하여 이러한 권장사항을 통합했습니다.

사용자 환경을 더욱 개선하기 위해 JioHotstar는 동영상 검색 페이지에서 터치 영역 크기를 권장되는 48dp로 늘려 대형 화면 기기 전반에서 접근성을 보장했습니다. 이제 동영상 세부정보 페이지가 화면 크기와 방향에 맞게 조정되는 적응형으로 변경되었습니다. 단순한 이미지 크기 조정을 넘어 창 크기 클래스를 활용하여 창 크기와 밀도를 실시간으로 감지하고 각 폼 팩터에 가장 적합한 히어로 이미지를 로드하여 시각적 충실도를 높였습니다. 탐색도 개선되어 레이아웃이 다양한 화면 크기에 맞게 조정됩니다.

이제 사용자는 개선되고 고도로 최적화된 시청 환경으로 대형 화면 기기에서 JioHotstar의 좋아하는 콘텐츠를 시청할 수 있습니다.

"Google을 통해 Tier 1 대형 화면 앱 상태를 달성한 것은 공유된 비전의 강점을 반영하는 중요한 이정표입니다. JioHotstar는 항상 대형 화면 기기에 맞게 최적화하는 것이 적응성을 넘어 폴더블, 태블릿, 커넥티드 TV를 빠르게 채택하는 잠재고객의 시청 환경을 개선하는 것이라고 믿어 왔습니다.

Google의 Jetpack 라이브러리와 가이드를 활용하여 콘텐츠 소비에 관한 Google의 통찰력을 플랫폼 혁신에 관한 Google의 전문성과 결합할 수 있었습니다. 이 협업을 통해 두 팀 모두 경계를 넓히고 격차를 해소하며 모든 화면 크기에서 원활하고 몰입도 높은 환경을 공동으로 만들 수 있었습니다.

함께 이 향상된 환경을 수백만 명의 사용자에게 제공하고 인도와 전 세계에서 스트리밍을 경험하는 방식에 새로운 기준을 세우게 되어 자랑스럽습니다."
- Sonu Sanjeev(선임 소프트웨어 개발 엔지니어)