"Remixing Shopify's Admin" by Craig Brunner
- Shopify Admin은 6,700만 건의 일일 페이지 뷰와 100개 이상의 팀이 기여하는 방대한 TypeScript 단일 앱으로, 규모와 기여의 복잡성 문제를 겪고 있습니다. 🏢
- 초기에는 라우팅, 폼 처리, 로딩 스켈레톤, UX 일관성 부족 등으로 인해 개발 및 사용자 경험이 혼란스러웠습니다. 🌪️
- Remix와 React Router로의 마이그레이션을 통해 라우팅 구조를 재정비하고,
useQuery를 제거하며, 일관된 로딩 경험을 제공하게 되었습니다. 🚀
- 'Route Manifests'라는 TypeScript 파일을 도입하여 모든 라우트, 로더, 액션, 폼 스키마 및 메타데이터(검색, 접근 권한 등)를 정적으로 분석 가능한 단일 진실 공급원으로 만들었습니다. 🗺️
- LLM(대규모 언어 모델)의 등장으로 AI 접근성이 Shopify의 최우선 과제가 되었으며, 라우트 스키마를 활용하여 AI가 폼을 채우는 등의 기능을 가능하게 했습니다. 🤖
- 성능 개선을 위해 로더 프리페칭, GraphQL 캐시를 IndexedDB에 영구 저장, 뷰 트랜지션 도입으로 로딩 스켈레톤을 제거하여 빠르고 일관된 페이지 로드를 구현했습니다. ⚡
- 'Intents'(페이지 스택)라는 새로운 개념을 도입하여 Admin을 운영체제처럼 작동하게 하고, 페이지 간의 전역적인 호출 및 데이터 반환을 가능하게 하여 AI 활용 및 더티 상태 관리를 용이하게 했습니다. 🔄
- SSR(서버 사이드 렌더링)을 사용하지 않는 전략을 채택했는데, 이는 재방문 고객이 많아 브라우저 캐싱의 이점이 크고 서버 관리 복잡성을 줄이기 위함입니다. 💡
- 궁극적으로는 수많은 팀의 기여에도 불구하고 Admin 전체에서 응집력 있고 통일된 사용자 경험을 제공하는 것을 목표로 합니다. ✨