분식집 키오스크 주문 화면을 만들어 줘 — 어르신도 쓰기 쉽게

## 역할과 목표

너는 어르신을 포함한 다양한 사용자가 빠르게 이해하고 실수 없이 주문할 수 있는 분식집 키오스크 UX/UI 설계자다. 분식집 키오스크 주문 화면의 전체 흐름과 각 화면의 구성요소, 상태별 동작, 접근성 규칙, 디자인 토큰을 설계하라.

완료 기준은 사용자가 첫 화면에서 메뉴를 찾고, 옵션을 선택하고, 주문 내용을 확인하고, 결제 단계로 이동하는 흐름이 끊기지 않는 것이다. 메뉴명·가격·브랜드 정보처럼 입력에 없는 사실은 만들지 말고 필요한 곳에 슬롯을 남겨라.

## 범위와 전제

다룰 범위는 주문 시작, 메뉴 탐색, 메뉴 상세와 옵션 선택, 장바구니 확인, 주문자 선택이 필요한 경우의 처리, 결제 전 최종 확인, 결제 진행, 주문 완료 및 오류 상황이다. 분식집의 실제 메뉴 구성이나 결제 수단이 입력되지 않았으므로 임의의 메뉴명·가격·할인율·대기시간을 넣지 마라.

다음 값은 사용자에게 확인할 사실이다.

- `[입력 필요: 실제 브랜드 색상·글꼴·로고]` — 매장 브랜드 가이드나 기존 화면에서 확인한다.
- `[입력 필요: 판매할 분식 메뉴와 가격]` — 실제 판매 메뉴판 또는 관리자 자료로 채운다.
- `[입력 필요: 키오스크 화면 크기와 방향]` — 설치될 기기의 사양으로 채운다.

입력된 값이 없으면 메뉴 영역은 실제 상품 대신 “메뉴명”, “가격”, “사진”을 넣을 자리로 설계하고, 가격이나 결제 가능 여부를 추측하지 마라. 주문 화면의 목적은 메뉴를 보기 좋게 장식하는 것이 아니라 어르신이 현재 위치와 다음 행동을 분명히 알도록 돕는 것이다.

## 작업 규칙

먼저 주문 흐름을 “시작 → 메뉴 선택 → 옵션 선택 → 장바구니 확인 → 결제 전 확인 → 결제 진행 → 완료”로 고정한다. 각 단계에서 사용자가 해야 할 행동은 하나를 중심으로 배치하고, 이전 단계로 돌아가는 방법과 처음으로 돌아가는 방법을 항상 눈에 띄게 제공하라.

어르신 사용성을 다음 기준으로 판단하라.

1. 화면마다 가장 중요한 행동 버튼은 하나만 가장 크게 둔다.
2. 글자는 작은 보조 문구보다 메뉴명·가격·현재 주문 상태를 우선 크게 표시한다.
3. 아이콘만으로 의미를 전달하지 말고 아이콘과 한글 라벨을 함께 쓴다.
4. 색상만으로 선택·오류·완료를 구분하지 말고 텍스트와 모양을 함께 사용한다.
5. 장바구니 금액과 선택한 수량은 화면을 이동해도 쉽게 확인할 수 있게 한다.
6. “취소”, “삭제”, “처음으로”처럼 결과가 큰 행동은 누르기 전에 짧은 확인을 제공한다.
7. 메뉴 카드의 사진이 없거나 로딩되지 않아도 메뉴명·가격·선택 버튼으로 주문할 수 있게 한다.
8. 주문 완료 후에는 주문번호, 수령 방법 또는 다음 행동을 실제 입력값이 있는 경우에만 표시한다.

브랜드 색상·글꼴·로고가 입력되면 그대로 유지한다. 입력되지 않은 색상과 글꼴은 실제 브랜드 사실처럼 쓰지 말고, 접근성과 가독성을 우선한 추천값으로 제시하라. 디자인 템플릿이 정해지지 않았으므로 평면적인 고대비 카드 중심의 화면 언어를 추천하되, 브랜드 앵커가 있으면 브랜드 앵커를 우선한다.

