단체 커피 주문 취합 앱
총무가 주문방을 만들고 링크·6자리 코드를 공유하면, 팀원은 가입 없이 메뉴·옵션을 고르고 주문서가 자동 집계된다.
- 역할
- 기획 · UX/UI · 개발 / 리디자인
- 기간
- 2026
- 범위
- 앱 + 웹 참여 · 한/영
01 · Problem
무엇이 불편했나
회사·스터디 커피 주문을 카톡으로 받아 손으로 정리한다. 샷·사이즈·HOT/ICE 옵션이 빠져 다시 주문하는 일이 잦다.
목표
- G1
링크 하나로 참여 — 가입 없이 이름만
- G2
옵션 누락 0 (온도 · 사이즈 · 샷 · 시럽)
- G3
총무 수작업 0 — 메뉴별 집계 · 결제 상태 자동
02 · UX
현행 분석 & 재설계
실제 운영 중인 제품의 구조를 뜯어보고, 막히는 지점을 찾아 흐름과 정보 구조를 다시 설계했습니다.
As-is 진단 → 리디자인 방향
AS-IS참여자 현황 · 결제 상태 · 공유 링크가 한 화면에 섞여 총무 화면이 복잡
TO-BE총무 화면을 '현황 / 결제' 2탭으로 분리
AS-IS웹 참여 페이지가 앱 화면을 그대로 써서 첫 진입 안내가 약함
TO-BE웹 첫 화면 = 방 제목 + 마감 시간 + 이름 입력 하나
AS-IS마감 후 재오픈 불가인데 경고가 약함
TO-BE마감 버튼에 미참여 인원 표시 + 확인 시트
Persona
총무 · 막내 (28)
팀 커피 주문 담당
- →메뉴별 수량 자동 집계
- →누가 결제했는지
참여자 (34)
링크 받고 10초 안에 주문
- →앱 설치·가입 없이
- →옵션 빠짐없이
User flow
- 01
주문방 만들기
주문서 제목 · 매장명 · 메뉴와 옵션 그룹
- 02
공유
6자리 코드 · 웹 링크
- 03
참여 & 주문
이름 입력 → 메뉴 담기 → 주문 제출
- 04
실시간 현황
참여자 · 총액 실시간 반영, 결제 상태 체크
- 05
마감 & 주문서
메뉴별 집계 · 참여자별 주문 → 복사 · 공유
Information architecture
홈
- 진행 중 / 마감 주문방
- 주문서 만들기
- 코드로 참여
주문방 (총무)
- 현황
- 결제
- 최종 주문서
참여 (웹/앱)
- 이름 입력
- 메뉴 · 옵션
- 장바구니 · 제출
03 · UI
리디자인 와이어프레임
색과 스타일을 빼고, 재설계한 정보 위계와 레이아웃만으로 핵심 화면을 검증했습니다.
아이스 아메리카노 (L)
지수, 민호 외 4명
카페라떼 (M) · HOT
소연, 태윤 외 1명
바닐라라떼 (L) · 샷 추가
동건, 하은
총무 · 현황
참여율과 메뉴별 수량이 먼저.
아이스 아메리카노
4,500원
참여 · 메뉴 선택
옵션 그룹을 필수로 — 누락 불가.
총 합계
₩58,500
결제 완료
8 / 11
최종 주문서
매장에서 그대로 읽으면 되는 순서.
04 · GUI
디자인 시스템 리뉴얼 & 최종 화면
에스프레소 브라운 · 오렌지 — 커피 타임의 가벼움
Before
결제 서비스풍 퍼플 + 딥 네이비, 각진 라운드(4~8px)
After · Color
Primary
#c2410c
Accent
#fbbf24
Text
#2b1608
Muted
#86705c
Surface
#ffffff
Background
#fffaf3
Typography
Components
radius 16px · spacing 4pt grid
Final screens
아이스 아메리카노 (L)
지수, 민호 외 4명
카페라떼 (M) · HOT
소연, 태윤 외 1명
바닐라라떼 (L) · 샷 추가
동건, 하은
아이스 아메리카노
4,500원
총 합계
₩58,500
결제 완료
8 / 11
Design decisions
결제 앱 톤 → 커피 톤
퍼플·네이비의 금융 서비스 인상을 따뜻한 오렌지·브라운으로. 첫 참여자의 긴장감을 낮춤.
옵션 = 큰 세그먼트 칩
온도·사이즈·샷을 칩 그룹으로 나눠 한 그룹당 하나만 선택되게. 누락 방지.
라운드 4~8 → 16
비회원·첫 사용자가 대부분이라 터치 영역과 라운드를 키움.
05 · Outcome
결과와 배운 점
- 0회
- 참여자 가입
- 6자리
- 코드 · 링크 참여
- 실시간
- 주문 집계
- ✦비회원 참여는 웹 링크가 핵심 — 앱 설치를 요구하는 순간 이탈
- ✦옵션을 '선택 사항'이 아니라 '필수 그룹'으로 설계하면 재주문이 사라짐
* 실제 제품을 분석해 리디자인한 케이스 스터디. 제품명·코드는 비공개, 지표는 기획서·코드로 확인된 값만 표기. 화면 속 데이터는 예시입니다.
이런 걸 만들고 싶다면
30분 무료 진단 콜로 범위와 일정부터 같이 잡아요.
다른 프로젝트
다음: 주간 식단 & 장보기 리스트 →
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
케이스 스터디주간 식단 & 장보기 리스트
알레르기·예산·요리 실력·아이 매운맛 단계를 반영해 7일 식단과 통합 장보기 목록을 만드는 AI 앱.
Flutter / Supabase / Claude