피드로 돌아가기
Dev.toFrontend
원문 읽기
Document PiP API와 React Portal을 통한 상태 유지형 플로팅 UI 구현
Pop any UI component into a floating Picture-in-Picture window.
AI 요약
Context
기존 Video PiP API의 한계로 인해 일반 HTML 컴포넌트의 플로팅 윈도우 구현이 불가능했던 상황. Document PiP API를 통해 가능해졌으나, 별도 Document 생성에 따른 CSS 스타일 소실 및 React Virtual DOM 연결 단절로 인한 상태 초기화 문제가 발생함.
Technical Solution
- MutationObserver 기반의 실시간 스타일 동기화 로직을 통해 메인 Document의 style 및 link 태그를 PiP 윈도우에 실시간 복제
- React Portal을 적용하여 DOM 노드만 물리적으로 분리하고 Virtual DOM 트리의 위치는 유지함으로써 컴포넌트 Unmount 방지
- Portal 아키텍처 설계를 통한 내부 State, 이벤트 리스너, 커서 위치 및 스크롤 상태의 완벽한 보존
- ResizeObserver를 활용한 윈도우 크기 자동 최적화 및 동적 리사이징 처리
- Chrome 116+ 및 Edge 116+ 브라우저 환경에 최적화된 전용 래퍼 컴포넌트 구조 설계
실천 포인트
- 서로 다른 Document 간 UI 이동 시 스타일 유실 방지를 위한 Style Mirroring 기법 검토 - 컴포넌트의 물리적 위치 변경 시 상태 유지를 위해 단순 DOM 이동 대신 React Portal 활용 - 신규 Browser API 도입 시 브라우저 버전별 지원 범위 확인 및 Fallback 전략 수립