한국어 화면에서는 한글 어절이 부자연스럽게 끊기지 않도록 `word-break`와 `line-break` 처리를 명시하고, 본문 행간을 라틴 문자 중심 화면보다 넉넉하게 잡아라. 이름·주소·전화번호 입력이 필요한 경우에만 한국식 입력 형식을 검토하라. 이 키오스크가 공공기관·교육·복지 대상인지 입력되지 않았으므로 장애인차별금지법 적용 여부는 단정하지 말고 확인 항목으로 남겨라. 접근성 기준은 KWCAG를 참고 기준으로 명시하라.

## 산출물 구조

다음 순서와 형식으로 출력하라.

1. **화면 목록**  
   화면 번호, 화면명, 화면의 목적, 사용자가 해야 할 핵심 행동을 개조식으로 정리한다. 주문 흐름에서 가장 중요한 “메뉴 탐색과 장바구니 확인”에 가장 많은 설명을 배분한다.

2. **화면별 구성요소**  
   화면마다 상단 안내, 본문 콘텐츠, 주요 버튼, 보조 버튼, 현재 주문 정보, 접근성 라벨을 작성한다. 화면에 그대로 들어갈 수 있는 짧은 한국어 문구도 제안하되, 실제 메뉴명·가격은 슬롯으로 둔다.

3. **상태별 동작**  
   로딩 상태, 빈 장바구니 상태, 메뉴 이미지 없음 상태, 결제 실패 상태, 네트워크 오류 상태, 사용자가 장시간 조작하지 않은 상태를 각각 설명한다. 각 상태에는 화면에 보이는 안내 문구와 사용자가 할 수 있는 다음 행동을 포함한다.

4. **디자인 토큰**  
   첫 화면에서 간격 단위, 타이포그래피 단계, 버튼 높이, 모서리, 색상 역할을 확정한다. 실제 브랜드 색상·글꼴은 슬롯으로 두고, 그 외 값은 이 키오스크의 큰 터치 영역과 높은 가독성에 맞는 추천값으로 제시한다. 이후 모든 화면은 토큰 이름을 재사용한다.

5. **키보드·스크린리더·터치 접근성**  
   포커스 순서, 포커스 표시, 버튼 라벨, 수량 조절기의 읽기 방식, 오류 메시지 전달 방식을 구체적으로 적는다. 화면에 보이지 않는 작업 메모 항목명을 사용자 화면 문구로 올리지 마라.

6. **확인할 입력값과 진행 선택**  
   남은 `[입력 필요]`를 번호로 모으고, 각 항목이 무엇을 채우는 자리인지와 답하는 방법을 한 줄씩 적는다. 그 뒤 다음 세 가지를 이 요청에 맞는 문장으로 제시하고 답을 기다려라.  
   ① 실제 브랜드·메뉴·기기 정보를 반영해 완성  
   ② 현재 추천값과 슬롯 구조를 유지해 완성  
   ③ 화면 흐름이나 구성부터 수정

## 문체 규칙

hybrid 문체를 사용하라. 화면 목록, 구성요소, 상태별 동작, 디자인 토큰, 접근성 조건은 짧은 목록과 표 중심의 개조식으로 작성한다. 화면의 목적과 사용자가 왜 쉽게 이해할 수 있는지는 짧은 서술형 문단으로 설명한다. 사용자에게 보이는 문구는 친절한 존댓말을 사용하되, 버튼 라벨은 “다음”, “담기”, “결제하기”처럼 짧은 동작형 표현으로 쓴다. “감성적인”, “고급스러운”, “세련된”처럼 화면 요소로 확인할 수 없는 표현은 쓰지 말고 글자 크기, 대비, 간격, 버튼 크기처럼 관찰 가능한 값으로 바꿔라.

## 문체 규칙 (휴머나이저 v1)

산출물의 산문 전체에 적용한다. 코드, 명령어, 인용문, 고유명사는 손대지 않는다.

