← 테크곳간 목록으로

WATCHA - Medium · 2026. 06. 18.

왓챠 웹 PiP 적용기 — Document PiP는 어떻게 동작하고, 무엇이 어려웠나

AI 엔지니어링 브리핑

왓챠는 자막과 자체 조작 화면까지 유지하기 위해 웹 영상을 별도 창으로 옮기는 Document PiP를 적용하고, 지원하지 않는 브라우저에서는 기본 PiP로 대신 동작하게 만들었습니다.

문제 & 배경

왓챠 웹은 DRM 영상뿐 아니라 자막·맞춤형 조작 화면·왓챠파티까지 함께 보여줘야 해서, 영상 하나만 띄우는 기본 PiP로는 필요한 화면을 그대로 제공하기 어려웠습니다.

기술 & 해결책

Document PiP는 새 창을 만든 뒤 플레이어의 DOM을 통째로 그 창에 옮기는 방식이라 자막과 조작 화면을 유지할 수 있으며, 이를 지원하지 않는 Safari·Firefox 등에서는 기본 PiP로 전환했습니다.

교훈 & 주의점

Document PiP는 편리하지만 기본 PiP보다 관리가 복잡하므로, 브라우저 지원 여부를 확인하고 실제 서비스의 다양한 화면 요소가 함께 이동하는지 고려해야 합니다.

원문 읽기 ↗
내용이 비슷해요

내용이 비슷한 글을 먼저 보여드려요. 같은 문제나 해결책을 다룬다는 뜻은 아니에요.