가쉬 — 패션 브랜드 온라인 쇼핑몰
- 기여도
- 100%
- 기간
- 3개월
프로젝트 개요
국내 패션 스타트업 '가쉬'의 창업 초기 단계부터 온라인 쇼핑몰 전체를 설계하고 구현했습니다. 상품 카탈로그 관리, 장바구니, Stripe 결제, 주문 현황 추적, 관리자 대시보드를 포함한 풀스택 이커머스 플랫폼입니다. Next.js App Router 기반 SSG로 SEO를 확보하고, Supabase Row Level Security로 사용자별 데이터를 격리했습니다.
상세 기술 스택
- Next.js 14 (App Router)
- TypeScript 5
- Supabase (PostgreSQL + RLS)
- Stripe API v3
- Tailwind CSS 4
- Vercel
- Resend (이메일 알림)
기술적 문제 해결 과정
Problem 1
Stripe 결제 완료 후 재고 감소가 간헐적으로 누락되는 문제 발생. 네트워크 지연으로 클라이언트에서 직접 DB를 업데이트하는 방식에 한계가 있었습니다.
Solution
Stripe Webhook 엔드포인트를 구현하여 payment_intent.succeeded 이벤트 수신 시 DB 트랜잭션으로 재고를 차감하도록 변경. Idempotency Key를 활용해 네트워크 재시도 시 중복 처리를 방지했습니다.
Result
결제-재고 동기화 100% 달성. 배포 후 3개월간 재고 불일치 0건 유지.
Problem 2
상품 목록 페이지 초기 로드 시 LCP 4.2초 — Core Web Vitals 기준 미달. 상품 이미지와 데이터를 클라이언트에서 fetch하는 구조가 원인이었습니다.
Solution
Next.js ISR(Incremental Static Regeneration)을 적용하여 빌드 타임에 정적 페이지를 생성. next/image의 sizes 속성과 priority 플래그를 활용해 이미지를 WebP로 자동 최적화하고, Vercel CDN 캐싱을 적극 활용했습니다.
Result
LCP 1.8초 (57% 개선), Lighthouse Performance 93점, SEO 98점 달성.