Goldito Pet Onboarding

←→ back · next뒤로 · 다음1 to 5 flows흐름L larger text글자 크게P bars or pentagon막대 또는 오각형

Every screen in this flow이 흐름의 모든 화면

Click one to jump there. Answers carry over between flows.눌러서 이동해요. 답은 흐름 사이에서도 그대로예요.

View보기

Larger text글자 크게

Axes축

In this flow이 흐름에서

Steps: Part 1 alone, and Part 1 + Part 2단계 수: 1부만, 1부 + 2부

	Part 1 Basics1부 기본	+ Part 2 (demo, 7)+ 2부 (데모, 7)	+ Part 2 (14 questions)+ 2부 (14문항)
S1	10	18	25
S2, photo confirmedS2, 사진 확인	8	16	23
S3, after voiceS3, 음성 후	11	16	23
Round 2, one flow2차, 한 흐름	S1 15 · S2 13 · S3 13 (demo); 25 and 23 with all 18 questions, all before “saved”S1 15 · S2 13 · S3 13 (데모), 18문항이면 25와 23, 모두 저장 전

Dog, counted on this page. Part 1 includes the “ready to book” screen; Part 2 is 12 personality questions plus other animals and guarding (Oct 20), then the check screen. What an owner must do before booking drops from 23 to 25 screens to 8 to 11, and Part 1 can be done in about a minute; the rest is optional and comes back as a reminder. Taps: with Next on every screen, each one-tap screen costs one more tap (S1 Part 1: 6 more; Part 2: 14 more). Worth it: people can look before moving on, a mis-tap costs nothing, and pre-selected answers (Suggested, heard by voice, answered before) still get a clear way forward instead of a screen with nothing to tap.개 기준, 이 페이지에서 센 값. 1부는 “ready to book” 화면 포함, 2부는 성격 12문항과 다른 동물 · 지키기(10/20), 그리고 확인 화면. 예약 전에 꼭 해야 하는 화면이 23~25개에서 8~11개로 줄고, 1부는 1분 남짓. 나머지는 선택이고 알림으로 돌아와요. 탭 수: 모든 화면에 Next가 생겨 한 번 탭하던 화면마다 한 번 더(S1 1부: 6번, 2부: 14번). 그래도 좋은 이유: 넘어가기 전에 둘러볼 수 있고, 잘못 눌러도 손해가 없고, 미리 골라진 답에도 분명한 다음 단계가 생겨요.

Decisions결정

