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

컬리가 레거시 PHP 기반 시스템을 Next.js 기반 NX 플랫폼으로 마이그레이션하여 상품상세 페이지 LCP를 3.4초에서 1.5초로 단축

2022년 9월 1일12분intermediate

AI 요약

Context

기존 컬리몰은 고도몰(GODO) 소스 위에 구현된 PHP 기반 서비스로, 상품상세 페이지가 React, Vue, 바닐라 자바스크립트로 파편화되어 개발·유지보수가 어려웠습니다. 스펙의 히스토리 관리 부족과 N만 개 상품마다 상이한 구현방식(제품번호별 조건분기, 백오피스 동적 스크립트 로드)으로 인해 코드 복잡도가 증가하고 있었습니다. PC/모바일 별도 URL 관리와 일관성 없는 UI 인터랙션도 문제였습니다.

Technical Solution

레거시 PHP 시스템을 Next.js 기반 NX 프로젝트로 완전 재구축: 2021년 12월부터 2022년 8월까지 7개월 진행
SSR(Server-Side Rendering) 도입: 상품상세 등 주요 페이지를 SSR로 구현하여 초기 렌더링 성능 개선
단일 URL 통합: PC/모바일 별도 URL을 하나의 URL로 통합 처리 및 URL 단축(/goods/51483 형태로 정규화)
Lint 규칙 자동화: lint-stage로 커밋 전 정적 분석 실행 강제 및 React/TypeScript 3대 규칙 error 지정
성능 빌드 캐싱: Next.js 공식문서 기반으로 node_modules 외 빌드 결과물까지 캐시 적용
스펙 아웃(Scope Out): 모든 상품에 공통 적용 불가능한 특정 UI 스펙 제거로 복잡도 감소
PR 기반 성능 테스트: 상품상세 페이지에 대해 매 PR마다 성능 벤치마크 실행

Impact

상품상세 페이지 LCP: 3.4초 → 1.5초 단축
빌드 소요시간: 9분 → 6~7분 단축 (약 20% 향상)
정적 분석 결함 감소: 790개(2022년 1월, 정적결함/LOC 1.76%) → 211개(2022년 8월, 정적결함/LOC 0.12%)
LOC 증가: 44,699줄(2022년 1월) → 163,304줄(2022년 8월)로 3배 이상 확장되었으나 결함률은 14.7분의 1로 감소

Key Takeaway

레거시 시스템 마이그레이션 시 초기부터 정적 분석 규칙을 강제하고 반복적으로 발견되는 안티패턴을 공유하면, 코드베이스 확장 과정에서 결함률 증가를 방지할 수 있습니다. 또한 라이브러리 공식문서 학습을 통해 성능 최적화 포인트(빌드 캐싱 등)를 발굴할 수 있습니다.

실천 포인트

레거시 시스템을 모던 프레임워크(Next.js 등)로 마이그레이션하는 대규모 프로젝트에서는, 처음부터 lint-stage와 정적 분석 규칙(error 수준)을 강제하되, 기존 코드가 많을 경우 주간 목표(예: 주 100개)를 설정해 점진적으로 개선하면 개발 생산성을 유지하면서 코드 품질을 확보할 수 있습니다.

태그

#Legacy-Migration #Next.js #SSR #Lint #Performance

원문 읽기