- 디자인 토큰
- 0+
- 컴포넌트
- 0
- D3 차트
- 0
- 적용 플랫폼
- 0
시스템 구성
토큰에서 플랫폼까지,
하나로 이어지는 구조
파운데이션이 컴포넌트를, 컴포넌트가 플랫폼 화면을 만듭니다. 한 곳을 바꾸면 모든 제품이 함께 바뀌어요.
플랫폼 밀도
같은 컴포넌트,
다른 밀도.
코드는 그대로 두고 data-platform 값만 바꾸면 컨트롤 높이 · 글자 크기 · 터치 영역이 제품에 맞게 바뀝니다. 직접 눌러보세요.
- 컨트롤 높이
- 48px
- 본문 크기
- 15px
- 최소 터치 영역
- 44px
앱 · Mobile — 결제 수단·포인트·주문 내역을 관리하는 회원 전용 모바일 앱
컴포넌트
결제에 꼭 맞춘 컴포넌트
금액 입력, 결제 상태, 단계 진행처럼 결제 서비스에서 반복되는 순간을 위해 만들었어요.
라이브 쇼케이스
실제로 조립하면 이렇게
콘솔 대시보드를 시스템 컴포넌트와 D3 차트만으로 구성했어요. 모든 숫자는 tabular 숫자로 정렬됩니다.
일별 결제 추이
2026.09.01 – 09.28
- 이번 달
- 지난 달
실시간 거래
온기카페 합정점
21:54 · 토스페이
53,600원결제완료한끼식당 역삼
21:05 · 카카오페이
59,100원결제완료모닝베이커리
21:54 · 토스페이
36,600원결제완료한끼식당 역삼
20:21 · 네이버페이
30,600원결제완료한끼식당 역삼
20:54 · 삼성카드
40,400원결제대기모닝베이커리
20:21 · 토스페이
33,300원결제취소
적용 플랫폼
매장부터 손안까지
콘솔Console
매출 확인, 메뉴·직원·정산 관리를 위한 가맹점 전용 백오피스
POSPoint of Sale
피크 타임에 빠르고 실수 없이 주문을 받고 결제하는 터치 우선 단말 UI
키오스크KIOSK
처음 보는 사람도 멀리서 읽고 한 손으로 끝낼 수 있는 셀프 주문 UI
앱App
결제 수단·포인트·주문 내역을 관리하는 회원 전용 모바일 앱
QR 주문QR Order
설치·가입 없이 스캔 한 번으로 메뉴를 고르고 주문하는 경량 웹
결제Pay
가맹점이 원하는 PG사를 연결하고, 고객은 PG와 관계없이 같은 화면에서 결제하는 통합 결제 플랫폼
이벤트Event
행사 구역의 참여 매장 · 영업 상태 · 공지를 모아 보고 QR 주문으로 이어지는 안내 페이지
투표Vote
베스트 부스 · 신메뉴 선호도처럼 행사와 매장이 여는 투표에 한 번의 터치로 참여하고 결과를 보는 페이지
대기 · 예약Waiting & Reservation
원격 줄서기로 순서를 받고 호출 알림을 기다리거나, 날짜 · 시간을 골라 방문을 예약하는 페이지
홈페이지Website
ON:GI 서비스 소개 · 도입 문의 · POS 다운로드 · 고객지원을 제공하는 공식 웹사이트
