전역 공통 정의

항목정의
GNB없음 (앱 바 없음, 각 화면별 상단바 정의)
하단 탭바홈 / 발바닥 / 사장님 등록 (3탭) — 로그인 불필요, 발바닥 탭 접근 시 로그인 유도
토스트최하단에서 96dp 위 노출, 3초 자동 소멸
로딩 인디케이터전체화면 Skeleton UI (이미지 영역: shimmer, 텍스트 영역: shimmer bar)
네트워크 오류 공통"연결이 불안정해요. 잠시 후 다시 시도해주세요." + [BTN-Secondary] 재시도
마스코트 캐릭터뽀삐 (기본형 / sad형 2종)
SC-01 홈 — 리스트 탭 비로그인
진입앱 최초 실행 / 하단 탭바 [홈] 탭 / SC-08~13 뒤로가기 / SC-04 필터 초기화 후
진출SC-02 (지도 탭), SC-03 (필터), SC-08 (카드 탭), SC-06 (위치 아이콘)
레이아웃 구성
순서컴포넌트역할UI 패턴
1상단 검색바키워드 검색 입력 영역, 상단 고정(Sticky)[INPUT-Search] 전너비, 좌측 위치 아이콘 + 우측 필터 아이콘
2위치 칩현재 설정된 지역 표시[CHIP-Location] — "내 위치" 또는 선택 지역명 + 드롭다운 화살표
3뷰 전환 세그먼트 탭리스트/지도 탭 전환[TAB-Segment] — 리스트 (활성) / 지도, 우측 정렬
4정렬 드롭다운카드 정렬 기준 변경[SELECT-Sort] — "거리순", "발바닥 많은 순", "신규순"
5카드 리스트카페 카드 전체 노출 (1열 전체너비)[CARD-Cafe] × N — 스크롤 영역
6하단 탭바홈 / 발바닥 / 사장님 등록[TABBAR-Bottom]
[CARD-Cafe] 상세 구성: 썸네일(4:3 전너비) / 카페명 / 위치+거리 ("서울 마포구 · 2.3km") / Pill 태그 Row 최대 4개 / 발바닥 카운트 / 입장 가능 체중 요약 칩
기능 정의
기능동작조건
검색바 탭키워드 입력 모드 전환, 소프트 키보드 활성항상
필터 아이콘 탭SC-03 필터 바텀시트 오픈항상
위치 칩 탭위치 권한 확인 후 SC-06 또는 SC-07 오픈항상
지도 탭 탭SC-02 전환 (세그먼트 탭)항상
카드 탭SC-08 카페 상세 진입항상
정렬 변경선택 기준으로 카드 리스트 재정렬항상
스크롤 다운무한 스크롤 (20개 단위 페이지네이션)데이터 20개 초과 시
검색어 입력 + 엔터SC-04 검색결과 화면으로 전환검색어 1자 이상
필터 적용 상태 표시필터 아이콘에 뱃지(숫자) 표시필터 적용된 조건이 1개 이상
에러/상태 매트릭스
상황처리 방식노출 문구
로딩 중Skeleton UI (카드 3개 shimmer)
카드 데이터 없음SC-05 Empty State로 전환
네트워크 오류전체 카드 영역에 에러 배너 + 재시도 버튼"연결이 불안정해요. 잠시 후 다시 시도해주세요."
이미지 로드 실패기본 이미지 Placeholder 표시
위치 정보 없음거리 표시 영역 "—" 처리
인터랙션 정의
  • 앱 진입 → 위치 권한 확인 → 권한 있으면 내 위치 기준 카드 로드 → 없으면 위치 칩 "지역 설정" 표시 후 SC-07 드롭다운 유도
  • 스크롤 최하단 도달 → 로딩 인디케이터 → 다음 20개 카드 append
  • 필터 적용 후 홈 복귀 시 → 필터 아이콘 뱃지 유지 + 적용된 조건 기준 카드 목록 유지