Two parts (round 3). Part 1 Basics: photo, name, species and breed (skipped when the photo is confirmed), age, weight, then bitten, slips out and foods to avoid; it ends on “Max is ready to book” with Done or “Tell sitters more about Max”. Part 2 Personality: the 12 questions, then other animals and guarding (safety-tagged, Mook Oct 20), its own bar, “Finish later” on every screen. Health is asked in the care request, not here.두 부분 (3차). 1부 기본: 사진, 이름, 종 · 품종(사진 확인 시 건너뜀), 나이, 몸무게, 그리고 물림 · 탈출 · 피할 음식. “Max is ready to book”에서 Done 또는 “Tell sitters more about Max”. 2부 성격: 12문항, 그다음 다른 동물 · 지키기(안전 태그, 묵 님 10/20), 별도 진행 막대, 모든 화면에 “Finish later”. 건강은 여기서 묻지 않고 케어 요청서에서.
Weight, not size. There's no international size standard for pets, so “About how heavy?” with kg ranges (dog: under 5, 5 to 10, 10 to 25, over 25; cat: under 4, 4 to 6, over 6), each with a hint, and “I know the exact weight”. The card shows the exact weight when there is one, else the range.크기 대신 몸무게. 펫 크기의 국제 기준이 없어서 “About how heavy?”와 kg 범위(개: 5 미만, 5~10, 10~25, 25 초과 / 고양이: 4 미만, 4~6, 6 초과), 각각 힌트, 그리고 “I know the exact weight”. 카드는 정확한 값이 있으면 그 값, 없으면 범위.
Photo first. In S2 the photo screen suggests species, breed (top 2, gold Suggested tag) and coat at once: “Looks like a Maltese. Right?” Yes skips the species and breed screens; Pick another shows the second guess. No photo, or S1: the species and breed screens come back.사진 먼저. S2에선 사진 화면이 종, 품종(상위 2개, 골드 Suggested 태그), 털을 한 번에 제안: “Looks like a Maltese. Right?” Yes면 종 · 품종 화면을 건너뛰고, Pick another는 두 번째 후보. 사진이 없거나 S1이면 종 · 품종 화면이 다시 나와요.
Voice keeps one review screen. Answers you confirm there skip their questions; safety answers only show as a “We heard” hint and still need your tap. Asking again on each question would add steps back.음성은 확인 화면 하나. 거기서 확인한 답은 질문을 건너뛰고, 안전 답은 “We heard” 힌트만 보이고 직접 눌러야 해요. 질문마다 다시 물으면 단계가 다시 늘어나요.
Question in Fredoka 700, as the spec says. Checked at 402 px with Larger text on (34 px) against all 18 questions: the longest (“In a new place or a change of routine, Mochi…” and “Has Mochi ever bitten or snapped at a person?”) take 3 lines, and the options stay above the fold. The weight is a token, --font-question-weight.질문은 스펙대로 Fredoka 700. 402px, 글자 크게(34px)로 18문항 모두 확인: 가장 긴 두 질문이 3줄, 선택지는 화면 안에 남아요. 굵기는 토큰 --font-question-weight.
Bars or pentagon is still open. Bars are the default and need no new library; the spec's pentagon needs react-native-svg. Switch “Axes” above to compare.막대냐 오각형이냐는 아직 열려 있어요. 기본은 막대, 새 라이브러리가 필요 없어요. 스펙의 오각형은 react-native-svg가 필요해요. 위의 “축”으로 비교.
Next on every screen (round 4) replaces the spec's one-tap advance (§2, §3.1). The DoD's “next question within 100 ms of the tap” becomes “within 100 ms of Next”. Cat Handling words approved.모든 화면에 Next(4차)가 스펙의 한 번 탭 넘김(§2, §3.1)을 대신해요. DoD의 “탭 후 100ms 안에 다음 질문”은 “Next 후 100ms 안에”로. 고양이 Handling 단어는 승인됨.

Design-system mapping디자인 시스템 매핑

16 reuse, 12 extend (10 components), 2 new (VoiceRecorder, TraitChart). The page is now drawn like those components. Paste-ready for DESIGN.md: onboarding-components.md.재사용 16, 확장 12(컴포넌트 10개), 새로 2(VoiceRecorder, TraitChart). 페이지도 그 컴포넌트 모양으로 맞췄어요. DESIGN.md에 붙일 글: onboarding-components.md.

