플랫폼 · App

앱

회원 고객이 한 손으로 결제 수단 · 포인트 · 주문 내역을 확인합니다. 카드사 앱처럼 ‘내 돈’이 가장 먼저 보이고, 자주 쓰는 동작은 엄지가 닿는 하단에 둡니다.

사용자
ON:GI 회원 고객
기기
스마트폰 (네이티브 셸 + 웹뷰)
기준 해상도
360 – 430pt
도메인
iOS · Android

대표 화면 — 홈

9:41
ON:GI

ON:GI 머니

84,200원

포인트 3,120P

최근 결제

  • 온기카페 성수점오늘 14:05−12,800원
  • 머니 충전오늘 11:20+50,000원
  • 한끼식당 역삼어제 12:31−9,500원

레이아웃 스펙

영역스펙
좌우 여백20px (360pt 기기 16px)
상단 앱바56px · 타이틀 20px Bold · 알림 · 설정
머니 카드라운드 24px · 잔액 32px Bold · 충전 / 결제 버튼
퀵 액션4열 아이콘 그리드 · 아이콘 영역 56px
하단 탭바64px + Safe Area · 5개 · 선택 탭만 채움 아이콘

플랫폼 토큰

항목값
data-platform"app"
밀도Mobile
기본 컨트롤 높이 (md)48px
기본 본문 크기15px
최소 터치 영역44px
라운드컨트롤 12px · 카드 20–24px
Safe Areaenv(safe-area-inset-*) 필수

핵심 패턴

패턴설명
결제 인증생체 인증 우선 → 실패 시 PIN(NumberPad · PinDots)
금액 가리기잔액 옆 눈 아이콘 · 설정값 기억
거래 내역날짜 그룹 헤더 · 가맹점명 + 금액(취소는 취소선 · negative 아님)
바텀 시트필터 · 옵션 선택은 모달 대신 바텀 시트

이렇게 하세요

  • 주요 CTA는 하단 고정 전체 폭 버튼
  • 뒤로가기 시 입력값 유지
  • 네이티브 셸과 웹뷰의 상단바 스타일 일치

이렇게 하지 마세요

  • 상단 우측에 핵심 결제 버튼
  • 홈에 배너 3개 이상
  • 시스템 폰트 크기 설정 무시