2024년 9월 1일·출시

마감벨 — React Native 앱 출시와 네이티브 경계면 트러블슈팅

우리 동네 마감 할인 서비스. App Store·Play Store 출시. New Architecture(Fabric) 기반에서 네비게이션·지도·위치·메모리 문제를 구조적으로 해결한 사례.

내 역할 · 팀 프로젝트 · 프론트엔드 전담 (네이티브 경계면 트러블슈팅 포함)

React NativeFabriciOSAndroid

Context

마감벨은 우리 동네 마감 할인 정보를 연결하는 모바일 서비스로, App Store·Play Store에 출시했다. React Native New Architecture(Fabric) 기반이며 지도·위치 권한·결제·알림·네이티브 모듈이 결합돼 있다. 문제는 시뮬레이터가 아니라 실제 iOS·Android 기기 기준으로 재현·검증해야 했다.

Problem

  • TabBar 숨김/표시 상태가 탭 간 이동에서 일관되지 않고, 특정 화면 진입 후 GNB 영역이 비정상적으로 남음
  • iOS에서 NAVER Map 타일 미출력
  • Android에서 getCurrentLocation 호출 시 앱 즉시 크래시
  • iOS에서 화면 전환 반복 시 CoreGraphics 메모리 증가 후 OOM 강제 종료

Decision

겉보기엔 개별 화면 버그였지만, 실제 원인은 Navigation Tree·네이티브 의존성·Fabric 호환성·그래픽 리소스가 어긋나는 지점에 있었다. 조건문으로 급히 덮는 대신 네비게이션 구조를 분리하고 의존성 버전부터 맞췄다. 재현 조건을 고정한 뒤, 원인을 플랫폼 경계면에서 하나씩 확인했다.

Implementation

  • TabBar/GNB: MainTab과 FullScreenStack을 RootNavigator 기준으로 분리, GNB 노출 조건을 화면 내부 상태가 아니라 라우팅 구조 기준으로 정리
  • NAVER Map: Fabric 환경에서 지도 패키지 버전 정합성 확인, iOS 타일 미출력 원인 분석 및 구성 정리
  • Android Location Crash: play-services-location 중복·충돌 원인 분석, Gradle 강제 버전 지정으로 Native Dependency 정합성 확보
  • iOS OOM: CGBitmapContextCreate 로그 분석 → SVG 배경 컴포넌트 리소스 누수 추적·제거로 반복 전환 시 메모리 증가 완화

Impact

  • App Store·Play Store 출시 완료
  • TabBar/GNB 일관성, Android 위치 크래시, iOS 지도 미출력, iOS OOM 문제 모두 해결
  • RN 앱 배포 과정의 네이티브 경계면 문제 대응 경험 확보

Transferable Insight

React Native 앱의 문제는 JavaScript 안에서만 터지지 않는다. Navigation Tree, 네이티브 모듈, 플랫폼 SDK, 패키지 버전, 그래픽 리소스, 실기기 런타임이 겹치는 경계면에서 터진다. 그래서 크래시 하나를 "JS 버그"로 보면 못 잡고, 어느 층이 어긋났는지부터 물어야 잡힌다.