실시간 주가, 상담 채팅, 예약 현황판처럼 사용자가 계속 눈여겨봐야 하는 정보를 홈페이지에 넣어도, 다른 탭으로 넘어가는 순간 사라져버려 아쉬웠던 경험이 있으실 겁니다. Document Picture-in-Picture API를 쓰면 탭을 전환해도 화면 한쪽에 계속 떠 있는 위젯을 만들 수 있지만, 브라우저 지원 범위와 스타일 재적용 작업을 먼저 점검해야 실무에 바로 적용할 수 있습니다.
브라우저 창을 넘나드는 위젯 기능의 등장
Document Picture-in-Picture API(이하 DPIP)는 웹페이지 안의 특정 요소를 별도의 작은 창으로 띄워, 사용자가 다른 탭이나 다른 프로그램으로 이동해도 화면 한쪽에 계속 떠 있게 만드는 브라우저 기능입니다. 동영상 전용이던 기존 픽처인픽처와 달리 주가 정보, 채팅창, 체크리스트처럼 어떤 HTML 요소든 띄울 수 있다는 점이 다릅니다.
구현 방식은 자바스크립트에서 지원 여부를 확인한 뒤 requestWindow() 메서드로 새 창을 만들고, 기존 요소를 복제해 그 창 안에 넣는 순서로 이뤄집니다. 창의 크기와 위치, 원래 탭으로 돌아가는 버튼 노출 여부 같은 세부 옵션도 함께 조정할 수 있습니다.
실시간 위젯을 쓰는 사이트라면 살펴볼 지점
주식 정보 사이트, 실시간 상담 채팅, 예약 현황판처럼 사용자가 다른 작업을 하면서도 계속 확인해야 하는 정보를 제공하는 홈페이지라면 DPIP는 체류 시간을 늘리고 이탈을 줄이는 데 도움이 되는 기능입니다. 다만 데스크톱 브라우저 전용 API이므로 모바일 방문자 비중이 높은 업종에서는 효과가 제한적이라는 점을 고려해야 합니다.
| 브라우저 | 지원 여부 |
|---|---|
| Chrome | 지원 |
| Firefox | 최신 버전부터 지원 |
| Safari | 미지원 |
DPIP 위젯 도입 전 점검 순서
- 지원 여부 분기 코드 작성 "documentPictureInPicture" in window 체크로 미지원 브라우저에서는 기존 화면 그대로 보이도록 분기 처리합니다.
- 위젯 후보 요소 선정 탭을 벗어나도 계속 봐야 하는 요소를 실시간 주가, 채팅, 체크리스트 중 한두 가지로 좁혀 우선 적용합니다.
- 스타일 복제 체계 마련 cloneNode로 요소를 옮길 때 연결된 스타일시트도 함께 전달하고, @media (display-mode: picture-in-picture) 쿼리로 PiP 창 전용 레이아웃을 따로 정리합니다.
- 창 옵션 결정 preferInitialWindowPlacement와 disallowReturnToOpener 옵션으로 창 위치 기억 여부와 복귀 버튼 노출 여부를 서비스 정책에 맞게 설정합니다.
- 종료 동작 테스트 이미 열린 창이 중복 생성되지 않도록 window.documentPictureInPicture.window.close()로 닫는 로직과 사용자 종료 시나리오를 함께 확인합니다.
스타일 깨짐과 과잉 적용에서 흔히 하는 실수
- 요소만 복제하고 CSS는 옮기지 않아 PiP 창 안에서 레이아웃이 무너지는 경우가 많습니다. 스타일시트와 인라인 스타일까지 함께 복제해야 원래 모습대로 보입니다.
- 모든 위젯을 PiP 창으로 띄우려는 욕심을 버려야 합니다. 탭을 벗어나도 꼭 확인해야 하는 정보만 선별하지 않으면 사용자가 오히려 혼란스러워합니다.
- Safari 미지원을 간과하고 핵심 기능을 DPIP에만 의존해 설계하면 일부 방문자는 그 기능을 전혀 이용하지 못합니다. 기존 UI를 대체하지 않고 보조하는 형태로 설계해야 합니다.
한 줄 정리 Document Picture-in-Picture API는 탭을 넘나들어도 유지되는 위젯을 가능하게 하지만, 데스크톱 전용이라는 한계와 스타일 복제 작업을 먼저 점검한 뒤 핵심 정보 한두 가지에만 선별 적용하는 것이 안전합니다.