React Native로 제작된 Build.com 앱

캘리포니아 치코에 본사를 둔 Build.com은 홈 인테리어 제품을 판매하는 최대 규모의 온라인 리테일러 중 하나다. 이 팀은 18년 동안 웹 중심의 강력한 비즈니스를 운영해 왔으며, 2015년 모바일 앱 개발을 고민하기 시작했다. 당시 작은 팀 규모와 제한된 네이티브 개발 경험 때문에 독자적인 안드로이드와 iOS 앱을 만드는 것은 현실적이지 않았다. 대신, 매우 새로운 React Native 프레임워크를 도입하기로 결정했다. 2015년 8월 12일 React Native v0.8.0으로 첫 커밋을 진행했고, 2016년 10월 15일 양대 앱 스토어에 앱을 출시했다. 지난 2년 동안 앱을 지속적으로 업그레이드하고 확장해 왔으며, 현재는 React Native 버전 0.53.0을 사용하고 있다.

앱은 https://www.build.com/app에서 확인할 수 있다.

주요 기능

이 앱은 일반적인 이커머스 앱에서 기대할 수 있는 모든 기능을 제공한다. 상품 목록, 검색 및 정렬 기능, 복잡한 상품 설정 기능, 찜하기 등이 포함된다. 표준 신용카드 결제는 물론 PayPal, iOS 사용자를 위한 Apple Pay도 지원한다.

특히 눈여겨볼 만한 몇 가지 독특한 기능은 다음과 같다:

1. 약 40개 상품에 대해 90가지 마감재를 적용한 3D 모델 제공
2. 증강현실(AR) 기능을 통해 조명과 수도꼭지가 실제 집 안에서 어떻게 보일지 98% 정확도로 확인 가능. Build.com React Native 앱은 Apple 앱스토어에서 AR 쇼핑으로 소개됨. 현재 안드로이드와 iOS 모두에서 AR 기능 사용 가능
3. 프로젝트 단계별 쇼핑 리스트를 작성하고 선택 과정에서 협업할 수 있는 프로젝트 관리 기능

앞으로도 AR을 활용한 몰입형 쇼핑의 다음 단계를 비롯해, 앱 사용 경험을 지속적으로 개선할 다양한 기능을 개발 중이다.

개발 워크플로우

Build.com은 각 개발자가 자신에게 가장 적합한 도구를 선택할 수 있도록 한다.

• 사용하는 IDE로는 Atom, IntelliJ, VS Code, Sublime, Eclipse 등이 있다.
• 유닛 테스트의 경우, 개발자는 새 컴포넌트에 대한 Jest 유닛 테스트를 작성해야 한다. 또한 jest-coverage-ratchet을 사용해 앱의 오래된 부분에 대한 테스트 커버리지를 높이기 위해 노력하고 있다.
• 베타 버전과 릴리스 후보를 빌드하기 위해 Jenkins를 사용한다. 이 프로세스는 잘 작동하지만, 릴리스 노트와 다른 산출물을 만드는 데 상당한 작업이 필요하다.
• 통합 테스트는 데스크톱, 모바일, 웹을 아우르는 공유 테스터 풀로 구성된다. 자동화 엔지니어는 Java와 Appium을 사용해 자동화된 통합 테스트 스위트를 구축 중이다.
• 워크플로우의 다른 부분에는 상세한 eslint 설정, 테스트에 필요한 속성을 강제하는 커스텀 규칙, 문제가 있는 변경 사항을 차단하는 pre-push 훅 등이 포함된다.

앱에서 사용하는 라이브러리

Build.com 앱은 Redux, Moment, Numeral, Enzyme과 여러 React Native 브릿지 모듈을 포함한 다양한 오픈소스 라이브러리를 사용한다. 또한, 일부 포크한 오픈소스 라이브러리도 활용한다. 이 라이브러리들은 개발이 중단되었거나 커스텀 기능이 필요해 포크한 것이다. 간단히 살펴보면 약 115개의 JavaScript 및 네이티브 종속성이 있다. 현재 사용하지 않는 라이브러리를 제거할 수 있는 도구를 탐색 중이다.

