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

이 게시물은 왓챠 웹에서 Document PiP를 실제로 적용하며 발생한 동작 원리와 난점을 정리한 글입니다. Document PiP는 requestWindow로 별도 PiP 창을 연 뒤, 같은 출처(about:blank same-origin)라는 점을 활용해 video 플레이어 DOM을 통째로 옮겨 재생을 이어가도록 설계됩니다. React 환경에서는 createPortal 컨테이너를 PiP 창으로 바꾸면 remount로 인해 인트로 스킵 UI 같은 “처음 한 번만 떠야 할 요소”가 반복되어, 컨테이너 객체를 고정하고 useLayoutEffect로 실제 DOM만 옮기는 방식으로 해결합니다. 또한 표준의 “안 끊김”과 달리 간헐적으로 화면 프레임이 멈추는 현상이 있어 totalVideoFrames 및 readyState로 진행 여부를 판단하고, 강제 시크 및 요소 교체를 단계적으로 수행하는 복구 루프를 구성합니다. 끝으로 PiP에서 X 동작은 옵션 통제권이 달라 종료/복귀 UX를 브라우저 동작과 이벤트(pagehide) 처리로 맞추는 방향으로 정리합니다.