한국미스미커머스 플랫폼
React · Next.js 마이그레이션

10년 된 레거시(PHP·RxJS·Twig)를 React·Next.js로 전환한 대규모 마이그레이션. 운영 중단 없이 페이지 단위로 점진 전환하며, LCP 60% 단축과 이탈률 15%p 감소를 달성했습니다.

핵심 설계 전략

운영 중단 없이 점진적으로 전환하는 마이그레이션

월 40만 UV 규모 서비스를 멈추지 않고 새 스택으로 옮기기 위해, 페이지 단위 점진 전환과 디바이스 분리 빌드 전략을 수립했습니다.

레거시와 신규 코드를 동시 운용하면서, 페이지마다 안정성이 검증된 시점에 라우팅을 교체했습니다.

Why This Way?

한 번에 모든 페이지를 옮기면 장애 영향 범위가 커집니다. 단위 검증·롤백 가능한 구조를 우선했습니다.

Lighthouse·web-vitals 기반 분석 후 Lazy Load와 S3+CloudFront CDN을 적용해 초기 렌더링을 가속했습니다.

Why This Way?

데이터로 병목을 검증한 뒤 적용했기 때문에 효과가 정량으로 확인됩니다. GA4 기준 이탈률도 42% → 27%로 감소했습니다.

@next/bundle-analyzer로 디바이스별 번들을 분석하고, 모바일에 불필요한 번들을 제거해 타겟 빌드 구조를 설계했습니다.

Button·Checkbox·Modal 등 공통 UI를 Props 인터페이스 기반으로 설계해, 신규 페이지 개발 리드타임을 30% 단축했습니다.

주요 화면 설계

레거시 사용자의 학습 비용을 최소화하면서, 카테고리 탐색·검색·비교의 흐름을 재정의했습니다.

탭을 눌러 화면을 전환해보세요

권한 기반 헤더 설계

로그인 전

회원가입·로그인을 직관적으로 노출하고, 카테고리 탐색을 즉시 시작할 수 있도록 구성했습니다.

로그인 후

My 부품표·견적·CAD 다운로드 등 권한별 메뉴를 노출해, 반복 작업을 한 번의 클릭으로 줄였습니다.

Next Project