현재 TypeScript를 통해 정적 타이핑을 추가하고 있으며, 옵셔널 체이닝도 도입을 고려 중이다. 이러한 기능은 여전히 발생하는 몇 가지 버그를 해결하는 데 도움이 될 것이다:

• 잘못된 타입의 데이터
• 예상과 달리 객체가 특정 값을 포함하지 않아 발생하는 undefined 데이터

오픈소스 기여

우리는 오픈소스에 크게 의존하고 있기 때문에, 팀은 커뮤니티에 기여하는 데 헌신한다. Build.com은 팀이 개발한 라이브러리를 오픈소스로 공개할 수 있도록 지원하며, 우리가 사용하는 라이브러리에 기여하도록 장려한다.

우리는 다음과 같은 React Native 라이브러리를 공개하고 유지보수해왔다:

• react-native-polyfill
• react-native-simple-store
• react-native-contact-picker

또한 React과 React Native를 포함한 다양한 라이브러리에 기여했는데, 그 중 일부는 다음과 같다: react-native-schemes-manager, react-native-swipeable, react-native-gallery, react-native-view-transformer, react-native-navigation.

우리의 여정

지난 몇 년간 React Native와 생태계는 크게 성장했다. 초기에는 매 버전마다 몇 가지 버그를 수정하지만, 동시에 새로운 문제를 야기하는 경우가 많았다. 예를 들어, Android에서 원격 JS 디버깅이 몇 달 동안 작동하지 않던 시절도 있었다. 다행히 2017년부터는 훨씬 안정적으로 발전했다.

네비게이션 라이브러리

우리가 지속적으로 마주한 주요 과제 중 하나는 네비게이션 라이브러리였다. 오랜 시간 동안 Expo의 ex-nav 라이브러리를 사용했다. 이 라이브러리는 잘 작동했지만 결국 더 이상 지원되지 않게 되었다. 그러나 당시 우리는 주요 기능 개발에 집중하고 있었기 때문에 네비게이션 라이브러리를 교체할 시간적 여유가 없었다. 이 때문에 라이브러리를 포크하고 React 16과 iPhone X를 지원하도록 패치해야 했다. 결국 react-native-navigation으로 마이그레이션할 수 있었고, 이 라이브러리가 계속 지원되길 바란다.

브릿지 모듈

또 다른 큰 도전은 브릿지 모듈과 관련된 문제였다. 처음 시작했을 때, 많은 핵심 브릿지가 누락되어 있었다. 우리 팀원 중 한 명은 앱에서 안드로이드 연락처 선택기에 접근하기 위해 react-native-contact-picker를 직접 작성했다. 또한, React Native 내부의 변경 사항으로 인해 많은 브릿지가 깨지는 문제도 발생했다. 예를 들어, React Native v40에서 주요 변경 사항이 있었고, 우리가 앱을 업그레이드했을 때, 아직 업데이트되지 않은 3~4개의 라이브러리를 수정하기 위해 PR을 제출해야 했다.

앞으로의 전망

React Native가 계속 성장하면서, 우리 커뮤니티에 바라는 점은 다음과 같다:

• 네비게이션 라이브러리를 안정화하고 개선하기
• React Native 생태계 내 라이브러리 지원을 유지하기
• 프로젝트에 네이티브 라이브러리와 브릿지 모듈을 추가하는 경험을 개선하기

React Native 커뮤니티의 기업과 개인들은 우리가 사용하는 도구를 개선하기 위해 자발적으로 시간과 노력을 투자해 왔다. 오픈소스에 아직 참여하지 않았다면, 사용하는 라이브러리의 코드나 문서를 개선하는 데 관심을 가져보길 바란다. 시작하는 데 도움이 될 만한 많은 자료가 있으며, 생각보다 훨씬 쉬울 수 있다!