플랫폼 · Point of Sale

POS

계산대 직원이 피크 타임에 서서, 빠르게, 반복적으로 누르는 화면입니다. 모든 터치 대상은 48px 이상이고, 주문 금액과 결제 버튼은 화면 어디서든 한눈에 보여야 합니다.

사용자
매장 직원 (계산대)
기기
Windows · Android 가로형 단말 (터치)
기준 해상도
1024×768 – 1920×1080
도메인
pos.ongi.site

대표 화면 — 주문 · 결제

1280×800 기준. 메뉴를 눌러 담고, 수량을 바꿔 보세요.

레이아웃 스펙

영역스펙
상단바64px · 매장명 · 직원 · 시각 · 네트워크/프린터 상태
카테고리가로 스크롤 탭 · 높이 56px · 선택 시 Inverse 채움
메뉴 타일4열 (1920 폭 5열) · 최소 160×120 · 이름 17px · 가격 tabular
주문 패널우측 400px 고정 · 수량 스테퍼 44px · 합계 28px Bold
결제 버튼패널 하단 고정 · 72px · 카드 결제(primary) + 현금/간편결제

플랫폼 토큰

항목값
data-platform"pos"
밀도Touch
기본 컨트롤 높이 (md)56px
기본 본문 크기17px
최소 터치 영역48px
라운드컨트롤 12px · 타일 16px
눌림 피드백scale 0.97 · 80ms (hover 없음)

핵심 패턴

상황처리
품절타일 흐리게 + ‘품절’ 뱃지 · 눌러도 담기지 않고 짧은 진동/토스트
옵션 필수 메뉴누르면 바텀 시트(태블릿은 중앙 모달) · 필수 옵션 미선택 시 담기 비활성
네트워크 끊김상단 warning 배너 · 오프라인 주문 대기열에 저장 후 자동 재전송
결제 실패주문 유지 + 실패 사유(한도 초과 등)와 재시도 · 다른 수단 버튼
취소 · 환불관리자 PIN(NumberPad) 확인 후 진행

POS는 hover에 의존하지 않습니다

툴팁 · 호버 메뉴 대신 눌림 상태와 명시적 버튼을 사용하세요. 긴 누름(long-press)은 보조 기능에만 씁니다.

이렇게 하세요

  • 결제 버튼은 항상 같은 위치
  • 금액은 tabular 숫자로 자리수 흔들림 방지
  • 파괴적 작업(전체 삭제)은 결제 버튼과 멀리

이렇게 하지 마세요

  • 작은 x 아이콘으로 항목 삭제
  • 스크롤해야 보이는 합계
  • 애니메이션 300ms 이상