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 모듈
궁금한 점
- React Native에서 iOS의 실제 시스템 Picture-in-Picture(앱 외부에 떠 있는 창)를 구현할 수 있나요?
- iOS PiP가 WebView / HTML / Jitsi 비디오와 함께 작동할 수 있나요, 아니면 네이티브
AVFoundation비디오 렌더링이 필요합니까? - 네이티브 렌더링이 필요하다면:
AVPictureInPictureController를 사용하는 기존 React Native 라이브러리나 예제가 있나요?- 아니면 완전한 네이티브 WebRTC +
AVSampleBufferDisplayLayer구현이 필요합니까?
미리 감사드리며, 안내나 참고 자료를 부탁드립니다.