프로젝트 배경
문제점 - 중소 커머스 사업자가 자체 온라인 쇼핑몰을 구축하려면 카페24·고도몰 등 SaaS에 종속되어 디자인·기능 커스터마이징에 한계가 있습니다. 월 유지비와 매출 연동 수수료 부담도 누적됩니다. - 기존 모놀리식 커머스 솔루션은 프론트엔드와 백엔드가 강결합되어, 디자인 리뉴얼이나 모바일 앱 추가 시 전체 시스템을 다시 개발해야 합니다. 초기 비용은 낮아도 확장 비용이 급증합니다. - 특수 동물(파충류
프로젝트 성과
Headless Commerce 아키텍처 구현
Medusa.js v2 백엔드(상품/카테고리/장바구니/결제/주문 API) + Next.js 14 스토어프론트를 완전 분리한 API-first 아키텍처. 프론트엔드 교체·모바일 앱·멀티 채널 확장이 백엔드 변경 없이
27종 상품 리치 카탈로그
5개 카테고리, 상품별 가격·할인율·평점·리뷰수·판매수를 포함한 리치 카탈로그. 카테고리 필터, 텍스트 검색, 5종 정렬(인기순/가격순/신상품순/평점순)로 원하는 상품을 즉시 탐색.
풀사이클 커머스 플로우
장바구니(수량 증감/삭제/소계 자동계산) → 체크아웃(배송정보/결제수단 4종/쿠폰) → 주문 완료(주문번호/배송예정일) 전체 구매 사이클 구현. Medusa Cart/Order API와 실시간 동기화.
멤버십 + 이벤트 CRM 시스템
6단계 등급제(0~7% 상시할인, 쿠폰/무료배송/VIP전용관 차등 혜택), 진행률 바+혜택 비교 테이블. 알뽑기 이벤트(CSS 애니메이션+컨페티, 쿠폰 중복 방지).
인터랙티브 가상 쇼룸
테라리움 이미지 위 8개 상품 태그 핀, 클릭 시 상품 정보 플로팅 카드+구매 버튼. 사육장 인테리어 구성을 직접 탐색하는 도메인 특화 UX.
핵심 기능
진행 단계
기획
2026.03.
커머스 UX 플로우 설계(상품 탐색→장바구니→체크아웃→주문), 상품 카탈로그 구조(5카테고리 27상품), 멤버십 6단계 정책, 이벤트 프로모션 시나리오, Medusa.js v2 아키텍처 설계
프로젝트 상세
1) 포트폴리오 소개 특수 동물(파충류) 전문 쇼핑몰을 위한 풀 커머스 플랫폼입니다. Medusa.js v2 Headless Commerce 엔진을 백엔드로, Next.js 14를 스토어프론트로 분리한 API-first 아키텍처로 구축했습니다. 27종 상품(5개 카테고리)의 리치 카탈로그, 실시간 장바구니+체크아웃, 6단계 멤버십 등급제, 인터랙티브 쇼룸(상품 태그 핀), 알뽑기 이벤트 프로모션, 마이페이지






