키오스크 UI는 ‘예쁜 화면’보다 처음 온 고객이 메뉴를 찾고, 옵션을 고치고, 결제까지 실수 없이 끝낼 수 있는지가 중요합니다. 특히 메뉴가 많을수록 첫 화면의 정보량을 줄이고, 현재 선택 상태와 되돌아가는 경로를 눈에 보이게 만드는 편이 좋습니다.
1. 첫 화면에서 ‘무엇을 눌러야 하는지’ 한눈에 보여야 합니다
첫 화면에 광고 배너, 이벤트, 메뉴, 회원가입, 쿠폰을 모두 같은 크기로 놓으면 고객이 주문 시작점을 찾기 어렵습니다. 매장 주문의 핵심 행동이 ‘메뉴 고르기’라면 메뉴 카테고리와 주문 시작 버튼이 가장 먼저 보이게 하고, 부가 기능은 한 단계 뒤로 보내는 편이 낫습니다.
2. 메뉴 사진·이름·가격은 같은 시야에 묶으세요
사진만 크게 보여주고 가격을 상세 화면에 숨기면 비교가 느려집니다. 메뉴 카드 안에서 사진, 메뉴명, 기본 가격, 대표 옵션 여부를 함께 보여주면 고객이 여러 메뉴를 빠르게 비교할 수 있습니다.
사진과 설명을 어떤 순서로 배치할지는 메뉴 사진과 설명 배치 기준에서 더 구체적으로 볼 수 있습니다.
3. 글자 대비와 버튼 크기는 장식보다 먼저 확인하세요
W3C WCAG 2.2는 일반 텍스트에 원칙적으로 4.5:1 이상의 명도 대비를 요구하고, 포인터 입력 대상의 최소 크기 기준도 제시합니다. 키오스크가 웹 기술을 쓰는지와 관계없이 작은 회색 글씨나 촘촘한 ‘+/-’ 버튼이 주문 오류를 만들지 실제 사용자로 확인하는 것이 중요합니다. WCAG 2.2 원문
WCAG 2.2의 Target Size (Minimum)는 일정 예외를 제외하고 최소 24×24 CSS 픽셀의 포인터 입력 영역을 제시합니다. 실제 키오스크 화면에서는 손가락 크기, 화면 높이, 장갑 사용 등을 고려해 이보다 넉넉한 영역을 테스트하는 편이 안전합니다. WCAG 2.2 새 기준 안내
4. 선택된 옵션은 색상 하나로만 표시하지 마세요
‘선택됨’을 초록색 테두리만으로 구분하면 색을 잘 구분하지 못하는 사용자나 밝은 매장 화면에서 놓칠 수 있습니다. 체크 표시, 굵은 테두리, ‘선택됨’ 텍스트처럼 두 가지 이상의 신호를 함께 쓰는 편이 좋습니다.
| 상태 | 화면에서 보여줄 것 |
|---|---|
| 메뉴 선택 | 선택 표시 + 수량 |
| 옵션 추가 | 옵션명 + 추가금 |
| 품절 | 품절 텍스트 + 선택 비활성화 |
| 오류 | 오류 이유 + 다음 행동 |
5. ‘뒤로’와 ‘수정’은 주문을 초기화하지 않아야 합니다
고객이 음료 사이즈 하나를 바꾸려고 했는데 첫 화면으로 돌아가 장바구니 전체가 사라지면 재주문과 이탈이 늘어날 수 있습니다. 각 단계에 뒤로가기와 수정 버튼을 두고, 이전에 선택한 값은 가능한 한 유지해야 합니다.
특히 결제 실패 후에는 ‘다시 결제’, ‘결제수단 변경’, ‘주문 내용 수정’ 중 무엇을 할 수 있는지 명확하게 보여주는 편이 좋습니다.
6. 결제 직전에는 주문 전체를 한 번에 확인하게 하세요
최종 화면에는 메뉴명, 수량, 선택 옵션, 추가금, 할인, 최종금액을 한 화면에서 확인할 수 있게 합니다. 취소하기 어려운 선택일수록 결제 전에 다시 확인할 기회를 주는 것이 중요합니다.
UI 개선은 ‘선호도 설문’보다 실제 주문 과제로 검증하세요
“어느 화면이 더 예쁜가”만 물어보기보다 처음 방문한 사용자가 대표 메뉴를 찾는 데 걸린 시간, 옵션 수정 성공 여부, 결제 오류 후 복구 여부를 관찰합니다. 고령 사용자, 작은 글씨를 읽기 어려운 사용자, 처음 키오스크를 쓰는 사람을 포함하면 실제 문제를 더 빨리 찾을 수 있습니다.
- 대표 메뉴 하나 주문하기
- 옵션을 잘못 선택한 뒤 수정하기
- 품절 메뉴를 다른 메뉴로 바꾸기
- 결제수단을 중간에 변경하기
- 장바구니에서 수량을 줄이기
좋은 키오스크 UI는 사용자가 화면을 오래 보게 만드는 UI가 아니라, 무엇을 골랐는지 계속 이해하면서 실수를 바로 고치고 주문을 끝내게 하는 UI입니다. 메뉴 정보, 접근성, 오류 복구를 같은 주문 흐름 안에서 점검하세요.
