본문으로 건너뛰기
DAOL, FOR YOU
Boutique Nané

Boutique Nané

커스텀 기타·부티크 음향 장비 헤드리스 Shopify 스토어프론트. 데스크탑은 브랜드 웹사이트, 모바일은 마켓플레이스 웹앱, 한·영 이중언어.

클라이언트
Boutique Nané
날짜
2026
서비스
Planning / Design / Develop / Publishing / E-commerce

개요

커스텀 기타·부티크 음향 장비 헤드리스 Shopify 스토어프론트. 데스크탑은 브랜드 웹사이트, 모바일은 마켓플레이스 웹앱, 한·영 이중언어.

Boutique Nané(The Sound of Heaven)는 데스크탑에서는 프리미엄 브랜드 사이트, 모바일에서는 네이티브 앱처럼 느껴지는 커머스가 필요했습니다. Shopify 테마에 브랜드를 가두지 않는 헤드리스 구성이 핵심이었습니다.

Next.js로 이중 표면 UX를 만들었습니다. 데스크탑은 히어로·스토리·세 영역(Custom Guitars / Boutique Pedals / Audio Gear)·4단계 컨설트 프로세스·상담 CTA로 읽히는 마케팅 사이트입니다. 모바일은 하단 탭(Home · Shop · Saved · Consult · Cart), 검색, 카테고리 칩(Guitars, Pedals, Studio, Amps, Accessories), Featured/New arrivals 그리드, 위시리스트 하트, Add/Buy·견적 요청까지 갖춘 마켓플레이스 웹앱 패턴입니다.

커머스는 헤드리스 Shopify입니다. Storefront API GraphQL로 상품·컬렉션·필터·카트를 읽고, 상품 이미지는 Shopify CDN, 결제는 Shopify 체크아웃으로 넘기며, Admin API로 카탈로그 시드/동기화와 Draft Order 문의를 처리합니다. 상담 메일은 Resend, 한·영 전환은 query-param i18n으로 컬렉션 필터·상품 라우트까지 유지합니다.

스택: Next.js 16 (App Router) · React 19 · TypeScript · Tailwind CSS 4 · Shopify Storefront + Admin GraphQL · Zod · anime.js / Lottie · Lucide · Resend · Vercel. 정적 목업이 아니라 실제 Shopify 운영이 붙는 버티컬 이커머스 브랜드를, 테마로는 못 만드는 커스텀 UI로 보여줄 수 있음을 증명하는 프로젝트입니다.

PREVIEW

Boutique Nané 미리보기

Color

#0B0B0B
#F5F5F5
#E5DED0
#FFFFFF
#1A1A1A
+
Boutique Nané | DAOL 작업 사례