Part부분	Decision결정	Component컴포넌트	Tokens토큰	Aligned on the page페이지에서 맞춘 것
Next (pinned, every answer screen); Save at the end of Part 1, Done on the last Part 2 question	Extend	`Button` primary, the proposed `large` size (DESIGN §6) at 60 tall in this flow	`primary`, `primaryText`, `ui.radius.button` (pill); new `layout.largeButton` 60	Disabled = `border` fill + `textMuted` label, like Button; semibold label
Pick another, Use 3.2 kg	Reuse	`Button` secondary	`surface`, `borderStrong`, `primary`	1 px `borderStrong` outline and `primary` label (was a 2 px ink outline)
Tell sitters more about Max + About 3 min · 14 quick questions	Extend	`Button` secondary + new `hint` prop (second line)	`fontSize.small`, `textMuted` for the hint	Same outline as secondary
Skip, I'm not sure · Finish later · I know the exact weight · Something else · Fix the words · Remove photo · Change · Add · Not now	Reuse	`TextButton`	`primary`, `fontWeight.semibold`	No underline now, 44+ tall
Back	Reuse	`BackLink`	`primary`	Was an icon-only chevron
Top bar with progress	Extend	Top bar, Onboarding variant (DESIGN §6.1: Back + step dots): a progress bar with its label instead of the dots, and an optional right `TextButton` (Finish later)	`track`, `primary`	Fill is `primary` (was gold, which is under 3:1 on `track`)
Progress bars (top bar, Home reminder)	Reuse	Figma `Progress Bar` (not in code yet; add to `ui/`)	`track`, `primary`
Question and helper line	Extend	`ScreenHeader` + `size="large"`: title 28 (already `fontSize.title` + 4) in `fontWeight.bold`, subtitle 18, optional Tag above	`fontFamily.display`, `fontWeight.bold`; new `fontSize.subtitle` 18	Title weight 700 needs Fredoka 700 loaded next to the skin's 600
Answer rows: the questions, breed, age, weight (with hint line and a trailing Tag)	Extend	`CheckRow` + `variant="card"` + `size="large"` (radio)	`borderStrong`, `primary`, `accent`, `radius.lg`; new `layout.largeRow` 64, `fontSize.large` 20	1 px `borderStrong`; checked = 2 px `primary` + `accent` (was 2 px and 3 px)
Fact rows on the voice review (checkbox, answer, From “quote”)	Reuse	`CheckRow` card large (the same extension, checkbox)	as above	Same look as the answer rows
Dog or Cat	Reuse	`RoleCard` (Figma `Choice Card`), description optional	`accent`, `primary`, `radius.lg`	Icon on a round `accent` tile
Foods to avoid (pick several)	Extend	`ChoiceChips` + `size="large"` (64 tall, 20 px)	`borderStrong`, `primary`, `ui.radius.chip`; `layout.largeRow`, `fontSize.large`	1 px outline; on = `primary` fill
Suggested (on rows) and the Suggested dot (on chips)	Extend	`Tag` tone `brand` + new `icon` prop; icon-only form for the dot (with an accessibility label)	`accent`, `primary`, `ui.radius.tag`	Was butter and gold; now brand, like other AI and source labels
For your sitter's safety	Extend	`Tag` tone `neutral` + `icon` (the same extension)	`track`, `textMuted`	Was butter and gold
We heard … · From your photo … · photo confirmed with Change	Reuse	`Banner` info (+ its action: Change, Use 3.2 kg)	`accent`, `border`, `primary`, `radius.md`	Was butter with an 18 px corner
Photo slot	Reuse	`MediaPicker` (Take photo · Choose from library) + Figma `Photo Tile` Upload state	`borderStrong` dashed, `radius.lg`	In the app the button opens MediaPicker; the demo picks the sample
Looks like a Maltese. Right?	Reuse	`Card` + `Tag` brand + two `Button` secondary (Yes, Pick another)	`surface`, `border`, `radius.lg`	Card gets its 1 px `border`; Yes is secondary now, so Next stays the one filled button
You said “…”	Reuse	`Card` with a Caption eyebrow	`surface`, `border`	Not called Quote Card: that name is the price card
Name, exact weight (kg), typed words	Extend	`TextField` + `size="large"` + `unit` suffix	`borderStrong`, `primary`, `radius.md`; `fontSize.large`	1 px outline, focus = `primary` border (no glow)
Mic button and its states	New	`VoiceRecorder`	`primary`, `primaryText`, `accent` (halo), `motion.base`; 88 px is the component's own size
Personality: bars, pentagon option, “Not shared yet” line	New	`TraitChart`	`primary`, `track`, `borderStrong`, `textMuted`, `fontSize.small`	Bars are `primary` on `track`; no numbers
Max at a glance card	Extend	`PetCard` + `variant="glance"`: Avatar photo 56, name, “Dog · Maltese · Adult · 3.2 kg”, safety Tags, `TraitChart`, breed needs	`surface`, `border`, `radius.lg`	Round Avatar like PetCard (was a rounded square)
Safety chips on the card	Reuse	`Tag` warning · neutral (+ icon) · success	`warningSurface`, `warning`, `track`, `textMuted`, `successSurface`, `success`	“Owner isn't sure” is neutral (was butter); “not shared yet” is a line, not a tag
Breed needs	Reuse	`Card` tone `mint`	`blockMint`, `radius.xl`
Request summary, booking on Home	Reuse	`Card` tone `butter` (`BookingCard` in the app)	`blockButter`
Home reminder (Help Chloe get to know Max)	Extend	`Banner` info + `secondaryAction` (Not now) + optional `progress`; the main action shown as a 44 px `Button`	`accent`, `border`, `primary`, `radius.md`	Was a peach block with two big buttons
Pet tile on Home, Mochi's compact card	Reuse	`PetCard` (+ a quiet No personality yet · Add line, or Tag success Profile complete)
Your answers with Change	Extend	Figma `List Row` (Lines = 2) + Trailing = Text button
Max is ready to book	Reuse	`EmptyState` layout (icon, title, one line) with Button primary + Button secondary with hint	`accent`
Toast, Home and New request headers	Reuse	`Toast`, App Bar / Top bar (title in the display face)

