메뉴 사진과 설명을 잘 배치하려면 사진을 크게 만드는 것보다, 사진 바로 옆에서 메뉴명·가격·핵심 차이·옵션을 한 번에 이해할 수 있게 만드는 것이 먼저입니다. 사용자가 사진을 보고도 다시 위아래로 이동해 가격이나 옵션을 찾아야 한다면 화면은 화려해도 주문 흐름은 길어집니다.
사진은 ‘예쁘게’보다 ‘무엇을 받는지’ 보여줘야 합니다
대표 사진은 실제 판매 단위와 구성에 가까워야 합니다. 세트 메뉴라면 무엇이 포함되는지, 사이즈가 여러 개라면 사진만으로 크기를 과장해 보이지 않는지 확인하는 편이 좋습니다. 장식 배경이나 소품 때문에 실제 음식이 작게 보이는 사진보다 메뉴 자체를 쉽게 구분할 수 있는 사진이 선택에 유리합니다.
사진과 메뉴명·가격을 한 덩어리로 묶으세요
사용자가 한 메뉴를 볼 때 최소한 사진, 메뉴명, 기본 가격, 핵심 옵션이 같은 시야에 들어오도록 배치합니다. 가격을 별도 화면에 숨기거나 옵션 선택 뒤에야 최종 금액이 보이게 하면 메뉴끼리 비교하기 어렵습니다. 할인이나 세트 가격을 표시할 때도 적용 조건을 바로 옆에서 확인할 수 있어야 합니다.
설명은 긴 문장보다 ‘차이를 만드는 정보’가 먼저입니다
- 재료·맛: 매운맛, 주요 소스, 핵심 재료처럼 선택을 바꾸는 정보
- 구성: 단품인지 세트인지, 음료·사이드 포함 여부
- 옵션: 사이즈, 추가 토핑, 온도처럼 결제 금액에 영향을 주는 항목
- 주의 정보: 매장에서 안내가 필요한 알레르기·품절·교체 가능 여부
모든 설명을 첫 화면에 펼치기보다는 선택에 필요한 핵심만 먼저 보여주고, 추가 설명은 세부 화면에서 확인하도록 나누는 편이 읽기 쉽습니다.
사진만으로 메뉴를 구분하게 만들면 안 됩니다
사진이 비슷한 음료나 사이드 메뉴는 텍스트 이름이 분명해야 합니다. W3C의 WCAG 2.2는 텍스트 대비와 사용자 인터페이스 요소의 시각적 구분을 접근성 기준으로 제시합니다. 일반 텍스트는 원칙적으로 배경과 최소 4.5:1 대비가 요구되고, UI 요소도 인접 색상과 구분돼야 합니다. WCAG 2.2 원문
손가락으로 누르는 화면은 터치 영역까지 확인하세요
키오스크나 모바일 주문에서는 작은 ‘+’, ‘-’, 체크박스 때문에 잘못 누르는 문제가 생길 수 있습니다. WCAG 2.2의 Target Size (Minimum)는 포인터 입력 대상에 최소 크기 기준을 두고 있습니다. 실제 화면에서는 버튼 사이 간격과 함께 테스트하고, 선택 상태가 색상 하나만으로 표시되지 않게 만드는 것이 좋습니다. WCAG 2.2 새 기준 설명
장바구니에서 한 번 더 확인할 정보
| 확인 항목 | 보여줄 내용 |
|---|---|
| 메뉴 | 메뉴명과 선택한 사이즈 |
| 옵션 | 추가·제외한 재료와 수량 |
| 가격 | 기본가와 추가금, 최종 금액 |
| 수정 | 결제 전 바로 되돌아가 수정할 수 있는 버튼 |
특히 옵션이 많은 메뉴는 결제 직전에 사용자가 자신이 무엇을 골랐는지 다시 확인할 수 있어야 합니다. 잘못 선택했을 때 처음부터 다시 주문하게 만드는 구조는 피하는 편이 좋습니다.
배치 변경은 ‘더 예뻐졌는지’보다 주문 과제로 검증하세요
대표 메뉴 찾기, 옵션 변경하기, 장바구니에서 수량 고치기처럼 실제 주문 과제를 정한 뒤 변경 전후를 비교합니다. 특정 메뉴를 더 많이 팔기 위해 사진 크기만 조정하기보다, 사용자가 필요한 정보를 놓치지 않고 선택을 완료하는지가 우선입니다.
정리하면 사진은 메뉴를 알아보게 하고, 텍스트는 사진만으로 알 수 없는 차이를 설명하며, 가격과 옵션은 같은 맥락 안에서 확인할 수 있게 배치해야 합니다. 여기에 대비·터치 영역·수정 경로까지 점검하면 사진과 설명이 실제 주문 흐름을 돕는 화면에 가까워집니다.
