①배송지
주소는 손으로 치지 않고 「주소 찾기」로 받는다
- 텍스트 필드Text Field
- 세컨더리 버튼Secondary Button
- 셀렉트 (시트)Select · Picker
배송지 칸은 텍스트 필드로, 주소는 「주소 찾기」 세컨더리 버튼으로 받고, 요청사항은 셀렉트 시트로
스킬 · 자체 제작◆ 도입 후보
「쇼핑 앱 결제 흐름 만들어줘」라고만 하면 AI 는 장을 나누지 않는다. Haiku·Sonnet 에게 3번씩 시킨 실측에서 6번 중 5번이 주문서 한 장에 쿠폰·결제 수단을 바텀시트로 띄웠고, 금액을 단 결제 버튼을 ①부터 ④까지 하단에 둔 것은 0/6이었다. 결제 요청 문장으로 시키면 5/6, 「주소 찾기」 버튼은 0/6에서 6/6, 완료 화면의 닫기는 2/6에서 6/6이 됐다. 다만 카드를 고르면 열리는 카드사 칸은 4/6에 그쳤다. 가입도 같다. 이름 없이 시키면 Sonnet 은 3번 다 12장으로 쪼갰고(약관 동의 한 장, 관심사 세 장, 권한 네 장), 가입 문장으로 시키면 다섯 장이 5/6이었다. 예약은 이름 없이 시키면 6번 다 장소부터 물었고, 예약 문장으로 시키면 6번 다 시간부터 물었다. 배달 추적은 이름 없이 시키면 남은 분을 제일 크게 쓴 것이 2/6, 배달 추적 문장으로 6/6이었다. 환불은 신청하는 동안 맨 위에 세 칸 단계를 둔 것이 이름 없이 0/6, 환불 문장으로 4/6이었다. 그래서 만든 뒤 장마다 부품과 「장을 넘겨도 지킬 것」을 대조하게 한다.
실물부터, 설치 전에 전부 만져보세요
아래는 이미지가 아니라 이 스킬이 담고 있는 진짜 HTML입니다. 눌러 보세요.「결제 화면」은 한 장이 아니라
5장이에요
주문하기를 누른 뒤부터 주문 완료까지, 고객이 넘기는 화면을 장으로 나누고 장마다 쓰는 부품을 이름으로 적었어요.
장 수와 장 이름을
먼저 적어요
「결제 화면」이라고만 하면 어디서 시작해 어디서 끝나는지부터 AI 가 정한다. 장 수와 장 이름을 먼저 정하고, 장마다 부품을 이름으로 적고, 여러 장에 걸친 규칙은 맨 끝에 따로 적는다.
[흐름 이름]은 [장 수]장으로: ① [장 이름]([부품 이름])…장을 넘겨도 지킬 것
✕
결제 화면 만들어줘
○
결제는 다섯 장으로: ① 배송지(텍스트 필드, 「주소 찾기」 세컨더리 버튼, 셀렉트 시트) ② 할인(토글 스위치, 리스트 항목, 텍스트 버튼) ③ 결제 수단(라디오, 셀렉트 시트, 배지) ④ 확인·동의(리스트, 체크박스, 하단 고정 바) ⑤ 완료(모달, 아이콘 버튼, 바텀시트). 결제 버튼은 ①부터 ④까지 금액을 달고 하단 고정 바에
「결제 화면 만들어줘」가
장 계획으로 바뀌어요
스킬로 깔아 두면 장 수·장 이름·장마다 부품을 먼저 보여 주고, 장을 넘겨도 지킬 규칙을 장마다 대조해요.
/plugin marketplace add hanmariyang/giting-skills
/plugin install flow-menu@giting
공통 규격
- 장 수와 장 이름을 먼저 정하고 만든다. 한 장에 한 가지 결정만 둔다.
- 부품은 app-menu 의 이름 그대로 부른다(텍스트 필드 · 셀렉트 시트 · 하단 고정 바 …). 장마다 셋까지 짚는다.
- 장을 넘겨도 지킬 것(금액을 단 결제 버튼처럼 여러 장에 걸친 규칙)은 장 설명과 따로 적는다.
- 흐름의 순서와 부품은 실제 앱 화면에서 확인한 것만 싣는다. 출처와 수집한 달을 같이 적는다.
- 결과는 장을 순서대로 나란히 놓은 한 판으로 받는다. 장마다 쓴 부품 이름을 화면 아래에 적어 받는다.
결제 Checkout · 5장
주문하기를 누른 뒤 → 주문 완료. 퀸잇 주문 화면 8장(유아이볼, 2026-05 수집)에서 순서와 부품을 확인했다. 신세계·포스티도 결제 버튼을 하단 고정 바에 둔다.
②할인
토글 하나로 쿠폰이 알아서 들어가고 금액이 바로 바뀐다
- 토글 스위치Toggle · Switch
- 리스트 항목List Item · ListTile
- 텍스트 버튼Text · Ghost Button
맨 위에 「최대 할인」 토글 스위치, 쿠폰은 리스트 항목, 적립금 옆엔 「모두 사용」 텍스트 버튼
③결제 수단
카드를 고르면 바로 아래에 카드사 칸이 열린다
- 라디오Radio
- 셀렉트 (시트)Select · Picker
- 배지Badge
결제 수단은 라디오 목록, 카드를 고르면 그 아래에 카드사 셀렉트 시트, 혜택 있는 수단엔 배지
④확인·동의
결제 버튼은 ①부터 ④까지 금액을 달고 아래에 붙어 있다
- 리스트List
- 체크박스Checkbox
- 하단 고정 바Bottom Bar
결제 정보는 리스트로, 동의는 체크박스 하나로 묶고, 결제 버튼은 금액을 달아 하단 고정 바에
⑤완료
완료는 뒤로가 아니라 닫기, 다음 권유는 바텀시트 하나
- 모달 (풀스크린)Modal (fullscreen)
- 아이콘 버튼Icon Button
- 바텀시트Bottom Sheet
완료는 모달로 띄우고 왼쪽 위에 닫기 아이콘 버튼, 다음 권유는 바텀시트 하나만
장을 넘겨도 지킬 것
- 결제 버튼은 한 장에만 두지 않는다. ①부터 ④까지 「26,800원 결제」처럼 금액을 달고 하단 고정 바에 둔다.
- 할인이 바뀌면 하단 고정 바의 금액도 그 자리에서 바뀐다.
결제는 다섯 장으로: ① 배송지(이름·연락처는 텍스트 필드, 주소는 「주소 찾기」 세컨더리 버튼, 배송 요청사항은 셀렉트 시트) ② 할인(맨 위에 「최대 할인」 토글 스위치, 켜면 쿠폰이 들어가고 금액이 바로 바뀜, 쿠폰은 리스트 항목, 적립금 옆에 「모두 사용」 텍스트 버튼) ③ 결제 수단(라디오 목록, 카드를 고르면 그 바로 아래에 카드사 셀렉트 시트, 혜택 있는 수단엔 배지) ④ 확인·동의(결제 정보는 리스트, 동의는 체크박스 하나로 묶음) ⑤ 완료(모달, 왼쪽 위에 닫기 아이콘 버튼, 다음 권유는 바텀시트 하나). 장을 넘겨도 지킬 것: 결제 버튼은 ①부터 ④까지 「[금액]원 결제」처럼 금액을 달고 하단 고정 바에 둔다.
가입 Sign-up · 5장
「새로 시작하기」를 누른 뒤 → 권한 안내. 열품타 로그인·회원가입 10장 중 8장(유아이볼, 2026-06 수집)에서 순서와 부품을 확인했다. 소셜 버튼을 세로로 쌓는 것은 오일나우(2026-09)·X(2024-08)도 같다.
①가입 방법
소셜 버튼을 세로로 쌓고, 이메일 가입은 그 아래 텍스트 버튼으로 뺀다
- 라지 타이틀Large Title
- 세컨더리 버튼Secondary Button
- 텍스트 버튼Text · Ghost Button
맨 위에 라지 타이틀로 가입 문구, 소셜 가입은 세컨더리 버튼을 세로로 쌓고, 이메일 가입은 그 아래 텍스트 버튼으로
②닉네임
적는 장은 버튼이 키보드 바로 위에 붙고, 글자 수를 칸 위에서 센다
- 텍스트 필드Text Field
- 유효성 검사Validation
- 키보드 피하기Keyboard Avoidance
닉네임은 텍스트 필드 하나, 칸 위에 글자 수를 세는 유효성 검사, 「다음」 버튼은 키보드 피하기로 키보드 바로 위에
③동네
고르는 장은 검색바와 체크 표시 목록, 다음은 앱바 오른쪽 「완료」
- 검색바Search Bar
- 리스트 항목List Item · ListTile
- 앱바App Bar · Navigation Bar
맨 위에 검색바, 동네는 리스트 항목으로 고른 줄에 체크 표시, 넘어가는 버튼은 앱바 오른쪽 「완료」
④관심사
관심사는 묶음 제목 아래 칩으로, 여러 개 고르면 칩이 채워진다
- 칩Chip · Tag
- 섹션 헤더Section Header
- 앱바App Bar · Navigation Bar
관심사는 섹션 헤더로 묶고 그 아래 칩을 여러 개 고르게, 고른 칩은 채워서, 넘어가는 버튼은 앱바 오른쪽 「완료」
⑤권한
권한은 묻기 전에 왜 쓰는지 목록으로 먼저 보여 준다
- 리스트List
- 하단 고정 바Bottom Bar
- 프라이머리 버튼Primary Button
권한마다 아이콘·이름·쓰는 이유 한 줄을 리스트로 먼저 보여 주고, 하단 고정 바의 「계속 (0/[권한 수])」 버튼으로 하나씩 묻기
장을 넘겨도 지킬 것
- 한 장에 묻는 것은 하나다. 닉네임 · 동네 · 관심사를 한 장에 몰지 않는다.
- 적는 장은 「다음」을 키보드 바로 위에, 고르는 장은 앱바 오른쪽 「완료」로 넘어간다.
가입은 다섯 장으로: ① 가입 방법(라지 타이틀, 소셜 가입은 세컨더리 버튼을 세로로 쌓고, 이메일 가입은 아래 텍스트 버튼, 약관 링크는 맨 아래 작게) ② 닉네임(텍스트 필드 하나, 칸 위에 글자 수, 「다음」은 키보드 바로 위) ③ 동네(검색바, 리스트 항목에 체크 표시, 앱바 오른쪽 「완료」) ④ 관심사(섹션 헤더로 묶은 칩을 여러 개 고르기, 고른 칩은 채움, 앱바 오른쪽 「완료」) ⑤ 권한(권한마다 쓰는 이유 한 줄을 리스트로 먼저, 하단 고정 바에 「계속 (0/[권한 수])」). 장을 넘겨도 지킬 것: 한 장에 묻는 것은 하나. 적는 장은 버튼을 키보드 위에, 고르는 장은 앱바 오른쪽 「완료」로.
예약 Booking · 5장
예약을 시작하면 → 결제하기. 쏘카 대여 예약 14장 중 8장(유아이볼, 2026-04 수집)에서 순서와 부품을 확인했다. 날짜를 먼저 고르고 그 시간에 되는 것만 보여 주는 순서는 골프존 티타임 예약(2026-10)도 같다.
①시간
고른 칸에서 휠이 펼쳐지고, 맨 위 「총 4시간 30분 이용」이 바로 바뀐다
- 바텀시트Bottom Sheet
- 휠 피커Wheel Picker
- 칩Chip · Tag
시간은 바텀시트에서, 대여·반납 줄을 누르면 그 자리에서 휠 피커가 펼쳐지고, 맨 위에 총 이용 시간을 크게, 「+1일 +1시간 +30분」 칩으로 늘리기
②장소
왕복·편도를 먼저 고르고, 고른 시간은 장소 시트에도 따라온다
- 세그먼티드Segmented Control
- 검색바Search Bar
- 리스트 항목List Item · ListTile
지도 위 바텀시트에 왕복·편도 세그먼티드, 장소 검색바, 고른 시간 줄, 장소는 리스트 항목으로
③고르기
카드마다 시간당 값이 아니라 총 결제 요금을 적는다
- 카드Card
- 썸네일Thumbnail
- 배지Badge
고를 것은 카드 목록으로, 카드마다 썸네일과 「총 결제 요금」 배지를 단 총액, 할인 전 값은 취소선으로
④옵션
옵션은 라디오 카드, 추천에는 배지, 무료 선택지도 하나 둔다
- 섹션 헤더Section Header
- 라디오Radio
- 배지Badge
옵션은 섹션 헤더 아래 라디오 카드로, 카드마다 더하는 금액, 추천 하나에 배지, 무료 선택지도 하나
⑤확인·결제
결제 버튼에 총액, 그 위 말풍선에 적용된 혜택
- 리스트List
- 툴팁Tooltip
- 하단 고정 바Bottom Bar
예약 내용은 리스트로, 하단 고정 바의 결제 버튼에 총액을 달고, 버튼 바로 위 툴팁에 적용된 혜택 한 줄
장을 넘겨도 지킬 것
- 고른 시간은 장을 넘겨도 따라다닌다. 장소 · 고르기 · 결제 화면 위쪽에 한 줄로 다시 보여 준다.
- 금액은 처음부터 총액으로 보여 주고, 옵션을 더하면 결제 버튼의 금액이 그 자리에서 바뀐다.
예약은 다섯 장으로, 시간부터: ① 시간(바텀시트, 대여·반납 줄을 누르면 그 자리에서 휠 피커, 맨 위에 총 이용 시간, 「+1일 +1시간 +30분」 칩) ② 장소(지도 위 바텀시트, 왕복·편도 세그먼티드, 검색바, 장소는 리스트 항목) ③ 고르기(카드 목록, 카드마다 썸네일과 「총 결제 요금」 배지를 단 총액) ④ 옵션(섹션 헤더 아래 라디오 카드, 추천에 배지, 무료 선택지 하나) ⑤ 확인·결제(예약 내용 리스트, 하단 고정 바 결제 버튼에 총액, 버튼 위 툴팁에 적용된 혜택). 장을 넘겨도 지킬 것: 고른 시간은 ②~⑤ 위쪽에 한 줄로 계속 보여 주고, 금액은 처음부터 총액, 옵션을 더하면 버튼 금액이 그 자리에서 바뀐다.
배달 추적 Delivery tracking · 5장
주문을 마친 뒤 → 다시 주문. 배달의민족 배달 현황 5장(유아이볼, 2026-04 수집)에서 순서와 부품을 확인했다. 같은 단계 막대·라이더 줄·문 앞 사진·다시 주문은 도어대시 배달 현황 7장(2026-01)에서 확인했다.
①진행 중
앱을 닫았다 열어도 홈 탭 바 위에 남은 시간이 떠 있다
- 카드Card
- 썸네일Thumbnail
- 하단 탭바Tab Bar · Bottom Nav
주문이 진행 중이면 홈 하단 탭 바 바로 위에 카드 한 줄로 「주문이 진행 중이에요 32분 · 가게 이름」, 왼쪽에 메뉴 썸네일
②조리 중
「33분 남음」을 제일 크게, 도착 시각을 옆에, 그 아래 네 칸 단계 막대
- 바텀시트Bottom Sheet
- 프로그레스 바Progress Bar
- 아이콘 버튼Icon Button
지도 위 바텀시트 맨 위에 남은 분을 제일 크게, 옆에 도착 시각, 그 아래 주문 확인·조리 중·배달 중·배달 완료 네 칸 프로그레스 바, 왼쪽 위 닫기 아이콘 버튼
③배달 중
남은 시간이 줄고, 라이더 줄에 전화·채팅이 붙는다
- 프로그레스 바Progress Bar
- 아바타Avatar
- 아이콘 버튼Icon Button
같은 시트에서 남은 분만 줄고 프로그레스 바는 배달 중 칸으로, 아래에 라이더 아바타와 이름 한 줄, 오른쪽에 전화·채팅 아이콘 버튼
④도착
도착하면 막대가 다 차고, 문 앞에 둔 사진을 보여 준다
- 프로그레스 바Progress Bar
- 카드Card
- 썸네일Thumbnail
도착하면 제목을 「배달 완료」와 도착 시각으로, 프로그레스 바는 다 채우고, 문 앞에 둔 사진 썸네일을 카드로
⑤내역
주문 내역 끝에 「같은 메뉴 다시 주문」
- 섹션 헤더Section Header
- 리스트List
- 세컨더리 버튼Secondary Button
주문 상세는 가게 이름 섹션 헤더 아래 메뉴·금액 리스트, 그 아래 「같은 메뉴 다시 주문」 「가게 보기」 세컨더리 버튼 둘
장을 넘겨도 지킬 것
- 남은 시간은 「33분 남음」처럼 제일 크게, 도착 시각을 옆에 같이 적는다.
- 단계 막대는 장을 넘겨도 같은 자리, 같은 네 칸. 지금 칸에만 아이콘을 단다.
배달 추적은 다섯 장으로: ① 진행 중(홈 탭 바 바로 위 카드 한 줄 「주문이 진행 중이에요 32분 · 가게 이름」, 메뉴 썸네일) ② 조리 중(지도 위 바텀시트, 남은 분을 제일 크게, 옆에 도착 시각, 주문 확인·조리 중·배달 중·배달 완료 네 칸 프로그레스 바, 왼쪽 위 닫기 아이콘 버튼) ③ 배달 중(같은 시트에서 남은 분만 줄고, 라이더 아바타·이름 한 줄과 전화·채팅 아이콘 버튼) ④ 도착(「배달 완료」와 도착 시각, 막대 다 채움, 문 앞 사진 카드) ⑤ 내역(가게 이름 섹션 헤더, 메뉴·금액 리스트, 「같은 메뉴 다시 주문」 「가게 보기」 세컨더리 버튼). 장을 넘겨도 지킬 것: 남은 시간을 제일 크게 도착 시각과 같이, 단계 막대는 같은 자리 같은 네 칸에 지금 칸만 아이콘.
환불 Return & refund · 5장
주문 목록 → 신청 내역. 쿠팡 교환·반품 신청 13장 중 8장(유아이볼, 2023-12 수집)에서 ①~④의 순서와 부품을 확인했다. 수집한 지 오래된 화면이다. ⑤ 신청 뒤 내역은 29cm 취소·교환·반품 내역 2장(2025-02)에서 확인했다.
①주문 목록
반품은 주문 카드 바로 아래 버튼에서 시작한다
- 카드Card
- 썸네일Thumbnail
- 세컨더리 버튼Secondary Button
주문은 날짜와 배송 상태를 단 카드로, 상품마다 썸네일, 카드 아래에 「교환, 반품 신청」 세컨더리 버튼
②상품 선택
맨 위에 세 칸 단계를 두고, 돌려보낼 상품을 체크박스로 고른다
- 프로그레스 바Progress Bar
- 체크박스Checkbox
- 하단 고정 바Bottom Bar
맨 위에 상품 선택·사유·해결 방법 세 칸 단계 표시, 주문 상품마다 체크박스, 하단 고정 바에 「다음 단계」
③사유
사유를 고르면 그 줄 바로 아래에 글 칸과 사진 칸이 열린다
- 라디오Radio
- 여러 줄 입력Textarea · Multiline
- 사진 업로드Photo / File Upload
사유는 상품 문제·배송 문제로 묶은 라디오, 고른 줄 바로 아래에 여러 줄 입력(글자 수 표시)과 사진 업로드 최대 3장
④해결 방법
환불·교환을 고르는 그 장에서 환불 금액을 바로 보여 준다
- 라디오Radio
- 섹션 헤더Section Header
- 리스트List
환불·교환은 라디오, 그 아래 「환불 정보」 섹션 헤더와 상품 금액·반품 배송비·환불 예정 금액 리스트, 환불 금액은 강조색
⑤내역
신청 목록에 진행 상태, 누르면 펼쳐져 사유와 환불 금액이 보인다
- 리스트 항목List Item · ListTile
- 리스트List
신청마다 리스트 항목 한 줄(종류·날짜·상품·진행 상태), 누르면 아래로 펼쳐 접수 사유·회수지·환불 금액 리스트
장을 넘겨도 지킬 것
- 상품 선택·사유·해결 방법 세 칸 단계는 신청하는 동안 맨 위에 계속 둔다.
- 환불 금액은 해결 방법을 고르는 장에서 처음 보여 주고, 내역에서도 같은 금액을 강조색으로 다시 보여 준다.
환불은 다섯 장으로: ① 주문 목록(날짜·배송 상태를 단 주문 카드, 상품 썸네일, 카드 아래 「교환, 반품 신청」 세컨더리 버튼) ② 상품 선택(맨 위 상품 선택·사유·해결 방법 세 칸 단계, 상품마다 체크박스, 하단 고정 바 「다음 단계」) ③ 사유(상품 문제·배송 문제로 묶은 라디오, 고른 줄 바로 아래에 글자 수를 단 여러 줄 입력과 사진 업로드 최대 3장) ④ 해결 방법(환불·교환 라디오, 「환불 정보」 섹션 헤더와 상품 금액·반품 배송비·환불 예정 금액 리스트) ⑤ 내역(신청마다 리스트 항목 한 줄에 진행 상태, 누르면 펼쳐 접수 사유·회수지·환불 금액). 장을 넘겨도 지킬 것: 세 칸 단계는 신청하는 동안 맨 위에 계속, 환불 금액은 ④에서 처음 보여 주고 ⑤에서도 같은 금액을 강조색으로.
구조와 기능
사전 정본은 menu.json 하나다. 흐름마다 어디서 시작해 어디서 끝나는지, 어디서 확인했는지, 장 목록, 장을 넘겨도 지킬 것, 흐름 전체 요청 문장이 있다. 장마다 한 줄 요점, 부품 셋, 그 장만 고칠 때 쓰는 요청 문장이 붙는다. 부품은 앱 UI 메뉴판(app-menu)의 id 로 적고 이름은 거기서 읽는다. app-menu 에 없는 부품, 장마다 넷 이상, 견본 화면에 없는 부품은 빌드가 멈춘다.
견본은 다섯 화면(390×844)을 나란히 놓은 자가완결 HTML이다. 부품마다 data-menu 가 달려 있고 주소 끝에 ?show 를 붙이면 부품 테두리가 보인다.
결제 5장
주문하기를 누른 뒤부터 주문 완료까지. 퀸잇 주문 화면 8장(유아이볼, 2026-05 수집)에서 순서와 부품을 확인했다. ① 배송지(텍스트 필드 · 세컨더리 버튼 · 셀렉트 시트) ② 할인(토글 스위치 · 리스트 항목 · 텍스트 버튼) ③ 결제 수단(라디오 · 셀렉트 시트 · 배지) ④ 확인·동의(리스트 · 체크박스 · 하단 고정 바) ⑤ 완료(모달 · 아이콘 버튼 · 바텀시트). 장을 넘겨도 지킬 것은 결제 버튼이다. ①부터 ④까지 금액을 달고 하단 고정 바에 두고, 할인이 바뀌면 그 금액도 그 자리에서 바뀐다.
가입 5장
「새로 시작하기」를 누른 뒤부터 권한 안내까지. 열품타 로그인·회원가입 10장 중 8장(유아이볼, 2026-06 수집)에서 순서와 부품을 확인했다. 소셜 버튼을 세로로 쌓는 것은 오일나우·X 도 같다. ① 가입 방법(라지 타이틀 · 세컨더리 버튼 · 텍스트 버튼) ② 닉네임(텍스트 필드 · 유효성 검사 · 키보드 피하기) ③ 동네(검색바 · 리스트 항목 · 앱바) ④ 관심사(칩 · 섹션 헤더 · 앱바) ⑤ 권한(리스트 · 하단 고정 바 · 프라이머리 버튼). 장을 넘겨도 지킬 것은 한 장에 묻는 것은 하나, 그리고 적는 장은 「다음」을 키보드 바로 위에, 고르는 장은 앱바 오른쪽 「완료」로 넘어가는 것이다.
예약 5장
예약을 시작하면 결제하기까지, 시간부터 묻는다. 쏘카 대여 예약 14장 중 8장(유아이볼, 2026-04 수집)에서 순서와 부품을 확인했다. 날짜를 먼저 고르고 그 시간에 되는 것만 보여 주는 순서는 골프존 티타임 예약도 같다. ① 시간(바텀시트 · 휠 피커 · 칩) ② 장소(세그먼티드 · 검색바 · 리스트 항목) ③ 고르기(카드 · 썸네일 · 배지) ④ 옵션(섹션 헤더 · 라디오 · 배지) ⑤ 확인·결제(리스트 · 툴팁 · 하단 고정 바). 장을 넘겨도 지킬 것은 고른 시간을 ②~⑤ 위쪽에 계속 보여 주는 것, 금액을 처음부터 총액으로 보여 주고 옵션을 더하면 결제 버튼 금액이 그 자리에서 바뀌는 것이다.
배달 추적 5장
주문을 마친 뒤부터 다시 주문까지, 남은 시간 하나로 간다. 배달의민족 배달 현황 5장(유아이볼, 2026-04 수집)에서 순서와 부품을 확인했고, 같은 단계 막대·라이더 줄·문 앞 사진·다시 주문은 도어대시 배달 현황 7장(2026-01)에서도 확인했다. ① 진행 중(카드 · 썸네일 · 하단 탭바) ② 조리 중(바텀시트 · 프로그레스 바 · 아이콘 버튼) ③ 배달 중(프로그레스 바 · 아바타 · 아이콘 버튼) ④ 도착(프로그레스 바 · 카드 · 썸네일) ⑤ 내역(섹션 헤더 · 리스트 · 세컨더리 버튼). 장을 넘겨도 지킬 것은 남은 시간을 제일 크게 도착 시각과 같이 적는 것, 단계 막대를 같은 자리 같은 네 칸에 두고 지금 칸에만 아이콘을 다는 것이다.
환불 5장
주문 목록부터 신청 내역까지, 세 칸 단계로 묻는다. 쿠팡 교환·반품 신청 13장 중 8장(유아이볼, 2023-12 수집, 오래된 화면)에서 ①~④의 순서와 부품을, 29cm 취소·교환·반품 내역 2장(2025-02)에서 ⑤를 확인했다. ① 주문 목록(카드 · 썸네일 · 세컨더리 버튼) ② 상품 선택(프로그레스 바 · 체크박스 · 하단 고정 바) ③ 사유(라디오 · 여러 줄 입력 · 사진 업로드) ④ 해결 방법(라디오 · 섹션 헤더 · 리스트) ⑤ 내역(리스트 항목 · 리스트). 장을 넘겨도 지킬 것은 세 칸 단계를 신청하는 동안 맨 위에 두는 것, 환불 금액을 ④에서 처음 보여 주고 ⑤에서도 같은 금액을 강조색으로 보여 주는 것이다.
실측
흐름 5 · 장 25 · 부품 74 · 라이선스 MIT. 검수 기준 버전 0.5.0, 2026-10-30. 견본을 헤드리스로 열어 폰 밖으로 넘친 요소 0, 오류 0을 확인했다. 같은 요청을 Haiku·Sonnet 3번씩 시키고 헤드리스로 채점했다: 금액 단 결제 버튼 ①~④ 하단 0/6 → 5/6(Sonnet 3/3 · Haiku 2/3), 「주소 찾기」 0/6 → 6/6, 완료 닫기 2/6 → 6/6, 다섯 장 0/6 → 5/6, 카드사 칸 1/6 → 4/6. 가입(러닝 모임 앱, 같은 방식): 다섯 장 0/6 → 5/6, 고르는 장 앱바 오른쪽 「완료」 0/6 → 4/6, 닉네임 글자 수 4/6 → 6/6. 소셜 버튼 세로 쌓기(5/6)와 한 장에 하나씩 묻기(몬 것 0/6)는 이름 없이도 이미 됐다. 키보드 위 「다음」은 헤드리스에 키보드가 없어 재지 못했다. 예약(공유 차량, 같은 방식): 시간을 첫 질문으로 0/6 → 6/6, 고른 시간이 다음 장 위쪽에 계속 보임 0/6 → 6/6, 결제 버튼 금액 4/6 → 6/6, 차 카드에 시간당 값만 적은 것 2/6 → 0/6. 요청의 항목 순서가 「장소, 차, 시간, 보험」이라 이름 없이 시킨 쪽이 그 순서를 따랐을 수 있다. 배달 추적(칼국수 주문, 같은 방식): 추적 화면에서 남은 분이 제일 큰 글자 2/6 → 6/6(이름 없이 시킨 Sonnet 2번은 도착 시각을 제일 크게), 홈 탭 바 위 진행 중 줄 0/6 → 6/6, 다섯 장 0/6 → 6/6, 문 앞 사진 3/6 → 6/6, 다시 주문 5/6 → 6/6. 이름 없이 시키면 6번 다 별점·리뷰 화면을 넣었다. 환불(셔츠 하자, 같은 방식): 맨 위 세 칸 단계 0/6 → 4/6(Sonnet 3/3 · Haiku 1/3), 사진을 따로 한 장으로 뺀 것 4/6 → 0/6, 다섯 장 0/6 → 6/6, 환불 금액을 해결 방법 장에서 5/6. 내역의 환불 금액은 Haiku 3번 다 빠졌다. 실측은 스킬을 부르지 않고 요청 문장을 그대로 붙여 넣어 쟀다. 견본 속 이름·주소·상품은 지어낸 예시다.