컬리, 레거시 시스템 탈피 위해 Next.js 기반 'NX' 프로젝트로 컬리몰 전면 전환

컬리 커머스 웹프론트 팀은 기존 고도몰 소스 위에 구축된 레거시 시스템을 이탈하기 위해 Next.js 라이브러리 기반의 NX 프로젝트를 2021년부터 추진했다. 2022년 8월에는 컬리 자체 PHP 서비스 일부 페이지를 제외하고 모든 서비스를 NX로 전환 완료하며, 큐레이티드 마켓플레이스(3P)와 뷰티컬리 등 새로운 스펙을 구현했다.

사용자 경험 개선

NX 전환을 통해 상품상세 페이지의 LCP(Largest Contentful Paint) 점수가 3.4초에서 1.5초로 대폭 감소했다. 이는 PC, 모바일 및 앱 웹뷰까지 모든 사용자에게 빠른 로딩 속도를 제공한다. 또한, 레거시 시스템의 파편화된 UI를 통일하여 일관된 인터랙션을 제공하고, 길고 복잡한 URL을 짧고 기억하기 쉬운 형태로 표준화했다. PC와 모바일이 별도 URL을 사용하던 레거시 구조를 하나의 URL로 통합해 유지보수성과 접근성을 높였다.

코드 품질 및 개발 효율성 향상

레거시 상품상세 페이지에 존재했던 상품번호 기반 if문 분기 처리나 백오피스 스크립트 로드 등 비표준 구현 방식을 제거하고, 본연의 기능에 집중하도록 스펙아웃을 진행했다. Lint 룰을 강화하여 커밋 전 자동 검사를 수행하고, React와 Vue, 바닐라 JS로 혼재되어 있던 코드를 Next.js 기반으로 표준화했다. 이를 통해 정적 결함 비율이 **1.7%**에서 **0.13%**로 낮아졌으며, 빌드 시 CI 캐싱 전략을 적용해 빌드 속도를 약 20% 단축했다.