스마트 TV 및 셋톱 박스 기기에서 INP (다음 페인트에 대한 상호작용)를 개선하는 것은 제한된 API 지원과 적당한 시스템 사양이라는 제약으로 인해 데스크톱 브라우저에 비해 훨씬 더 많은 문제가 발생합니다. 이 우수사례에서는 Disney+ Hotstar가 이러한 장애물을 성공적으로 해결하고 그 결과로 큰 비즈니스 혜택을 얻은 방법을 알아봅니다.
거실 기기 채택이 증가하면서 Disney+ Hotstar는 앱에서 스마트 TV 및 셋톱 박스를 위한 원활한 탐색 환경을 제공하는 것이 중요한 비즈니스 요구사항임을 인식했습니다. 하지만 이러한 기기의 INP를 수정하기 어려운 이유는 특정 TV 모델에서 매우 오래된 브라우저 버전을 사용할 수 있기 때문입니다. 예를 들어 2020 LG TV는 2018년에 출시된 Chrome 68을 사용합니다. 이러한 기기 중 일부는 보급형 기기로 분류될 수도 있습니다. 즉, 대표적인 태블릿 및 노트북 기기처럼 상호작용에 빠르게 반응하지 못합니다.
다음 그림은 Chrome DevTools에서 CPU가 6배 느려진 노트북과 스마트 TV 간에 페이지를 로드하는 데 걸리는 시간을 비교합니다. 보시다시피 노트북은 최근에 제조된 스마트 TV보다 여전히 훨씬 빠릅니다.
![노트북에서 Disney+ HotStar 앱의 로드 성능을 프로파일링하는 Chrome DevTools의 성능 프로파일러 스크린샷 PAGE_RENDER_TIME이라는 맞춤 측정항목이 1.39초 후에 제공됩니다.](https://web.developers.google.cn/static/case-studies/hotstar-inp/image/fig-1.png?authuser=19&hl=ko)
![실제 스마트 TV 기기에서 Disney+ HotStar 앱의 로드 성능을 프로파일링한 Chrome DevTools의 성능 프로파일러 스크린샷 PAGE_RENDER_TIME이라는 맞춤 측정항목이 6.47초 후에 제공됩니다.](https://web.developers.google.cn/static/case-studies/hotstar-inp/image/fig-2.png?authuser=19&hl=ko)
이러한 테스트에서 실험실 데이터를 산출하는 동안 Disney+ Hotstar는 웹 바이탈 라이브러리를 사용하여 앱의 실제 사용자로부터 다음 페인트에 대한 상호작용 (INP)의 필드 데이터를 수집하기 시작했으며, 앱 사용자의 75% 가 현장에서 675밀리초의 INP를 경험했으며, 이는 INP 기준점에 따라 '나쁜' 사용자 경험으로 간주됩니다.
이 우수사례에서는 Disney+ Hotstar가 스트리밍 애플리케이션, 특히 저사양 기기에서 응답성을 개선한 방법을 다룹니다. INP 값을 272밀리초로 줄여 61% 개선을 달성했습니다. 이는 여전히 권장되는 '양호' 기준인 200밀리초보다 높지만 상당한 개선을 이루었습니다.
조사 결과
Disney+ Hotstar는 web-vitals 라이브러리의 기여 분석 빌드에서 onINP
메서드를 사용하여 앱을 계측했습니다. 초기 단계에서는 특히 정확한 표적 요소를 식별하는 데 있어 다양한 문제가 발생했습니다. 이 문제는 Disney+ Hotstar 앱의 일부 맞춤설정에 사용된 서드 파티 공간 탐색 라이브러리로 인해 모든 참조가 본문을 가리키기 때문에 발생했습니다. 이 라이브러리는 문서 본문의 이벤트를 수신 대기한 후 실제 포커스가 맞춰진 요소를 결정하고 원격 키 누름에 따라 다음 포커스를 예측합니다.
Disney+ Hotstar는 높은 INP 값을 유발하는 상호작용을 올바르게 식별할 수 있도록 먼저 기여 분석 문제를 해결하는 것부터 시작했습니다. 이를 위해 Disney+ Hotstar는 현재 포커스가 맞춰진 요소의 공간 탐색 라이브러리 및 페이지의 모든 포커스 가능 요소의 지도에 이미 있는 focusKey
속성을 기록했으며, 이는 웹 바이탈 기여 분석 빌드에서 사용할 수 있는 상호작용 타겟과 유사합니다.
![focusKey 속성에 따른 요소 목록 및 각 요소의 상호작용 지연 시간을 보여주는 스크린샷](https://web.developers.google.cn/static/case-studies/hotstar-inp/image/fig-3.png?authuser=19&hl=ko)
focusKey
와 이를 트리거하는 요소의 경로를 캡처합니다.
이제 적절한 측정 및 기여 분석이 갖추어진 후 현장 데이터의 조사 결과에 따르면 다음과 같은 상호작용이 INP에서 가장 문제가 되는 것으로 보고되었습니다.
- 가로 방향 캐러셀 트레이 탐색입니다.
- 세로 캐러셀 트레이 탐색
- 초기 페이지 로드 중의 상호작용
![포커스 키로 트레이 캐러셀 탐색을 담당하는 요소의 스크린샷](https://web.developers.google.cn/static/case-studies/hotstar-inp/image/fig-4.png?authuser=19&hl=ko)
Chrome 개발자 도구의 성능 패널과의 이러한 상호작용을 프로파일링한 결과 공간 탐색 라이브러리가 모든 포커스 가능 요소의 위치를 읽고 새로운 트리를 빌드했다는 사실을 알게 되었습니다. 이는 한 요소에서 다른 요소로 이동하는 등 각 상호작용에서 레이아웃 스래싱을 트리거하는 비용이 많이 드는 작업입니다.
홈페이지의 경우 공간 탐색 라이브러리에 의해 다음과 같이 트리가 생성되었습니다.
![공간 탐색 라이브러리에서 생성된 트리 예 루트 아래에는 Navbar 및 Tray 컨테이너 노드가 있습니다. 특히 트레이 컨테이너 노드에는 세 개의 카드 노드가 포함되어 있으며, 각 카드에는 큰 DOM 크기에 기여하는 수많은 하위 노드가 있습니다.](https://web.developers.google.cn/static/case-studies/hotstar-inp/image/fig-5.png?authuser=19&hl=ko)
즉, 앱에 트레이 10개가 표시되고 각 트레이에 카드가 7개 있는 경우 트레이 컨테이너에 포커스 가능 요소(탐색 항목 포함) 70개가 있게 됩니다. 많은 수의 상호작용 요소가 포함되어 있습니다. 또한 서드 파티 캐러셀 라이브러리도 사용되었습니다. 이 라이브러리는 수평 탐색 시 각 카드의 크기를 읽어 컨테이너를 변환하여 상호작용 지연 시간을 더욱 높였습니다.
문제 해결
전체 앱의 반응성 문제를 해결하기 위해서는 여러 가지 다양한 문제를 개별적으로 처리해야 했습니다.
가로 트레이 탐색 개선사항
Disney+ Hotstar는 합성 애니메이션을 사용하고 카드당 한 번이 아니라 트레이당 한 번만 크기를 읽어 레이아웃 스래싱을 트리거하지 않는 자체 내부 캐러셀 라이브러리를 구축했습니다.
공간 탐색은 캐러셀의 루트에만 초점을 맞추고 추가적인 가로 탐색을 위해 맞춤 캐러셀이 표시됩니다. Disney+ Hotstar는 이러한 접근 방식을 통해 모든 탐색에서 크기를 읽고 있던 공간 탐색과 기존 캐러셀 라이브러리의 종속 항목을 제거했습니다.
이러한 최적화 이후 공간 탐색 트리의 모습은 다음과 같습니다.
![공간 탐색 라이브러리에서 생성된 최적화된 트리의 예. 이전 버전에 비해 크게 최적화되었으며 포함된 노드 수가 훨씬 적습니다.](https://web.developers.google.cn/static/case-studies/hotstar-inp/image/fig-6.png?authuser=19&hl=ko)
다음 이미지는 캐러셀 구현 전과 후에 Chrome DevTools의 성능 패널에서 측정한 성능 비교입니다.
![서드 파티 캐러셀이 시작되는 작업을 위한 Chrome DevTools의 성능 패널 스크린샷. 상호작용을 지연시키는 긴 작업이 많습니다.](https://web.developers.google.cn/static/case-studies/hotstar-inp/image/fig-7.png?authuser=19&hl=ko)
![사내 캐러셀이 시작되는 작업을 위한 Chrome DevTools의 성능 패널 스크린샷입니다. 서드 파티 캐러셀에 비해 긴 작업이 훨씬 적기 때문에 상호작용이 더 빠르게 이루어집니다.](https://web.developers.google.cn/static/case-studies/hotstar-inp/image/fig-8.png?authuser=19&hl=ko)
이러한 노력의 결과로 Disney+ Hotstar는 해당 분야에서 앱의 INP를 크게 감소했습니다. 또한 서드 파티 라이브러리를 제거하여 약 35KB (압축)를 절약할 수 있었습니다. 또한 이러한 개선을 통해 Disney+ Hotstar는 공간 탐색 노드 감소로 인해 레이아웃이 트리거되는 빈도가 줄어들기 때문에 홈페이지의 총 렌더링 시간을 측정하는 데 사용하는 맞춤 측정항목의 지속 시간도 줄일 수 있었습니다.
![tizentv와 webos의 페이지 렌더링 시간 맞춤 측정항목의 시계열은 3월 13일부터 3월 19일까지 각각 31% 와 25.2% 감소했습니다.](https://web.developers.google.cn/static/case-studies/hotstar-inp/image/fig-9.png?authuser=19&hl=ko)
세로 트레이 탐색 개선사항
또한 Disney+ Hotstar는 모든 트레이를 미리 로드하는 대신 지연 로드를 사용하여 세로 트레이 탐색 성능도 개선했습니다. 따라서 페이지 로드 시 앱은 트레이의 인스턴스 10개(내부적으로 각각 캐러셀 구성요소와 다수의 이미지가 포함됨)를 로드하는 대신 표시 영역에 표시되는 두 개의 트레이와 위아래에 추가 트레이만 로드합니다. 또한 렌더링이 setTimeout()
생성 전략을 사용하여 여러 작업으로 분할되어 기본 스레드에서 사용자 상호작용을 처리할 기회를 더 많이 확보했습니다.
![이벤트 핸들러 실행 및 렌더링 업데이트 작업을 위한 스타일화된 시각화 렌더링 업데이트는 긴 단일 작업 후에 연기됩니다.](https://web.developers.google.cn/static/case-studies/hotstar-inp/image/fig-10.png?authuser=19&hl=ko)
![이전 그림과 동일한 활동을 보여주는 또 다른 시각화이지만 작업이 항복으로 인해 분할되므로 렌더링이 더 빨리 발생할 수 있습니다.](https://web.developers.google.cn/static/case-studies/hotstar-inp/image/fig-11.png?authuser=19&hl=ko)
초기 페이지 로드 중의 상호작용
앱 실행 중에 수많은 스크립트를 처리하는 애플리케이션의 경우 INP가 높습니다. 브라우저가 이러한 스크립트를 다운로드, 파싱, 평가해야 하기 때문입니다. 이 모든 과정이 진행되는 동안 기본 스레드는 오랫동안 점유되어 사용자 상호작용에 빠르게 응답할 수 없습니다.
Disney+ Hotstar는 향후 페이지 로드 속도를 높이기 위해 애플리케이션 시작 시 (스플래시 화면 시간) 실제 필요한 것보다 더 많은 스크립트를 처리하고 있다는 사실을 깨달았습니다. 이로 인해 추가 스크립트 평가 작업이 발생했고, 이는 INP에 부정적인 영향을 미칠 가능성도 있었습니다.
이 문제를 해결하기 위해 Disney+ Hotstar는 앱 시작 중에 시간을 절약할 수 있도록 대부분의 애셋을 동적으로 로드하는 방법을 고려했습니다. 하지만 이렇게 하면 자바스크립트가 이 변경사항에 따라 미리 로드되지 않으므로 향후 페이지로의 탐색 로드 시간이 길어질 수 있습니다. Disney+ Hotstar는 이 문제를 해결하기 위해 사용자 여정에서 다음에 나올 페이지를 결정하고 해당 페이지의 애셋을 미리 로드하는 사내 애셋 프리로더 라이브러리를 개발했습니다. 예를 들면 다음과 같습니다.
- 사용자가 로그인 페이지에 있으면 애셋 프리로더 라이브러리가 프로필 선택 페이지의 애셋을 미리 로드합니다.
- 프로필 선택 페이지에 홈페이지 애셋이 로드됩니다.
- 홈페이지에 세부정보 페이지의 애셋이 로드됩니다.
- 마지막으로 보기 페이지의 애셋이 세부정보 페이지에 로드됩니다.
애셋 로드를 최적화한 덕분에 Disney+ Hotstar는 다음 두 가지 이점을 누리게 되었습니다. 즉, 앱의 INP를 줄이고 (이제 기본 스레드가 상대적으로 사용자 상호작용을 실행할 수 있기 때문에 상대적으로 자유롭기 때문에), 그리고 하위 계층 기기에서 메모리 사용량을 줄였습니다.
이러한 변경사항으로 인해 다음 스크린샷에서 볼 수 있듯이 필드에서 보고된 INP 수가 32% 감소했습니다.
![8월 13일과 9월 11일부터 시작되는 INP 값의 시계열입니다. 이 기간 동안 INP가 32% 감소한 것으로 나타났습니다.](https://web.developers.google.cn/static/case-studies/hotstar-inp/image/fig-12.png?authuser=19&hl=ko)
기타 개선사항
또한 Disney+ Hotstar는 기본 스레드에 자주 생성하여 분할할 수 있는 몇몇 사용자 이벤트에 긴 작업이 있다는 사실을 파악하고 한 걸음 더 나아가 사용자가 실행 도중에 작업을 취소할 수 있는 작업 생성기 유틸리티를 만들었습니다.
예를 들어 사용자가 트레이에 있는 여러 카드를 탐색하는 경우 다음과 같은 결과가 발생합니다.
- 다음 카드에 포커스가 맞춰집니다.
- 필요한 경우 카드가 번역됩니다.
- 스포트라이트가 업데이트되었습니다.
- 예고편(있는 경우)을 가져오고 재생이 시작됩니다.
- 작업에 대한 애널리틱스 이벤트가 실행됩니다.
이 프로세스 중에 사용자가 다음 카드에 초점을 맞추면 나머지 단계를 실행할 필요가 없습니다. 예를 들어 사용자가 다음 카드로 이동하면 특정 타이틀의 트레일러 가져오기와 플레이어 초기화가 더 이상 필요하지 않습니다. 따라서 이러한 작업을 중단하여 기본 스레드를 확보할 수 있습니다.
Disney+ Hotstar의 작업 생성기 유틸리티는 작업인 함수를 허용합니다. 다른 작업이 중간에 들어오면 이전 작업이 취소되므로 불필요한 작업 실행을 줄이고 필요한 작업을 신속하게 처리할 수 있습니다.
결과
전반적으로 Disney+ Hotstar의 애플리케이션 INP는 675밀리초에서 272밀리초로 감소하여 거의 60% 향상했습니다. 또한 특히 트레이 상호작용 지연 시간이 약 400밀리초에서 약 100밀리초로 감소했습니다.
![8월 23일부터 9월 21일까지의 시계열 INP 값입니다. 이 기간에 INP는 61% 감소했습니다.](https://web.developers.google.cn/static/case-studies/hotstar-inp/image/fig-13.png?authuser=19&hl=ko)
비즈니스에 미치는 영향: 사용자당 주간 카드 조회수가 111회에서 226회로 증가했습니다. 이 수치는 100% 증가했으며, 반응성이 우수한 인터페이스가 더 오랜 시간 동안 사용자의 참여를 유도할 가능성이 더 높음을 나타냅니다.
![tizentv와 웨보에서 Disney+ HotStar 앱의 주간 카드 조회수가 100% 증가한 시계열의 스크린샷 2004년 4월 4일 이후로는 급격히 증가하게 됩니다.](https://web.developers.google.cn/static/case-studies/hotstar-inp/image/fig-14.png?authuser=19&hl=ko)
이는 시작에 불과하며, Disney+ Hotstar는 INP 측정항목을 가이드로 사용하여 렌더링 및 상호작용 성능을 개선하는 표면에 불과합니다. Disney+ Hotstar의 팀은 조만간 고객에게 Disney+ Hotstar를 더욱 원활하게 사용할 수 있도록 지원하게 되어 기쁩니다.
디즈니+ 핫스타의 아유시, 아제이, 키란, 밀라노, 리차에게 고마운 마음으로 위기를 극복했습니다.
이 혁신 작업을 지원해 준 Disney+ Hotstar의 엔지니어링 책임자인 안키트 마이니와 Disney+ Hotstar 고객 경험 부문 책임자인 라훌 크리슈난 P, 그리고 이 우수사례 게시를 검토하고 도움을 주신 Google의 제레미 와그너, 길베르토, 배리 폴라드, 브렌든 케니에게 감사의 말씀을 전합니다.