사이트 https://chubake.xyz
업종 경기 구리시의 수제 디저트 공방 츄베이크 스튜디오. 버터떡, 빅사이즈 마카롱, 구움과자를 만들어 매주 수요일에 발송합니다.
구성 zittme 코어 + 커머스 모듈 + 짓미페이(무통장입금) + 전용 테마 chubake. 기존 테마를 손본 것이 아니라 브랜드 사이트 안에 상점이 들어가는 형태로 새로 만들었습니다.

1. 브랜드 사이트 안에 상점을 넣었습니다

첫 화면은 캔버스로 그린 디저트 조각들이 떠다니는 히어로와 로고 캐릭터 두 마리(크롱이, 츄롱이)가 평소에도 놀고 있는 헤더로 시작합니다. 스크롤을 내리면 다음 발송일까지 남은 시간이 실시간으로 줄어드는 카운트다운, 오늘의 진열대, 답례품 안내, 브랜드 스토리, 후기, 갤러리가 이어집니다.

2. 장바구니 대신 "진열대에서 골라 상자에 담기"

이 사이트의 핵심 UX 입니다. 상품 목록이 진열대, 장바구니가 상자입니다. 담기를 누르면 상품 사진이 오른쪽 상자의 빈 자리로 날아가 들어가고(캔버스 애니메이션), 모바일에서는 화면 아래 떠 있는 상자 아이콘으로 들어갑니다. 수량 조절은 목록에서 바로 됩니다.

상품 상세는 폴라로이드 사진 한 장처럼 보여 주고, 담기 외에 별도의 바로 구매 버튼은 두지 않았습니다. 모든 주문이 상자 꾸미기를 거치도록 한 것이 가게의 요청이었습니다.

3. 상자 꾸미기

주문 전 단계는 "상자 꾸미기" 입니다. 담은 상품이 상자 칸에 채워지고, 스티커(츄 입술, 크루아상, 하트)를 고르고 라벨 문구와 보내는 사람을 적으면 뚜껑을 닫고 주문으로 넘어갑니다. 스티커와 문구는 주문서의 배송 메모에 자동으로 붙어 가게가 포장할 때 그대로 볼 수 있습니다.

4. 주문서와 짓미페이 무통장입금

주문서는 커머스 모듈 기본 흐름을 그대로 쓰되 스킨만 브랜드 톤으로 맞췄습니다. 결제는 짓미페이의 무통장입금 하나만 열어 두었고, 입금 계좌 안내와 입금 기한, 입금자명까지 한 화면에서 끝납니다. 결제가 끝나면 "입금을 기다리고 있습니다" 화면과 주문 내역에서 상태를 확인할 수 있습니다.

5. 브랜드 스토리, 연구 스튜디오, 캐릭터

페이지 모듈 하나로 만든 브랜드 스토리는 세 개의 탭으로 나뉩니다. 브랜드 탭에는 가게의 이야기와 재료, 먹는 법, 배송 안내를, 연구 스튜디오 탭에는 재료를 고르고 배합을 기록하고 굽기 테스트를 거치는 과정을 사진과 함께 담았습니다. 캐릭터 탭에서는 로고의 두 캐릭터가 눈을 깜빡이며 소개를 합니다.

6. 후기는 블로그에서 가져와 카드로

후기 게시판은 글을 직접 쓰는 대신 네이버 블로그와 인스타그램에 이미 올라온 후기의 주소를 등록하면 썸네일과 요약을 읽어 와 카드로 보여 줍니다. 게시판 모듈의 확장 변수만으로 만들었고, 상단에는 "몇 명의 솔직담백 후기" 머리글과 출처 탭이 붙습니다.

7. 답례품 문의, 회원, 소식

답례품과 단체 주문은 문의 모듈로 받습니다. 행사 종류, 받으실 날짜, 수량, 원하시는 구성, 라벨 문구를 폼으로 받아 가게가 바로 견적을 낼 수 있게 했습니다. 회원 가입, 로그인, 글쓰기, 댓글 같은 기본 화면도 전부 같은 톤의 스킨입니다.

8. 모바일

모바일에서는 로그인, 상자, 메뉴가 오른쪽 상단에 모이고 상자는 화면 아래 떠 있는 아이콘으로 따라다닙니다. 상자 꾸미기와 결제 화면도 한 손으로 끝나도록 세로로 다시 배치했습니다.

이 사이트에 들어간 것들

• 전용 테마 1종(레이아웃 + 커머스, 게시판, 회원, 문의, 짓미페이 스킨), 12개 언어 파일 동기화
• 캔버스 애니메이션: 히어로 조각, 상자 담기, 상자 꾸미기
• 브랜드 스토리 탭 페이지, 로고 캐릭터 SVG 분리와 애니메이션
• 후기 게시판의 외부 후기 카드(블로그, 인스타그램 주소 등록)
• SEO: 사이트맵에 상품 포함, robots, llms.txt, IndexNow, 가게 구조화 데이터(Bakery), 상품 구조화 데이터, 파비콘 세트
• 이용약관, 개인정보처리방침, 회원가입 약관 동의

운영 중인 실제 가게 사이트라 주문은 실제로 접수됩니다. 구경만 하실 분은 상자에 담아 보시는 것까지만 부탁드립니다.