FuelBuddy의 고객 앱은 프로그레시브 웹 앱으로 시작했다. 안드로이드에서는 잘 작동했지만, iOS에서는 플랫폼 한계에 부딪혔다: WebKit 엔진 제약, 불안정한 홈 화면 설치, 제한된 저장 공간, 그리고 푸시 알림 기능 부재. FuelBuddy 입장에서 이는 PWA가 iOS 사용자를 안정적으로 서비스할 수 없다는 뜻이었고, 안정적인 모바일 경험을 제공하려면 네이티브 앱이 필요했다. 나는 이 앱을 React Native로 다시 작성한 엔지니어링 팀의 일원이었다.
내가 작업한 것
- PWA에서 React Native로: 앱을 컴파일된 React Native 애플리케이션으로 다시 작성해, 14개 사용자 흐름에 걸쳐 8주 만에 100% 기능 동등성을 달성했고, iOS와 안드로이드 양쪽에서 일관된 네이티브 느낌을 보장했다.
- 스택 전반에 걸친 작업: 모바일 프론트엔드에 집중하면서도 Hasura GraphQL 엔진 위에 필요한 CRUD API를 직접 구축해, 기능 개발이 백엔드 의존성에 발목 잡히지 않도록 했다.
- 팀과 함께 출시: 프론트엔드 엔지니어 및 제품 관리자와 긴밀히 협업해 요구사항을 테스트된 기능으로 옮기고 프로덕션 릴리스 일정을 유지했다.
왜 중요했는가
React Native로 마이그레이션함으로써 iOS와 안드로이드 양쪽에 걸쳐 신뢰할 수 있는 단일 코드베이스가 확립되었다. 8주 만에 완전한 동등성을 갖춘 14개 사용자 흐름을 출시함으로써 FuelBuddy는 별도의 플랫폼별 구현을 유지하지 않고도 전체 모바일 사용자 기반을 서비스할 수 있게 되었다.
팀과 오너십
나는 이 재작성 작업에 참여한 엔지니어 중 한 명으로, 팀이 마이그레이션을 위해 정한 8주라는 기간 안에 14개 흐름 전체에서 완전한 동등성을 달성하기 위해 프론트엔드 엔지니어 및 제품 관리자와 함께 작업했다.
GraphQL 계층
CRUD API는 Hasura 위에서 실행되며, Apollo가 아니라 urql을 통해 소비되고, GraphQL Codegen이 앱의 실제 표면을 커버하는 73개의 별도 .graphql 파일에 걸쳐 타입이 지정된 작업을 생성한다. 로컬 상태는 Zustand를 통해 실행되며, 그 뒤를 받치는 빠른 키-값 저장소로 MMKV가 있고, Zod가 경계에서 데이터를 검증한다.
단순한 CRUD를 넘어선 위치와 결제
배송 추적은 단순히 지도 위의 마커가 아니라, react-native-maps, 전용 지오로케이션 서비스, 그리고 실제 지리 공간 계산(거리, 경계, 경로 계산)을 위한 Turf.js를 끌어온다. 결제는 두 개의 독립된 게이트웨이를 거친다: 레지스트리 의존성이 아니라 벤더링된 로컬 패키지로 통합된 Easebuzz, 그리고 모든 요청을 AES-256-CBC(PBKDF2로 유도된 키)와 HMAC-SHA512로 서명하도록 요구하는 Axis Bank로, 이는 JS 암호화 라이브러리가 아니라 손으로 작성한 네이티브 안드로이드 모듈(NdpsAESLibrary, NativeModules를 통해 JS로 브리지됨)에서 이루어진다. 결제 게이트웨이의 서명 요구사항은 RN 계층이 범용적으로 만족시킬 수 있는 것이 아니기 때문이다. Firebase가 인증과 분석 양쪽을 담당한다.
단순한 표가 아닌 리포트
리포트 흐름은 배송 및 비즈니스 데이터를 Victory Native를 통해 차트로 렌더링한 다음, 같은 데이터를 CSV로 내보낸다: json2csv로 인코딩되고, 안드로이드의 Scoped Storage API(react-native-scoped-storage, 앱이 직접적인 파일 시스템 접근을 잃은 안드로이드 10 이상에서 필수)를 통해 디스크에 기록되며, 네이티브 공유 시트를 통해 전달된다.
데이터 모델과 규모
- 13-14개의 별개 흐름 컨테이너(address, assets, business, delivery, home, location, order, pickup, reports, settings, support, user, wallet)가 앱의 내비게이션을 구성하며, "14개 사용자 흐름"이라는 수치와 일치한다.
- 전용 네이티브 안드로이드 모듈이 은행급 요청 서명을 담당하며, 앱의 나머지 부분은 React Native의 브리지 위 JS/TypeScript에 머문다.
Stack
React Native, GraphQL Code Generator와 함께하는 urql, 상태를 위한 Zustand, 저장소를 위한 MMKV, 검증을 위한 Zod, react-native-maps, 지리 공간 계산을 위한 Turf.js, 결제를 위한 Easebuzz와 Axis Bank(후자는 커스텀 네이티브 AES/HMAC 서명 모듈 뒤에 있음), 리포팅 차트를 위한 Victory Native, 인증과 분석을 위한 Firebase, Hasura GraphQL 위에서.