Document Picture-in-Picture API로 흥미로운 사용 사례를 활용하세요.

Jad Joubran

게시일: 2025년 3월 4일

Document Picture-in-Picture API (Document PiP API)를 사용하면 웹 애플리케이션에서 임의의 HTML 콘텐츠를 표시할 수 있는 플로팅 상시 상단 창 (PIP 모드 창)을 열 수 있습니다.

이 API는 PiP 창에서 동영상을 계속 시청할 수 있는 <video>용 PIP API를 기반으로 합니다.

Document PiP API는 임의의 HTML 콘텐츠를 표시할 수 있으므로 이를 사용하여 흥미로운 새로운 사용 사례를 활용할 수 있습니다.

브라우저 지원 및 점진적 개선

Browser Support

• 116
• 116
• x
• x

Source

이 글을 작성하는 시점에서 Document Picture-in-Picture API는 제한적으로만 사용할 수 있습니다.

하지만 점진적 개선 또는 단계적 저하와 함께 사용할 수는 있습니다.

사용 사례를 계획할 때는 표준 기능이 아닌 점진적 개선으로 취급해야 합니다. 이 도움말에서는 조용히 중단의 예를 보여줍니다.

Document PiP API로 학습자의 사용자 환경 개선

LearnHTMLCSS.online은 의미론적이며 접근성이 뛰어난 HTML 및 CSS를 가르치는 양방향 학습 플랫폼입니다. 대화형 텍스트 편집기와 브라우저 미리보기 창을 제공합니다.

다음 스크린캐스트는 앱의 레이아웃을 보여줍니다. 화면이 두 열로 나뉩니다. 첫 번째 열에는 코드 편집기가 포함되어 있습니다. 두 번째 열에는 탭 레이아웃이 포함되어 있습니다. 기본적으로 사용자는 챌린지 안내를 볼 수 있으며 브라우저 탭을 클릭하여 실시간 미리보기를 볼 수 있습니다.

학생의 경우 브라우저 미리보기 창을 최대화해야 할 때가 있습니다. Document Picture-in-Picture API 지원을 추가할 수 있는 좋은 기회입니다.

이를 구현하려면 먼저 브라우저 지원을 확인합니다.

const isPipSupported = "documentPictureInPicture" in window;

이제 이 변수를 사용하여 documentPictureInPicture 호출을 래핑하거나 문서 PiP를 사용하는 함수에서 조기 반환할 수 있습니다. 다음 코드는 문서 PiP 지원 여부를 확인한 후 문서 PiP 창을 엽니다.

async function initDocumentPip() {
  if (!isPipSupported) {
    return false;
  }

  const pipWindow = await documentPictureInPicture.requestWindow({
    width: window.innerWidth,
    height: window.innerHeight,
  });
}

사용 사례에 따라 창의 너비와 높이를 지정할 수 있습니다. 특정 요소, 현재 문서와 일치시키거나 고정 값을 제공할 수도 있습니다.

지금까지는 빈 문서가 있습니다. 이제 콘텐츠로 채워야 합니다.

// htmlCode is the HTML code of the challenge
pipWindow.document.documentElement.innerHTML = htmlCode;

CSS 코드 관련 문제의 경우 CSS도 동기화해야 합니다.

작업이 끝났습니다. 이제 별도의 PiP 창에서 열리는 최대화 버튼이 있습니다.브라우저 미리보기 탭을 최대화하는 것 외에도 외부 모니터가 있는 경우 별도의 화면으로 이동하거나 열 레이아웃에서 기본 웹 앱과 브라우저 미리보기 탭을 재정렬할 수도 있습니다.

대체

이 API는 사용 가능 여부가 제한적입니다. 이 API가 지원되지 않는 브라우저와 기기에서는 대체 (조용히 다운그레이드) 동작을 제공해야 합니다.

최대화 버튼이 전체 브라우저 미리보기 탭을 끌어내는 대신 현재 웹 앱의 남은 공간을 모두 차지하도록 할 수 있습니다.

다른 브라우저에서 이 동작을 사용해 보세요. https://learnhtmlcss.online/app.html?id=2096

도움말의 작은 세부정보에도 주의하세요. isPipSupported가 true이면 최대화/최소화 버튼의 도움말이 PIP 모드로 전환과 PIP 모드 종료 간에 전환됩니다. 반면에 isPipSupported이 false이면 대체 동작은 최대화 및 최소화로 설명됩니다.

---

보시다시피 Document Picture-in-Picture API는 프로그레시브 개선 또는 조용히 다운그레이드와 함께 사용하면 웹 앱에 새로운 사용 사례를 제공할 수 있습니다.

제한된 브라우저 지원으로 인해 제약을 받지 마세요. 적절한 대체 사용 사례를 마련하는 것도 잊지 마세요.

문서 PiP 문서를 확인하여 이 API의 다양한 예시와 사용 사례를 살펴보세요.