가로 모드·백그라운드 재생·플레이어 사용성 문제로 공개가 중단된 첫 인프런 앱 이후, 소규모 모바일 셀이 앱을 React Native로 다시 만든 의사결정과 구현 경험을 공유한다. 기술 선택의 근거부터 네이티브 플레이어·WebView·리스트·Android UI에서 만난 실제 문제와 해결까지 다룬다.
핵심 포인트- React 개발자가 충분하고 네이티브 개발자가 합류한 조건을 근거로 Flutter 대신 React Native를 택하고, 높은 네이티브 커스터마이징 요구로 Expo는 배제, 미호환 패키지·불완전한 상호운용·팀 숙련도를 고려해 새 아키텍처 대신 기존 브리지 구조 유지
- 배속·자막·제스처·백그라운드 재생을 세밀하게 제어하려 iOS·Android 네이티브 플레이어를 직접 구현하고, 상태를 계속 보내지 않고 필요한 이벤트 콜백만 전달해 브리지 통신을 줄임 — MessageQueue 감시로 실제 브리지 호출을 눈으로 확인
- WebView에서 확대 방지 메타 태그, 앱·웹 메시지 전달, WebView 버전별 JS 런타임 차이를 점검하고 Map iterator처럼 일부 WebView에서 깨지는 기능은 polyfill·트랜스파일로 호환성 확보
- 항목 많은 화면은 ScrollView 대신 FlatList·VirtualizedList로 화면 근처만 렌더링하고, Layout Inspector엔 있으나 화면에 안 보이는 Android 네이티브 뷰는 측정·배치 라이프사이클을 이해해 네이티브 레이아웃 갱신을 직접 연결
왜 읽나React Native로 미디어 중심 앱을 만드는 팀에게 기술 선택 기준과 네이티브 브리지·WebView·리스트 디버깅의 실전 해법을 주는 후기.