삼성화재 컨시어지는 2026년 6월 기획을 시작했고, 저는 이후 임직원·배달원 앱의 RN 모노레포와 공통 패키지 구조를 설계했습니다. 웹·모바일 디자인시스템 구현과 앱별 빌드·배포 체계 구성도 함께 맡았습니다.
임직원 앱과 배달원 앱은 iOS·Android 프로젝트를 각각 구성했습니다. 공통 런타임, API, 디자인시스템은 패키지로 공유하고 각 앱의 설정과 배포는 독립적으로 관리했습니다.
설계와 구현 기록
공통 코드의 범위를 정하고 네이티브 설정과 웹·모바일 UI를 구성하며 내린 판단을 세 글에 정리했습니다.
RN 앱 두 개를 한 저장소에 두고, 배포는 따로 가져가기
두 앱의 공통 코드는 공유하고, 네이티브 구성과 배포는 나눈 이유
앱 ID를 여러 파일에 복사하지 않기로 했다
앱 식별자를 한곳에서 관리하고 플랫폼별 설정을 생성한 과정
웹과 RN에서 같은 버튼을 쓰려면 어디까지 같아야 할까
같은 디자인 규칙을 각 플랫폼의 컴포넌트로 구현한 기준
웹과 모바일의 공통 컴포넌트
Figma의 시맨틱 토큰을 웹의 Tailwind CSS와 모바일의 NativeWind에 각각 대응시켰습니다. 토큰 이름과 컴포넌트 상태는 맞추고 실제 화면은 플랫폼별로 구현해 웹과 모바일의 접근성과 상호작용을 살렸습니다.
컴포넌트 상태는 웹 Storybook과 앱 안의 갤러리에서 확인했습니다. 오버레이의 열림 상태는 외부에서 제어하도록 맞췄으며 웹의 키보드 조작, 포커스 이동, prefers-reduced-motion도 점검했습니다.
앱별 빌드와 배포 분리
공통 패키지가 바뀌면 영향을 받는 앱을 확인해 해당 앱의 빌드와 배포를 실행합니다. 앱별 설정이 섞이지 않도록 하나의 manifest에서 Gradle·Xcode·런타임 설정을 생성했습니다.
JavaScript 번들 OTA와 내부 테스트
React Native의 JavaScript 번들은 S3·CloudFront OTA로 배포합니다. 배포된 번들은 덮어쓰지 않고 release·disable·rollback으로 관리하며 릴리스 이력은 ETag로 동시 변경 충돌을 확인한 뒤 갱신합니다. 네이티브 변경은 앱별 개발·운영 빌드와 서명을 확인해 TestFlight·Play 내부 테스트로 전달했습니다.
