프로젝트 소개
서비스명
런치캐치 (Lunch Catch)
한줄 정의
직장인을 위한 점심 쿠폰 할인서비스
문제 → 정의 → 해결
- 문제: 직장인은 오르는 외식비가 부담이고, 동네 식당은 배달앱·블로그 광고 등 기존 홍보 수단이 비싸고 효과가 낮다
- 정의: 소상공인에게 비용 대비 효과적인 홍보 채널이 없다
- 해결: 점주가 직접 쿠폰을 등록하면 주변 직장인에게 바로 노출되는 위치 기반 점심 쿠폰 플랫폼
차별점
- 기존 서비스(테이블링, 캐치테이블)는 예약/웨이팅 중심
- 런치캐치는 틴더 스타일 스와이프 쿠폰 + LLM 기반 포스터 자동 생성
- 점주는 쿠폰 정보만 입력하면 AI가 포스터를 만들어줌
- 사용자는 스와이프로 찜 → 선착순 발급 → QR로 사용
팀 구성
- 프론트엔드 3명 / 백엔드 5명
내가 맡은 범위
사용자(직장인) 페이지(프론트엔드) 전체를 담당하게 됐다.
핵심 화면
- 스와이프 피드 (틴더 스타일 카드)
- 홈 (식당 리스트 / 지도 토글)
- 식당 상세 (캠페인 정보 + 찜/발급)
- 쿠폰함 (찜 목록 + 발급 쿠폰 + QR)
- 마이페이지
탭바 구조
스와이프 | 홈 | 쿠폰함 | 마이페이지
이번 주 한 일
기획
- 서비스 정의, 문제 정의, 차별점 정리
- 페르소나 4명 작성 (사용자 1, 점주 2, 관리자 1)
- 요구사항 정의서 작성
- 사용자 요구사항 명세서 작성
사용자 플로우 설계
- 핵심 퍼널: 스와이프 → 찜 → 선착순 발급 → QR → 사용
- 탭별 화면 연결 정리
- 전체 67개 화면 도출
UI/UX 디자인
- 이전 프로젝트(요고다)에서 팀원이 피그마 AI로 디자인 초안을 뽑았는데 퀄리티가 괜찮았다
- 이번에도 피그마 AI로 빠르게 초안을 뽑고 다듬는 방식으로 가기로 하고 결제했다
- 화면을 직접 다 디자인하기엔 시간이 부족해서 AI로 초안 → 수정하는 게 효율적이라고 판단했다
- 색상은 여러 조합을 시도해보면서 현재 차콜 + 코랄레드로 진행 중 (확정은 아님)
- 폰트: Noto Sans KR
기술 스택
- React (또는 Next.js)
- Tailwind CSS
- 카카오 로그인 (OIDC)
- 네이버/카카오 지도 API
- Noto Sans KR
느낀 점
- 기획 단계에서 요구사항을 상세하게 잡아두니까 "뭘 만들어야 하는지"가 명확해졌다
- 처음엔 기능만 나열했는데, 하나씩 파다 보니까 "이것도 필요하네? 저것도 빠졌네?" 하면서 화면이 계속 늘어났다. 처음부터 완벽하게 기획하는 건 불가능하고 만들면서 계속 보완해야 한다는 걸 느꼈다
- AI 도구(Claude, 피그마 AI)를 적극 활용했는데, 결국 "뭘 만들지"를 결정하는 건 사람이 해야 한다. AI가 초안은 잘 뽑아주는데 방향을 잡아주진 않는다
- 피그마 AI가 초안 뽑는 속도는 빠른데, 프롬프트를 잘 써야 원하는 결과가 나온다. 프롬프트 작성에도 시간이 꽤 든다
- 사용자 화면을 정리하니 약 28개 페이지, 상태별 변형까지 포함하면 67개 화면이 나왔다. 처음엔 막막했는데 페이지별로 묶어서 정리하니까 관리할 만해졌다
- 색상 정하는 게 생각보다 어려웠다. 여러 번 바꿨는데 아직도 확정은 아니다
다음 할 일
- 9/18(금)까지 피그마 UI 디자인 완성 목표
- 스와이프, 식당 상세, QR (핵심 플로우) 우선
- 이후 홈, 쿠폰함, 마이페이지 순서로 진행
- 색상/디자인 팀 내 피드백 받고 확정
- 디자인 완성 후 개발 환경 세팅 시작 예정
