기존 이커머스 플랫폼의 프론트엔드를 Next.js로 마이그레이션하고, 검색·결제 플로우를 최적화하여 전환율을 개선한 프로젝트.
Vue 2 + Nuxt 2로 구축된 기존 이커머스 프론트엔드를 Next.js 14 App Router로 마이그레이션했습니다. 단순 프레임워크 교체가 아닌, 검색 → 상품 상세 → 장바구니 → 결제의 전체 User Flow를 분석하고 각 단계의 병목을 제거했습니다.
핵심 지표:
• LCP 3.2s → 1.1s (Next.js ISR + Image Optimization)
• 검색 응답 시간 800ms → 40ms (Algolia 도입)
• 결제 플로우 이탈률 38% → 22% (단계 축소 + Optimistic UI)
Turborepo로 모노레포를 구성하여 packages/ui, packages/utils를 백오피스와 고객 앱이 공유합니다.
장바구니 상태 경쟁 조건 — 여러 탭에서 동시에 장바구니를 수정하면 재고 차감이 꼬이는 문제. 특히 재고가 1개 남았을 때 두 사용자가 동시에 담으면 oversell이 발생.
ISR 캐시 무효화 타이밍 — 상품 가격이 변경되었는데 ISR 캐시가 남아있어 구매자에게 이전 가격이 보이는 문제. revalidate 간격이 너무 짧으면 서버 부하, 너무 길면 데이터 불일치.
Algolia 인덱스 동기화 — PostgreSQL에서 상품 데이터가 업데이트되면 Algolia 인덱스도 갱신해야 하는데, 네트워크 실패 시 검색 결과와 실제 데이터가 어긋남.
Redis 기반 분산 락 + Optimistic Locking — 장바구니 추가 시 Redis SETNX로 SKU별 분산 락을 획득하고, inventory 테이블에 version 컬럼을 추가하여 UPDATE ... WHERE version = ? 패턴으로 동시성 제어.
On-Demand ISR + Webhook — 백오피스에서 가격 변경 시 Supabase Webhook → Next.js revalidateTag() 호출. 평상시에는 1시간 ISR, 가격/재고 변경 시 즉시 무효화.
Change Data Capture 패턴 — PostgreSQL의 LISTEN/NOTIFY로 상품 변경 이벤트를 감지하고, 실패 시 Dead Letter Queue에 쌓아 5분마다 재시도하는 retry 메커니즘 구현.