New tokens새 토큰

fontSize.large 20: Answer labels, chips, Next in the large-text flow
fontSize.subtitle 18: Helper line under a question (also closes the open 18 px subtitle question, DESIGN §0.7)
layout.largeRow 64: Answer rows and chips in the large-text flow
layout.largeButton 60: The pinned Next

Not new: the question weight is fontWeight.bold (700) and the size is fontSize.title + 4, as in ScreenHeader.새것 아님: 질문 굵기는 fontWeight.bold(700), 크기는 ScreenHeader처럼 fontSize.title + 4.

The template's rules템플릿 규칙

One question per screen. Question 28 px, options 20 px in 64 px rows with 12 px gaps, helper text 18 px, nothing under 15 px on the owner's screens.한 화면에 질문 하나. 질문 28px, 선택지 20px · 64px 줄 · 간격 12px, 보조 문장 18px, 오너 화면엔 15px 미만 글자 없음.
Tapping an answer only selects it (round 4). A pinned 60 px Next sits at the bottom of every screen: disabled until an answer is picked, enabled at once when one is pre-selected (Suggested, heard by voice, or answered before). Skip stays as the text link under it. The last screen of Part 1 says Save; the last Part 2 question says Done.답을 누르면 고르기만 해요(4차). 모든 화면 아래에 60px Next 고정: 답을 고르기 전엔 꺼져 있고, 미리 골라진 답(Suggested, 음성으로 들은 것, 전에 답한 것)이 있으면 바로 켜져요. Skip은 그 아래 텍스트 링크. 1부 마지막은 Save, 2부 마지막 질문은 Done.
Back (BackLink: chevron + “Back”) is top left; Finish later (TextButton) top right in Part 2.Back(BackLink: 꺾쇠 + “Back”)은 왼쪽 위, 2부에선 오른쪽 위에 Finish later(TextButton).
AI only suggests (a gold “Suggested” tag); the owner confirms. Safety questions carry a “For your sitter's safety” tag and are never filled in.AI는 제안만(골드 “Suggested” 태그), 확정은 오너. 안전 질문엔 “For your sitter's safety” 태그, 절대 자동으로 채우지 않아요.
The card never shows numbers or scores, and says “Not a behavior assessment”.카드에 숫자나 점수가 없고, “Not a behavior assessment”라고 적어요.

All 18 questions (dog), by part18문항 전체 (개), 파트별

One template covers every one. Highlighted rows are playable here; the counter keeps the real numbers, so it jumps.템플릿 하나가 모두를 덮어요. 강조한 줄은 여기서 눌러 볼 수 있고, 진행 숫자는 실제 번호라 건너뛰어요.

#	Part파트	Axis축	Question질문

The first sketch ↗처음 스케치 ↗ In the Prototype list ↗프로토타입 목록에서 ↗ Step by step (same sizes) ↗단계별 (같은 크기) ↗ Spec ↗스펙 ↗ #115 ↗

Prototype only: no real photos are uploaded and nothing is recorded. The voice and photo results are canned, but the quote check is real: an answer only appears if its words are in the text.프로토타입이에요: 사진을 올리거나 녹음하지 않아요. 음성과 사진 결과는 미리 정한 것이지만, 인용 확인은 진짜예요: 글에 그 말이 있어야만 답이 나타나요.