십시일반은 근처 편의점·프랜차이즈를 지도에서 찾아 QR로 결제하는 React Native 앱입니다. 로그인부터 신원 인증, 매장 탐색, 결제, 주문 확인까지 한 흐름으로 이어집니다.

프론트엔드/메인 개발로 화면 흐름을 설계하고 구현했습니다. 모바일 앱, FastAPI 백엔드, 가맹점용 POS까지 세 갈래입니다. 제11회 선린 해커톤 은상입니다.

질문은 하나입니다. 인증과 결제를 여러 앱으로 쪼개지 않고, 가맹점 앞에서 바로 끝낼 수 있는가.

십시일반2025

편의점과 프랜차이즈 앞에서 앱을 여러 개 열지 않습니다. 십시일반은 신원을 확인하고, 근처 가맹점을 지도에서 고른 뒤, QR 한 장으로 결제합니다.

프론트엔드React NativeQR 결제은상
십시일반

초점

어려운 건 QR을 그리는 일이 아닙니다. 인증, 매장, 결제, 주문을 한 상태 머신으로 끊기지 않게 잇는 일입니다.

핵심 질문: 가맹점 앞에 선 사람이, 다른 앱으로 나가지 않고 결제를 끝낼 수 있는가.

네 가지에 집중했습니다.

인증이 먼저

소득·직업 증명을 올리고 사진을 확인하기 전에는 결제가 열리지 않습니다. 혜택을 받는 사람이 맞는지가 출발점입니다.

근처에서 고름

홈에서 자주 가는 가맹점을 보고, 지도와 검색으로 나머지를 찾습니다. 카테고리와 거리가 먼저입니다.

QR이 곧 결제

금액을 고르면 QR이 생기고 만료 시간이 돌아갑니다. 가맹점 POS가 읽으면 주문이 이어집니다.

목으로 먼저 검증

백엔드 연동 전에 화면 전환과 상태를 목 데이터로 맞춰 두었습니다. 연동이 들어와도 흐름이 바뀌지 않게 했습니다.

구성

  • 구글 로그인
  • 온보딩 · 서류 업로드
  • 홈 · 지도 · 검색
  • QR 결제 · 주문 상태

POS

  • QR 수신
  • 주문 처리
  • 가맹점 온보딩

백엔드

  • FastAPI
  • 인증 · 가맹점
  • QR 결제 API

스택

  • React Native · Expo
  • TypeScript
  • NestJS · FastAPI
  • Next.js POS

흐름

앱 흐름은 선린톤에서 짠 그대로입니다. 로그인 다음이 온보딩과 서류 인증이고, 그다음이 홈·지도·검색, 마지막이 QR과 주문 상태입니다.

아래 화면은 그 순서입니다. 화살표로 넘기면 인증부터 결제까지 이어집니다.

로그인 · 온보딩

구글 로그인 후 서비스 혜택을 위해 신원 인증을 안내합니다.

서류 인증

소득·직업 증명을 찍고, 제대로 찍혔는지 확인한 뒤에야 넘어갑니다.

홈 · 지도 · 검색

잔액과 자주 가는 가맹점, 지도 핀, 추천 검색이 한 앱에 있습니다.

QR · 주문

QR을 보여주고 만료를 셉니다. 주문이 잡히면 상태 화면으로 갑니다.

제품

QR 결제 버튼, 사용 가능 금액, 카테고리, 자주 가는 가맹점이 한 화면에 있습니다. 결제로 가는 가장 짧은 길입니다.

지도 · 검색

지도에서 가맹점 핀을 보고, 검색에서 최근 검색어와 추천 매장을 고릅니다. 위치와 카테고리가 목록을 자릅니다.

QR 결제

현장 결제 QR과 만료 시간이 가운데에 있습니다. 가맹점이 읽으면 주문이 시작되고, 조리·완료 상태가 같은 앱에 남습니다.