주간 식단 & 장보기 리스트
알레르기·예산·요리 실력·아이 매운맛 단계를 반영해 7일 식단과 통합 장보기 목록을 만드는 AI 앱.
- 역할
- 기획 · UX/UI · 개발 / 리디자인
- 기간
- 2026 · MVP → v1.1
- 범위
- 모바일 · 스토어 4개 언어
01 · Problem
무엇이 불편했나
아이 있는 맞벌이 가정은 매주 '이번 주 뭐 먹지'를 고민한다. 식단 앱은 메뉴만 주고 장보기로 이어지지 않으며, 알레르기와 예산까지 고려하면 더 어렵다.
목표
- G1
4단계 온보딩 후 7일 식단 생성
- G2
재료를 합쳐 마트 동선 순서의 장보기 목록 1개로
- G3
국·찌개는 한 번 만들어 두 끼 (이월)
02 · UX
현행 분석 & 재설계
실제 운영 중인 제품의 구조를 뜯어보고, 막히는 지점을 찾아 흐름과 정보 구조를 다시 설계했습니다.
As-is 진단 → 리디자인 방향
AS-IS주간 식단이 요일 카드 7개를 세로로 길게 나열 — 오늘 끼니 찾기가 느림
TO-BE요일 탭 + 오늘 자동 선택
AS-IS교체 횟수(0/10)와 예상 금액이 상단 텍스트로만 표시
TO-BE예산 대비 진행 바로 시각화, 교체 시 금액 변화 즉시 반영
AS-IS요일별 7색이 화면을 산만하게 만듦
TO-BE요일 색은 탭 점으로만, 본문은 뉴트럴
Persona
맞벌이 부부 (38 · 40)
7살 아이, 주 15만원 식비
- →알레르기 완전 배제
- →평일 저녁 40분 이내
장보기 담당 (38)
퇴근길 마트에서 한 번에 장보기
- →마트 동선 순서 목록
- →가족 카톡으로 공유
User flow
- 01
온보딩 4단계
가족 구성 · 알레르기/기피 · 예산 · 요리 실력과 끼니
- 02
식단 생성
Claude 생성 → 스키마 검증 → 알레르기 2차 필터
- 03
끼니 교체
마음에 안 드는 끼니만 재생성 (플랜당 10회)
- 04
장보기 목록
재료명·단위 합산, 마트 동선 순 정렬
- 05
체크 & 공유
체크하며 장보기, 카톡용 텍스트 복사
Information architecture
이번 주
- 요일 탭
- 끼니 카드 · 교체
- 레시피 · 아이용 팁
장보기
- 카테고리별 목록
- 체크
- 공유
기록 · 설정
- 지난 플랜
- 가족 · 알레르기
- 예산
03 · UI
리디자인 와이어프레임
색과 스타일을 빼고, 재설계한 정보 위계와 레이아웃만으로 핵심 화면을 검증했습니다.
피해야 할 재료가 있나요?
선택한 재료는 식단에서 완전히 빠져요
온보딩
질문 하나 = 화면 하나. 전부 탭으로.
점심 · 된장찌개
25분 · 저녁까지 이월
저녁 · 제육볶음
30분 · 아이용 덜 맵게
주간 식단
오늘이 자동 선택된 요일 탭. 예산은 진행 바로.
장보기 목록
마트 동선 순서 + 어떤 요리에 쓰는지.
04 · GUI
디자인 시스템 리뉴얼 & 최종 화면
인디고 + 라임 — 정돈된 계획, 신선한 재료
Before
코발트 블루 + 블랙 CTA, 요일별 7색, 상태 3색
After · Color
Primary
#3b5bdb
Accent
#a3e635
Text
#161b33
Muted
#6a7092
Surface
#ffffff
Background
#f7f8fd
Typography
Components
radius 16px · spacing 4pt grid
Final screens
피해야 할 재료가 있나요?
선택한 재료는 식단에서 완전히 빠져요
점심 · 된장찌개
25분 · 저녁까지 이월
저녁 · 제육볶음
30분 · 아이용 덜 맵게
Design decisions
7색 → 1색 + 점
요일별 7색을 탭의 작은 점으로 축소. 본문 카드는 뉴트럴로 통일.
예산은 항상 보이게
끼니 교체 시 예상 금액이 진행 바에 즉시 반영되어 제약을 체감.
체크리스트는 엄지 영역
마트에서 한 손 사용 전제로 행 높이 48px, 체크박스는 왼쪽.
05 · Outcome
결과와 배운 점
- 7일
- AI 식단 자동 생성
- 10회
- 플랜당 끼니 교체
- 4개
- 스토어 언어
- ✦LLM 결과에는 규칙 기반 2차 검증(알레르기)이 반드시 필요
- ✦'끼니 교체'와 '이월'이 실제 사용성을 만든다
* 실제 제품을 분석해 리디자인한 케이스 스터디. 제품명·코드는 비공개, 지표는 기획서·코드로 확인된 값만 표기. 화면 속 데이터는 예시입니다.
이런 걸 만들고 싶다면
30분 무료 진단 콜로 범위와 일정부터 같이 잡아요.
다른 프로젝트
다음: OCR 노트 앱 →
LIVEOCR 노트 앱
사진 한 장으로 가계부·오답노트·독서기록·문장수집 노트를 만드는 앱. 스토어 출시 후 운영 중.
Flutter / ML Kit OCR / GPT-4o / SQLite
LIVE실시간 환율 계산기
금액 한 번 입력으로 선택한 모든 통화를 동시 변환. 50개 통화, 7개 언어. 스토어 출시 후 운영 중.
Flutter / REST API / Decimal / AdMob
LIVE장소 기록 앱
가보고 싶은 곳을 카드로 저장하고, 계획 → 방문 → 리뷰까지 실행하게 만드는 앱. 필드 암호화, 다국어, 지도 연동.
Flutter / Firebase / Google Maps
개발 중카드뉴스 자동화 파이프라인
인스타그램 카드뉴스 계정 2개를 소재 수집 → 스코어링 → 카드 렌더 → 게시까지 자동 운영. 사람은 텔레그램으로 주제만 고른다.
Node.js / Claude / Puppeteer / Supabase / GitHub Actions
개발 중해외 신상품 레이더
중국 커머스 신상품의 '순위가 아닌 변화'를 감지해 점수화하고 텔레그램으로 전달하는 사내 소싱 도구.
TypeScript / Python / Apify / Claude / Telegram
케이스 스터디블로그 자동 발행 파이프라인
키워드 리서치 → 글 생성 → 이미지·내부링크 → 발행까지 무인으로 돌아간 일일 SEO 발행 시스템. 2개 블로그 운영.
Python / Claude / Blogger API / launchd
케이스 스터디단체 커피 주문 취합 앱
총무가 주문방을 만들고 링크·6자리 코드를 공유하면, 팀원은 가입 없이 메뉴·옵션을 고르고 주문서가 자동 집계된다.
Flutter / Firestore / Riverpod