플랫폼 · Event

이벤트

축제 · 행사장 구역마다 붙은 QR을 스캔하면 열리는 안내 페이지입니다. 야외에서 걸으며 보는 화면이므로, 지금 주문할 수 있는 매장이 한눈에 보여야 합니다.

사용자
행사장 · 축제에서 QR을 스캔한 방문객
기기
모바일 브라우저 (야외 · 이동 중)
기준 해상도
320 – 430px
도메인
event.ongi.site

대표 화면 — 구역 매장 목록

분류 탭을 바꾸거나 공지 카드를 눌러 보세요.

9:41
ON:GI

2026.09.26 – 09.28 · 서울숲 광장

성수 가을 푸드 페스티벌

A구역참여 매장 6곳

행사장 지도 · 결제 시뮬레이션

부스를 눌러 메뉴를 담고 결제까지 진행해 보세요. 위 스위치로 결제 승인 · 거절 결과를 바꿀 수 있습니다.

결제 결과
9:41

서울숲 광장 · A/B구역

행사장 지도

메인 무대
입구
화장실
쉼터
A구역B구역
  • 영업 중
  • 현장 결제
  • QR 품절
  • 준비 중

부스를 눌러 메뉴를 보고 바로 주문 · 결제해 보세요.

단계화면핵심 요소
1행사장 지도무대 · 입구 · 편의시설 · 구역 표시 · 부스 핀(로고 이니셜 + 상태 점 + 부스 번호) · 범례
2부스 시트매장명 · 상태 배지 · 대기 시간 · 영업 중일 때만 ‘메뉴 보고 주문하기’ 활성
3메뉴 담기메뉴별 담기 → 수량 스테퍼 · CTA에 개수와 합계 금액
4결제부스 · 행사명 → 34px 금액 → 주문 요약 → 결제 수단 → 금액이 들어간 CTA
5결과승인: 주문 번호 · 수령 부스 · 처리 PG → 지도에 ‘내 주문’ 표시 / 거절: 사유 + 담은 메뉴 유지 + 다른 수단으로 재시도
결제 중에는 CTA와 뒤로가기를 잠가 이중 결제를 막습니다. PG사 이름은 결과 화면의 영수증 정보에만 보여줍니다.

주최사 상황판

행사 주최사 · 운영사가 보는 실시간 화면입니다. 구역을 바꾸거나 부스를 눌러 보세요.

sales.ongi.site/event-groups/12/board

레이아웃 스펙

영역스펙
행사 헤더브랜드 그라디언트 · 기간 · 장소 · 행사명 24px · 구역 칩 · 참여 매장 수
공지 카드헤더에 겹쳐 띄운 카드 · 최신 공지 1줄 · 누르면 바텀 시트로 전체 공지
분류 탭행사 운영자가 등록한 2차 그룹 순서 그대로 · 미분류는 ‘기타’
매장 행로고 56px · 매장명 + 상태 배지 · 분류 · 메뉴 수 · 예상 대기 · 우측 행동

매장 상태 배지

상태배지우측 행동조건
영업 중positiveQR 주문POS 영업 중 + QR 판매 메뉴 1개 이상
현장 결제info메뉴 보기부스에서 직접 결제하는 매장
QR 품절warning비활성QR 판매 메뉴가 모두 품절
준비 중neutral · 행 흐리게비활성POS 영업 전 · 마감
매장 상태와 품절 여부는 행사 중 계속 바뀌므로 주기적으로 다시 불러오고, 바뀐 행만 갱신해 스크롤 위치를 유지합니다.

플랫폼 토큰

항목값
data-platform"event"
밀도Mobile
기본 컨트롤 높이 (md)48px
기본 본문 크기15px
최소 터치 영역44px
행사 테마 색운영자가 입력한 HEX는 헤더 배경에만 적용, 버튼 · 배지는 시스템 토큰 유지

핵심 패턴

이렇게 하세요

  • 영업 중인 매장을 위로 정렬
  • 야외 햇빛을 고려해 본문 대비 7:1 이상
  • 공유 버튼으로 일행에게 링크 전달

이렇게 하지 마세요

  • 행사 테마 색으로 상태 배지 색 바꾸기
  • 매장 로고 없이 이름만 나열
  • 공지를 전면 팝업으로 반복 노출