휴대폰을 넘어: JioHotstar가 적응형 UX를 구축한 방법

JioHotstar는 인도 최고의 스트리밍 플랫폼으로, 4억 명이 넘는 사용자층을 보유하고 있습니다. 330,000시간이 넘는 주문형 비디오 (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가 Tier 1의 대형 화면 앱 품질 가이드라인을 충족합니다. 팀은 적응형 앱 안내를 활용하여 샘플, Codelab, Cookbook, 문서를 사용하여 이러한 권장사항을 통합했습니다.

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

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

"Google에서 1등급 대형 화면 앱으로 인정받은 것은 공동의 비전이 얼마나 강력한지 보여주는 중요한 이정표입니다. JioHotstar는 항상 대형 화면 기기에 최적화하는 것이 적응성을 넘어 폴더블, 태블릿, 커넥티드 TV를 빠르게 수용하는 시청자의 시청 경험을 향상하는 것이라고 믿어 왔습니다.

Google의 Jetpack 라이브러리와 가이드를 활용하여 콘텐츠 소비에 관한 당사의 통계와 플랫폼 혁신에 관한 Google의 전문성을 결합할 수 있었습니다. 이 협업을 통해 양 팀은 한계를 뛰어넘고, 격차를 해소하고, 모든 화면 크기에서 원활하고 몰입감 있는 환경을 공동으로 만들 수 있었습니다.

Google은 이번 협력을 통해 수백만 명의 사용자에게 향상된 환경을 제공하고 인도와 전 세계에서 스트리밍을 경험하는 방식에 새로운 기준을 제시하게 되어 기쁩니다.
- 소누 산지브, 수석 소프트웨어 개발 엔지니어