Chanbros Mealpass
CASE STUDY · 2024
CHANBROS · MEALPASS · CASE STUDY

매일 한 끼,
정성스럽게.
구독으로.

셰프 큐레이션 식사를 구독 한 번으로 받아보는 서비스. 아침·점심·반려견 세 가지 패스, 매주 메뉴 교체, 그리고 사용자가 일정을 직접 통제할 수 있는 정기결제 모델까지 — 9개월간의 0→1 프로덕트 디자인 기록.

CLIENT
찬브로스 컴퍼니
F&B 스타트업
ROLE
Product Design
Brand · UI · IA
TIMELINE
2024.03 — 2024.11
9 months
PLATFORM
iOS · Android · Web
Admin Console
CHAPTER 01
OVERVIEW

한 번의 결정으로
반복되는 한 끼를 해결한다.

찬브로스는 1인 가구·맞벌이·반려가구가 매일 마주하는 "오늘 뭐 먹지" 결정 피로를 해소하기 위한 식사 구독 서비스다. 매주 셰프가 메뉴를 큐레이션하고, 사용자는 일정·횟수·기호만 한 번 설정하면 된다.

THE PROBLEM

결정은 매일, 양식은 주마다, 신뢰는 매번.

기존 새벽배송은 "장보기"이고, 도시락 정기구독은 일정·메뉴 제어가 약했다. 사용자는 매주 같은 결정을 다시 하며, 일정이 바뀌면 환불 정책에 막혔다. 반려견 식사는 시장이 분절되어 있고 — 보호자는 케이크 한 조각을 위해 별도 채널을 뒤져야 했다.

  • · 매주 반복되는 메뉴 결정 피로
  • · 일정 변경 = 환불·재가입의 번거로움
  • · 가족 단위(사람+반려견)의 분절된 서비스
DESIGN GOAL

한 번 설정하고, 매일 잊어도 좋은 식사.

"내가 신경 쓰지 않아도 좋은 한 끼가 도착한다"는 신뢰를 디자인 언어로 옮긴다. 자동 결제는 부드럽게, 일정 통제는 한 손으로, 셰프의 정성은 손글씨로 — 운영·결제·관계, 세 축의 갈등을 한 화면 안에 풀어낸다.

  • · 자동은 디폴트로, 컨트롤은 한 탭 거리에
  • · 셰프의 큐레이션을 카드 단위로 살린다
  • · 생일처럼 잊기 쉬운 순간에 먼저 다가간다
THE LINEUP

세 가지 패스, 하나의 식탁 위에서.

MORNING

모닝패스

토스트·그래놀라·콘지 등
가볍지만 든든한 아침 큐레이션.

주 2회부터
34,000원~
LUNCH

런치패스

단백질 중심의 정성 도시락.
점심 사무실까지 신선 배송.

주 2회부터
49,000원~
DOG

도그패스

수의사가 영양 설계한 자연식.
생일엔 셰프의 케이크가 무료로.

주 2회부터
29,000원~
CHAPTER 02
DESIGN SYSTEM

식탁의 톤을 디자인하다.

색은 식기에서, 타입은 손글씨에서. 세 가지 패스 컬러는 각 식사의 시간대 톤을 직조하고, 잉크·페이퍼·골드의 베이스는 식탁보 위 한 끼처럼 차분히 가라앉는다.

COLOR / BASE

베이스 — 잉크 · 페이퍼 · 골드

Ink
Ink / Primary
#0F241F · oklch(.30 .03 167)
Paper
Paper / Cream
#F7F4EE · oklch(.96 .01 89)
Sand
Sand / Surface
#EDE8DE · oklch(.92 .02 89)
Gold
Gold / Accent
#B8884F · oklch(.66 .09 73)
COLOR / PASS SIGNATURE

패스 시그니처 — 시간대의 톤

Morning
Morning
#C4673E
Morning Soft
Morning Soft
#FAE8DC
Lunch
Lunch
#C9A23B
Lunch Soft
Lunch Soft
#F5EBC8
Dog
Dog
#7E9479
Dog Soft
Dog Soft
#DDE5D5
TYPOGRAPHY

한글 · 영문 · 숫자의 위계

Display
매일 한 끼.
Pretendard 800 · 54/56 · -0.04em
Headline
이번 주 식탁
Pretendard 800 · 32/40 · -0.03em
Title
리코타 토스트 & 무화과
Pretendard 700 · 20/28 · -0.02em
Body
매주 셰프가 큐레이션한 메뉴를 자동결제로 받아보세요. 일정 변경과 휴면도 한 탭 거리에 있어요.
Pretendard 500 · 14/22 · -0.01em
Caption
2024.11.18 (월) · 79,000원
Pretendard 600 · 11/16 · 0em
Eyebrow / Label
MORNING PASS
Pretendard 700 · 11 · 0.20em UPPER
COMPONENT

기본 빌딩 블록

