🪟 Document Picture-in-Picture API 완벽 가이드: 비디오를 넘어 임의의 DOM을 OS 플로팅 창으로 띄우기

+-------------------------------------------------------------+
| Main Window (window)                                        |
|  - App State (React/Vue/Pinia Store, Signals, Memory)       |
|  - Main DOM Tree                                            |
|                                                             |
|         | (documentPictureInPicture.requestWindow())        |
|         v                                                   |
|  +-------------------------------------------------------+  |
|  | PiP Window (pipWindow)                                |  |
|  |   Always-on-top OS Frame                              |  |
|  |   - pipWindow.document.body.appendChild(myComponent)  |  |
|  |   - Stylesheets copied into pipWindow.document.head   |  |
|  |   - Shares identical JS execution context & memory!   |  |
|  +-------------------------------------------------------+  |
+-------------------------------------------------------------+

// Document PiP 지원 여부 확인
if ('documentPictureInPicture' in window) {
  const openPipBtn = document.getElementById('open-pip-btn');
  openPipBtn.addEventListener('click', toggleDocumentPip);
} else {
  console.warn('이 브라우저는 Document Picture-in-Picture API를 지원하지 않습니다.');
}

let pipWindowInstance = null;

async function toggleDocumentPip() {
  // 이미 PiP 창이 열려있다면 닫기
  if (window.documentPictureInPicture.window) {
    window.documentPictureInPicture.window.close();
    return;
  }

  try {
    // 1. 항상 최상단에 머무는 OS 전용 창 요청 (가로/세로 픽셀 지정 가능)
    const pipWindow = await window.documentPictureInPicture.requestWindow({
      width: 360,
      height: 480,
    });
    pipWindowInstance = pipWindow;

    // 2. PiP로 내보낼 컴포넌트 컨테이너 찾기
    const floatingWidget = document.getElementById('my-floating-widget');
    const widgetPlaceholder = document.getElementById('widget-placeholder');

    // 원래 위치에 보이지 않는 자리 표시자(Placeholder)를 두어 레이아웃 붕괴 방지
    widgetPlaceholder.style.display = 'block';

    // 3. 메인 창의 DOM 요소를 PiP 창의 body로 이동
    pipWindow.document.body.appendChild(floatingWidget);

    // 4. PiP 창이 닫힐 때 (사용자가 X 버튼을 누르거나 close() 호출 시)
    pipWindow.addEventListener('pagehide', () => {
      // DOM 요소를 다시 메인 문서의 자리로 원복
      const originalContainer = document.getElementById('widget-wrapper');
      originalContainer.insertBefore(floatingWidget, widgetPlaceholder);
      widgetPlaceholder.style.display = 'none';
      pipWindowInstance = null;
      console.log('Document PiP 창이 닫혔으며 요소를 메인 문서로 복구했습니다.');
    });

  } catch (err) {
    console.error('Document PiP 창 생성 실패:', err);
  }
}

function copyAllStylesheetsToPip(pipDoc) {
  // 1. 외부 CSS 링크 및 인라인 스타일 태그 순회
  const styles = document.querySelectorAll('link[rel="stylesheet"], style');
  
  styles.forEach((styleElement) => {
    // deep clone하여 PiP 문서의 head에 붙여넣음
    pipDoc.head.appendChild(styleElement.cloneNode(true));
  });
}

function copyAllStyles(pipDoc) {
  // link 태그 복제
  document.querySelectorAll('link[rel="stylesheet"]').forEach((link) => {
    const newLink = pipDoc.createElement('link');
    newLink.rel = 'stylesheet';
    newLink.href = link.href;
    pipDoc.head.appendChild(newLink);
  });

  // document.styleSheets 내부의 cssRules 복제 (CORS 주의)
  Array.from(document.styleSheets).forEach((sheet) => {
    try {
      const rules = Array.from(sheet.cssRules).map((rule) => rule.cssText).join('');
      const style = pipDoc.createElement('style');
      style.textContent = rules;
      pipDoc.head.appendChild(style);
    } catch (e) {
      // 서드파티 CDN 등 CORS 제한이 걸린 스타일시트는 link로 처리
      if (sheet.href) {
        const link = pipDoc.createElement('link');
        link.rel = 'stylesheet';
        link.href = sheet.href;
        pipDoc.head.appendChild(link);
      }
    }
  });
}

