Next.js
Flutter 앱에서 WebView로 UI를 재사용할 수 있게 하고, OAuth 인증 흐름을 웹에서 구현하기 위해 사용했습니다.
공유 디미페이
한국디지털미디어고등학교 매점 결제 QR 코드 공유 앱.
Overview
한국디지털미디어고등학교에서 정해진 금액만큼을 선물 받으면 앱에서 결제 QR 코드를 공유받아 매점에서 그 금액만큼 사용할 수 있게 하는 앱입니다.
Motivation
고등학교 3학년 때 작은 이벤트를 진행해서 친구들이나 후배들에게 매점을 사줘야 할 때가 있었습니다. 다만 고등학교 3학년이 되면서 학업으로 인해 따로 만나서 매점을 사줄 시간이 없어, 저희 학교에서 매점 결제를 위해 사용하던 앱인 '디미페이'를 활용해야겠다는 생각을 했습니다.
Screenshots
서비스 화면
Stack
기술 선택 이유
Flutter
Android/iOS 두 가지 플랫폼에서 앱을 출시하기 위해 사용했습니다.
Spring Boot
외부 API 연동과 유저 데이터 관리, 결제 QR 관리 등을 서버에서 안정적으로 처리하기 위해 사용했습니다.
PostgreSQL
사용자들의 남은 잔액을 관리하기 위해 사용했습니다.
Key Features
- 로그인을 하여 본인의 남은 잔액을 확인할 수 있습니다.
- 잔액이 남아있다면 QR코드가 생성되어 매점에서 이용할 수 있습니다.
Architecture
- Next.js는 웹 화면, Flutter는 웹뷰를 활용한 앱 화면, Spring Boot는 백엔드로 구성했습니다.
- Next.js 서버는 인증을 담당하고, Spring Boot 서버는 실제 결제 부분 및 유저 데이터 관리를 담당했습니다.
- SSE를 사용해 실시간으로 결제 진행 상태를 전달받고 QR 코드도 만료되지 않도록 관리했습니다.
- presentation/application/domain/infrastructure 레이어로 나눠 UI, 비즈니스 로직, 데이터 접근 책임을 분리했습니다.
Result
외부 결제 API와 SSE를 활용해 QR 토큰 갱신, 결제 상태 실시간 동기화, 중복 결제 방지까지 포함한 결제 흐름을 구현했습니다.
Troubleshooting
문제와 해결
결제 진행 상태를 표시해야 했던 문제
SSE를 사용하여 서버로부터 실시간으로 결제 진행 상태를 전달받아 화면에 표시했습니다.
여러 사용자가 동시에 결제 QR을 사용할 시 결제 상황을 추적하기 어려웠던 문제
한 번에 한 명의 사용자만 QR 코드를 이용할 수 있도록, 현재 사용 중인 사용자 아이디를 저장했습니다.
QR코드가 만료되는 문제
QR코드가 일정 시간이 지나면 만료되기 때문에, 서버에서 만료되기 2초 전 새로운 QR코드를 발급해 보냈습니다.