RN 앱이 늘어나는데 제품마다 WebView 셸이 중복 구현되고 있었습니다. 그 반복을 줄이려고 공통 셸 구조와 S3 기반 CodePush 이식 패턴을 정리해서 매머드 점주앱과 더리터 점주앱에 같은 구조로 얹은 작업입니다.

SellerBox 앱에서 먼저 구축해 둔 CodePush 인프라를 그대로 가져와 이식해서, 신규 RN 앱을 띄울 때 세팅 시간이 크게 줄었습니다.

맡은 부분

공통 WebView 셸 구조

공통 WebView 컨테이너와 Safe Area 컨테이너를 표준 레이어로 두고, 각 앱은 그 위에 제품별 진입점만 얇게 얹는 식으로 정리했습니다. 매머드와 더리터는 동일한 셸 구조 위에서 동작합니다.

Splash OTA Gate

번들 교체가 앱 실행 도중에 일어나면 사용자 경험이 깨집니다. 그래서 스플래시 구간에서만 업데이트를 확인·적용하고, 끝난 뒤에 메인으로 진입하는 "Splash Gate" 패턴을 설계했습니다. 두 앱 모두 같은 게이트 로직을 공유합니다.

크래시 방어와 실전 이슈 환류

한 앱에서 발견한 안정성 이슈를 공통 패턴으로 다른 앱에 환류시키는 흐름을 잡았습니다. JS 번들 경로가 비어 있는 엣지 케이스, 스플래시 구간에서 OTA 실패 시 복구 경로, 네비게이션·웹뷰 메시지 예외 같은 이슈를 하나씩 정리해 두 앱에 동시에 반영했습니다.

API URL 추상화

개발·스테이징·프로덕션 환경 분기를 위해 API URL을 단일 베이스 URL로 통합하고, 앱별 환경 설정을 공통 패턴으로 맞췄습니다.

S3 CodePush 이식

SellerBox 앱에서 만든 S3 직접 조회 기반 CodePush(번들 업로드·버전 매니페스트·롤백)를 매머드와 더리터로 옮겼습니다. EAS 같은 유료 도구 없이도 두 앱이 같은 OTA 배포 파이프라인을 쓰는 상태가 됐습니다.

스택

React Native, Expo, TypeScript, React Native WebView, AWS S3 (자체 CodePush), Splash OTA Gate, Fastlane, GitHub Actions.