피드로 돌아가기
ReactNative와 함께하는 서비스 개발부터 배포까지
올리브영 테크블로그올리브영 테크블로그
Mobile

ReactNative와 함께하는 서비스 개발부터 배포까지

올리브영이 React 기반의 ReactNative를 선택해 iOS 개발자 부재 상황에서 Android·iOS 동시 지원 앱을 소수 인원으로 단기간 출시

2021년 1월 5일8intermediate

Context

올리브영은 신규 모바일 서비스 '인마이백' 개발 시 Android와 iOS를 모두 지원해야 했으나, 당시 팀에 iOS 앱 개발자가 없었다. 단일 코드베이스로 두 플랫폼을 동시 지원할 수 있는 크로스플랫폼 기술이 필수적이었다.

Technical Solution

  • ReactNative 도입: 기존 React 경험을 보유한 개발자들의 러닝커브를 50% 이상 단축하고, 한 번의 코드 작성으로 Android·iOS 동시 배포
  • TypeScript 적용: 코드 타입 안정성 확보 및 팀의 공식 권장 사항을 따름
  • Redux를 활용한 전역 상태 관리: 상세 화면의 '좋아요' 상태 변경 후 목록 화면 복귀 시 API 재호출 없이 해당 항목만 갱신
  • 4단계 브랜치 전략: develop(메인)→feature(기능 단위)→codepush(QC용)→release(운영) 구조로 관리하고, 모든 feature는 최소 1명 이상의 PR 승인 필수화
  • Airbnb Script Convention + git hook 자동 정렬: 커밋 시 코드 스타일 자동 정렬로 다중 개발자 환경에서 일관성 유지
  • MS AppCenter CodePush 적용: 앱 스토어 심사 없이 CLI 단일 명령어로 즉시 배포($ appcenter codepush release-react -a ${PROJECT NAME} -d ${DEPLOY NAME})

Impact

출시 후 수백 번의 배포 동안 CodePush로 문제 없는 배포 진행. 기존 [스크립트 번들링 → 빌드 → 스토어 게시 → 심사 → 출시] 5단계에서 CLI 단일 명령어로 단축. Hot Reload 기능으로 빌드 대기 시간 최대 2분 이상 제거.

Key Takeaway

ReactNative는 팀의 기존 기술 스택(React) 보유 여부가 도입 성공의 결정 요인이며, CodePush와의 조합으로 스토어 심사 우회 배포가 가능하다. 다만 Native 영역의 이슈 추적 어려움과 외부 라이브러리 버전 충돌(특히 OS 업데이트 시)은 프로젝트 진행 중 해결해야 할 주요 과제다.


React 경험이 있는 팀에서 iOS·Android 동시 지원이 필요한 경우, ReactNative + TypeScript + CodePush 조합으로 앱 스토어 심사 우회 배포를 구현하면 배포 주기를 2~3일에서 2~3초로 단축할 수 있다. 단, 외부 라이브러리 버전 동기화 문제를 사전에 파악하고 관리 방안을 수립해야 한다.

원문 읽기