F&B
로스터리 '하루밀' — 원두 구독 플랜 빌더
로스팅 강도·용량·주기·수량을 고르면 월 예상 금액과 다음 배송일 세 번이 바로 계산되는 카페·베이커리 사이트입니다. 원두마다 산지와 테이스팅 노트를 적었습니다.
비공개·데모 — AI 가상 데이터로 재구성한 예시입니다
문제
로스터리 카페의 본체는 매장이 아니라 원두 구독이다. 일회성 장바구니와 달리 구독은 주기가 금액을 바꾼다 — 2주 배송이면 월 2회, 4주면 월 1회라 같은 원두라도 월 부담이 두 배 차이 난다. 배송일도 로스팅 요일에 맞춰 잡혀야 한다. 여기에 로스팅 강도·용량·수량까지 변수가 넷인데 수량이 늘면 배송비 무료 기준을 넘고 할인은 정가에 물려 있어 하나만 바꿔도 금액 전체가 다시 계산된다. 구독을 앞에 둔 사람이 궁금한 것도 결국 둘이다. 한 달에 얼마가 나가고 언제 도착하는가. 이 답을 신청 버튼을 누르기 전에 화면에서 보여 줘야 했다.
해결
플랜 빌더에서 로스팅 강도를 바꾸면 추천 원두와 테이스팅 노트가 함께 바뀌고, 용량·주기·수량을 바꿀 때마다 회당 결제액과 월 예상 금액이 다시 계산된다. 금액 패널에는 정가, 10% 할인된 구독가, 수량 합계, 배송비, 회당 결제액, 월 배송 횟수가 차례로 쌓여 월 예상 금액이 어떻게 나왔는지 줄마다 남는다. 주기를 2주에서 4주로 바꾸면 월 배송이 2회에서 1회로 줄고 다음 배송일 세 개가 새로 잡힌다. 배송일은 화·금에 볶아 다음 날 보낸다는 규칙 그대로 계산해 요일까지 보여 준다. 수량을 늘려 임계 금액을 넘기면 배송비가 무료로 전환되고 못 미치면 얼마가 남았는지 알려 준다. 저장 없이 메모리로만 돌고 외부 전송은 0이다.
- 4
- 구독 변수(강도·용량·주기·수량)
- 0
- 외부 전송·저장
- 0
- 가로 오버플로
제작 노트
네 가지 선택과 재계산
빌더는 로스팅 강도, 용량, 배송 주기, 수량 네 단계로 짜였습니다. 강도를 고르면 다섯 칸 도트로 배전 정도가 표시되고 그 강도에 맞는 추천 원두와 테이스팅 노트, 어울리는 추출 방식 안내가 따라 바뀝니다. 용량 버튼에는 200g이 드립 약 14잔이라는 환산을 달아 감을 잡게 했습니다. 옆의 금액 패널에는 정가부터 구독가, 수량 합계, 배송비, 회당 결제액, 월 배송 횟수가 차례로 쌓이고 맨 아래에 월 예상 금액과 한 달 절약액이 정리됩니다. 그 아래 배송 일정 미리보기는 다음 세 번의 배송일을 요일까지 보여 주며 첫 회차에는 로스팅 다음 날 발송이라는 표가 붙습니다.
정적 페이지 위의 계산기
이 데모의 목적은 결제가 아니라 구독이 손에 잡히는 화면이라 서버와 프레임워크 대신 정적 HTML과 바닐라 JS로 처리했습니다. 가격표와 원두 정보, 할인율, 배송비 무료 기준이 코드 안에 한 벌로 있어 값을 바꾸면 화면 전체가 따라옵니다. 배송일 계산도 달력 라이브러리 없이 오늘부터 화요일과 금요일을 찾아 하루를 더하는 방식으로 풀었고 구독가는 100원 단위로 반올림해 가격표답게 떨어지게 했습니다. 고른 내용은 브라우저 메모리에만 있어 밖으로 나가는 요청이 없습니다. 페이지가 가벼워 모바일에서도 지연 없이 다시 계산됩니다.
홈에서 바로 짜는 구독
빌더는 구독 페이지만이 아니라 홈 첫 화면 바로 아래에도 두어 들어온 사람이 스크롤 몇 번 안에 플랜을 짜 보게 했습니다. 홈 상단에는 이번 주 로스팅 일정이 티커로 흐르며 화·금에 볶는다는 리듬을 먼저 보여 줍니다. 구독 페이지에는 볶고 하루 재우고 다음 날 보내는 배송 흐름 네 단계와 건너뛰기·일시 정지·해지 안내, 상점가와 구독가를 나란히 둔 비교 표, 자주 묻는 질문을 이어 붙여 신청 전에 생길 질문을 한 페이지에서 끝냈습니다. 원두·가격·배송일이 가상 데이터라는 고지는 화면 곳곳에 붙여 두었습니다.
화면