<!-- 메인 페이지 마크업 -->
<div id="meeting-controller" class="controller-panel">
  <button id="toggle-mic-btn">🎤 마이크 끄기</button>
  <button id="toggle-cam-btn">📹 카메라 끄기</button>
  <span id="call-duration">00:00</span>
</div>

// 애플리케이션 상태 (메인 메모리)
const appState = {
  isMicMuted: false,
  isCamOff: false,
  secondsElapsed: 0,
};

function setupPipInteractions(pipWindow) {
  const pipDoc = pipWindow.document;
  const micBtn = pipDoc.getElementById('toggle-mic-btn');
  const camBtn = pipDoc.getElementById('toggle-cam-btn');
  const timerText = pipDoc.getElementById('call-duration');

  // PiP 창 내부의 버튼 클릭이 메인 윈도우의 상태를 직접 수정
  micBtn.addEventListener('click', () => {
    appState.isMicMuted = !appState.isMicMuted;
    micBtn.textContent = appState.isMicMuted ? '🔇 마이크 켜기' : '🎤 마이크 끄기';
    micBtn.classList.toggle('muted', appState.isMicMuted);
    
    // 실제 WebRTC 미디어 트랙 음소거 반영
    toggleAudioTrack(!appState.isMicMuted);
  });

  camBtn.addEventListener('click', () => {
    appState.isCamOff = !appState.isCamOff;
    camBtn.textContent = appState.isCamOff ? '📷 카메라 켜기' : '📹 카메라 끄기';
    toggleVideoTrack(!appState.isCamOff);
  });

  // 메인 창의 타이머 인터벌이 PiP 창의 DOM을 직접 갱신
  const timerInterval = setInterval(() => {
    appState.secondsElapsed++;
    const mins = String(Math.floor(appState.secondsElapsed / 60)).padStart(2, '0');
    const secs = String(appState.secondsElapsed % 60).padStart(2, '0');
    timerText.textContent = `${mins}:${secs}`;
  }, 1000);

  // 창이 닫히면 인터벌 정리
  pipWindow.addEventListener('pagehide', () => {
    clearInterval(timerInterval);
  });
}

<iframe src="https://meeting.example.com" allow="document-picture-in-picture"></iframe>

