쇼핑몰
프론트엔드
뷰티·라이프스타일 브랜드 독립몰 프론트엔드 데모. 상품 목록, 상품 상세, 장바구니, 결제 플로우까지 완성된 쇼핑 경험을 구현한 고품질 프론트엔드입니다.
SPEC
기술 스펙
카테고리
독립몰 · 자사몰 프론트엔드
업종
뷰티 · 화장품 · 라이프스타일 · 생활용품
개발 언어
HTML5 CSS3 JavaScript (ES6+)
데이터베이스
localStorage (장바구니 상태 유지)
프론트엔드
Vanilla JS CSS Grid / Flexbox IntersectionObserver
백엔드
없음 (프론트엔드 데모)
클라우드 / 배포
Vercel (GitHub 자동 배포)
반응형
PC · 태블릿 · 모바일 완전 대응
FEATURES
핵심 기능
메인 쇼핑 페이지
히어로 배너, 신상품 그리드, 카테고리 카드, 브랜드 가치 스트립, 고객 후기, 뉴스레터 구독 폼.
상품 목록 · 필터
카테고리별 상품 목록 페이지. 가격순·인기순 정렬. 상품 카드에 할인율·평점·찜·장바구니 버튼.
상품 상세 페이지
상품 이미지 갤러리, 옵션 선택, 수량 조절, 상품 설명, 리뷰 섹션. 관련 상품 추천.
장바구니 · 주문 요약
상품 테이블, 수량 스테퍼, 삭제 버튼. 우측 sticky 주문 요약 카드(상품금액·배송비·쿠폰·최종금액).
위시리스트
상품 카드의 하트 버튼으로 위시리스트 추가/제거. 상태가 시각적으로 즉시 반영.
로그인 · 회원가입
이메일·비밀번호 로그인 폼. 유효성 검사 및 에러 메시지. 소셜 로그인 버튼 UI.
HIGHLIGHTS
주요 특징
럭셔리 뷰티 브랜드 감성 디자인
MAISON LUMIÈRE 브랜드 컨셉으로 제작된 고급 뷰티 쇼핑몰 디자인. 세리프 폰트, 여백 중심 레이아웃, 골드 포인트 컬러로 프리미엄 브랜드 감성을 표현합니다.
완성된 쇼핑 플로우
메인 → 상품 목록 → 상품 상세 → 장바구니 → 결제 단계까지 실제 쇼핑몰과 동일한 플로우를 구현. 클라이언트에게 완성된 쇼핑 경험을 즉시 시연할 수 있습니다.
백엔드 연동 준비 완료 구조
현재는 localStorage 기반 데모이지만, 상품 데이터 구조와 API 호출 위치가 명확히 분리되어 있어 Node.js, Firebase, Supabase 등 백엔드 연동 시 최소한의 수정으로 실서비스 전환이 가능합니다.
ABOUT
상세 설명
이 쇼핑몰 프론트엔드는 뷰티·라이프스타일 브랜드의 독립몰(자사몰)을 위한 고품질 프론트엔드 데모입니다. 네이버 스마트스토어나 카페24 같은 플랫폼 의존 없이 완전히 커스터마이징된 자사몰을 원하는 브랜드를 위해 설계되었습니다.
메인 페이지부터 상품 목록, 상품 상세, 장바구니, 결제 페이지까지 실제 쇼핑몰과 동일한 완성된 플로우를 구현했습니다. 각 페이지는 독립적으로 작동하면서도 일관된 디자인 시스템으로 연결되어 있습니다.
현재 데모 버전은 백엔드 없이 순수 프론트엔드로 동작하지만, 실제 납품 시 클라이언트가 선택한 백엔드 솔루션(Firebase, Supabase, 자체 서버 등)과 연동하여 실제 주문·결제가 가능한 완전한 쇼핑몰로 구현됩니다.
우리 브랜드 쇼핑몰이 필요하다면?
플랫폼 의존 없는 완전 커스텀 자사몰을 제작해 드립니다.