Shopify가 Shop.app을 구축한 방법: Remix 성공 사례

Shop은 사용자가 상점을 발견하고, 구매하며, 다양한 배송 서비스에서 주문을 추적할 수 있도록 하는 Shopify의 인기 모바일 애플리케이션입니다. 2023년 초, Shopify는 Shop을 웹으로 가져오기로 결정하였으며, 이는 네이티브 앱과 기능 동등성을 달성하고 웹 플랫폼의 고유한 장점을 활용하기 위한 것이었습니다. 이 결정은 더 많은 사용자를 확보하고, 빠른 피드백 루프를 생성하며, 신속한 실험과 개선을 가능하게 할 수 있는 잠재력에 의해 촉발되었습니다.

Shopify는 Shop.app 구축을 위한 프레임워크로 Remix를 선택했습니다. 첫째, Remix의 React와의 호환성 덕분에 팀은 기존 React Native 앱의 로직, 스타일 및 UX를 재사용할 수 있었습니다. 둘째, Remix는 Apollo Client를 통한 데이터 가져오기와 같은 팀의 기존 패턴을 수용할 수 있는 유연성을 제공했습니다. 또한, Remix는 향상된 UX와 SEO를 위한 서버 사이드 렌더링과 같은 필수 기능을 제공했습니다. 이 프레임워크의 적응성은 작은 프로젝트인 Shop.ai에서 처음 입증되어 팀은 Shop.app 프로젝트에 대한 Remix의 능력에 대한 확신을 가질 수 있었습니다.

Remix를 사용한 Shop.app 개발은 Shopify의 기존 모노레포 구조를 활용했습니다. 이 구조는 iOS, Android 및 웹 버전의 Shop 소스 코드를 포함하고 있어 기존 마케팅 페이지의 마이그레이션을 간소화하고 네이티브 및 웹 개발자 간의 협업을 용이하게 했습니다. Remix의 유연성 덕분에 기존 인프라와의 원활한 통합이 가능해져 팀은 신속하게 개발을 시작할 수 있었습니다. 팀은 단 3개월 만에 초기 제품 페이지를 출시할 수 있었으며, 이는 빠른 개발 주기를 촉진하는 Remix의 효율성을 보여줍니다.

팀이 직면한 한 가지 도전 과제는 느린 핫 모듈 교체(HMR) 시간이었으며, 초기에는 약 9초가 소요되었습니다. 이 문제는 Remix의 새로운 Vite 플러그인을 채택함으로써 해결되었고, HMR 시간은 즉시 2.3초로 개선되었습니다. Tailwind CSS의 빌드 프로세스를 병렬화하는 등의 추가 최적화를 통해 HMR 시간을 인상적인 0.1초로 단축시켰습니다. 이 90배의 개발 속도 개선은 팀의 생산성과 신속한 반복 능력을 크게 향상시켰습니다.

Remix를 사용한 Shop.app의 성공적인 개발은 여러 주요 성과를 보여주었습니다. 팀은 간단한 마케팅 사이트를 수백만 명의 사용자에게 서비스를 제공하는 완전한 웹 애플리케이션으로 신속하게 변환할 수 있었습니다. Remix의 유연성 덕분에 기존 패턴과 라이브러리를 통합할 수 있었으며, Remix 전용 기능을 점진적으로 채택할 수 있는 옵션도 제공되었습니다. 이 프로젝트는 프로젝트 제약 및 목표에 맞는 올바른 도구를 선택하는 것의 중요성을 강조했습니다. 궁극적으로 Shopify의 Shop.app 구축에 대한 Remix 경험은 복잡하고 확장 가능한 웹 애플리케이션을 짧은 시간 내에 효율적으로 개발할 수 있는 프레임워크의 잠재력을 보여줍니다.