디자이너 전달 노트
  • 검색바: 스티키, 스크롤 시 상단 고정 유지
  • CARD-Cafe: 1열 전너비. 썸네일 위 → 텍스트/태그 아래 수직 구조
  • Pill 태그: 아이콘 + 레이블 조합, 최대 4개 노출 후 "+N" 처리
  • 세그먼트 탭: 카드 리스트 상단 우측, 검색바 하단에 위치
SC-02 홈 — 지도 탭 비로그인
진입SC-01에서 세그먼트 탭 [지도] 탭 탭
진출SC-01 (리스트 탭), SC-03 (필터), SC-08 (마커→카드), SC-06 (위치 아이콘)
레이아웃 구성
순서컴포넌트역할UI 패턴
1상단 검색바키워드 검색, 지도 위 상단 고정[INPUT-Search] — 지도 위 플로팅 레이어
2뷰 전환 세그먼트 탭리스트/지도 전환[TAB-Segment] — 지도 활성
3지도 뷰전체 화면 지도[MAP-Full]
4카페 마커지도 위 카페 위치 표시[MARKER-Cafe] — 기본/선택 2가지 상태
5내 위치 버튼현재 위치로 지도 이동[BTN-FAB] 우하단 고정
6카페 미니 카드 (선택 시)마커 선택 시 하단 카드 노출[CARD-Mini] — 바텀에서 슬라이드업
7하단 탭바[TABBAR-Bottom]
기능 정의
기능동작조건
마커 탭해당 카페 미니 카드 하단 슬라이드업마커 존재 시
마커 외 빈 영역 탭미니 카드 닫기미니 카드 노출 중
"이 지역 검색" 버튼현재 지도 뷰포트 기준 카페 재조회지도 이동 후
내 위치 버튼 탭현재 위치로 지도 센터 이동위치 권한 있을 때
미니 카드 "상세 보기" 탭SC-08 진입미니 카드 노출 중
에러/상태 매트릭스
상황처리 방식노출 문구
마커 없음지도 유지 + 하단 토스트"이 지역에 등록된 카페가 없어요"
네트워크 오류지도 로드 실패 배너"지도를 불러올 수 없어요."
SC-03 필터 바텀시트 비로그인
진입SC-01/SC-02/SC-04 검색바 우측 필터 아이콘 탭
진출[BTN-Primary] "적용" → SC-04 / X 닫기 또는 딤드 영역 탭 → 원래 화면 복귀
레이아웃 구성
순서컴포넌트역할UI 패턴
1딤드 오버레이배경 클릭 시 닫기[OVERLAY-Dim]
2드래그 핸들바텀시트 핸들[HANDLE-Drag] 상단 중앙
3헤더"필터" 타이틀 + X 닫기 + "초기화"[HEADER-Sheet]
4필터 카테고리 탭4탭 (입장조건/공간시설/운영/가격)[TAB-Filter] 수평 스크롤 가능
5필터 옵션 영역선택된 탭의 필터 옵션[FILTER-Content] 스크롤
6하단 적용 버튼필터 적용 + 화면 전환[BTN-Primary] "N개 결과 보기" 전너비
탭별 필터 옵션
  • [탭1] 입장조건: 체중(6단계 칩)/예방접종(체크박스)/중성화(3지선다 칩)/나이/품종
  • [탭2] 공간시설: 실내외/견종분리/바닥재질/수용두수/수영장/셀프목욕
  • [탭3] 운영: 예약방식/대관/주차
  • [탭4] 가격: 인입장료(슬라이더)/견입장료(슬라이더)/음료의무/강아지메뉴유무
