우수사례

스마트폰을 넘어: JioHotstar가 폴더블 및 태블릿에 맞게 UX를 최적화한 방법

읽는 데 3분 소요
찰스 멍거의 프로필 보기
Prateek Batra Android 적응형 앱 개발자 관계 엔지니어

휴대전화 그 이상: JioHotstar가 적응형 UX를 구축한 방법

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

JioHotstar는 수많은 시청자에게 프리미엄 환경을 제공하기 위해 폴더블 및 태블릿에 맞게 앱을 최적화하여 시청 환경을 개선했습니다. 이를 위해 Google의 적응형 앱 가이드를 따르고 샘플, Codelab, 가이드북, 문서와 같은 리소스를 활용하여 모든 디스플레이 크기에서 일관되게 원활하고 매력적인 환경을 만들었습니다.

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 Adaptive 라이브러리를 사용하여 동일한 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과 함께 Tier 1 대형 화면 앱 지위를 달성한 것은 우리의 공통된 비전이 얼마나 강력한지를 보여주는 이정표입니다. JioHotstar는 대형 화면 기기에 최적화하는 것이 단순히 적응성을 높이는 것을 넘어 폴더블, 태블릿, 커넥티드 TV를 빠르게 도입하고 있는 시청자의 시청 환경을 개선하는 것이라고 항상 믿어 왔습니다.

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

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

작성자:
계속 읽기