PuppySpot · 반려견 동반 애견카페 탐색 O2O 앱
프로젝트 개요

강아지와 함께 가기 전,
모든 판단 기준을 한 화면에.

퍼피스팟은 애견카페의 입장 조건·공간·운영·가격 정보를 구조화해, 지도 앱 여러 번 검색하던 탐색을 필터 몇 번으로 끝내는 애견카페 인프라 탐색 서비스입니다. 이 문서는 아이디어의 출발점부터 배포까지 6단계 진행 과정, 그리고 그 과정에 AI가 어떻게 쓰였는지를 한눈에 보여줍니다.

진행 6단계 전부 완료 · 배포 완료 시작 2026-06-12 방식 멀티 AI 에이전트 협업
읽는 법 — 상단 메뉴에서 단계를 선택하면 해당 단계의 상세 리포트로 바뀝니다. 아래 진행 과정을 순서대로 훑으면 이 서비스가 어떻게 만들어졌는지 한 번에 파악할 수 있고, 각 단계 리포트 맨 아래의 바로가기로 다음 단계를 이어서 볼 수 있습니다.
01 — 출발점

어디서 출발했나

이 서비스는 시장 분석이 아니라, 실제 보호자의 불편에서 시작됐습니다. 최초 의뢰 원문이 서비스의 방향과 제약을 그대로 규정했습니다.

최초 의뢰

"최근 강아지를 키우기 시작하면서 애견카페 정보 찾는 게 어려워. 지도에서 하나씩 검색하고, 각 애견카페별로 크기, 실내 장소 여부, 대관인지 전체 공용인지, 어떤 강아지 메뉴를 파는지, 가격은 어떻게 되는지 등등 확인 조건들을 판단하기가 어려워."

"이런 걸 한눈에 찾아보고, 애견카페의 인프라가 한눈에 정리되어 있어서 어디로 가면 좋을지 판단할 수 있는 서비스를 만들자."

제약 1

수기 작성 리뷰에 의존 금지

별점·후기 기반 서비스가 아니다. 데이터가 없으면 리뷰도 없는 콜드스타트 문제를 처음부터 회피하고, 사장님이 등록한 구조화된 사실 정보로 승부한다.

제약 2

과도한 크롤링 의존 금지

무단 크롤링의 법적 리스크를 배제한다. 공공데이터(동물전시업 604개소) + 공식 API + 사장님 직접 등록의 하이브리드 데이터 전략으로 초기 DB를 채운다.

02 — 진행 과정

어떻게 진행됐나

1단계(문제 정의) → 2단계(화면·디자인 설계) → 3단계(프론트 구현) → 4단계(백엔드 연동) → 5단계(통합 QA) → 6단계(배포) 순서로 6단계를 모두 마쳤습니다.

03 — AI 활용 방식

AI를 어떻게 썼나

한 개의 챗봇에 "다 만들어줘"가 아니라, 역할이 분리된 여러 AI 에이전트가 실제 직무처럼 협업하는 방식('원주팀')으로 진행했습니다. 사람은 방향을 잡고, AI는 실행했습니다.

역할 분리형 멀티 에이전트 파이프라인

PO·시장조사·기획자·디자이너·프론트·백엔드·QA로 역할을 분리한 7종 AI 에이전트가 Gate마다 필요한 직무만 투입됐습니다. 에이전트들은 단순 병렬 작업이 아니라, 서로의 산출물을 교차 검토하고 반박하며 결론을 좁혔습니다.

STEP 1

발산 (Diverge)

각 에이전트가 서로 다른 방향의 안을 독립적으로 제시. 예: 기획자 '조건 우선형' vs '발견 우선형' 탐색안.

STEP 2

교차 검토 (Cross-Review)

상대 안의 강점·약점을 짚고 수정안을 제안. 예: 디자이너가 필터 오버레이의 Z축 충돌을 지적하고 Dim 레이어로 보완.

STEP 3

수렴 (Converge)

토론 결과를 하나의 결정으로 통합. 채택안과 폐기 대안을 근거와 함께 기록해 다음 Gate로 전달.

단계투입 AI 에이전트핵심 활동
1단계문제 정의PO · 시장조사카테고리 구조화, 시장·경쟁 리서치, RICE 우선순위, IA 설계
2단계화면·디자인기획자 · 디자이너화면 기능정의서, 디자인 시스템, 전체 화면 디자인, UX 의사결정
3단계프론트프론트바닐라 JS SPA 인터랙티브 프로토타입 구현
4단계백엔드백엔드Supabase 스키마·RLS 설계, 시드 데이터 구축, 프론트 실데이터 연동
5단계QAQA전체 화면 실행 기반 통합 점검, 버그 재현·근본원인 분석, P0 결함 직접 픽스 및 회귀검증
6단계배포QA배포 전 자산·보안 점검, GitHub 연동 Vercel 배포 구성, 라이브 환경 재검증
사람 · 원주 (방향키)
  • 최초 의뢰와 두 가지 제약(리뷰·크롤링 금지) 정의
  • 각 Gate 산출물 검토 및 구체적 피드백
  • 기준 미달 시 전면 재진행 지시 (1·2단계)
  • 단계 통과·다음 Gate 진입 승인
AI · 원주팀 (실행)
  • 리서치·설계·디자인·구현·검증 실제 산출물 생산
  • 에이전트 간 발산·교차검토·수렴 토론
  • 결정 근거와 폐기 대안까지 문서화
  • Gate 간 산출물을 기준 문서로 인계
04 — 단계별 리포트

Gate별 리포트 바로가기

각 단계의 상세 산출물과 의사결정 근거는 개별 리포트에서 확인할 수 있습니다.

1단계 / 전체 6단계 — 문제 정의
문제 정의
PuppySpot이 해결하는 문제와 서비스 방향을 확정한 단계입니다. 시장 조사, 페르소나 분석, 서비스 IA를 통해 개발 방향의 근거를 마련했습니다.

이 리포트의 모든 작업은 원주님의 가이드에 따라 PO · 기획자 · 디자이너 · 시장조사 AI 에이전트가 수행했습니다.

PO 에이전트 문제 정의 & 서비스 전략 Ch.1 — 누구의 어떤 문제를 풀 것인지 정의
1 PO — 문제 정의
가상 보도자료 PO 기획자
미래 성공 시나리오를 먼저 써서 서비스의 존재 이유를 역방향으로 정의한다 (Press Release First 방법론). 출시 후 언론이 이 서비스를 어떻게 소개할지를 먼저 작성 — 핵심 가치제안이 담겨 있어야 한다.
PuppySpot Press 반려동물 · 라이프스타일 2026년 하반기

강아지 체중·예방접종·바닥재질·가격까지 — 퍼피스팟, 애견카페 방문 전 모든 판단 기준을 한 화면에

국내 첫 애견카페 구조화 인프라 탐색 서비스 '퍼피스팟'이 출시됐다.

기존 지도·블로그·인스타그램에 파편화돼 있던 애견카페 정보를 체중 제한(kg 수치) / 예방접종 요건 / 공간 구조(실내외·분리여부·바닥재질) / 운영방식(예약·시간제·대관) / 가격 전 항목(입장료·음료의무·강아지메뉴 종류+가격) 기준으로 구조화해 단일 화면에서 비교 탐색할 수 있도록 한다.

"7kg 우리 강아지가 들어갈 수 있는지, 예방접종 증명서를 가져가야 하는지, 2인 방문 시 총 얼마가 나올지 — 지금까지 탭 10개를 열어야 했던 정보를 퍼피스팟에서 30초 안에 확인할 수 있습니다."
— 퍼피스팟 PO

퍼피스팟은 수기 리뷰와 크롤링에 의존하지 않고, 카페 사장님이 직접 입력한 구조화 데이터를 기반으로 운영된다. 사장님은 4단계 등록 폼을 통해 입장 조건·공간·운영·가격·강아지 메뉴 전 항목을 한 번에 등록하며, 반려인은 이를 필터 기반으로 조합 탐색할 수 있다.

론칭 3개월 내 50개 카페 등록, 필터 조합 사용률 70% 달성을 목표로 한다.

