WATCHA - Medium · 2026. 06. 18.
왓챠 웹 PiP 적용기 — Document PiP는 어떻게 동작하고, 무엇이 어려웠나
AI 엔지니어링 브리핑
왓챠는 자막과 자체 조작 화면까지 유지하기 위해 웹 영상을 별도 창으로 옮기는 Document PiP를 적용하고, 지원하지 않는 브라우저에서는 기본 PiP로 대신 동작하게 만들었습니다.
문제 & 배경
왓챠 웹은 DRM 영상뿐 아니라 자막·맞춤형 조작 화면·왓챠파티까지 함께 보여줘야 해서, 영상 하나만 띄우는 기본 PiP로는 필요한 화면을 그대로 제공하기 어려웠습니다.
기술 & 해결책
Document PiP는 새 창을 만든 뒤 플레이어의 DOM을 통째로 그 창에 옮기는 방식이라 자막과 조작 화면을 유지할 수 있으며, 이를 지원하지 않는 Safari·Firefox 등에서는 기본 PiP로 전환했습니다.
교훈 & 주의점
Document PiP는 편리하지만 기본 PiP보다 관리가 복잡하므로, 브라우저 지원 여부를 확인하고 실제 서비스의 다양한 화면 요소가 함께 이동하는지 고려해야 합니다.
함께 읽을 글
내용이 비슷해요내용이 비슷한 글을 먼저 보여드려요. 같은 문제나 해결책을 다룬다는 뜻은 아니에요.