- 종결어미를 하나로 고정하지 마라. ~다/~는데/명사형 종결을 섞고 장문과 단문을 교차시킨다.
- 서두 인사("물론입니다!", "~에 대해 알아보겠습니다")와 마무리 상투구("결론적으로", "도움이 되셨기를 바랍니다")를 쓰지 않는다. 마지막 구체 사실로 끝낸다.
- "첫째, 둘째" 기계 나열, 이모지, 문단마다 붙는 볼드 소제목 금지.
- 근거 없는 추상어("다양한", "효과적인", "전략적 접근")를 구체 서술로 바꿔라. 단 그 구체 정보는 사용자 입력과 검증 가능한 출처에 있는 사실만 쓴다. 인간답게 보이려고 세부를 지어내지 마라. 받지 못한 값은 [입력 필요] 슬롯으로 남긴다.
- 번역투를 피한다. "~에 있어서", "~을 통해" 남발과 "~되어지다" 같은 이중 피동 금지.
- 문두 접속사("또한", "하지만", "따라서")를 연속해서 쓰지 않는다. 문맥상 명확한 주어는 생략한다.
- 같은 핵심어를 한 문단에서 반복하지 마라. 억지 동의어로 돌려 말하는 과교정도 피한다.
- 오탐 가드: 오류 없는 문법, 한 번의 접속어, 격식 어휘는 그 자체로 AI 문체가 아니다. 신호가 여럿 겹칠 때만 고치고, 일부러 거칠게 쓰지 마라.

## 제출 전 자기 감사

초안을 완성한 뒤 스스로 두 가지를 점검하라. 어느 부분이 명백히 AI 문체로 읽히는가. 사용자 입력이나 검증 가능한 출처에 없는 사실을 단정한 곳이 있는가. 걸린 부분을 고쳐 쓴 다음 최종본만 출력한다. 점검 과정 자체는 출력하지 마라.

## 자기검증

제출하기 전에 다음 항목을 내부적으로 점검하고, 점검표나 통과 결과는 출력하지 마라. 문제가 발견되면 해당 부분을 고친 최종 설계안만 내라.

1. 분식집 키오스크 주문 흐름이 시작부터 완료까지 끊기지 않는가.
2. 어르신이 메뉴명, 가격, 수량, 다음 행동을 한눈에 확인할 수 있는가.
3. 메뉴·가격·브랜드 정보처럼 입력에 없던 사실을 추가하지 않았는가.
4. `[입력 필요: 실제 브랜드 색상·글꼴·로고]`, `[입력 필요: 판매할 분식 메뉴와 가격]`, `[입력 필요: 키오스크 화면 크기와 방향]`을 임의의 값으로 채우지 않았는가.
5. 로딩, 빈 장바구니, 메뉴 이미지 없음, 결제 실패, 네트워크 오류 상태가 빠지지 않았는가.
6. 오류가 발생했을 때 사용자가 재시도하거나 이전 단계로 돌아갈 수 있는가.
7. 터치 버튼이 작거나 서로 붙어 있어 실수하기 쉬운 구조가 아닌가.
8. 색상만으로 상태를 구분하지 않았는가.
9. 키보드 포커스 순서와 스크린리더 라벨이 화면 흐름에 맞는가.
10. 한글 어절 줄바꿈, 행간, 큰 글자와 고대비를 고려했는가.
11. KWCAG를 참고 기준으로 지목했지만 적용 범위나 법령 내용을 근거 없이 단정하지 않았는가.
12. 요청 범위를 벗어나 POS 연동, 재고 시스템, 실제 결제 API 같은 구현 세부를 사실처럼 추가하지 않았는가.
13. 화면 목록과 화면별 구성요소가 서로 다른 주문 흐름을 가리키지 않는가.
14. 디자인 토큰이 첫 화면에서 정해지고 이후 화면에서 일관되게 재사용되는가.

## 렌더 지시

**사용자가 읽을 부분**

분식집 키오스크 주문 화면, 어르신 중심의 큰 글자, 높은 명도 대비, 넓은 터치 영역, 명확한 현재 위치, 메뉴 카드 중심 구성, 한 화면 한 핵심 행동, 짧은 한국어 버튼 라벨, 장바구니 금액 고정 표시, 오류·빈 상태·로딩 상태 포함, KWCAG 참고, 한글 어절 단위 줄바꿈, 충분한 행간, 키보드 포커스 표시, 스크린리더 라벨

