Shopify의 5년간 React Native 사용 경험
(shopify.engineering)- Shopify는 5년 전 React Native(RN)를 모바일 개발의 미래로 선언한 이후, 모든 앱을 RN으로 성공적으로 전환하였음
- React Native 도입의 주요 이유
- 한 번의 작성으로 두 플랫폼 지원: iOS와 Android에서 동일한 기능을 두 번 개발하는 비효율을 제거하기 위함
- 인재 유동성 향상: 개발자들이 iOS, Android, Web을 자유롭게 오가며 작업할 수 있도록 지원
- 더 많은 가치 제공: 기능 동등성 확보에 소요되는 시간을 줄이고 사용자에게 더 많은 가치를 전달
- 전환의 성공적인 결과
- 동일한 기능을 두 번 개발하지 않아 생산성이 크게 향상되었음
- 엔지니어들이 웹과 모바일을 모두 다루게 되어 동일한 인력으로 더 많은 작업을 수행하고 새로운 성장 기회를 창출
- iOS와 Android 간 기능 동등성 유지가 문제가 되지 않아 더 많은 가치를 제공할 수 있게 되었음
- 앱의 화면 로드 시간이 500ms 이하로 빠르고, 세션의 99.9% 이상이 안정적으로 유지됨
- 작업에 가장 적합한 도구로 네이티브 코드를 계속 활용하여 두 세계의 장점을 모두 누리고 있음
주요 학습 내용
React Native 앱은 빠름
- Shopify는 성능을 매우 중요하게 생각하며, CEO인 Tobi Lutke는 "모든 빠른 소프트웨어가 훌륭한 것은 아니지만, 모든 훌륭한 소프트웨어는 빠르다"라고 강조함
- React Native(RN)로 전환하기 전 가장 큰 질문은 RN이 성능 목표를 충족할 수 있을지에 대한 것이었음
- 그래서 전환 결정을 내리기 전에 광범위한 프로토타이핑을 통해 가능할지 결과를 확인함
- Meta가 성능 병목을 제거하기 위해 진행 중인 작업을 검토하고, 리스트와 같은 영역에서 기여할 수 있는 부분을 식별
- RN이 곧 더 빨라질 것이라는 판단 하에 전폭적인 도입을 결정
- 5년이 지난 지금, RN 앱은 빠르게 동작하며, Shopify 앱에서 500ms 이하(P75)의 화면 로드 시간을 달성
- 비슷한 성능 목표를 다른 모든 앱에서도 성공적으로 달성
- 성능 병목 현상을 제거하기 위해 좋은 패턴과 기술을 적용하는 것이 필수적
- 네이티브가 항상 빠르다는 보장은 없으며, RN이 항상 느린 것도 아님
- RN은 지난 몇 년간 크게 발전하여 세계적 수준의 앱을 구축할 수 있는 플랫폼으로 자리 잡음
- RN 프레임워크가 성숙해지면서 빠른 앱을 개발하는 것이 점점 더 쉬워질 것으로 기대
- 팀의 전문성이 증가함에 따라 더 나은 앱을 만들 수 있는 여지가 확대될 것
핫 리로딩의 장점
- React Native(RN)의 핫 리로딩은 개발 환경에 혁신을 가져온 기능으로, 변경 사항이 즉시 반영됨
- 네이티브 개발에서 가장 큰 문제점 중 하나는 코드베이스 크기에 따라 사소한 변경 사항도 컴파일 및 에뮬레이터/실제 기기에서 실행하는 데 몇 분이 소요된다는 점이었음
- 이로 인해 시간이 낭비되고 개발자의 작업 흐름이 중단되는 문제가 발생
- RN의 핫 리로딩은 이러한 문제를 완전히 해결하여 생산성과 개발 경험을 크게 향상시킴
Typescript로 인한 인재 유동성 확보
- Typescript가 널리 사용되면서 React 웹과 React Native(RN) 간 개발자 이동이 원활해짐
- 웹 개발자: RN을 통해 네이티브 iOS와 Android 개발보다 모바일 작업을 훨씬 쉽게 시작 가능
- 모바일 개발자: RN을 통해 웹 작업에 쉽게 참여 가능
- 인재 유동성의 장점
- 엔지니어들에게 더 많은 성장 기회를 제공하며, 인력 배치의 유연성을 증가시킴
- 동일한 개발 인력으로 더 많은 작업을 수행할 수 있는 역량을 강화
- 웹과 모바일 간 코드 공유를 통해 더 큰 효율성과 생산성을 창출
- 여러 플랫폼에서 작업할 수 있는 개발자는 더 빠른 출시를 가능하게 하고, 기술 간 아이디어를 교환하여 새로운 방식으로 적용 가능
- 기술을 도구로 간주하는 문화를 형성하며, 팀의 시야를 넓히고 작업에 가장 적합한 도구를 선택하도록 장려
네이티브 개발자는 필수적임
- iOS와 Android에 전문화된 모바일 엔지니어는 훌륭한 모바일 앱을 구축하는 데 필수적
- 여러 모바일 제품을 개발하며 축적한 경험과 사용성 및 컨벤션에 대한 깊은 이해는 대체할 수 없음
- 플랫폼 레이어에 접근하거나, 바인딩 작성, 빌드 및 배포 마스터링, 그리고 React Native 버전 업데이트를 관리하는 등의 작업은 네이티브 전문 지식이 필요
- 네이티브 개발자는 다양한 기기 모델에서 앱 성능을 최적화하고, 모든 사용자에게 일관된 경험 제공
- iOS와 Android의 새로운 기능, API, 툴링 변화에 대응하고 React Native 버전 업데이트를 관리하는 데 필수적
- 네이티브 모바일 개발자를 위한 React Native 교육 과정 개발:
- 셀프 학습 방식으로 구성되어 프로덕션 수준의 코드를 작성할 수 있도록 지원
- React Native에 능숙한 개발자들과 Q&A 세션, 페어 프로그래밍, 코드 리뷰를 통해 추가 지원
- 웹 개발자(JavaScript, TypeScript, React 전문가)를 모바일 팀에 추가 배치:
- 네이티브와 React Native 간의 강력한 전문성을 균형 있게 보유
- 시간이 지나면서 전체 팀의 기술 수준이 향상됨
- 네이티브와 웹 개발자가 잘 조화된 팀 구성이 React Native를 활용한 훌륭한 모바일 앱 개발의 핵심
네이티브 코드는 필수적임
- 100% React Native 사용은 지양해야 함: RN은 기능을 한 번만 개발해도 되는 효율적인 도구지만, 모든 상황에 적합한 기술은 아님
- 네이티브 코드가 필요한 경우
- 첨단 기능 개발: 2D/3D 스캐닝 및 온디바이스 AI 모델 실행 등 하드웨어를 활용하는 기능
- 메모리 제약이 있는 기능: 홈 및 잠금 화면 위젯, Apple Watch 앱 및 컴플리케이션, App Intents, Siri Shortcuts 등
-
장시간 실행되는 백그라운드 작업:
- 예: Shopify의 Point of Sale 앱은 대량의 데이터를 백그라운드에서 다운로드 및 동기화하여 오프라인에서도 거래 처리 가능
- 네이티브 코드를 활용해 백그라운드 작업을 완전히 오프로딩함으로써 앱 성능에 영향을 주지 않도록 설계
- RN은 대부분의 기능을 한 번만 개발하는 데 적합하지만, 네이티브가 가장 잘 작동하는 영역에서는 네이티브 코드를 활용하는 것이 이상적
- RN이 기본적으로 제공하는 네이티브와의 강력한 상호운용성을 통해 두 기술의 조합이 쉬워짐
- RN ‘또는’ 네이티브의 관계가 아니라 RN ‘그리고’ 네이티브의 관계로 바라보는 것이 중요
- 네이티브 전문성이 있는 팀 구성이 이러한 조화를 효과적으로 구현하는 데 필수적
디버깅의 어려움
- React Native(RN)의 디버깅은 불안정한 측면이 있으며, VSCode에서 올바르게 설정하는 데 추가 작업이 필요
- iOS와 Android는 강력하고 안정적인 디버깅 기능을 기본적으로 제공
- Meta는 최근 RN의 디버거 스택을 완전히 재작성하여 개선을 진행 중이며, 새로운 디버거는 유망한 결과를 보이고 있음
- Shopify는 Meta와 협력하여 RN의 디버깅 환경을 세계적 수준으로 끌어올리기 위해 노력 중
React Native 업데이트는 심리스 하지 않음
- React Native(RN)의 새로운 버전으로 앱을 업데이트하는 데 많은 작업이 필요하며, 종종 코드베이스 재구성이 요구됨
- Shopify는 이를 해결하기 위해 소규모 순회 개발자 그룹을 구성하여 업데이트 작업을 전담하게 하고, 나머지 팀은 기능 개발에 집중하도록 조정
- RN 프레임워크가 성숙해짐에 따라 업데이트 과정이 점점 더 쉬워질 것으로 예상
- New Architecture가 더 널리 채택되면 업데이트 관련 작업의 복잡성이 줄어들 것으로 기대
서드파티 라이브러리에 대한 의존성 증가
- React Native(RN) 프레임워크는 네이티브에 비해 포괄적이지 않아 더 많은 서드파티 라이브러리를 사용하게 됨
- 최근 몇 년간 생태계가 성숙해지면서, 필요한 거의 모든 기능에 대해 잘 유지 관리된 라이브러리를 쉽게 찾을 수 있음
- 그러나, 서드파티 라이브러리의 지속적인 업데이트 유지가 필요하며 공급망 공격의 표면적이 증가
- Shopify는 Dependabot을 활용한 자동 종속성 업데이트를 도입
- 자동 코드 스캐닝을 통해 악성 코드를 탐지 및 방지
- RN 프레임워크가 더 명확한 방향성을 갖고, 기본적으로 더 많은 기능을 제공하는 방향으로 발전하기를 기대
공유 기반의 활용으로 얻는 큰 이점
- React Native(RN)를 처음 도입했을 당시에는 RN으로 모바일 앱을 구축한 경험이 부족했으며, 네이티브 개발에서 축적한 공유 기반을 활용할 수도 없었음
- 초기에는 각 팀이 자체적으로 문제를 해결하며 앱을 개발했으며, 이는 빠르게 시작하고 앱을 마이그레이션하는 데 효과적이었음
- 그러나, 각 팀이 동일한 문제를 여러 번 해결하면서 비효율적으로 중복 작업 발생
- RN에 대한 전문성을 쌓기 위해 시간과 노력을 투자했고, 속도를 우선시하면서도 일관성을 희생하는 트레이드오프를 의도적으로 선택
- 2023년 이후 모든 앱이 성숙해지면서 일관성을 강화하기 시작
- 공통 구성 요소(예: Identity, 실시간 모니터링, 성능 측정 등)를 공유 라이브러리로 추출하여 모든 앱에서 활용
- 이는 팀들이 이미 해결된 문제를 다시 풀 필요 없이 기존 솔루션을 활용하도록 지원
- 2025년엔 코드 공유를 더욱 확대하여
- 팀 간 지식과 전문성을 확산
- 공유 구성 요소 개선의 혜택을 모든 앱이 자동으로 누리게 함
- 엔지니어링 리소스를 절약하여 사용자 가치를 전달하는 작업에 집중
React Native의 미래
- React Native(RN)의 미래는 밝으며, Meta는 이 프로젝트의 훌륭한 관리자로서 정기적인 개선을 제공하고 있음
- 각 릴리스에서 개발자 피드백이 로드맵에 크게 반영되고 있으며, 빠른 앱을 만드는 것이 점점 더 쉬워질 것으로 기대
- Shopify는 New Architecture를 도입하며 RN의 발전을 지속적으로 지원할 계획
- Microsoft, Amazon, Tesla, SpaceX, Coinbase와 같은 여러 주요 기업이 RN을 사용하고 있으며, 고품질 서드파티 라이브러리와 프레임워크가 지속적으로 출시되고 있음
- Shopify는 아래와 같은 것들로 오픈 웹, 오픈 소스, 오픈 표준에 대해 기여하고 있음
- RN에 대한 코드 기여
- RN 릴리스의 공동 릴리스 캡틴 역할 수행
- React Native Skia, Reanimated와 같은 고효과 오픈 소스 프로젝트 후원
- Flashlist, Restyle, Tophat과 같은 오픈 소스 프로젝트 공개
- 추가적으로 2025년엔 React Native Working Group을 재시작함
- RN을 지원하는 조직의 주요 리더들을 모아 생태계의 주요 과제를 식별하고, 투자 우선순위를 정하며, 협력을 증진하고 중복된 작업을 줄이는 것이 목표
- 이전 참여 기업: Meta, Twitter, Coinbase, Microsoft 등
- 참여를 희망하는 경우 문의
- RN은 지난 5년간 큰 발전을 이루었으며, 도입을 주저하게 만들었던 많은 한계들이 이제는 사라짐
- RN을 한동안 안 써봤다면 지금은 RN을 다시 시도해 볼 적기임
인상적인 경험 공유입니다. 지금은 업무로 코틀린을 이용해서 안드로이드 앱 개발을 하고 있는데, 가끔 생각해봅니다. 꼭 네이티브로 갈 필요가 있을까...? (저의 경우 플랫폼과 긴밀하게 작업해야 할 것들이 있어 어쩔 수 없이 네이티브로 갔지만) 가능하면 React Native나 Flutter처럼 크로스 플랫폼이 지원되는 방향으로 가는 것도 좋을 것 같습니다.
"100% React Native should be an anti-goal. It is great for building features just once, but is not the right technology for everything."
"Instead of thinking native or React Native, think native and React Native."
엔지니어링은 100%가 없어요 ("무조건 A가 낫다"는 제목낚시 주의).
각각 장단점이 있고 상황에 맞는 도구가 있는거죠.
Shopify 팀 빌딩 철학도 볼 수 있어서 매우 좋은 글입니다.