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