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

간단 소개

컬리몰이 레거시 시스템을 탈피하고 Next.js 기반 NX 프로젝트를 통해 성능 개선, 사용자 경험 향상, 코드 품질 개선을 이룬 여정을 소개합니다.

AI Summary

컬리몰 NX 프로젝트 개요
- 기존 고도몰 기반 레거시 시스템에서 벗어나 Next.js 기반의 NX 프로젝트를 진행, 뷰티컬리 등 새로운 스펙 구현.
- 레거시 시스템의 파편화된 코드, 긴 URL, PC/모바일 분리 문제점을 해결하고 사용자 경험 개선 목표.
주요 성과 및 개선 사항
- 상품 상세 페이지 로딩 속도 개선 (LCP 3.4초 -> 1.5초), 사용자 체감 성능 향상.
- 통일된 UI/UX 제공 및 간결하고 기억하기 쉬운 URL 제공.
- 코드 품질 향상을 위해 Lint 룰 추가 및 지속적인 코드 개선 노력.
개발 과정 및 노력
- 레거시 시스템의 스펙 히스토리 부족 문제 해결을 위해 기획팀과 협업.
- 백오피스툴에 구현된 복잡한 코드 정리 및 공통 스펙 구현에 집중.
- 공식 문서 활용을 통한 빌드 시간 단축 (약 20% 향상).
- PR마다 성능 테스트를 수행하고, 상품 상세 페이지 성능 모니터링.