플랫폼 · QR Order

QR 주문

테이블의 QR을 스캔한 비회원 고객이 설치 · 가입 없이 주문하고 결제합니다. 카카오톡 · 네이버 등 인앱 브라우저에서 열리므로 가볍고, 첫 화면이 1초 안에 떠야 합니다.

사용자
테이블에서 QR을 스캔한 비회원 고객
기기
모바일 인앱 브라우저
기준 해상도
320 – 430px
도메인
order.ongi.site

대표 화면 — 주문 · 완료

9:41
테이블 12

온기카페 성수점

주문하면 자리로 가져다 드려요 · 평균 8분

  • 아메리카노

    BEST

    3,000원

    2

  • 카페라떼

    3,600원

  • 바닐라라떼

    BEST

    4,000원

    1

  • 카라멜 마키아토

    4,300원

  • 콜드브루

    NEW

    4,000원

  • 아인슈페너

    4,500원

  • 플랫화이트

    3,900원

  • 에스프레소

    2,500원

9:41

주문이 접수됐어요

메뉴가 준비되면 자리로 가져다 드릴게요

  1. 1주문 접수
  2. 2준비 중
  3. 3서빙 완료
주문번호A-142
아메리카노 × 26,000원
바닐라라떼 × 14,000원
결제금액10,000원

토스페이 · 14:05

주문 흐름

단계화면핵심 요소
1메뉴매장명 · 테이블 번호 · 카테고리 스티키 탭 · 하단 장바구니 CTA
2옵션바텀 시트 · 필수 옵션 먼저 · 담기 버튼에 합계 표시
3장바구니수량 스테퍼 · 요청사항 · 결제 방식(선결제/후결제)
4결제pay.ongi.site로 이동 · 간편결제 우선 · 카드 · 더치페이(N분의 1)
5완료주문 번호 · 예상 시간 · 추가 주문 버튼

플랫폼 토큰

항목값
data-platform"qr"
밀도Mobile
기본 컨트롤 높이 (md)48px
기본 본문 크기15px
최소 터치 영역44px
최소 폭320px에서 잘림 없음
초기 JS150KB 이하 목표 (d3 등 무거운 모듈 금지)

핵심 패턴

인앱 브라우저 제약

하단 CTA는 브라우저 툴바에 가려지지 않도록 100dvh와 env(safe-area-inset-bottom)을 함께 쓰세요. 새 창 열기 · 팝업 결제는 차단될 수 있으니 같은 창 리다이렉트를 기본으로 합니다.

이렇게 하세요

  • 테이블 번호를 항상 상단에 표시
  • 장바구니 CTA에 수량 + 금액
  • 결제 실패 시 장바구니 유지

이렇게 하지 마세요

  • 주문 전에 회원가입 · 앱 설치 유도
  • 첫 화면 전면 팝업 공지
  • 이미지 없이 텍스트만 긴 메뉴 목록