<!-- index.html -->
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8" />
  <title>Document PiP 포모도로 타이머</title>
  <style>
    #pomodoro-box {
      width: 280px;
      padding: 20px;
      border-radius: 12px;
      background: #1E3A5F;
      color: #F9FBFE;
      font-family: -apple-system, BlinkMacSystemFont, sans-serif;
      text-align: center;
      box-shadow: 0 4px 16px rgba(0,0,0,0.2);
    }
    .time-display { font-size: 42px; font-weight: bold; margin: 15px 0; color: #A8C9EF; }
    .btn-group button {
      background: #5B8FD4; border: none; color: white;
      padding: 8px 16px; margin: 0 4px; border-radius: 6px; cursor: pointer;
      font-weight: 600;
    }
    .btn-group button:hover { background: #279866; }
  </style>
</head>
<body>
  <h1>생산성 대시보드</h1>
  <button id="btn-pip-toggle">📌 항상 위에 타이머 띄우기</button>

  <div id="pomodoro-container" style="margin-top: 20px;">
    <div id="pomodoro-box">
      <h3>⏳ FOCUS TIME</h3>
      <div class="time-display" id="timer-text">25:00</div>
      <div class="btn-group">
        <button id="btn-start">시작</button>
        <button id="btn-pause">정지</button>
        <button id="btn-reset">리셋</button>
      </div>
    </div>
  </div>

  <script src="app.js"></script>
</body>
</html>

// app.js
const btnPipToggle = document.getElementById('btn-pip-toggle');
const pomodoroBox = document.getElementById('pomodoro-box');
const pomodoroContainer = document.getElementById('pomodoro-container');

let timeLeft = 25 * 60; // 25분
let timerId = null;

function updateDisplay() {
  const m = String(Math.floor(timeLeft / 60)).padStart(2, '0');
  const s = String(timeLeft % 60).padStart(2, '0');
  const text = `${m}:${s}`;
  
  const timerElem = pomodoroBox.querySelector('#timer-text');
  if (timerElem) timerElem.textContent = text;
}

// 타이머 액션 핸들러 바인딩
pomodoroBox.querySelector('#btn-start').addEventListener('click', () => {
  if (timerId) return;
  timerId = setInterval(() => {
    if (timeLeft > 0) {
      timeLeft--;
      updateDisplay();
    } else {
      clearInterval(timerId);
      timerId = null;
      alert('집중 세션이 완료되었습니다! 잠시 휴식하세요.');
    }
  }, 1000);
});

pomodoroBox.querySelector('#btn-pause').addEventListener('click', () => {
  clearInterval(timerId);
  timerId = null;
});

pomodoroBox.querySelector('#btn-reset').addEventListener('click', () => {
  clearInterval(timerId);
  timerId = null;
  timeLeft = 25 * 60;
  updateDisplay();
});

// PiP 창 토글 로직
btnPipToggle.addEventListener('click', async () => {
  if (!('documentPictureInPicture' in window)) {
    alert('현재 브라우저는 Document PiP를 지원하지 않습니다.');
    return;
  }

  // 이미 열려 있으면 닫기
  if (window.documentPictureInPicture.window) {
    window.documentPictureInPicture.window.close();
    return;
  }

  try {
    const pipWindow = await window.documentPictureInPicture.requestWindow({
      width: 320,
      height: 240,
    });

    // 1. 메인 문서의 모든 스타일시트 복제
    document.querySelectorAll('style, link[rel="stylesheet"]').forEach((node) => {
      pipWindow.document.head.appendChild(node.cloneNode(true));
    });

    // 2. DOM 요소를 PiP 윈도우로 이동
    pipWindow.document.body.appendChild(pomodoroBox);

    // 3. 닫힐 때 메인 화면으로 안전하게 원복
    pipWindow.addEventListener('pagehide', () => {
      pomodoroContainer.appendChild(pomodoroBox);
      btnPipToggle.textContent = '📌 항상 위에 타이머 띄우기';
    });

    btnPipToggle.textContent = '❌ 플로팅 타이머 닫기';
  } catch (err) {
    console.error('PiP 창 열기 실패:', err);
  }
});

// 잘못된 예: 전역 document를 신뢰함
const btn = document.querySelector('#action-btn'); // PiP로 이동 시 null!

// 올바른 예: 요소의 현재 소속 Document를 조회
const ownerDoc = floatingElement.ownerDocument;
const btn = ownerDoc.querySelector('#action-btn');

function handleOpenWidget() {
  if ('documentPictureInPicture' in window) {
    // 1순위: 최신 Document PiP로 Always-on-top 창 띄우기
    openInDocumentPip();
  } else {
    // 2순위 Fallback: 브라우저 화면 우하단에 position: fixed 플로팅 모달로 띄우기
    openInFloatingModal();
  }
}

function openInFloatingModal() {
  const widget = document.getElementById('my-floating-widget');
  widget.classList.add('inline-pip-fallback');
  console.log('Document PiP 미지원 환경이므로 화면 내 고정 모달로 폴백합니다.');
}