버튼
Primary CTA
Ghost
Gold Accent
패스 칩
모닝패스 런치패스 도그패스
반경 · 그림자
8px
14px
22px
shadow / sm — 0 1px 2px rgba(15,36,31,0.04)
shadow / md — 0 4px 12px rgba(15,36,31,0.06)
shadow / lg — 0 24px 48px -16px rgba(15,36,31,0.18)
CHAPTER 03
INFORMATION ARCHITECTURE

구조는 일정에서 출발한다.

메뉴를 카테고리가 아닌 "시간"으로 구성했다. 사용자는 다음 한 끼가 언제 도착하는지에서 출발해, 그 안에서 메뉴·결제·알레르기 설정으로 깊이를 내려간다.

SITE MAP

사용자 앱 IA

홈 (다음 식사 중심)
이번 주 일정
내 패스 카드
메뉴
이번 주차 메뉴
메뉴 상세 / 필터
검색
알림
배송 / 결제 / 이벤트
MY
내 패스 (관리)
회차 변경 / 휴면 / 해지
주문 내역 · 결제 수단
배송지 · 알레르기
친구 초대 · 설정
PRINCIPLES

정보 구조 4원칙

01 · NEXT FIRST
홈은 "다음 한 끼"가 최상단.
월간 캘린더가 아니라 단 한 장의 카드. 사용자가 "내일 뭐가 오지?"에 5초 안에 답한다.
02 · CONTROL CLOSE
건너뛰기·변경은 한 탭 거리에.
정기결제의 가장 큰 마찰은 "내가 통제할 수 없는 느낌". 회차별 카드에 직접 액션을 붙였다.
03 · PASS PARALLEL
3개 패스는 평행 구조.
메인 탭은 합쳐도, 관리/일정은 패스마다 독립. 모닝과 도그가 섞이지 않도록.
04 · QUIET DEFAULTS
기본 설정만으로도 완결.
알레르기·기호·배송지를 채우지 않아도 셰프의 디폴트 큐레이션으로 첫 주가 굴러간다.
CORE FLOW · 신규 가입에서 첫 식사까지

신규 구독 5단계

STEP 01
패스 선택
모닝/런치/도그
STEP 02
정보 입력
배송지·메모
STEP 03
결제 등록
카드·카카오페이
STEP 04
알레르기·기호
선택 — 건너뛰기 가능
STEP 05
첫 식사 도착
다음 주 화 7:30 AM
CHAPTER 04
SCREENS

핵심 화면 30선.

온보딩에서 시작해 일상 사용, 변경/해지, 도그패스의 생일 모먼트까지. 모든 화면은 360×740 iOS 프레임 위에서 검증되었다.

4.1 — ONBOARDING & AUTH

첫 만남 — 서비스 소개부터 로그인까지

스플래시, 3단 온보딩, 카카오 로그인. 첫 3초 안에 "셰프 큐레이션 구독"이라는 가치 제안을 전달한다.

SCREEN 01
스플래시
3초 · 브랜드 인상
SCREEN 02
온보딩 1/3
가치 제안
SCREEN 03
온보딩 2/3
3 패스 소개
SCREEN 04
온보딩 3/3
동작 원리
SCREEN 05
로그인
카카오 · Apple
4.2 — HOME

홈 — 다음 한 끼 중심의 단일 카드

미구독 시엔 가치 제안과 패스 추천, 구독 후엔 "다음 도착 카드"가 우선. 두 모드의 동일한 톤·다른 우선순위.

SCREEN 06
홈 · 미구독
가치 제안 · 패스 둘러보기
SCREEN 07
홈 · 구독중
다음 도착 · 주간 일정
SCREEN 08
패스 상세
플랜 선택 · 미리보기
4.3 — MENU

메뉴 — 시간으로 정렬된 한 주

월~금을 좌측 타임라인으로 펼치고, 각 날짜에 패스별 메뉴를 카드로 매단다. 필터·검색은 동일한 시간축 위에서 동작한다.

SCREEN 09
주간 메뉴
월~금 타임라인
SCREEN 10
메뉴 상세
영양·구성·알레르기
SCREEN 11
필터
카테고리·열량·제외
SCREEN 12
검색
전 패스 통합
4.4 — MY PAGE

MY — 내 패스를 한 손으로 통제

내 정보·결제·배송이 아니라 "내 패스"가 가장 위. 회차별 액션이 직접 카드에 붙어, 건너뛰기·휴면·해지가 한 단계 안에 끝난다.

SCREEN 13
MY
패스 카드 · 메뉴 리스트
SCREEN 14
패스 관리
상태 · 예정 회차
SCREEN 15
회차 건너뛰기
바텀시트 모달
SCREEN 16
알레르기·기호
다음 주 자동 반영
SCREEN 17
배송지 관리
요일별 배송지
SCREEN 18
주문 내역
결제·배송 추적
SCREEN 19
리뷰 작성
별점 · 한 줄 평 · 적립
SCREEN 20
알림함
배송·결제·이벤트
SCREEN 21
친구 초대
최대 5주 적립
SCREEN 22
설정
알림 · 계정 · 앱 정보
CHAPTER 05
KEY FLOWS

신규 구독, 해지 방어,
그리고 호떡이의 생일.