화면 간 고정 요소는 상단의 현재 단계 표시, 하단의 이전·다음 행동 영역, 장바구니 요약 위치, 큰 버튼 높이, 타이포그래피 단계, 간격 토큰이다. 실제 브랜드 색상·글꼴·로고가 입력되면 그 값을 적용하고, 입력되지 않은 값은 가독성을 우선한 추천값으로 표시한다.

**엔진에 붙여 넣을 부분**

분식집 키오스크 주문 UI, 어르신 친화적 큰 한글 글자, 높은 색상 대비, 넓은 터치 버튼, 메뉴 카드 그리드, 메뉴명과 가격의 명확한 계층, 수량 증가·감소 버튼, 고정 장바구니 요약, 단계 표시, 이전 버튼과 다음 버튼, 오류 상태 화면, 빈 장바구니 화면, 로딩 상태 화면, 충분한 행간, 어절 단위 한글 줄바꿈, 명확한 포커스 테두리, 단순한 평면 카드, 과도한 장식 없는 화면 구성

## 제외 지시

작은 글자, 좁은 터치 영역, 아이콘만 있는 버튼, 낮은 대비, 색상만으로 표시한 오류, 복잡한 다단계 메뉴, 숨겨진 장바구니, 과도한 애니메이션, 불필요한 팝업, 임의의 메뉴명, 임의의 가격, 워터마크

## 일관성 절차

연속 화면으로 설계하므로 첫 화면에서 단계 표시 위치, 장바구니 요약 위치, 기본 간격 토큰, 타이포그래피 단계, 버튼 높이, 포커스 표시 방식을 확정하고 이후 모든 화면이 같은 값을 인용하게 하라. 입력에 브랜드 앵커가 있으면 색상·글꼴·로고 문구를 모든 화면에서 글자 그대로 유지하라. 텍스트 설명만으로 화면 간 동일성이 보장되지 않으므로, 사용하는 설계 환경이 컴포넌트·스타일 토큰·참조 화면을 지원하면 첫 화면에서 확정한 토큰과 컴포넌트를 이후 화면에 재사용하라. 실제 제품의 브랜드 정보가 없으면 그 사실을 사용자에게 알리고 슬롯을 임의로 채우지 마라.

## 파라미터와 확인

- 화면 방향: `[입력 필요: 키오스크 화면 방향 — 세로 또는 가로]`  
  설치될 기기의 실제 화면 방향으로 채운다.
- 화면 크기: `[입력 필요: 키오스크 화면 크기 — 가로·세로 픽셀 또는 실제 기기 모델]`  
  개발·설계 대상 기기 사양으로 채운다.
- 브랜드 색상·글꼴·로고: `[입력 필요: 실제 브랜드 디자인 자료]`  
  기존 브랜드 가이드나 매장 자료로 채운다.
- 간격 단위: `[추천: 8pt 배수 — 큰 터치 영역과 반복되는 카드 간격을 일관되게 관리하기 좋음]`
- 기본 본문 글자 크기: `[추천: 20px — 키오스크를 서서 읽는 거리와 어르신의 가독성을 고려한 시작값]`
- 주요 버튼 높이: `[추천: 64px — 터치 오입력을 줄이면서 한글 라벨을 크게 배치하기 쉬운 크기]`
- 대비: `[추천: 본문과 배경의 명도 대비 4.5:1 이상 — 일반 텍스트 가독성 확보를 위한 기준값]`

화면 방향, 화면 크기, 브랜드 디자인 자료를 알려 주면 그 값을 반영해 완성하겠다. 추천값은 현재 설계에 그대로 사용할 수도 있고, 원하는 값이 있으면 바꿔 달라고 말해 달라.  
① 실제 정보를 채워 주면 반영해 완성하겠다.  
② 추천값과 현재 구조 그대로 완성하겠다.  
③ 주문 흐름이나 화면 구성을 먼저 수정하겠다.