2 PO — 문제 정의
문제 정의 PO
실제 반려인이 겪는 Pain Point를 심각도 순으로 정렬해 무엇이 핵심인지 확정한다. CRITICAL 문제가 서비스의 핵심 기능을 결정한다.
#문제명심각도상세 내용최초 의뢰 매핑
P-1 방문 가능 여부 불명확 CRITICAL 체중제한·예방접종·중성화·나이·품종 조건을 모르고 갔다가 입장 거부 당하는 경험 빈번. 이동 시간·강아지 스트레스 포함 복합 손실.
P-2 가격 불투명 HIGH 입장료(보호자/견), 음료 의무구매 최저가, 강아지 메뉴 가격이 방문 전 파악 불가. 2인+견1 방문 시 예산 초과 발생. 가격 / 메뉴
P-3 공간 정보 부재 HIGH 소형견/대형견 분리 여부, 바닥재질, 수용두수 미표기. 소형견 보호자가 대형견 합사 카페에 방문해 불안한 경험. 크기/실내여부
P-4 예약/운영방식 파악 어려움 MED 완전예약제인지 자유입장인지 모르고 방문 → 현장 웨이팅 1~2시간. 강아지 대기 스트레스. 대관가능 여부
P-5 강아지 메뉴 정보 파편화 MED 최초 의뢰 "어떤 강아지 메뉴를 파는지" — 유무만 알 수 있고 종류·가격 사전 파악 불가. 강아지 메뉴 종류
P-6 정보 파편화 MED 위 모든 정보가 블로그·인스타·카카오맵에 흩어져 있어 방문 결정 1건에 탭 10개 이상 열어야 함.
P-7 사장님 계정 미분리로 인한 신뢰도 리스크 HIGH 일반회원도 사장님 등록 폼에 접근 가능한 구조적 허점. 카페 운영자 본인 확인 절차 부재 → 허위 등록·경쟁사 교란 등록·정보 오염 위험. 구조화 데이터를 신뢰하고 방문 판단을 내리는 서비스 특성상 등록 주체 신뢰도는 핵심 문제.
P-8 초기 카페 확보(콜드스타트) 채널 부재 HIGH 사장님 스스로 4단계 상세 폼을 작성해야만 카페가 등록되는 구조 → 사장님 유입 의지에 전적으로 의존. 반려인이 "이 카페도 등록해달라" 제보할 수 있는 상향식 채널이 없음.
3 PO — 문제 정의
핵심 카테고리 구조 확정 기획자
Pain Point를 해결하기 위해 어떤 데이터를 수집하고 어떻게 구조화할지 확정한다. 이 카테고리 구조가 DB 스키마와 필터 설계의 근거가 된다. 핵심 필드를 4개 그룹으로 구조화하고, 불필요한 항목은 폐기 처리.
최초 의뢰 5개 카테고리 전수 반영 + 최종 확정: ① 크기(체중제한 kg 수치) → 그룹A · ② 실내여부(공간유형) → 그룹B · ③ 대관여부 → 그룹C · ④ 강아지 메뉴 종류+가격 → 그룹D · ⑤ 가격(입장료·음료·메뉴가격) → 그룹D. 4그룹 구조 최종 확정. 구조화 불가 항목은 폐기 처리.
🚦
그룹 A — 입장 조건 (방문 가능 여부 판단)
방문 전 가장 먼저 확인해야 하는 조건. 이 항목이 맞지 않으면 방문 자체가 불가.
P0 코어
항목명필드명값 유형허용 값사장님 등록 UI필수여부
체중 제한 ★ 최초의뢰 #1weight_limitselect5kg이하 / 7kg이하 / 10kg이하 / 15kg이하 / 20kg이하 / 제한없음드롭다운필수
예방접종 — 종합백신vaccination_comboboolean완료 필요 Y / N토글필수
예방접종 — 광견병vaccination_rabiesboolean완료 필요 Y / N토글필수
중성화 여부neuteredselect필수 / 권장 / 무관라디오 버튼필수
나이 제한age_limitselect4개월이상 / 6개월이상 / 1년이상 / 무관드롭다운권장
품종 제한breed_restrictiontext"맹견 및 공격성 품종 불가" 등 자유 입력텍스트 입력권장
🏠
그룹 B — 공간/시설 (방문 경험 품질)
방문 후 경험 품질을 결정. 소형견 보호자에게는 분리여부가 핵심.
P0 코어
항목명필드명값 유형허용 값사장님 등록 UI필수여부
공간 유형 ★ 최초의뢰 #2space_typeselect실내전용 / 실외전용 / 실내+실외 복합라디오 버튼필수
견종 분리 여부size_separationselect소형견만 / 대형견만 / 소대형 분리 공간 / 미분리 합사라디오 버튼필수
바닥 재질floor_typemultiselect천연잔디 / 인조잔디 / 모래 / 마루 / 우레탄 / 복합체크박스권장
최대 수용 두수max_capacitynumber숫자 입력 (예: 15마리)숫자 입력권장
수영장/워터파크has_poolboolean있음 / 없음토글선택
셀프 목욕 시설has_selfwashboolean있음 / 없음토글선택
📅
그룹 C — 운영 방식 (방문 편의성)
예약 없이 갔다가 대기 2시간 경험을 방지. 대관 여부는 생일파티 계획에 필수.
P0 코어
항목명필드명값 유형허용 값사장님 등록 UI필수여부
예약 방식reservation_typeselect완전 예약제 / 자유 입장 / 예약+자유 혼합라디오 버튼필수
이용 시간 방식time_policyselect무제한 / 시간제(시간당 추가) / 90분 기본 / 기타라디오 버튼필수
대관 여부 ★ 최초의뢰 #3private_bookingboolean가능 / 불가토글권장
주차parkingboolean가능 / 불가토글권장
💰
그룹 D — 가격 구조 (비용 계획 — 코어 피처)
파트장 최초 의뢰의 핵심. 입장료(인/견) + 음료의무 + 강아지메뉴 종류+가격 전 항목.
P0 코어
항목명필드명값 유형허용 값 / 예시사장님 등록 UI필수여부
보호자 입장료 ★ 최초의뢰 #5adult_feenumber무료(0) / 5,000 / 8,000 / 10,000 / 15,000원금액 입력 (원 단위)필수
반려견 입장료 ★ 최초의뢰 #5dog_feenumber무료(0) / 3,000 / 5,000 / 체중별 차등금액 입력 + "보호자에 포함" 옵션필수
음료 의무 구매drink_requiredselect필수(1인 최소 N원) / 불필요토글 + 최저금액 입력필수
강아지 메뉴 ★ 최초의뢰 #4dog_menumultiselect + text케이크/쿠키/아이스크림/밥·간식 + 가격대 텍스트체크박스(종류) + 텍스트(가격대)필수
예상 총비용 (2인+견1)estimated_costnumber위 항목 합산 자동 계산 — 서비스에서 표시자동 계산 (사장님 미입력)— (시스템 자동)
📋
유의사항 — 카페별 세부 규정 (자유 텍스트)
구조화 불가 또는 카페별 편차가 큰 규정.
P1
항목명필드명값 유형포함 내용 (예시)사장님 등록 UI필수여부
유의사항notestextarea기저귀 착용 / 외부 간식 반입 / 발정기 제한 / 목줄 착용 등자유 텍스트 (최대 500자)권장
🗑️ 폐기 항목 (최종 확정 시 제외)
항목폐기 사유흡수 처리
증명서 지참 여부예방접종 필드로 충분히 커버됨→ vaccination 필드로 흡수
기저귀/목줄 착용 의무카페별 편차 크고 구조화 실익 낮음→ notes 유의사항으로 흡수
외부 간식 반입카페별 편차 크고 구조화 실익 낮음→ notes 유의사항으로 흡수
발정기 별도 제한구조화 불가 (카페별 기준 상이)→ notes 유의사항으로 흡수
아이 동반 가능 여부반려인 서비스 스코프 외→ 완전 폐기
평일/주말 가격 차이복잡도 과도. 면책 문구로 대체→ 완전 폐기
포토존 여부P2 이하 우선순위, 현 단계 스코프 밖→ 완전 폐기 (이후 단계 재검토)
4 PO — 문제 정의
타겟 페르소나 기획자
누구의 문제를 푸는지 명확히 해야 기능 우선순위와 UX 의사결정의 기준점이 생긴다. Primary(반려인) + Secondary(사장님) 두 이해관계자 정의 — 두 집단 모두의 Job을 해결해야 플랫폼이 성립한다.
🐾
Primary — 초보 반려인
20~30대 · 소형견(7~10kg이하) 보호자 · 첫 카페 방문 준비 중
프로필: 소형견 보호자. SNS에서 애견카페를 발견하고 방문을 검토 중. 체중이 기준에 맞는지, 예방접종을 다 맞혔는지, 무엇을 준비해야 할지 모름.
😰 Pain"7kg 우리 강아지가 10kg 제한 카페에 들어갈 수 있는지 모름. 예방접종 증명서 가져가야 하는지 모름. 2인+견1 방문 시 얼마가 나올지 몰라서 당황. 미중성화 수컷이라 거절당한 경험."
✅ Key Job"방문 전 5분 안에 우리 강아지가 가도 되는지 판단하고, 오늘 총 얼마를 쓸지 알고 싶다."
🏪
Secondary — 애견카페 사장님
애견카페 운영자 · 입장 조건·가격 문의 전화 반복 수신
프로필: 인스타·카카오맵에 입장 조건을 올려도 같은 문의 전화가 계속 옴. 네이버 플레이스는 광고 의존적. 타겟 반려인에게 정확하고 구조화된 정보를 한 번에 전달하고 싶음.
😰 Pain"체중제한·예방접종·가격을 여기저기 올려도 전화 문의가 줄지 않음. 잘못 찾아온 고객을 돌려보내는 상황이 사장님도 힘듦."
✅ Key Job"한 번 등록으로 입장 조건·공간·운영·가격·메뉴를 타겟 고객에게 정확히 전달. 맞는 고객만 방문하게 유도."
PO 판단 — 문제 정의 결론
풀어야 할 문제가 명확하고, 두 이해관계자 모두 해결을 원한다
핵심 문제 확정: 반려인은 방문 전 5분 안에 입장 가능 여부와 비용을 확인하고 싶다 (CRITICAL). 현재 이를 해결하는 구조화 서비스가 없다.
데이터 구조 확정: 4그룹 20필드 카테고리 확정. 이 구조가 DB 스키마 · 필터 설계 · 사장님 등록 폼의 기준점이 된다.
양면 플랫폼 구조 확정: 반려인(탐색) + 사장님(등록) 두 집단 모두의 Job을 해결해야 서비스가 성립한다 → 수익 모델도 양면에서 발생.
시장조사 에이전트 시장 규모 & 경쟁 검증 Ch.2 — 데이터 기반 시장 성립 여부 검증
5 시장조사 — 시장 검증
시장 규모 (TAM / SAM / SOM) 시장조사
시장이 충분히 크지 않으면 퍼피스팟이 성장할 공간이 없다. 탑다운 + 바텀업 이중 검증으로 숫자를 실증한다. 가정값은 "(가정)" 명시.
구분수치산출 방법출처
TAM 6조원 (2024) 탑다운 — 반려동물 시장 전체 (사료+용품+의료+서비스) 농림축산식품부 / YZC Pet
SAM 약 360억원 등록 604개소 × 월매출 500만원(가정) × 12개월 농림축산식품부 2024 실태조사
SOM 탑다운 약 2.2억원/년 604개소 × 월 광고비 10만원(가정) × 12개월 × 침투율 30%(가정) 공공데이터 기반 계산
SOM 바텀업 Phase2 3,200만 / Phase3 1.9억/년 수도권 반려견 가구 177만(가정) × 전환율 0.6~1.5%(가정) × ARPU 3,000~7,000원(가정) KB금융 2025 반려동물 보고서
591만
전국 반려가구 (2024)
전체 가구의 26.7% — KB금융 2025
604개소
등록 동물전시업 (2024)
+11.6% YoY — 농림축산식품부
4,700만건
반려동물 관련 연간 검색량
카페 검색 비중 30.7% 1위 — 어센트코리아
6 시장조사 — 규제 분석
규제 환경 (핵심 기회 신호) 시장조사
애견카페는 규제 리스크가 있는 도메인이다. 법적 환경이 서비스 타이밍과 생존 가능성을 결정한다.
✅ 합법화 2025년 6월 1일 시행 완료 (기회)
위생·안전 기준을 갖춘 음식점·카페에서 반려동물 동반 출입 허용 (식품위생법 개정). 신규 업체 급증 진행 중 → 퍼피스팟 DB 구축 타이밍 최적.
상황내용퍼피스팟 시사점
합법화 전식품위생법상 동물과 식음료 공간 엄격 분리 의무 → 대다수 위반 운영정보 공개 꺼리는 업주 多
합법화 후 (현재)위생 기준 충족 카페만 합법 운영. 기준 미충족 업체 퇴출 자연 발생DB 정제 자연 발생, 신뢰도 상승
향후 전망합법화 이후 신규 오픈 가속화 예상 (604개소 → 1,200개소+ 빠르게 증가)지금 씨드 DB 선점 = 후발 진입 장벽
7 시장조사 — 경쟁 분석
경쟁사 / 대체재 분석 시장조사
경쟁사가 이미 이 문제를 잘 풀고 있다면 퍼피스팟이 존재할 이유가 없다. 공백이 실재하는지 확인한다.
서비스체중제한 (kg)예방접종 조건가격 전항목강아지 메뉴예약방식공간/분리핵심 한계
카카오맵일반 장소 검색, 반려견 특화 없음
네이버 플레이스△ 부분△ 일부광고 노출 의존, 조건 필터 없음
반려생활△ 일부숙소만△ 일부네이버지도로 이탈, 일상 카페 탐색 약함
와요(WAYO)△ 일부펫시터만카페 전용 필터 없음 (누적 30만 회원, 매출 42.8억)
인스타그램△ 비정형△ 비정형△ 비정형검색·필터 불가, 정보 파편화
퍼피스팟 (우리) ✅ kg 수치 ✅ 구조화 ✅ 전항목 ✅ 종류+가격 ✅ 구조화 ✅ 분리여부+재질 유일한 구조화 인프라 필터 서비스
벤치마크 — 마이펫플러스 (동물병원 가격비교)
10만+ 다운로드, 정식 오픈 1년 만에 BEP 달성. "병원비 불투명 문제를 정보 비대칭 해소로 풀면 먹힌다"는 검증된 선례. 퍼피스팟 = 같은 모델을 애견카페에 적용.
8 시장조사 — JTBD 분석
JTBD 분석 (Jobs-to-Be-Done) 시장조사
페르소나(누가)가 아닌 Job(왜 쓰는가)을 파악해야 기능의 우선순위와 마케팅 메시지가 정확해진다. 커뮤니티 후기·블로그·업주 인터뷰 기반 추정. 정성 인터뷰 수행 시 검증 필요.
사용자Job 유형핵심 Job 문장
👤 보호자
보호자Functional"나는 반려견과 외출할 때, 견종·크기 입장 가능 여부와 입장료 구조를 방문 전에 한 번에 확인하고 싶다"
보호자Emotional"나는 우리 강아지가 진심으로 환영받는 공간이라는 안도감을 원한다 / 입장 거부·눈총·방치 느낌을 피하고 싶다"
보호자Social"나는 강아지에게 좋은 경험을 찾아주는 책임감 있는 보호자로 보이고 싶다"
🏪 카페 사장님
사장님Functional"나는 우리 카페를 찾을 가능성이 높은 반려견 보호자에게, 네이버 광고비 소진 없이 노출되고 싶다"
사장님Emotional"나는 진짜 반려동물 친화 공간이라는 신뢰를 얻고 싶다 / 가격·시설 오해로 억울한 평가를 피하고 싶다"
사장님Social"나는 '검증된 애견 친화 카페'로 인식되고 싶다"
시장조사 판단 — 시장 검증 결론
시장은 크고, 경쟁 공백이 실재하며, 지금이 최적 진입 타이밍이다
시장 크기 확인: 반려가구 591만, 연간 검색량 4,700만건. 애견카페 검색이 동반 장소 유형 1위(30.7%).
경쟁 공백 확인: 카카오맵·네이버·반려생활·와요 모두 반려동물 전용 구조화 필터 없음. 우리가 들어갈 사분면이 비어있다.
타이밍 확인: 합법화 2025-06-01 시행 → 신규 업체 급증 중. DB 선점이 핵심 해자가 되는 시점.
SOM 검증: Phase 3 바텀업(1.9억)과 탑다운(2.2억) 근접 → 현실적 추정치 범위 내.
PO 에이전트 기능 설계 & 우선순위 확정 Ch.3 — 수치 기반 무엇을 어떤 순서로 만들지 확정
9 PO — 기능 설계
RICE 기능 우선순위 PO
모든 기능을 다 만들 수 없다. RICE 수치로 우선순위를 객관화해 팀 전체가 같은 기준으로 의사결정한다. Reach(10점) × Impact(10점) × Confidence(%) ÷ Effort(주) — 높을수록 먼저 만든다.
기능RIC(%)E(주)RICE분류시각화
입장 조건 필터
체중·예방접종·중성화·나이·품종
1010802 500 P0
가격 정보 표시
인/견 입장료·음료·메뉴종류+가격
910902 405 P0
공간·시설 필터
실내외·분리여부·바닥재질·수영장+셀프목욕
89802 288 P0
사장님 직접 등록 폼
4단계 전항목 등록
89802 288 P0
운영방식 필터
예약방식·시간제·대관여부
78702 196 P0
예상 총비용 계산기
2인+견1 기준 자동 계산
78702 196 P0
지도 뷰
지도+하단 카드 슬라이더
77703 114 P1
강아지 메뉴 사진
메뉴 이미지 업로드
56602 90 P1
즐겨찾기 (발바닥)
카페 저장 기능
55701 175 P1
계정 유형 분리
가입 시 일반회원/사장님 선택
109901 810 P0
마이페이지
공지/약관/FAQ/고객센터
106901 540 P0
카페 추천 등록
"여기도 등록해주세요"
67701 294 P0
카페 추천 검수 (관리자) 36801 144 P0
사장님 계정 전환
일반→사장님 후속 전환
34601 72 P2
10 PO — 기능 설계
성공 지표 PO
"잘 되고 있는지"를 숫자로 측정해야 방향을 수정할 수 있다. 핵심 차별점(구조화 필터)이 실제로 사용되는지가 최우선 지표. 단순 방문자 수는 후순위.
50개소
사장님 등록 카페 수
론칭 후 3개월 목표
80%+
입장 조건 완성도
체중·예방접종·가격 3개 이상 필드 입력 비율
70%+
필터 조합 사용률
핵심 차별점 채택 지표
지표목표값기준 시점측정 근거
사장님 등록 카페 수50개소론칭 후 3개월데이터 공급 최소 임계값
사장님 입장조건 완성도80%+등록 완료 시체중·예방접종·가격 3개 이상 필드 입력 비율
필터 조합 사용률70%+론칭 후 1개월단순 전체 목록 조회 대비 필터 조합 1개 이상 적용 세션 비율
방문 실패율 감소측정 및 감소 목표론칭 후 2개월"갔다가 입장 못한 경험" 유저 설문 (온보딩 후 30일 재조사)
주간 탐색 세션 (WAU)500론칭 후 2개월Vercel Analytics 기준
카페 상세 → 예약링크 이탈률15%+론칭 후 1개월정보 확인 → 실제 방문 의도 전환율 프록시 지표
11 PO — 기능 설계
서비스 IA 확정 기획자
확정된 카테고리 구조와 RICE 우선순위를 실제 화면으로 전환한다. 이 IA가 화면·디자인 설계 단계와 프론트 구현 단계의 기준점이 된다.
📌
최종 확정 IA 구조: 사장님 등록 4단계(기본정보·입장조건·공간운영·가격메뉴), 카페 상세 6개 섹션, 필터 패널 4탭, 주소입력 카카오 API.
Depth 1Depth 2Depth 3화면 설명우선순위v1 여부
홈 / 탐색
탐색 메인전체 카페 카드 목록 + 퀵 필터 바P0✅ v1
탐색 메인필터 패널탭1 입장조건(체중/예방접종/중성화/나이) + 탭2 공간·시설(공간유형/분리/바닥/수영장/셀프목욕) + 탭3 운영(예약/시간/대관/주차) + 탭4 가격(보호자입장료/음료의무/메뉴종류)P0🔄 v2 확정
지도 뷰지도 + 하단 카드 슬라이더. 필터 적용 유지P1✅ v1
카페 상세
카페 상세입장 조건그룹A 5개 필드 구조화 표시. 내 강아지 조건 매칭 여부 시각 표시P0🔄 v2 확정
카페 상세공간·시설그룹B 6개 필드 (공간유형·견종분리·바닥재질·최대수용두수·수영장·셀프목욕)P0🔄 v2 확정
카페 상세운영 정보그룹C 4개 필드 (예약방식·이용시간·대관·주차)P0🔄 v2 확정
카페 상세가격 정보그룹D 4개 필드 + 예상총비용 2인+견1 기준 자동표시P0🔄 v2 확정
카페 상세강아지 메뉴메뉴 종류(케이크/쿠키/아이스크림/밥·간식) + 가격대. 메뉴 종류별 카드 표시P0🆕 v2 신규
카페 상세유의사항사장님이 등록한 자유 텍스트 유의사항 (기저귀·외부간식·발정기 제한 등)P0🆕 v2 신규
카페 상세위치/연락지도 임베드(카카오 API), 전화번호, 예약링크, 운영시간표P0✅ v1
회원가입 / 계정 유형
로그인소셜 로그인 바텀시트카카오/구글/애플 소셜 로그인. 기존 SC-16 유지P0✅ v1
회원가입계정 유형 선택소셜 로그인 최초 1회(로그인 필요 액션 시점) "일반회원으로 계속하기 / 사장님으로 가입하기" 2버튼. 사장님 선택 시 상호명·연락처 최소 입력 후 사장님 계정 전환. SC-22P0
사장님 등록 (4단계 스텝퍼) — 사장님 계정 전용
사장님 등록진입 조건마이페이지 → 사장님 대시보드 카드 경유 진입. 사장님 계정(accountType='owner') 전용 — 일반회원 URL 직접 접근 시 권한없음 안내P0
사장님 등록1/4 기본 정보카페명, 주소(카카오 API), 전화번호, 운영시간(요일별), 휴무일P0🔄 v2 확정
사장님 등록2/4 입장 조건체중제한(드롭다운) / 예방접종 종합백신Y/N / 예방접종 광견병Y/N / 중성화(라디오) / 나이제한 / 품종제한P0🔄 v2 확정
사장님 등록3/4 공간·운영공간유형 / 견종분리 / 바닥재질 / 최대수용두수 / 수영장 / 셀프목욕 / 예약방식 / 이용시간 / 대관 / 주차P0🔄 v2 확정
사장님 등록4/4 가격·메뉴보호자 입장료 / 견 입장료 / 음료의무(토글+최저금액) / 강아지메뉴 종류(체크박스)+가격대 / 유의사항(textarea)P0🔄 v2 확정
사장님 등록완료검토중 안내, 예상 승인 타임라인 (48시간 내), 대시보드 이동 버튼P0✅ v1
사장님 대시보드 / 관리자
사장님 대시보드내 카페 관리등록 정보 수정(전 항목), 강아지 메뉴 추가/삭제/가격 변경P1
관리자승인 관리신청 목록, 승인/반려 처리, 반려 사유 입력 → 사장님 알림P1✅ v1
관리자카페 추천 검수일반회원 제출 카페 추천 건 목록, "컨택예정/컨택완료/등록전환/반려" 상태 관리P0
마이페이지 (탭바 3번째 자리)
마이페이지메인프로필(닉네임/계정유형 뱃지), 계정유형 표시, 발바닥 목록 바로가기, 사장님 대시보드 카드(사장님 계정만 노출), 하위메뉴 리스트. SC-23P0
마이페이지카페 추천 등록"여기도 등록해주세요" — 카페이름·대략위치(지역·동 단위)·참고URL(선택)만 입력, 상세 20필드 없음. 제출 시 "검토 후 등록됩니다" 안내(즉시 게시 아님), 로그인 필요. SC-24P0
마이페이지내가 추천한 카페 목록제출 건 상태 조회(검토중/컨택중/등록완료/반려). SC-25P1
마이페이지공지사항목록/상세서비스 공지 리스트 + 상세. SC-26/27P0
마이페이지약관이용약관, 개인정보처리방침. SC-28P0
마이페이지FAQ자주 묻는 질문 아코디언 리스트. SC-29P0
마이페이지고객센터문의하기(유형선택+내용+연락처+이미지첨부). SC-30P0
IA 구조
입장조건·공간·운영·가격 카테고리, 사장님 4단계 등록 폼(사장님 계정 전용), 일반회원용 경량 카페 추천 등록("여기도 등록해주세요"), 마이페이지(공지사항·약관·FAQ·고객센터)로 구성.
12 PO — 기능 설계
리스크 & 오픈 퀘스천 PO 기획자
최종 판정은 '진행'이지만 아래 리스크와 오픈 퀘스천은 다음 단계 착수 전 결정이 필요하다.
리스크
⚠️ R-1. 사장님 미등록 필드 처리 정책
체중제한 미입력 시 필터에서 "정보없음" 처리 후 기본값 제외. 반려인에게 "체중 정보 없음. 방문 전 확인 권장" 명시. 완성도 낮은 카페는 탐색 하단 노출.
⚠️ R-2. 가격 변동성 및 면책 처리
사장님 등록 가격과 실제 가격 상이 시 면책 고지 필요. 카드 상단 "최근 업데이트: {날짜}" + "실제 가격과 다를 수 있으며 방문 전 확인을 권장합니다" 문구 필수.
⚠️ R-3. 예방접종 의무화 법령 연동
2026.3 이후 동물보호법 개정으로 예방접종 법적 의무화. 카페 요건과 법적 기준이 달라질 수 있어 최신화 정책 필요.
⚠️ R-4. 4단계 등록 폼 완료율 저하
v1 1단계 → v2 4단계 증가. 중도 이탈 가능성. 미리보기 Progress Bar + 이탈 시 임시저장 기능 대응. 필수 필드 최소화 정책.
오픈 퀘스천 (다음 단계 착수 전 결정)
❓ OQ-1. 필수 vs 선택 필드 구분 기준
그룹D(가격) 전체를 필수로 하면 등록 허들 증가. "체중제한·예방접종·보호자입장료·음료의무"만 필수, 나머지 권장으로 분리? → 화면·디자인 설계 단계 UX 플로우 확정 전 결정 필요.
❓ OQ-2. 예방접종 증명서 실제 업로드 기능
사장님이 "증명서 지참 필수"로 등록 시, 유저 반려견 증명서 업로드/저장 기능이 필요한가? → Phase 1 스코프 밖으로 잠정 결정. 프론트 구현 단계에서 재검토.
❓ OQ-3. 예상 총비용 계산기 기준값
"2인+견1" 기준 자동 계산 → 보호자 수/강아지 수 변동 가능하도록 슬라이더 제공할 것인가? → 화면·디자인 설계 단계 UI 설계 시 결정 필요.
문제 정의 단계 최종 판정 — PO + 시장조사 에이전트 합의
✅ 진행 — 화면·디자인 설계 착수 승인
문제 정의 · 시장 검증 · 설계 확정 3단계 완료. 다음 단계: 화면·디자인 설계
근거 1 — PO
문제 검증 완료
CRITICAL Pain P-1 (입장 거부 경험) 확인. 반려인은 방문 전 5분 안에 입장 가능 여부를 확인하고 싶다. 이를 해결하는 구조화 서비스 없음.
근거 2 — 시장조사
시장 & 타이밍 검증 완료
반려가구 591만, 카페 검색 1위(30.7%). 경쟁 공백 실재 확인. 합법화 2025-06-01 시행 → 신규 업체 급증 타이밍. SOM Phase3 약 1.9억원/년.
근거 3 — PO
설계 기반 완료
카테고리 구조 확정. P0 기능 RICE 수치 기반 우선순위 확정. 서비스 IA 설계 완료. 화면·디자인 설계 즉시 착수 가능.
다음 단계 → 완료 — 화면·디자인 설계 (디자인 시스템 + 전체 화면 디자인 + 기능정의서 3종 산출물 완료 · 2026-06-23)   화면·디자인 설계 리포트 보기 →

