iOS에서 React Native로 진정한 Picture-in-Picture (PiP)를 구현하는 방법 (앱 외부, WhatsApp처럼)?

발행: (2025년 12월 19일 오후 10:05 GMT+9)
2 min read
원문: Dev.to

Source: Dev.to

현재 동작

Android:
맞춤 네이티브 모듈을 통해 네이티브 Picture-in-Picture(PiP)를 사용하고 있으며, 정상적으로 동작합니다(비디오가 앱 외부에 떠 있습니다).

iOS:
react-native-pip-view를 사용하고 있는데, 앱이 포그라운드에 있을 때만 작동합니다.

문제

iOS에서 앱이 백그라운드로 전환될 때:

  • 떠 있는 PiP UI가 사라집니다
  • 비디오 렌더링이 중단됩니다
  • 오디오만 계속 재생됩니다

하지만 WhatsApp이나 FaceTime 같은 앱은 iOS에서 시스템 PiP 창을 앱 외부에 표시합니다.

현재 사용 중인 기술 스택

  • React Native
  • WebView 기반 비디오(Jitsi Web / HTML / WebView 내 WebRTC)
  • react-native-pip-view(포그라운드 전용 PiP)
  • Android용 네이티브 PiP 모듈

궁금한 점

  1. React Native에서 iOS의 실제 시스템 Picture-in-Picture(앱 외부에 떠 있는 창)를 구현할 수 있나요?
  2. iOS PiP가 WebView / HTML / Jitsi 비디오와 함께 작동할 수 있나요, 아니면 네이티브 AVFoundation 비디오 렌더링이 필요합니까?
  3. 네이티브 렌더링이 필요하다면:
    • AVPictureInPictureController를 사용하는 기존 React Native 라이브러리나 예제가 있나요?
    • 아니면 완전한 네이티브 WebRTC + AVSampleBufferDisplayLayer 구현이 필요합니까?

미리 감사드리며, 안내나 참고 자료를 부탁드립니다.

Back to Blog

관련 글

더 보기 »

React Native용 iOS Bridging Header 설정

브리징 헤더 설정하기 1. 브리징 헤더 파일 만들기 - Xcode에서 프로젝트 폴더를 오른쪽 클릭합니다. - New File → Header File을 선택합니다. - 이름을 지정합니다.

Universal & Deep Links: 2026 완전 가이드

딥 링크는 이론적으로는 간단해 보입니다: 사용자가 링크를 탭하면 앱이 열리고, 필요한 정확한 화면으로 이동합니다. 실제로는 Univ...를 구현해 본 사람이라면 누구나 알 수 있습니다.