기능 정의
기능동작조건
탭 전환해당 탭 필터 옵션 영역 전환항상
옵션 선택선택 상태 강조 표시, 버튼 카운트 실시간 업데이트항상
초기화 탭전체 선택 해제필터 있을 때 활성
"N개 결과 보기" 탭필터 저장 + SC-04 전환항상
결과 0개버튼 텍스트 "결과 없음 — 조건을 변경해보세요"결과 0개 시
SC-04 검색결과 (필터 적용 후) 비로그인
진입SC-03 필터 "N개 결과 보기" 탭 / SC-01 검색바 키워드 입력 + 엔터
진출SC-08 (카드 탭), SC-03 (필터 재조정), SC-01 (X 닫기), SC-05 (결과 없을 때)
레이아웃 구성
순서컴포넌트역할UI 패턴
1상단 검색바 (키워드 채워진 상태)검색어 표시 + 수정 가능[INPUT-Search] — 뒤로가기 아이콘 추가
2적용 필터 요약 칩 Row적용된 필터 항목 표시[CHIP-Filter] 수평 스크롤, 각 칩 × 아이콘으로 개별 제거
3결과 수 + 정렬"N개 카페" 텍스트 + 정렬 드롭다운[TEXT-Count] + [SELECT-Sort]
4카드 리스트필터 적용 결과 카드[CARD-Cafe] × N
5하단 탭바[TABBAR-Bottom]
SC-05 Empty State 비로그인
진입SC-01/SC-04 결과가 0개일 때 자동 렌더링
진출[BTN-Secondary] "필터 변경" → SC-03, [BTN-Text] "전체 초기화" → SC-01
레이아웃 구성
순서컴포넌트역할UI 패턴
1상단 검색바이전 상태 유지[INPUT-Search]
2필터 요약 칩 Row적용 필터 표시[CHIP-Filter]
3뽀삐 sad 일러스트Empty State 시각 피드백[ILLUST-Character] — 뽀삐 sad형 중앙 배치
4Empty 메시지"조건에 맞는 카페가 없어요"[TEXT-Empty]
5서브텍스트"필터를 조정하면 더 많은 카페를 찾을 수 있어요"[TEXT-Sub]
6필터 변경 버튼SC-03 바텀시트 재오픈[BTN-Primary] "필터 변경하기"
7전체 초기화 텍스트 버튼모든 조건 초기화 후 SC-01[BTN-Text] "조건 전체 초기화"
8하단 탭바[TABBAR-Bottom]
SC-06 위치권한 바텀시트 비로그인
진입SC-01/SC-02 위치 칩/아이콘 탭 (위치 권한 미부여 상태) / 앱 최초 실행 시 자동 노출
진출허용 → OS 권한 요청 → 허용 시 SC-01 갱신 / 거부 → SC-07
레이아웃 구성
순서컴포넌트역할UI 패턴
1딤드 오버레이배경[OVERLAY-Dim]
2드래그 핸들[HANDLE-Drag]
3위치 아이콘 일러스트시각 피드백[ILLUST-Icon]
4권한 요청 타이틀"내 위치 주변 카페를 찾아볼까요?"[TEXT-Title]
5설명 서브텍스트"위치 정보를 사용하면 가까운 카페를 먼저 보여드려요"[TEXT-Sub]
6허용 버튼OS 권한 요청 트리거[BTN-Primary] "내 위치 사용하기" 전너비
7허용 안 함 버튼SC-07 지역 선택으로 이동[BTN-Secondary] "직접 지역 선택하기" 전너비
SC-07 지역 선택 드롭다운 비로그인
진입SC-06 "직접 지역 선택" / SC-01 위치 칩 탭 (권한 없는 상태)
진출지역 선택 완료 → 바텀시트 닫기 + SC-01 해당 지역 기준 카드 갱신
레이아웃 구성
순서컴포넌트역할UI 패턴
1딤드 오버레이배경 닫기[OVERLAY-Dim]
2드래그 핸들[HANDLE-Drag]
3헤더"지역 선택" + X 닫기[HEADER-Sheet]
4시/도 선택 컬럼좌측 시/도 리스트[LIST-Region] 스크롤
5구/군 선택 컬럼우측 구/군 리스트[LIST-District] 스크롤
2컬럼 레이아웃: 좌측(시/도) 선택 → 우측(구/군) 리스트 업데이트
SC-08 카페 상세 — 기본정보/입장조건 앵커 비로그인
진입SC-01/SC-02/SC-04 카드 탭 (카페 상세 최초 진입, 기본정보 앵커 기본 활성)
진출뒤로가기 → 이전 화면 / 앵커 칩 클릭 → 동일 화면 내 스크롤 / 발바닥 FAB → SC-14
레이아웃 구성
순서컴포넌트역할UI 패턴
1히어로 이미지 영역카페 대표 이미지 슬라이더[CAROUSEL-Image] 4:3, 인디케이터 포함
2상단 플로팅 바뒤로가기 + 공유 + 발바닥 아이콘[APPBAR-Transparent] 이미지 위 플로팅
3카페 기본정보 섹션카페명 / 주소 / 전화 / 운영시간 / SNS[SECTION-Info]
4앵커 칩 Row (Sticky)섹션 간 빠른 이동[ANCHOR-Chips] — 입장조건·공간시설·운영·가격·메뉴·안내
5입장조건 섹션체중/예방접종/중성화/나이/품종[SECTION-Admission]
6발바닥 찍기 FAB좋아요(발바닥)[BTN-FAB] 우하단 고정
입장조건 섹션 상세: 체중 "10kg 이하" [TAG-Info] / 예방접종 필수 항목 (종합백신 ✓ / 광견병 ✓) / 중성화 필수/불필요/무관 / 나이 최소 나이 제한 / 품종 입장 불가/가능 품종
기능 정의
기능동작조건
앵커 칩 탭해당 섹션으로 부드러운 스크롤 이동항상
스크롤 중 앵커 자동 업데이트뷰포트 섹션에 해당하는 앵커 칩 활성 전환스크롤 중
전화번호 탭OS 전화 앱 연결전화번호 등록 시
발바닥 FAB 탭SC-14 오버레이 노출 (세션 1회)세션 1회 미노출 시
발바닥 버튼 탭발바닥 저장 (비로그인 → SC-16)항상
SC-09 SC-08 내 [공간시설] 섹션 비로그인
진입SC-08 앵커 칩 [공간시설] 탭 / 스크롤로 해당 섹션 도달
비고별도 화면 없음 — SC-08 무한스크롤 내 구성
공간시설 섹션: 실내외 / 견종분리 / 바닥재질 / 수용두수 / 수영장 / 셀프목욕 — 각 항목 [TAG-Info]
SC-10 SC-08 내 [운영] 섹션 비로그인
진입SC-08 앵커 칩 [운영] 탭 / 스크롤로 해당 섹션 도달
비고별도 화면 없음 — SC-08 무한스크롤 내 구성
운영 섹션: 예약방식 [TAG-Info] / 운영시간(요일별 표) / 대관(가능+문의방법) / 주차(있음/없음+대수)
SC-11 SC-08 내 [가격] 섹션 비로그인
진입SC-08 앵커 칩 [가격] 탭 / 스크롤로 해당 섹션 도달
비고별도 화면 없음 — SC-08 무한스크롤 내 구성
가격 섹션: 인입장료 [TEXT-Price] / 견입장료 / 음료의무+최저가 [TAG-Info] / 강아지메뉴종류+가격대
SC-12 SC-08 내 [메뉴] 섹션 비로그인
진입SC-08 앵커 칩 [메뉴] 탭 / SC-11 "메뉴 전체 보기" 탭 / 스크롤
비고별도 화면 없음 — SC-08 무한스크롤 내 구성
메뉴 섹션: [CARD-Menu] 2열 그리드 — 이미지(1:1)/메뉴명/가격/설명/알레르기[TAG-Warning]
SC-13 SC-08 내 [안내/규정] 섹션 비로그인
진입SC-08 앵커 칩 [안내] 탭 / 스크롤 최하단
비고별도 화면 없음 — SC-08 무한스크롤 내 구성
안내 섹션: 기저귀 착용/간식 반입/발정기 제한 등 자유텍스트 + 정보 오류 신고 [BTN-Text]
SC-14 발바닥 찍기 Overlay 비로그인
진입SC-08~13 발바닥 FAB 탭 (세션 1회 미노출 상태)
진출발바닥 선택 또는 X 탭 → 오버레이 닫기 + 카페 상세 복귀
레이아웃 구성
순서컴포넌트역할UI 패턴
1딤드 오버레이배경[OVERLAY-Dim]
2오버레이 카드중앙 모달[MODAL-Center]
3발바닥 아이콘 (대형)메인 시각 요소[ILLUST-Paw] — 스탬프 찍는 애니메이션
4타이틀"이 카페가 마음에 드셨나요?"[TEXT-Title]
5서브텍스트"발바닥을 찍으면 내 발바닥 목록에 저장돼요"[TEXT-Sub]
6발바닥 찍기 버튼발바닥 목록에 저장[BTN-Primary] "발바닥 찍기"
7닫기 버튼오버레이 닫기[BTN-Text] "다음에 할게요"
SC-15 발바닥 목록
진입하단 탭바 [발바닥] 탭 탭 (로그인 상태) / SC-16 로그인 완료 후
진출카드 탭 → SC-08 / 스와이프 발바닥 해제 → Undo 토스트
레이아웃 구성
순서컴포넌트역할UI 패턴
1상단 앱바"발바닥 목록" 타이틀[APPBAR-Default]
2발바닥 카드 리스트저장한 카페 카드[CARD-Cafe] × N (하트 아이콘 활성 상태)
3Empty State (발바닥 없음)뽀삐 기본형 + "아직 발바닥 찍은 카페가 없어요"[EMPTY-Bookmark]
4하단 탭바[TABBAR-Bottom] (발바닥 활성)
스와이프: 좌측 스와이프 → "발바닥 해제" [BTN-Destructive] 노출
SC-16 소셜 로그인 바텀시트 비로그인
진입하단 탭바 [발바닥] 탭 탭 (비로그인) / SC-08 발바닥 버튼 탭 (비로그인)
진출로그인 성공 → SC-15 또는 이전 화면 / X → 이전 화면
레이아웃 구성
순서컴포넌트역할UI 패턴
1딤드 오버레이배경[OVERLAY-Dim]
2드래그 핸들[HANDLE-Drag]
3헤더X 닫기[HEADER-Sheet]
4타이틀"로그인하면 발바닥 목록을 저장할 수 있어요"[TEXT-Title]
5서브"소셜 계정으로 3초만에 시작해요"[TEXT-Sub]
6카카오 로그인 버튼카카오 OAuth[BTN-Social-Kakao] 전너비
7구글 로그인 버튼구글 OAuth[BTN-Social-Google] 전너비
8애플 로그인 버튼 (iOS)애플 Sign In[BTN-Social-Apple] 전너비 (iOS 전용)
SC-17 사장님 등록 1/4 — 기본정보
진입하단 탭바 [사장님 등록] 탭 탭
진출[BTN-Primary] "다음" → SC-18 / X → 홈 (이탈 확인 모달)
레이아웃 구성
순서컴포넌트역할UI 패턴
1상단 앱바X 닫기[APPBAR-Default]
2스텝 인디케이터1/4 진행 상태[STEPPER] 4단계 수평 바
3섹션 타이틀"기본 정보를 입력해주세요"[TEXT-Section-Title]
4대표 이미지 업로더카페 대표 사진 최대 5장[INPUT-ImageUpload]
5카페명 입력 (필수)[INPUT-Text]
6주소 입력 (필수)주소 검색 연동[INPUT-Address] + [BTN-Secondary] "주소 검색"
7전화번호 입력 (선택)[INPUT-Tel]
8운영시간 입력 (선택)요일별 시간 설정[INPUT-Hours] 요일 토글 + 시간 범위
9SNS/예약 링크 (선택)[INPUT-URL] × 2
10다음 버튼SC-18 이동[BTN-Primary] "다음" 전너비 하단 고정
필수 항목: 카페명, 주소  |  선택: 이미지, 전화, 운영시간, SNS
SC-18 사장님 등록 2/4 — 입장조건
진입SC-17 "다음" 탭
진출"이전" → SC-17 / "다음" → SC-19
레이아웃 구성
순서컴포넌트역할UI 패턴
1스텝 인디케이터2/4[STEPPER]
2섹션 타이틀"입장 조건을 설정해주세요"[TEXT-Section-Title]
3체중 제한 설정최대 허용 체중 6단계 칩[INPUT-ChipSingle]
4예방접종 필수 설정종합백신 / 광견병 각 토글[INPUT-Toggle] × 2
5중성화 설정필수 / 불필요 / 무관 3지선다[INPUT-RadioGroup]
6나이 제한 설정최소 월령 숫자 입력[INPUT-Number] 단위: 개월
7품종 제한 설정입장 불가 품종 멀티셀렉트[INPUT-MultiSelect] 검색 포함
8이전/다음 버튼[BTN-Secondary] "이전" + [BTN-Primary] "다음" 하단 고정
SC-19 사장님 등록 3/4 — 공간/운영
진입SC-18 "다음" 탭
진출"이전" → SC-18 / "다음" → SC-20
레이아웃 구성
순서컴포넌트역할UI 패턴
1스텝 인디케이터3/4[STEPPER]
2[공간 시설] 서브 헤더[TEXT-Sub-Header]
3실내외 여부실내/실외/실내+실외 3지선다[INPUT-RadioGroup]
4견종분리소형/대형/분리없음[INPUT-RadioGroup]
5바닥재질멀티셀렉트 칩[INPUT-ChipMulti]
6수용두수숫자 입력[INPUT-Number] 단위: 마리
7수영장 여부토글[INPUT-Toggle]
8셀프목욕 여부토글[INPUT-Toggle]
9[운영] 서브 헤더[TEXT-Sub-Header]
10예약방식예약필수/현장가능/혼합[INPUT-RadioGroup]
11대관 가능 여부토글[INPUT-Toggle]
12대관 상세 (대관 ON 시)문의 방법 텍스트 (조건부 노출)[INPUT-Textarea]
13주차 여부토글[INPUT-Toggle]
14주차 상세 (주차 ON 시)주차 대수 또는 안내 (조건부 노출)[INPUT-Text]
15이전/다음 버튼[BTN-Secondary] + [BTN-Primary] 하단 고정
SC-20 사장님 등록 4/4 — 메뉴 등록
진입SC-19 "다음" 탭
진출[BTN-Primary] "등록 완료" → SC-21 / "이전" → SC-19
레이아웃 구성
순서컴포넌트역할UI 패턴
1스텝 인디케이터4/4[STEPPER]
2섹션 타이틀"강아지 메뉴를 등록해주세요 (선택)"[TEXT-Section-Title]
3등록된 메뉴 카드 리스트이미지+메뉴명+가격 + 수정/삭제 아이콘[CARD-Menu-Registered] × N
4메뉴 추가 버튼메뉴 추가 모달 오픈[BTN-Secondary] "+ 메뉴 추가"
5가격 정보 섹션인입장료/견입장료/음료의무/최저가[SECTION-Price-Input]
6유의사항 입력 (선택)자유 텍스트[INPUT-Textarea] 최대 500자
7이전/등록 완료 버튼[BTN-Secondary] "이전" + [BTN-Primary] "등록 완료" 하단 고정
SC-21 등록 완료
진입SC-20 "등록 완료" API 성공 응답 후 자동 전환
진출"내 카페 확인하기" → SC-08 / "홈으로" → SC-01
레이아웃 구성
순서컴포넌트역할UI 패턴
1성공 일러스트뽀삐 기본형 + 발바닥 스탬프 축하[ILLUST-Success]
2완료 타이틀"카페 등록이 완료됐어요!"[TEXT-Title]
3서브 메시지"검토 후 24시간 이내에 카페가 게시됩니다."[TEXT-Sub]
4내 카페 확인하기 버튼등록된 카페 상세 SC-08 진입[BTN-Primary] 전너비
5홈으로 버튼SC-01 이동[BTN-Secondary] 전너비
주의: 이 화면 진입 시 뒤로가기 스택에서 SC-17~20 제거 (등록 재진입 방지)

IA 자가 검증 결과

체크 항목결과
동선 완결성: 모든 화면 진입/진출 정의✅ SC-01~21 전 화면
데이터 연계성: 선행 데이터 후속 화면 연결✅ 필터→결과, 등록스텝 누적, 위치→카드
예외/상태 처리: Empty/Error/Loading 전부 정의✅ 전 화면
에러 핸들링 매트릭스 포함✅ 전 화면
퍼피스팟 — 화면 기능정의서 v2.0 · 2026-06-15