새로운 컬리몰 NX를 소개합니다.

컬리 웹프론트팀은 고도몰 기반 레거시에서 벗어나 상품·주문·회원 시스템 개편과 뷰티컬리 등 신규 요구사항을 수용하기 위해 Next.js 기반 NX로 서비스를 전환했다. 상품 상세를 SSR로 재구현해 LCP를 3.4초에서 1.5초로 개선하고, 공통 UI와 PC·모바일 통합 URL을 제공했으며, 상품별로 제각각이던 특수 구현은 스펙을 정리하고 일부를 제외해 복잡성을 낮췄다. 코드 품질을 위해 lint-stage와 정적 분석 규칙을 도입하고, Next.js 빌드 캐싱 및 PR별 성능 테스트도 적용했다. 7개월간 전환을 진행하며 정적 분석 결함 비율을 낮추고 빌드 시간을 단축했으며, 레거시 마이그레이션에는 스펙 정리와 지속적인 품질 관리가 함께 필요하다는 점을 보여준다.

• 레거시 전환은 코드뿐 아니라 문서화되지 않은 스펙과 예외 동작을 파악하는 작업도 포함한다.
• 상품별로 흩어진 특수 UI는 공통 스펙으로 정리하고, 유지 비용이 큰 일부 기능은 과감히 스펙아웃할 수 있다.
• lint-stage와 팀 컨벤션 기반 ESLint 규칙을 도입하면 코드 스타일 논쟁을 줄이고 리뷰를 핵심 로직에 집중할 수 있다.
• Next.js 공식 문서의 CI 빌드 캐싱을 적용해 빌드 시간을 줄이고, PR마다 성능 테스트를 수행해 회귀를 살핀다.