세 가지 결정적 모먼트를 시퀀스로 정리했다. 구독은 부드럽게, 이탈은 정중하게, 생일은 먼저.

FLOW A · 신규 구독 (모닝패스)

3단 스텝퍼로 마찰을 줄인다.

플랜 → 정보 → 결제, 그리고 완료 카드. 각 단계의 부담이 동일한 크기가 되도록 폼 길이와 시각적 무게를 맞췄다.

SCREEN 23
스텝 1 — 플랜
주 횟수 · 할인 배지
SCREEN 24
스텝 2 — 정보
시작일 · 배송지 · 메모
SCREEN 25
스텝 3 — 결제
수단 · 금액 요약
SCREEN 26
완료
첫 도착 일정 · 다음 액션
FLOW B · 도그패스 생일 시퀀스

반려견 등록부터 생일 한 상까지.

생일 12일 전 자동 알림 → 생일 메뉴 미리보기 → 변경 없이 자동 신청. 보호자의 능동적 행동을 요구하지 않는 게 핵심.

SCREEN 27
반려견 등록
이름·품종·생일
SCREEN 28
도그 홈
D-12 카운트다운
SCREEN 29
생일 메뉴
한정판 자동 신청
FLOW C · 해지 방어 (Pause-first)

해지 버튼은 작게, 휴면은 크게.

"잠시 멈춰가도 괜찮아요" — 해지 의도를 가진 사용자에게 휴면·횟수조정·패스변경을 먼저 제안한다. 사유 수집은 옵션.

SCREEN 30
해지 → 휴면 제안
대안 3종 · 사유 수집
FLOW D · 배달 모멘트 · 조리 → 푸시 → 추적 → 이력

새벽 5시 조리, 1시간 내 문 앞.

새벽 조리가 끝나면 압라이더 푸시로 출발을 알리고, 앱 내 추적 화면에서 라이더 위치 · 단계 · ETA를 한눈에 볼 수 있고, 도착 후엔 지난 식사 내역에 자동으로 쌓여요.

SCREEN 31
잠금화면 푸시
조리 완료 → 출발 알림
SCREEN 32
배달 추적
라이더 위치 · ETA · 단계
SCREEN 33
지난 식사
날짜별 이력 · 별점 · 리뷰
CHAPTER 06
NOTIFICATION DESIGN

알림은 셰프의 노트처럼.

카카오 알림톡과 이메일 영수증, 두 채널의 톤을 통일했다. 광고 톤이 아니라 셰프가 직접 적은 듯한 짧고 다정한 문장, 그리고 영수증의 위계는 회계 장부의 기능적 미감.

A · KAKAOTALK ALIMTALK

"내일 식사 도착 안내"

CHANBROS · 모닝패스
내일 아침, 식사가 도착해요.
11월 19일 화요일 7:30 AM
· 리코타 토스트 & 무화과 (280kcal)
· 마포구 동교로 156-9, 문 앞 배송

일정 변경이 필요하시면 오늘 밤 11시 전에 앱에서 변경해주세요.
앱에서 일정 변경하기
B · KAKAOTALK ALIMTALK

"호떡이의 생일이 다가와요"

CHANBROS · 도그패스
호떡이의 3번째 생일까지 D-12.
3월 14일 (금)에 셰프가 직접 굽는
미니 고구마 케이크와 한 상이
도착할 예정이에요.

구성을 미리 확인하시겠어요?
생일 메뉴 미리보기
C · EMAIL · 결제 영수증

"이번 주 모닝패스 결제 완료" · 11/18 02:00 발송

CHAPTER 07
ADMIN CONSOLE

주간 편성이라는 가장 어려운 일.

운영팀은 매주 월요일까지 세 가지 패스, 5일치 메뉴, 알레르기 제약 조건을 모두 만족하는 편성을 짜야 한다. 관리자 화면의 핵심은 — 드래그 한 번으로 충돌이 시각화되는 것.

admin.chanbros.co/menu/2024-W47
운영팀 · 김연수
CHANBROS ADMIN
대시보드
주간 메뉴 편성
레시피 라이브러리
구독자 관리
배송 라우팅
매출 · 정산
알림 발송
설정
WEEK 47 · 11.18 — 11.22
주간 메뉴 편성
미리보기
발행
패스
월 11.18
화 11.19
수 11.20
목 11.21
금 11.22
아침
M101
오트 그래놀라 & 베리
M204 · 추천
리코타 토스트 & 무화과
M118
야채 프리타타
⚠ 알레르기 충돌
콘지 with 단호박
갑각류 회피군 3% 미반영
M210
아보카도 오픈샌드
점심
L302
닭가슴살 채소 도시락
L341
연어 포케 보울
L355
두부 스테이크 정식
L312
버섯 들깨 파스타
+ 추가
도그
D501
오리·고구마 자연식
— 휴무
D522
연어·브로콜리 자연식
— 휴무
D515
닭가슴살·당근 영양보울
총 발송 예정
2,184끼
알레르기 충돌
1건
재료 견적
14,820,000원
발행 예정
11.18 (월) 09:00