
프론트엔드
새로운 컬리몰 NX를 소개합니다.
두줄요약
컬리몰 웹프론트팀의 NX 전환 과정을 소개한 글입니다. 레거시를 걷어내며 성능 개선, URL 통합, 코드 품질 강화를 이뤘습니다.
문제 상황
- 고도몰 기반 레거시 위에 흩어진 상품·주문·회원 스펙과 파편화된 구현 방식 정리 필요
- 상품상세의 느린 체감 성능과 PC/MOBILE 분리 URL, 일관성 없는 UI 문제 존재
- 코드와 스펙 히스토리 관리가 부족해 신규 요구사항 반영 시 복잡도와 유지보수 부담 증가
해결 방법
- Next.js 라이브러리 기반 NX로 주요 서비스를 단계적으로 이관
- 상품상세를 SSR로 전환해 LCP 개선, 하나의 URL로 PC/MOBILE 처리
- Lint 규칙과 lint-staged 도입으로 코드 품질 기준을 강제하고 정적결함 축소
성능/운영 포인트
- Next.js 빌드 캐시 적용으로 빌드 시간을 9분에서 6~7분으로 단축
- PR마다 상품상세 성능 테스트를 수행해 민감 페이지 품질 점검
- 반복 안티패턴 공유와 컨벤션 정착으로 코드리뷰 효율 향상
