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

컬리 커머스 웹프론트팀이 고도몰 기반 레거시(PHP)를 Next.js 기반 자체 프레임워크 NX로 7개월에 걸쳐 이관한 과정을 다룬다. 2021년 시작해 2022년 8월 일부 PHP 페이지를 제외한 전 서비스를 NX로 전환했고, 상품상세 LCP를 3.4초에서 1.5초로 줄였다.

핵심 포인트

파편화된 상품상세(React/Vue/바닐라 JS 혼재)를 NX의 SSR로 통일해 LCP 3.4초에서 1.5초로 개선
PC/모바일 별도였던 URL을 하나로 합치고 짧고 기억하기 쉬운 경로로 정리
상품번호로 분기하던 레거시 UI 스펙을 소수 상품만 스펙아웃하는 의사결정으로 걷어냄
lint-staged와 React/TS 필수 error 룰로 정적결함 비율을 1.76%에서 0.12%로 낮춤
Next.js 빌드 캐시 적용으로 빌드 9분에서 6~7분, 약 20% 단축
성능에 민감한 상품상세를 대상으로 매 PR마다 성능 테스트 수행

상세 정리

배경: 기존 컬리몰은 고도몰 소스 위에 얹은 서비스라 성장 한계가 있어 탈고도를 목표로 NX(Next.js 라이브러리 기반)를 도입했고, 2021년 12월엔 비밀번호 찾기·찜하기 모바일만 이관된 상태였다.
확장: 2022년 상품·주문·회원 시스템을 새로 만드는 전사 프로젝트와 3P 마켓플레이스·뷰티컬리 스펙이 겹쳐, 신규 요구사항 구현과 레거시 NX 전환을 병행했다.
성능: 상품상세를 SSR로 구현해 LCP를 3.4초에서 1.5초로 줄였고, 이 페이지는 PC·모바일·앱 웹뷰로 모두 제공돼 전 사용자가 체감 속도 개선을 얻었다.
URL 정리: goods_view.php?goodsno=... 식의 긴 경로를 /goods/51483 처럼 단축하고, PC/모바일 분리 URL을 단일 URL로 통합했다.
레거시 난점: 상품상세 UI가 상품번호로 코드 분기하는 방식과 백오피스툴에 구현을 정의하고 API로 스크립트를 로드하는 방식으로 파편화돼, 상품마다 쓰는 라이브러리가 달라 이관이 어려웠다.
의사결정: N만 개 상품에 개별 적용된 UI를 다 옮기는 대신 소수 상품 전용 UI는 스펙아웃하도록 리더십 승인을 받아 본연의 기능 구현에 집중했다.
Lint 전략: 커밋 전 변경 파일만 정적분석하는 lint-staged를 먼저 넣고 React/TS 필수 error 3종을 도입했으나, 즉시 error로 바꾸면 수정 대상이 790개라 점진 적용했다.
결함 감소: 3월엔 주당 100개씩 줄이는 목표로 시작해 4월엔 360개까지 줄였고, 반복 안티패턴을 공유해 코드는 늘어도 결함 비율은 낮게 유지했다.
결함 지표: 2022년 1월 44,699 LOC에 정적결함 790개(1.76%)에서 8월 163,304 LOC에 211개(0.12%)로 개선했다.
빌드 캐시: node_modules 외에 Next.js 빌드 결과물까지 CI 캐시하도록 공식문서를 보고 적용해 빌드 시간을 9분에서 6~7분으로 약 20% 단축했다.
성능 게이트: 상품상세를 대상으로 매 PR마다 성능 테스트를 돌리고 지표에 문제가 있으면 벤치마크를 노출하며, 추후 낮은 점수는 머지 차단까지 강제할 계획이다.