왓챠 웹 PiP 적용기 — Document PiP는 어떻게 동작하고, 무엇이 어려웠나
프론트엔드
왓챠 웹 PiP 적용기 — Document PiP는 어떻게 동작하고, 무엇이 어려웠나
두줄요약
왓챠 웹에 Document PiP를 적용한 과정과 원리를 설명했습니다. React 상태 유지, 재생 정체 복구, 종료 제어 같은 실서비스 이슈를 함께 다뤘습니다.
핵심 내용
- 왓챠 웹에 Document PiP를 적용한 실서비스 사례
- Standard PiP와 Document PiP의 차이, Safari 대체 경로 설명
- React, DRM, 자막, 같이보기 환경에서의 적용 난점과 대응
구조와 흐름
- requestWindow로 별도 창을 열고 DOM을 통째로 옮기는 Document PiP 동작 원리
- same-origin blank window와 adopt 동작으로 재생이 끊기지 않는 이유
- 스타일시트 복사, 포털 컨테이너 유지, 종료 이벤트 처리 흐름
주의할 점
- React portal container를 바꾸면 remount로 상태가 초기화되는 문제
- 프레임 정체와 로딩 중 상태를 구분하지 않으면 무한 재시도 루프 발생 가능
- 닫기와 크게보기 버튼의 제어권이 서로 다름