“왓챠 PiP 안 됨?” — 됩니다, 이제부터.
Summary
"이제 딴짓하면서 프리렌 보세요!" 왓챠 웹 PiP(화면 속 화면) 모드 전격 출시
탭을 넘나들고 화면을 최소화해도 자막과 영상이 끝까지 따라오는 심리스 뷰잉 환경 구축기
사용자의 멀티태스킹 경험을 대폭 개선하기 위해 왓챠 서비스에 HTML5 PiP API를 도입한 여정을 다룹니다. 웹 브라우저 환경에 구애받지 않고 항상 최상단에 유지되는 미니 화면을 구현하여 사용 편의성을 극대화했습니다. 브라우저 파편화 이슈 속에서도 최적의 동영상 컨트롤과 자막 경험을 유지하기 위한 기술적 배려가 돋보입니다.
- 01브라우저 독립적 최상단 유지: 다른 작업을 수행하거나 웹 브라우저를 최소화해도 동영상은 끊김 없이 고정 노출
- 02자막 및 컨트롤 조작 동기화: 플로팅 창에서도 자막이 정확히 연동되며 재생/일시정지 등의 조작을 즉시 처리
- 03지속적인 스트리밍 보장: 한 에피소드가 끝나면 PiP 인터페이스 내부에서 다음 화가 자동으로 이어서 재생
- 04브라우저 파편화 대응: Chromium 엔진과 타 브라우저 간의 스펙 제약을 고려하여 최적의 대체 UX를 선사
RECOMMENDATION
웹 동영상 플랫폼을 운영하며 멀티태스킹 사용자 경험(UX)을 극대화하고 서비스 이탈률을 줄이고자 하는 프론트엔드 개발진에게 강력히 추천합니다.
The Problem
기존의 자체 미니플레이어 방식은 웹페이지 내부 요소로만 작동하여 브라우저 탭을 변경하거나 창을 최소화하면 영상 재생 화면이 보이지 않게 되는 한계가 존재했습니다.
The Solution
브라우저 자체에서 제공하는 HTML5 Picture-in-Picture(PiP) API를 적극 도입하여, 브라우저 탭 및 다른 앱 작업과 독립되어 최상위에 유지되는 플로팅 재생 창을 제공하였습니다.
The Result
동영상 재생 화면이 화면 최상단에 고정되며 끊김 없는 재생, 자막 동기화, 다음 화 자동 재생, 그리고 왓챠파티 실행 상태에서의 유연한 탐색 기능을 웹 환경에서도 온전히 누릴 수 있게 되었습니다.
Trade-off
브라우저 사양에 종속되는 특성상 Chromium 기반(Chrome, Edge) 브라우저에서는 자막과 컨트롤 기능이 완벽하게 지원되지만, Safari나 Firefox와 같은 브라우저에서는 벤더 제약으로 인해 자막 및 맞춤 컨트롤 조작이 제한되는 기능 편차가 발생합니다.
Key Concepts
More from 왓챠
View all posts from 왓챠
왓챠 직원 누구나 AI 앱을 만들 수 있게 된 이유
LLMDevOpsMulti-Tenancy1개월 전
맥락이 형태를 결정할 때
BrandingUX DesignApp Store2개월 전
왓챠 웹 PiP 적용기 — Document PiP는 어떻게 동작하고, 무엇이 어려웠나
ReactHTML5 VideoDocument PiP2개월 전
다를 수도 있지: 왓챠 영화 주간
Offline UXBrand IdentitySpace Design5개월 전
왓챠피디아, 취향을 기록하는 아카이브
Brand DesignInformation ArchitectureUser Experience5개월 전