이번 단계 총정리

  • 서비스 방향 확정 — 반려견 동반 애견카페 탐색 O2O 앱으로 포지셔닝
  • 타겟 페르소나 도출 — 사용자 유형별 핵심 니즈 및 Jobs-to-Be-Done 정의
  • 서비스 IA 확정 — 전체 화면 구조 및 정보 흐름 설계
  • 기능 우선순위 결정 — RICE 기반 핵심 기능 선별 완료

문제 정의 · 시장 검증 · IA 설계까지 — 퍼피스팟의 '왜'와 '무엇'을 완전히 정의했다.

다음 단계
2단계 · 화면·디자인 설계
디자인 시스템 구축
전체 화면 디자인
화면 기능정의서 작성
2단계 / 전체 6단계 — 화면·디자인 설계
화면·디자인 설계
PuppySpot 앱의 디자인 시스템과 전체 화면을 완성한 단계입니다. 토큰 기반 컴포넌트 체계를 구축하고, 핵심 UX 의사결정을 확정했습니다.

이 리포트의 모든 작업은 원주님의 가이드에 따라 PO · 기획자 · 디자이너 · 시장조사 AI 에이전트가 수행했습니다.

1
단계 개요 및 완료 기준 PO
문제 정의 단계에서 확정된 IA와 카테고리 구조를 실제 화면 디자인으로 전환하는 단계. 디자이너가 단독 구현 가능한 수준의 디자인 시스템 + 화면 산출물 납품이 완료 기준.
화면·디자인 설계 완료
디자인 시스템 · 전체 화면 디자인 · 화면 기능정의서 3종 산출물 완료
완료 근거 1
디자인 시스템 구축
컬러 토큰 / 타이포 스케일 / 컴포넌트 체계 / Disabled States / Modal / 일러스트 완료. design.html과 완전 동기화.
열기 →
완료 근거 2
전체 화면 디자인
전체 화면을 375px 모바일 프레임으로 구현 완료. design.html에서 열람 가능. 실제 시나리오 데이터 적용.
열기 →
완료 근거 3
화면 기능정의서
screen_spec_v2.md — 화면별 레이아웃·기능·에러 상태·인터랙션·디자이너 전달 노트 포함. 프론트 구현 기준 문서.
열기 →
전체
화면 디자인 완료
SC-01~SC-21 (서브화면 포함)
디자인 시스템
컴포넌트 체계 완료
design_system_puppyspot.html 기준
3종
프론트 구현 산출물
디자인 시스템·화면·기능정의서
📌
이 단계의 목적: 문제 정의 단계에서 확정된 IA와 카테고리 구조를 실제 화면 디자인으로 전환. 디자이너가 단독 구현 가능한 수준의 디자인 시스템 + 화면 산출물 납품이 완료 기준.
2
디자인 시스템 구축 디자이너
컬러 토큰, 타이포 스케일, 컴포넌트 체계, Disabled States, Modal, 일러스트 시스템을 구축했다. design.html과 완전 동기화 상태.
01 · Primitive Tokens — Color Palette
토큰용도
--color-primary (green-5)#4A7C59브랜드 메인, 버튼 Primary, 강조
--color-primary-lt (green-1)#EBF3EE배경·태그 그린 계열
--color-primary-dark (green-7)#2D6A42호버·포커스 강조
--surface-bg#F7F5F0페이지 배경 베이지
--surface-card#FFFFFF카드·모달 배경
--color-gold (yellow-5)#D4A853가격 액센트, 발바닥 카운트
--border-default#E8E4DC전역 구분선
--color-error#EF4444Destructive 버튼, 에러 상태
04 · Components — 카테고리별 컴포넌트 체계
카테고리컴포넌트주요 클래스명
BTN — Button Hierarchy 4단계
버튼Primary (확인·완료·다음, 화면당 1개)btn-primary
버튼Secondary (취소·이전)btn-secondary
버튼Destructive (앱 종료·삭제)인라인 스타일 (#EF4444)
버튼Text / Ghost (건너뛰기·상세보기)btn-text
버튼FAB (발바닥 찍기 — 카페 상세 우하단 고정)btn-fab
INPUT — 입력 컴포넌트
인풋Search (검색바, 홈 상단 고정)input-search
인풋Text (일반 텍스트 입력)input-text
인풋Textarea (유의사항 등)input-textarea
FORM — 폼 컴포넌트
Toggle Switch (예방접종·수영장 등 ON/OFF)toggle / toggle-thumb
Custom Checkbox (메뉴 종류 선택)checkbox + aria-role
Radio Button (공간유형·중성화 등 단일선택)radio-group
Range Slider (체중 필터, 6단계)range-slider
Custom Dropdown (지역·정렬·나이제한)dropdown (select 기본 UI 금지)
CARD — 카드 컴포넌트
카드CARD-Cafe (홈 리스트 전너비 카드)card-cafe
카드CARD-Mini (지도 탭 하단 슬라이드업 미니 카드)card-mini
카드CARD-Section (카페 상세 내 섹션 카드)card-section
NAV — 내비게이션
내비하단 탭바 3탭 (홈/발바닥/사장님 등록)tabbar-bottom
내비세그먼트 탭 (리스트/지도 전환)tab-segment
내비필터 4탭 (입장조건/공간/운영/가격)filter-tab
내비Progress Bar 4단계 (사장님 등록 스텝퍼)progress-bar (progress 태그 금지)
TAG/CHIP — 태그·칩
태그입장조건 태그 (연그린 — 체중·예방접종 등)tag-entry
태그공간시설 태그 (연블루 — 실내외·분리 등)tag-space
태그가격 태그 (연골드 — 입장료·음료 등)tag-price
위치 칩 (현재 지역 표시 + 드롭다운)chip-location
OVERLAY — 오버레이
오버레이바텀시트 (필터·위치권한·소셜로그인)bottom-sheet
오버레이발바닥 찍기 Overlay (SC-14)paw-overlay
오버레이앱 종료 다이얼로그 (SC-06-B)dialog
04-B · Disabled States
전체 인터랙티브 컴포넌트의 Disabled 상태 정의 완료. 공통 규칙: opacity: 0.38 / pointer-events: none / cursor: not-allowed. 사장님 등록 폼 미입력 상태, 필터 조건 없을 때 적용 버튼 등에 적용.
05 · Modal / Popup — 3종
종류사용 화면구조
정보 모달입장 조건 상세 안내중앙 팝업 / 제목+본문+닫기 버튼
확인 모달필터 초기화·등록 취소중앙 팝업 / 취소+확인 2버튼
토스트 알림발바닥 찍기 완료·필터 적용 등최하단 96dp 위 / 3초 자동 소멸
06 · Illustrations & Icons
항목내용
마스코트 — 기본형illust_puppy_default.png — 카드 썸네일 디폴트, 로딩 플레이스홀더
마스코트 — sad형illust_puppy_sad.png — Empty State (SC-05, SC-15 빈 상태)
아이콘 시스템Thin stroke SVG (2px, 라운드 캡) — 이모지 사용 금지. 발바닥 아이콘 별도 커스텀.
3
전체 화면 디자인 완료 디자이너
전체 화면을 375px 모바일 프레임으로 구현 완료. design.html에서 열람 가능. 실제 시나리오 데이터(한국어) 적용.
📋
전체 화면 구현 완료. 카페 상세는 무한스크롤 단일 화면으로 통합(의사결정 #2). SC-14~15는 발바닥 찍기/목록으로 용어 통일.
SC-01
홈 — 리스트 탭
카드 목록 + 필터 + 검색바. MVP 메인 화면.
SC-02
홈 — 지도 탭
전체화면 지도 + 마커 + 미니 카드. 세그먼트 전환.
SC-03
필터 바텀시트
4탭(입장조건/공간/운영/가격). 슬라이더·토글·드롭다운.
SC-04
검색결과
키워드 검색 결과 리스트. 빈 결과 → SC-05.
SC-05
Empty State
결과 없음. 뽀삐 sad 일러스트 + 필터 초기화 버튼.
SC-06
위치권한 바텀시트
위치 권한 요청 바텀시트. 허용/거부 분기.
SC-06-B
앱 종료 확인 다이얼로그
백버튼 시 앱 종료 확인. Destructive 버튼 패턴.
SC-07
지역선택 드롭다운
권역/시도 2단계 지역 선택. 검색어 필터 포함.
SC-08
카페 상세 (무한스크롤 통합)
SC-08~13 통합. 입장조건·공간·운영·가격·메뉴·유의사항 전 섹션.
SC-14
발바닥 찍기 Overlay
찜(저장) 확인 오버레이. 발바닥 애니메이션.
SC-15
발바닥 목록
저장된 카페 목록. 비어있을 시 Empty State 포함.
SC-16
소셜로그인 바텀시트
카카오/네이버/애플 소셜 로그인. 발바닥 탭 진입 시 유도.
SC-17
사장님 등록 1/4 — 기본정보
카페명·주소(카카오 API)·전화번호·운영시간·휴무일.
SC-18
사장님 등록 2/4 — 입장조건
체중제한·예방접종·중성화·나이제한·품종제한.
SC-19
사장님 등록 3/4 — 공간운영
공간유형·분리여부·바닥재질·수영장·예약·대관·주차.
SC-20
사장님 등록 4/4 — 메뉴등록
보호자/견 입장료·음료의무·강아지메뉴·유의사항.
SC-21
등록완료
검토중 안내 + 타임라인 (48시간 내 승인).
⚠️
카페 상세 탭 → 무한스크롤 전환: 의사결정 #2에 따라 카페 상세 6탭 분리 방식을 SC-08 단일 무한스크롤로 통합. 맥락 유지 + 탐색 흐름 개선 목적.
4
핵심 기획 의사결정 PO 기획자
이 단계 진행 과정에서 확정된 기획·디자인 의사결정 사항. 이후 단계에서 번복 시 근거 문서 필요.
💡
이 단계에서 확정된 6건 의사결정이 화면 설계 방향을 결정했다. 이후 단계에서 변경 시 별도 기록 필요.
의사결정 1 · 찜/저장 개념
발바닥 = 찜(저장)으로 통일
이전 즐겨찾기 / 좋아요 등 명칭 혼재
확정 "발바닥 찍기" 단일 개념. 좋아요 기능 없음. 발바닥 = 저장 행위, 발바닥 카운트 = 인기도 지표로 이원화.
의사결정 2 · 카페 상세 화면 구조
SC-08~13 → SC-08 단일 무한스크롤로 통합
이전 문제 정의 IA: 카페 상세를 입장조건/공간/운영/가격/메뉴/유의사항 6개 탭으로 분리 (SC-08~13)
확정 SC-08 단일 화면 내 무한스크롤. 각 그룹은 섹션으로 구분. 탭 전환 UX 제거 → 맥락 유지 + 탐색 흐름 개선.
의사결정 3 · 디폴트 이미지
뽀삐 캐릭터 2종을 디폴트 이미지로 확정
이전 실제 카페 사진 또는 CSS gradient placeholder
확정 illust_puppy_default.png (기본) / illust_puppy_sad.png (Empty State용). CSS gradient 플레이스홀더 병행 허용.
의사결정 4 · 전체 용어 통일
찜 → 발바닥 전체 리네이밍
이전 하단 탭바 "즐겨찾기" / 버튼 "찜" 혼용
확정 하단 탭바 → "발바닥", 저장 버튼 → "발바닥 찍기", 목록 화면 → SC-15 "발바닥 목록". 서비스 전체 일관 적용.
의사결정 5 · 비주얼 방향
내추럴 그린 미니멀 (컨셉 1) 채택
기각 따뜻한 어스톤 컨셉 — 다크 그린 배경이 위압감, 초보 보호자 타겟과 불일치
확정 Moss Green(#4A7C59) + 베이지 서피스(#F7F5F0) + Gold 액센트(#D4A853). 그림자 없음, radius 20px 기준.
의사결정 6 · UX 방향
조건 우선형 (안 B) 채택, 지도 MVP 제외
검토 안 A: 지도·리스트 이중 뷰 전면 배치
확정 필터 패널 4탭 전면 배치. 지도 뷰는 SC-02로 구현하되 MVP 주력은 리스트 탭(SC-01). 지도 탭은 세그먼트 전환.
5
산출물 목록 PO 디자이너
이 단계에서 생성된 산출물. 다음 단계인 프론트 구현의 기준 문서 역할을 한다.
파일명 상태 역할 및 내용 프론트 구현 연계
design_system_puppyspot.html
바로보기 →
완료 디자인 시스템 — 컬러 토큰 / 타이포 스케일 / 컴포넌트 체계 / Disabled States / Modal / 일러스트·아이콘. design.html과 완전 동기화. 프론트 CSS 기준 파일. 컴포넌트 클래스명 그대로 사용.
design.html
바로보기 →
완료 전체 화면 디자인 산출물 — 375px 모바일 프레임으로 구현. 실제 시나리오 데이터(한국어) 적용. 화면별 레이아웃·컴포넌트 배치 기준. screen_spec_v2.md와 병행 사용.
screen_spec_v2.md
바로보기 →
완료 화면별 기능정의서 v2 — 진입/진출 경로, 권한, 레이아웃 구성, 기능 정의, 에러·상태 매트릭스, 인터랙션, 디자이너 전달 노트 포함. 프론트 구현 기준 문서. 프론트 개발자 기능 구현 기준. 에러 처리·권한 분기 포함.
illust_puppy_default.png
illust_puppy_sad.png
완료 뽀삐 마스코트 캐릭터 2종 — 기본형(default) / 슬픈형(sad). Empty State 및 디폴트 이미지 전용. Empty State·로딩 실패 시 img src 파일로 사용.
계정유형·마이페이지 화면군
design.html에서 보기 →
완료 계정유형선택·마이페이지·카페추천등록·내가추천한카페목록·공지사항·약관·FAQ·고객센터 9개 화면. 사장님 등록은 사장님 계정 전용으로 진입 권한 설정. 하단 탭바 3번째가 마이페이지. accountType 상태값 필요.

이번 단계 총정리

  • 디자인 시스템 구축 완료 — 컬러·타이포·컴포넌트 토큰 체계 정의
  • 전체 화면 디자인 완료 — 모든 화면 375px 프레임 디자인 산출물 확정
  • 핵심 UX 의사결정 확정 — 발바닥=찜 기능 통일 등 주요 기획 방향 결정
  • 기능정의 문서 동기화 — 디자인과 기획 문서 간 100% 일치 확인

디자인 시스템부터 전체 화면까지 — 프론트 구현을 즉시 착수할 수 있는 3종 산출물이 완비됐다.

다음 단계
3단계 · 프론트 구현
확정된 화면 30종을 실제 동작하는 코드로 구현
디자인 시스템을 코드 컴포넌트로 전환
계정 유형별 분기·권한 처리 반영
3단계 / 전체 6단계 — 프론트 구현
프론트엔드 프로토타입
2단계 산출물(design.html·screen_spec_v2.md)을 근거로 전면 재구현한 단계입니다. 핵심 가설 3개를 검증하고, 4단계 백엔드 연동을 위한 인수 조건을 정리했습니다.

이 리포트의 모든 작업은 원주님의 가이드에 따라 프론트 AI 에이전트가 수행했습니다.

1 3단계 개요
단계
3단계 — 프론트엔드 프로토타입
산출물
index.html (2,759줄)
방법론
SPA · JS 상태 관리
구현 화면
SC-01~30
방식
max-width 390px, 폰 목업 프레임 없음
가설 통과
3 / 3 ✅

3단계는 2단계 산출물(design.html·screen_spec_v2.md)을 근거로 구현했습니다. design.html의 마크업·컴포넌트·SVG 아이콘을 그대로 이식해 실제 모바일 웹(max-width 390px, 폰 목업 프레임 없음)으로 구현했습니다. Mock 카페 데이터 12개(강아지숲 마포점 외, 1단계 20필드 전체 반영)를 기반으로 SC-01~30에 해당하는 화면·오버레이가 모두 동작합니다. 하단 탭바는 홈·발바닥·마이페이지 3탭이며, 사장님 등록(SC-17~20)은 사장님 계정에서만 진입 가능하고 일반회원은 권한없음 안내로 대체됩니다.

이번 단계의 핵심 산출물은 다음과 같습니다.
완료
실제 구현된 서비스
index.html — 2단계 디자인 그대로 구현된 SC-01~30, 실제 동작하는 SPA 프로토타입
index.html 실행하기 →
2 구현 현황
SC 번호 화면·오버레이명 진입 방법 상태
SC-01/02 홈 (리스트·지도 세그먼트) 앱 시작. 세그먼트 탭으로 리스트/지도 전환 ✅ 완료
SC-03 필터 바텀시트 검색바 필터 아이콘. 입장조건/공간시설/운영/가격 4탭 + 실시간 결과수 미리보기 ✅ 완료
SC-04/05 검색결과 · Empty State 검색/필터 적용 후. 결과 0건 시 Empty 노출 ✅ 완료
SC-06 위치권한 바텀시트 위치 칩 탭 (권한 미부여 상태) / 최초 실행 시 ✅ 완료
SC-06-B 앱종료 확인 다이얼로그 브라우저 뒤로가기(popstate)로 안드로이드 백버튼 재현 ✅ 완료
SC-07 지역선택 드롭다운 위치권한 거부 시 / 위치 칩 탭 ✅ 완료
SC-08 카페 상세 홈 카드 클릭. 입장조건·공간시설·운영·가격·메뉴·안내 앵커 통합 스크롤 ✅ 완료
SC-14/15 발바닥찍기 오버레이 · 발바닥 목록 상세 발바닥 버튼(세션 1회 오버레이) → 탭바 발바닥(스와이프 해제 + Undo 토스트) ✅ 완료
SC-16 소셜 로그인 바텀시트 비로그인 상태에서 발바닥 액션 시. 카카오/구글/애플 + "다음에 하기" 스킵 ✅ 완료
SC-17~20 사장님 등록 4단계 마이페이지 → 사장님 대시보드 카드(사장님 계정 전용, 일반회원은 권한없음 안내로 대체). 기본정보 → 입장조건 → 공간/운영 → 메뉴등록 ✅ 완료
SC-21 등록완료 4단계 완료 후. 신규 카페가 즉시 목록에 반영되어 상세 진입 가능 ✅ 완료
SC-22 계정 유형 선택 바텀시트 로그인 필요 액션 최초 1회. "일반회원으로 계속하기 / 사장님으로 가입하기" 강제 선택(X 닫기 없음) ✅ 완료
SC-23 마이페이지 메인 탭바 마이페이지. 프로필·계정유형 뱃지·발바닥 바로가기·사장님 대시보드 카드(사장님 계정만)·하위메뉴 리스트 ✅ 완료
SC-24/25 카페 추천 등록 · 내가 추천한 카페 목록 마이페이지 하위메뉴. "여기도 등록해주세요" — 카페이름·대략위치·참고URL만 입력, 검토 후 게시. 제출 상태(검토중/컨택중/등록완료/반려) 조회 ✅ 완료
SC-26/27 공지사항 목록 · 상세 마이페이지 하위메뉴 ✅ 완료
SC-28 약관 (이용약관·개인정보처리방침) 마이페이지 하위메뉴 ✅ 완료
SC-29 FAQ 마이페이지 하위메뉴. 아코디언 펼침 ✅ 완료
SC-30 고객센터 (문의하기) 마이페이지 하위메뉴. 유형선택+내용+연락처+이미지첨부 ✅ 완료
기술 스택
바닐라 JS SPA
design.html CSS 변수 토큰 그대로 이식
SVG Symbol 30개
공용 오버레이 시스템 (renderOverlay)
popstate 뒤로가기 처리
Empty State · Undo 토스트
계정유형 기반 권한 분기 (accountType)
발바닥 FAB 고정 플로팅 (position:fixed)

Mock 카페 데이터: 12개 (강아지숲 마포점 외, JS 배열. 1단계 20필드 전체 반영 — weightLimitKg / vaccination{combo,rabies} / neuter / ageMinMonths / breedRestriction / indoorOutdoor / floor / capacity / pool / selfWash / breedSeparation / reservation / rental / parking / price / menu / guide / hours). 하단 탭바 3탭: 홈 · 발바닥 · 마이페이지.
3 가설 검증 결과
H1 — 필터 오버레이로 3탭 이내 결과 반영
✅ 통과
가설 홈 화면을 떠나지 않는 Overlay+Dim 필터 패널로, 조건을 3탭 이내에 결과에 반영할 수 있다
실제 탭 수 검색바 필터 아이콘(1) → 체중 칩 선택(2) → "N개 결과 보기" 버튼(3)3탭 이내
근거 필터 바텀시트가 열려 있는 동안에도 선택한 조건 기준으로 previewCount가 실시간 계산되어, 하단 버튼에 "N개 결과 보기"로 즉시 표시된다. 버튼을 누르면 결과가 바로 갱신된다
리스크 없음
H2 — 상세 단일 스크롤 통합에서도 입장조건 즉시 확인
✅ 통과
가설 카페 상세를 탭 없이 앵커칩 스크롤 하나로 통합해도, "우리 강아지 들어갈 수 있나?"에 스크롤 없이 답이 나온다
근거 상세 진입 시 "입장조건" 섹션이 최상단 앵커로 고정되어 체중·예방접종·중성화·나이·품종 제한 5개 필드 전부(1단계 정의와 100% 일치)가 즉시 노출된다. 이어서 공간시설/운영/가격/메뉴/안내가 앵커칩으로 스크롤 이동된다
리스크 ⚠ 앵커 칩 인지도
사용자가 상단 앵커 칩(입장조건/공간시설/운영/가격/메뉴/안내)을 탐색 수단으로 인식해야 함 → 5단계 사용성 테스트 필요
H3 — 소셜 로그인만으로 발바닥 흐름 이탈 없이 이어짐
✅ 통과
가설 이메일 회원가입 없이 SC-16 소셜 로그인 바텀시트(카카오/구글/애플 + 스킵)만으로 발바닥 저장 흐름이 끊기지 않는다
근거 비로그인 상태에서 발바닥 버튼을 누르면 SC-16 바텀시트가 열리고, SNS 로그인 또는 "다음에 하기"로 즉시 이탈 없이 진행 가능. 이메일/비밀번호 입력 폼이나 별도 회원가입 화면은 설계·구현 어디에도 존재하지 않음(1단계 "회원가입 없이 최소 마찰" 원칙과 일치)
리스크 ⚠ 소셜 로그인 실제 연동 없음
현재는 클릭 시 mock 로그인 처리. 카카오/구글/애플 OAuth 실연동은 4단계 대상
4 핵심 플로우 검증
플로우 A 조건 필터 → 카페 탐색 → 상세 확인
필터 아이콘 탭
입장조건 탭에서 체중 선택
"N개 결과 보기"
결과 리스트
카드 클릭
상세 (입장조건 섹션)
전체 플로우 동작 확인 완료
플로우 B 발바닥 찍기 → 발바닥 목록 확인
상세 화면
발바닥 버튼 클릭
(비로그인 시) SC-16 소셜 로그인 바텀시트
발바닥찍기 오버레이 (세션 1회)
탭바 발바닥
발바닥 목록 카페 확인
로그인 유도 → 저장 → 목록 반영까지 이탈 없이 확인 완료
플로우 C 사장님 등록 완료
탭바 사장님 등록
1단계 기본정보
2단계 입장조건
3단계 공간/운영
4단계 메뉴등록
SC-21 등록완료 → 신규 카페 목록 반영
역방향 이동(이전) 포함 4단계 완료, 등록 즉시 상세 진입까지 확인
5 PO 검증 (1단계 문제 정의 대비)
"견주가 우리 강아지의 체중 / 예방접종 / 중성화 / 나이 / 품종 조건을 충족하는 애견카페를 찾기 어렵다" — 1단계 핵심 문제 정의 (입장조건 5개 필드)
입장조건 5개 필드가 상세·필터·등록폼 전체에서 일관되는가 체중(weightLimitKg)·예방접종(vaccination)·중성화(neuter)·나이(ageMinMonths)·품종제한(breedRestriction) 5개 필드가 필터 조건, 상세 화면 최상단, 사장님 등록 2단계까지 동일하게 반영됨
체중 기반 필터링이 동작하는가 weightLimitKg 필드 기반 실시간 필터 동작 확인. 체중 조건 미충족 카페는 결과에서 제외되고, 필터 시트 안에서 결과 수를 미리 보여줌
발바닥(찜) 기능이 카페 저장 니즈를 커버하는가 발바닥 토글 + 발바닥 목록 뷰 연동. 스와이프로 해제 가능하고 Undo 토스트로 실수 방지. 저장한 카페 목록에서 바로 상세 진입 가능
사장님 관점: 조건 등록 흐름이 완성됐는가 4단계(기본정보→입장조건→공간/운영→메뉴등록) 모두 구현 완료. 1단계이 정의한 입장조건 5개 필드가 등록 폼 2단계에 전부 포함되어, 반려인이 보는 조건과 사장님이 입력하는 조건이 동일한 필드 기준으로 일치함
SNS 로그인 시 임시회원 안내 토스트가 노출되는가 카카오/구글/애플 로그인 버튼 클릭 시 "오픈 전이라 임시회원으로 로그인됩니다" 토스트가 정상 노출됨(index.html data-login 클릭 핸들러, showToast('default', ...) 호출 확인). 태그 밸런스·스크립트 문법·토스트 함수 시그니처 검증 완료
⚠️
미해결 이슈 — 실제 위치 기반 필터링·소셜 로그인 연동 현재 Mock 데이터·mock 로그인 기반. 위치(위도/경도) 필터와 카카오/구글/애플 OAuth 실연동은 4단계에서 해결 예정
6 4단계 인수 조건

4단계 백엔드 연동 시 반드시 해결해야 할 항목입니다. P0은 4단계 진입 전 설계 완료가 필수이며, P1은 연동 과정에서 병행 구현, P2는 5단계 이후로 이연 가능합니다.

우선도 항목 비고
P0 Supabase cafes 테이블 — 20개 필드 스키마 설계 weightLimitKg, vaccination{combo,rabies}, neuter, ageMinMonths, breedRestriction 등 입장조건 5개 필드 전부 포함(1단계 정의와 완전 일치)
P0 위치 기반 조회 (PostGIS 또는 위도경도 필터) 현재 Mock 데이터(구 단위 텍스트) → 실제 좌표 데이터로 교체 필수
P0 소셜 로그인 실연동 (카카오/구글/애플 OAuth) 현재 클릭 시 mock 로그인 처리 → Supabase Auth 또는 각 사 SDK 연동 필요
P0 발바닥(찜) 저장 — user_favorites 테이블 현재 JS 메모리 상태 → Supabase 영속화 필요
P1 카페 등록 API — register 4단계 폼 → cafes INSERT 사진 업로드(Storage) 포함, 등록 즉시 노출 여부(관리자 승인 여부) 정책 확정 필요
P1 입장값 Validation (체중/예방접종 등 서버사이드) 현재 프론트 프로토타입은 클라이언트 validation만 존재
P1 카페 추천 등록 API + 관리자 검수 — cafe_suggestions 테이블 제출값(카페이름/대략위치/참고URL) 저장, 상태값(검토중/컨택중/등록완료/반려) 관리자 처리 플로우 필요
P2 리뷰/별점 테이블 현재 발바닥 수(paw)로 대체. 5단계 이후 실데이터 연동 검토
7 다음 단계
다음 단계
4단계 · 백엔드 연동
화면 안의 임시 데이터를 실제 데이터베이스로 이전
발바닥·추천·문의가 새로고침해도 유지되도록 저장 처리
로그인 흐름을 실제 계정 기반으로 전환
4단계 / 전체 6단계 — 백엔드 연동
Supabase 백엔드 · 실데이터 연동
3단계 프로토타입의 더미 데이터를 실제 DB로 옮기고, 그 데이터를 프론트가 직접 사용하도록 연동한 단계입니다. 스키마·보안 정책·시드 데이터를 구축하고 저장 기능을 영속화했습니다.

이 리포트의 모든 작업은 원주님의 가이드에 따라 백엔드 AI 에이전트가 수행했습니다.

14단계 개요
단계
4단계 — 백엔드 연동
플랫폼
Supabase (PostgreSQL)
리전
ap-northeast-1 (서울)
테이블
8종 · RLS 전면 적용
시드 데이터
카페 31개 · 공지 4 · FAQ 6 · 약관 2
운영 비용
무료 티어 ($0/월)

3단계까지의 프로토타입은 화면 안에 하드코딩된 더미 배열로 동작했습니다. 4단계에서는 이 데이터를 실제 데이터베이스로 옮기고, 프론트가 DB의 데이터를 직접 조회·저장하도록 연결했습니다. 그 결과 발바닥(찜)·카페 추천·고객센터 문의가 브라우저를 새로고침해도 유지되는 영속 데이터가 됐습니다.

이번 단계의 핵심 산출물은 다음과 같습니다.
완료
실데이터로 동작하는 서비스
index.html — Supabase DB의 카페·콘텐츠를 불러오고, 저장 기능이 영속화된 상태
index.html 실행하기 →
2아키텍처 결정
채택 — 별도 API 서버 없는 구조

Supabase는 데이터베이스 스키마 위에 REST API와 인증 기능을 자동으로 제공합니다. 따라서 Express 같은 API 서버를 따로 만들지 않고, 프론트엔드가 공개 키(anon key)로 이 API를 직접 호출합니다. 데이터 접근 권한은 DB 레벨의 보안 정책(RLS)이 강제하므로, 서버 코드 없이도 "카페 정보는 누구나 읽기 / 개인 데이터는 본인만"이 보장됩니다.

비교 항목별도 API 서버 방식채택안 — Supabase 직접 호출
구성 요소DB + 서버 코드 + 배포 인프라DB만 (API 자동 생성)
권한 처리서버 미들웨어에서 검사DB 보안 정책(RLS)이 강제
운영 부담서버 배포·모니터링 필요관리형 서비스로 대체
프로토타입 적합성과설계✅ 적합
로그인 처리 — 공용 게스트 계정

소셜 로그인(카카오·구글·애플)은 실제 OAuth 심사·키 발급이 필요하므로, 데모 단계에서는 어떤 버튼을 눌러도 공용 게스트 계정 하나로 즉시 로그인되도록 처리했습니다. 로그인 이후의 저장 흐름(발바닥·추천·문의)은 실제 계정 기반으로 동작하므로, 추후 OAuth만 연결하면 그대로 전환됩니다.

3스키마 · 보안 정책
테이블역할접근 정책 (RLS)
cafes카페 마스터 — 입장조건·시설·운영·가격·메뉴 등 1단계 정의 필드 전체누구나 읽기
likes발바닥(찜) — 사용자별 저장한 카페본인 데이터만 읽기·쓰기·삭제
cafe_recommendations일반회원 카페 추천 등록 — 검토중/컨택중/등록완료/반려 상태 관리본인 데이터만 읽기·쓰기
owner_submissions사장님 카페 등록 신청 (4단계 입력값)본인 데이터만 읽기·쓰기
support_inquiries고객센터 문의본인 데이터만 읽기·쓰기
notices공지사항누구나 읽기
faqsFAQ누구나 읽기
terms이용약관·개인정보처리방침누구나 읽기
전 테이블 RLS 활성화 8개 테이블 모두 행 수준 보안이 켜져 있어, 정책에 명시된 접근만 허용됩니다. 개인 데이터(발바닥·추천·문의)는 다른 사용자가 조회할 수 없습니다.
공개 키만 프론트에 노출 프론트에는 RLS로 보호되는 공개 키(anon key)만 포함됩니다. 모든 권한을 우회하는 관리자 키는 코드·저장소에 포함하지 않으며, 외부 API 키는 환경변수 파일로 분리하고 저장소 커밋에서 제외했습니다.
보안 점검 통과 Supabase 보안 어드바이저 점검 결과 RLS 관련 지적 사항 0건입니다.
4데이터 구성

필터·정렬·조건 분기가 실제로 검증되도록, 카페 31개를 속성이 서로 다른 조합으로 구성했습니다.

분산 축구성
지역서울 15개 자치구(강남·마포·성동·송파·용산·서대문·양천·노원 등) + 경기(분당·일산·수원·부천·안양·김포·하남)
공간 유형실내 전용 / 실외 전용 / 실내+실외 복합
체중 제한소형견 전용(5~7kg) / 중형(10~15kg) / 대형 허용(20~25kg) / 무게제한 없음
부대 시설수영장 · 셀프목욕 · 야외운동장 · 견종분리 · 주차 · 대관 가능 여부 조합
입장 조건예방접종 필수/권장, 중성화 필수/무관/불필요, 최소 나이 0~6개월, 품종 제한 유무
운영 · 가격현장방문/사전예약, 휴무일 유무, 입장료 6,000~12,000원, 음료 필수/선택
콘텐츠 데이터

마이페이지 하위 화면에서 사용하는 공지사항 4건, FAQ 6건, 약관 2종(이용약관·개인정보처리방침)을 DB에 적재해 화면이 하드코딩이 아닌 DB 기준으로 렌더링됩니다.

5프론트 연동 방식

프론트는 아래 동작을 Supabase 클라이언트로 직접 수행합니다. 별도로 구현한 엔드포인트는 없습니다.

화면 · 동작대상 데이터로그인 필요
홈 · 검색 · 상세 — 카페 조회cafes불필요
마이페이지 — 공지·FAQ·약관 조회notices · faqs · terms불필요
발바닥 찍기 / 지우기likes (저장·삭제)필요
발바닥 목록 조회likes필요
카페 추천 등록 · 내 추천 목록cafe_recommendations필요
사장님 카페 등록 신청owner_submissions필요
고객센터 문의 접수support_inquiries필요
기술 구성
Supabase PostgreSQL
자동 생성 REST API
행 수준 보안(RLS)
Supabase Auth (게스트 세션)
낙관적 UI 갱신
6검증 결과

실제 브라우저에서 앱을 구동해 DB 왕복까지 확인했습니다. 코드 확인이 아닌 실행 기반 검증입니다.

카페 목록이 DB에서 로드되는가 홈 화면에 "카페 31개"로 표시되며, 상세 화면의 입장조건·시설·가격·메뉴가 DB 값으로 렌더링됨
소셜 로그인이 실제 세션을 생성하는가 버튼 클릭 시 게스트 계정으로 로그인되어 인증 토큰이 발급되고, 사용자 식별자가 앱 상태에 설정됨
발바닥이 DB에 저장·삭제되는가 발바닥 찍기 직후 DB 조회 시 저장 확인, 스와이프로 해제 시 DB에서도 삭제 확인
새로고침해도 데이터가 유지되는가 페이지 재로드 후 로그인 세션이 복원되고, 저장했던 발바닥이 DB에서 다시 불러와져 목록에 표시됨
마이페이지 콘텐츠·제출 흐름이 동작하는가 공지·FAQ·약관이 DB 기준으로 표시되고, 카페 추천 등록 제출 시 검토중 상태로 기록되어 목록에 반영됨
⚠️
미해결 — 소셜 로그인 실연동 · 카페 썸네일 카카오·구글·애플 OAuth 실연동은 운영 전환 시 과제로 남아 있으며, 카페 대표 이미지는 별도 준비 중입니다. 이미지 경로는 DB 필드로 관리되고 있어 파일만 교체하면 반영됩니다.
7다음 단계
다음 단계
5단계 · 통합 QA
전체 화면을 실제로 조작하며 통합 점검
예외·오류 상황 처리 확인
배포 전 치명적 결함 제거
5단계 / 전체 6단계 — 통합 QA
통합 QA · 배포 전 최종 점검
SC-01~30 전체 화면을 실제 브라우저 실행 기반으로 점검한 단계입니다. 로그인 직후 계정 유형을 선택하지 못하게 막고 있던 P0 결함을 발견해 직접 수정하고, 사장님 등록 전체 플로우가 실제로 완주되는 것까지 재검증했습니다.

이 리포트의 모든 작업은 원주님의 가이드에 따라 QA AI 에이전트가 수행했습니다.

15단계 개요
단계
5단계 — 통합 QA
방법론
실브라우저 실행 기반 검증
점검 화면
SC-01~30 전체
발견 버그
P0 1건
픽스 상태
P0 0건 (수정·재검증 완료)
콘솔 에러
0건

5단계는 코드를 읽고 판단하는 방식이 아니라, 헤드리스 브라우저로 실제 클릭·입력·스와이프를 재현해 결과를 확인하는 방식으로 진행했습니다. 매 검증마다 격리된 새 브라우저 프로필을 사용해 이전 로그인 세션이 남아 결과를 오염시키는 일이 없도록 했습니다. 그 결과 계정 유형 선택 화면이 어디에서도 열리지 않아 사장님 등록 전체가 막혀 있던 P0 결함을 발견했고, 직접 원인을 찾아 수정한 뒤 수정된 흐름으로 신규 카페 등록까지 실제로 완주되는 것을 재확인했습니다.

2발견된 P0 버그
P0 계정 유형 선택(SC-22)이 어디에서도 열리지 않음
재현 경로소셜 로그인 버튼 클릭 → 로그인 성공 → (계정 유형 선택 화면이 뜨지 않고) 바로 원래 액션으로 복귀
기대 결과로그인 성공 직후, 세션 최초 1회 "어떤 계정으로 시작할까요?" 바텀시트가 강제로 노출되고 일반회원/사장님을 선택해야 진행 가능(SC-22 명세)
실제 결과화면 자체는 이미 만들어져 있었으나 openOverlay('accountType') 호출이 코드 어디에도 없어 절대 열리지 않음. 카드·버튼도 전부 미바인딩 상태라 수동으로 열어도 클릭이 씹힘
파급 범위accountType이 영원히 null로 남아, 사장님 등록(SC-17~21) 진입점인 마이페이지 사장님 대시보드 카드가 모든 사용자에게 절대 노출되지 않음 — 앱의 핵심 요건 중 하나인 "사장님 계정 분리" 기능이 실질적으로 100% 도달 불가능한 상태였음
어떻게 발견했는가 사장님 등록 4단계(SC-17~20) 플로우를 실제로 끝까지 재현하려고 마이페이지에서 진입점을 찾다가, 사장님 대시보드 카드 자체가 어떤 로그인 시나리오에서도 나타나지 않는 것을 확인 → 계정 유형이 언제 결정되는지 역추적하여 트리거 호출이 누락된 것을 특정
3수정 내역
로그인 직후 자동 노출 소셜 로그인 성공 시 계정 유형을 아직 선택하지 않은 경우, 원래 목적지로 바로 돌아가지 않고 계정 유형 선택 화면을 먼저 열도록 연결. 선택 완료 후에 대기 중이던 원래 액션(발바닥 찍기 등)이 이어서 실행됨
재방문 세션 대응 브라우저에 로그인 세션은 남아있지만 계정 유형을 아직 선택하지 않은 채 앱을 재방문한 경우도 앱 시작 시점에 동일하게 노출되도록 보완(로그인 상태에서는 일반 로그인 버튼 클릭 흐름을 타지 않기 때문에 별도 처리가 필요했음)
필수 선택 강제 명세대로 배경 딤 영역을 탭하거나 기기 뒤로가기를 눌러도 선택 전에는 닫히지 않도록 처리
버튼 전체 연결 일반회원 카드, 사장님 카드(미니폼 확장), 상호명·연락처 입력, 유효성 검증(미입력·형식 오류 시 인라인 에러), 제출, 취소 버튼까지 전부 실제 동작하도록 연결
4점검 범위
영역점검 항목결과
계정 유형 선택로그인 직후 자동 노출, 딤·뒤로가기 무시, 일반/사장님 분기, 유효성 검증✅ 통과
사장님 등록1~4단계 전체 입력 → 완료 화면 → 신규 카페가 실제 목록에 반영✅ 통과
필터·검색조건 적용 → 칩 노출 → 칩으로 개별 해제, 키워드 검색 결과✅ 통과
지도 보기리스트 ↔ 지도 세그먼트 전환✅ 통과
발바닥찍기·해제 토스트, 발바닥 목록 스와이프 삭제, DB 영속화✅ 통과
마이페이지 하위 6개 화면공지사항·약관·FAQ·고객센터·카페추천등록·내가추천한카페목록 진입/뒤로가기 왕복✅ 통과
상세페이지입장조건 즉시 노출, 이미지 갤러리(보유 장수만큼만), 공유, 뒤로가기 시 이전 화면 스크롤 위치 복원✅ 통과
5배포 승인 체크리스트
P0 버그 제로발견된 P0 1건 수정·재검증 완료, 현재 P0 0건
핵심 사용자 흐름 전체 통과탐색 → 상세 → 발바닥, 로그인 → 계정유형선택 → 사장님등록 → 완료, 두 Happy Path 모두 실제 완주 확인
빈 상태 처리필터 결과 0건, 발바닥 목록 비어있음, 내가 추천한 카페 없음 상태 화면 존재
Console.error 없는 상태로 주요 흐름 완주격리된 프로필 기준 전 시나리오 콘솔 에러 0건
환경변수 기반 동작Supabase anon 키·URL만 프론트 포함(RLS로 보호), 수집용 API 키는 .env로 분리·커밋 제외
⚠️
미해결 — 소셜 로그인 실연동현재 모든 SNS 버튼이 공용 게스트 계정으로 즉시 로그인되는 데모 방식. 카카오·구글·애플 OAuth 실연동은 6단계 이후 과제로 별도 진행 필요
6QA 판정
등급 B+ 배포 가능 — 작은 개선(OAuth 실연동)만 남음

P0 버그 0건, 핵심 플로우 전체 완주, 콘솔 에러 0건을 실행 기반으로 확인했습니다. 6단계 진입을 승인합니다. 데모 특성상 남아있는 소셜 로그인 실연동은 배포를 막는 결함이 아니라 별도 트랙의 후속 작업으로 분류합니다.

7다음 단계
다음 단계
6단계 · 배포
GitHub 저장소와 연결해 자동 배포 구성
검색 노출 정보·404 페이지·방문 분석 적용
배포된 실제 주소에서 전체 기능 재검증
6단계 / 전체 6단계 — 배포
배포 · 라이브 서비스 운영
GitHub 저장소와 Vercel을 연결해, 코드를 푸시하면 자동으로 재배포되는 구조로 서비스를 공개한 단계입니다. 배포 전 보안·자산 점검을 마치고, 실제 배포 주소에서 전체 기능을 다시 검증했습니다.

이 리포트의 모든 작업은 원주님의 가이드에 따라 QA AI 에이전트가 수행했습니다.

16단계 개요
단계
6단계 — 배포
호스팅
Vercel (정적 호스팅)
배포 방식
GitHub 연동 자동 배포
배포 상태
Ready (운영 중)
실패 요청
0건
콘솔 에러
0건
배포된 서비스와 소스는 아래에서 확인할 수 있습니다.
운영 중
라이브 서비스
puppyspot-nine.vercel.app — 실제 배포된 퍼피스팟 서비스
서비스 열기 →
공개
소스 저장소
github.com/wse02123/puppyspot — 푸시하면 자동 재배포
저장소 열기 →
2배포 구조

로컬에서 파일을 직접 업로드하는 방식이 아니라, GitHub 저장소를 Vercel에 연결했습니다. 이렇게 하면 이후 코드를 푸시하는 것만으로 자동 재배포되고, 어떤 코드가 지금 서비스에 올라가 있는지가 커밋 이력으로 항상 추적됩니다. 빌드 도구가 없는 정적 사이트라 별도 빌드 설정 없이 그대로 서빙됩니다.

단계내용
1. 소스 관리GitHub 저장소 wse02123/puppyspot 생성 후 main 브랜치에 업로드
2. 연결Vercel 프로젝트를 해당 저장소에 연결 (푸시 시 자동 배포)
3. 배포main 브랜치 최신 커밋 기준 프로덕션 배포
4. 부가 설정방문 분석(Web Analytics) 활성화, 이미지 장기 캐시 헤더 적용
5. 검증배포된 실제 주소에서 전체 기능 재검증
3배포 전 준비
공유·검색 노출 정보 서비스 성격이 드러나는 제목·설명과 함께, 링크 공유 시 미리보기가 뜨도록 오픈그래프 정보를 넣었습니다. 발바닥 모양 파비콘도 적용했습니다.
전용 404 페이지 잘못된 주소로 들어왔을 때 서비스 톤에 맞는 안내 화면과 홈으로 돌아가는 버튼을 제공합니다.
첫 로딩 스켈레톤 데이터를 불러오는 동안 흰 화면만 보이던 구간에, 실제 카드와 같은 형태의 로딩 자리표시를 넣어 서비스가 멈춘 것처럼 보이지 않게 했습니다.
방문 분석 Vercel Web Analytics를 활성화해 방문자·페이지뷰가 집계됩니다.
이미지 캐시 카페 이미지는 파일명이 바뀌지 않는 정적 자산이라 장기 캐시를 적용해 재방문 시 로딩을 줄였습니다.
4배포 검증

로컬이 아닌 실제 배포 주소에서 브라우저를 띄워 다시 검증했습니다.

항목결과
카페 데이터 로딩✅ 31개 정상
공지·FAQ·약관 로딩✅ 4 / 6 / 2
카페 이미지 로딩✅ 정상 (960px 원본)
필터 적용·해제✅ 통과
상세 화면 · 이미지 슬라이드✅ 통과
로그인 → 계정 유형 선택✅ 통과
발바닥 저장 (DB 반영)✅ 통과
마이페이지 하위 화면 왕복✅ 통과
404 페이지✅ 전용 화면 노출
실패한 네트워크 요청✅ 0건
콘솔 에러✅ 0건
5보안 점검
외부 API 키 미포함 이미지 수집에 사용한 외부 서비스 키는 환경변수 파일로 분리하고 저장소 커밋에서 제외했습니다. 배포된 주소로 해당 파일에 접근하면 404가 반환되는 것을 확인했습니다.
DB 접근 권한 프론트에 포함되는 키는 행 수준 보안(RLS)으로 보호되는 공개용 키입니다. 모든 권한을 우회하는 관리자 키는 코드·저장소 어디에도 포함하지 않았습니다.
데이터 접근 범위 카페·공지 등 공개 정보는 누구나 읽을 수 있고, 발바닥·추천·문의 같은 개인 데이터는 본인 것만 접근 가능하도록 DB에서 강제됩니다.
6알려진 제약

현재 배포본은 기획·설계 검증을 위한 데모입니다. 실제 서비스 전환 시 아래 항목이 선행되어야 합니다.

항목현재 상태실서비스 전환 시
소셜 로그인버튼 클릭 시 공용 게스트 계정으로 즉시 로그인카카오·구글·애플 실제 인증 연동
사용자 데이터모든 방문자가 게스트 계정 하나를 공유 (발바닥·추천이 서로 보임)계정별 데이터 분리
카페 데이터시연용 더미 31개공공데이터 + 사장님 직접 등록으로 실데이터 확보
카페 이미지AI 생성 및 무료 스톡 이미지사장님이 등록한 실제 매장 사진
거리 표시고정값실제 위치 기반 거리 계산
7마무리
✓ 전 단계 완료
문제 정의부터 배포까지 6단계 완료
서비스가 실제 주소에서 운영 중입니다
코드를 푸시하면 자동으로 재배포됩니다
실서비스 전환 과제는 6. 알려진 제약에 정리했습니다
퍼피스팟 — 프로젝트 개요 · 통합 인덱스 원주님 가이드 · 원주팀 멀티 AI 에이전트