Project detail

Project detail

올리브 페이

급식 결여 아동을 위한 꿈나무 카드 간편 결제 서비스

FinTech

7 weeks

꿈트리

Github

개요

현재 아동 급식 지원 시스템의 여러 문제를 해결하는 것을 목표로 만들게 되었습니다. 지원금이 전국 평균 점심 식대(2024년 기준 10,096원)에 미치지 못하는 부족한 급식비(2024년 9,000원) 문제, 가맹점 정보를 찾기 어렵고 검색 시스템이 불편한 문제, 꿈나무 카드를 이용한 결제에 대한 아이들의 심리적 장벽, 그리고 부정확한 가맹점 정보로 인해 원활한 서비스 제공이 어려운 데이터 비일관성 문제를 해결하고자 한 서비스입니다.


주요 기능

  • QR 결제

    • 가맹점 주는 금액을 입력하여 QR 생성

    • 아동은 QR 코드를 인식, 금액 확인 후 간편 결제 비밀번호를 입력하여 결제 진행

    • 결제는 적용 쿠폰, 결식 아동 지원, 추가 금액 순의 프로세스를 가짐

  • 가맹점 지도

    • 커스텀 마커를 통한 가맹점의 쿠폰 보유 유무 구분

    • 최대 지도 줌 레벨 설정을 통해 불필요한 렌더링 방지

    • 새로 고침을 통한 사용자 현재 위치 변경

  • 기부 및 쿠폰 생성

    • 기부자는 자신의 계좌를 인증하고 금액과 그에 맞는 쿠폰을 가맹점에게 기부

    • 이메일에 주기적인 후원 내역 발송

  • 쿠폰 관리

    • 쿠폰은 아동이 하루에 최대 2개(점심, 저녁) 다운 가능

    • 쿠폰은 2,000원, 4,000원 두 가지로 나뉘며 차액에 대해선 공동 기부금 처리

  • 회원 관리

    • 아동은 회원 가입 시 필수적으로 결식 아동 카드를 등록해야 서비스 이용 가능

    • 카드 등록은 OCR을 통해 기초 정보 등록 가능

  • 리뷰 관리

시스템 아키텍쳐

Frontend

  • Vite

  • React

  • Kakao map

  • Axios

  • Jotai

  • Tanstack Query

  • Zxing

  • Stomp

  • PWA

  • Vite

  • React

  • Kakao map

  • Axios

  • Jotai

  • Tanstack Query

  • Zxing

  • Stomp

  • PWA

Backend

  • Spring Boot

  • MySQL

  • Amazon S3

  • AWS CloudFront

  • Eureka

  • Redis

  • Clova OCR

  • CoolSMS

  • Spring Boot

  • MySQL

  • Amazon S3

  • AWS CloudFront

  • Eureka

  • Redis

  • Clova OCR

  • CoolSMS

CI / CD

  • Docker

  • Jenkins

  • Nginx

  • SSL

  • Ubuntu

  • AWS EC2

  • AWS S3

  • Docker

  • Jenkins

  • Nginx

  • SSL

  • Ubuntu

  • AWS EC2

  • AWS S3

Collaboration

  • Git

  • Jira

  • Notion

  • MatterMost

  • Figma

  • Git

  • Jira

  • Notion

  • MatterMost

  • Figma

담당 구현

결제

가맹점 주는 금액을 입력하여 QR을 생성하고 결식 아동은 그 QR을 통해 결제 진행. 결제는 적용한 쿠폰, 꿈나무 카드, 차액 카드 순으로 이루어지며 결제 요청에 대한 응답으로 웹소켓을 열고 결제 결과 메세지 수신

가맹점 지도

커스텀 마커를 통한 쿠폰 유무 분리 및 줌 레벨 조절. Geolocation API를 이용한 현재 위치 조회 및 위치, 카테고리 별 조회, 터치 감지를 통한 가맹점 리스트, 가맹점 상세 정보 렌더링 조절

데이터 조회

Query를 이용하며 리스트 데이터는 사이즈를 가지며 indexing을 통해 조회 최적화. 더 보기 버튼을 통해 추가 데이터 적재. refetch 플래그를 통한 데이터 갱신 조절. 지도 가맹점 데이터는 중심 좌표 기준으로 500m 내 조회

커스텀 라우팅

유저 권한 별 커스텀 라우팅을 통한 접근 제어. 결제 관련 서비스는 결식 아동만 이용 가능하며 가맹점 관리 서비스는 가맹점 주만 접근 가능. 모두가 이용할 수 있는 지도 서비스에선 권한에 따라 찜 버튼, 쿠폰 다운 등의 렌더링 조절

PWA

홈 화면에 바로 가기를 추가하여 네이티브 앱과 유사한 사용자 경험을 제공. 오프라인 페이지 및 헤더 바 색상 커스텀, 디바이스 별 아이콘 크기 최적화

SEO

서비스 전체 meta 태그 및 react-helmet을 통한 meta 태그 동적 설정. URL 목록 제공을 위한 site.xml. 크롤링 조절 robots.txt.

서비스 대표 화면

마이 페이지

사용자 유형에 따라 메인 페이지에서 자신의 정보를 확인하고 다양한 서비스에 쉽게 접근할 수 있습니다.

결제 진행

QR 코드를 인식하여 가맹점 정보와 금액을 확인하고, 쿠폰과 카드 적용 후 간편 비밀번호를 입력하여 결제를 진행할 수 있습니다.

식당 지도 및 리뷰

지도를 통해 식당을 찾고, 해당 식당의 정보를 확인할 수 있습니다. 위치나 식당 이름, 또는 음식 카테고리를 이용해 보다 구체적으로 검색할 수 있습니다.

성과 또는 배운 점

프로젝트 우수상

이 프로젝트는 초반 설계 단계부터 UI, 기능, API, 에러 코드까지 팀원 모두가 꼼꼼하게 참여하여, 모두가 서비스에 대해 완벽히 이해하고 시작한 프로젝트였습니다. 덕분에 개발 과정에서 갈등을 최소화하고 시간 관리를 잘 해내어, 모든 기능이 완성도 있게 동작하는 서비스를 만들 수 있었고, 그 결과 우수상을 수상하는 성과를 거두었습니다.

기능 최적화

결제 기능에서 쿠폰 적용, 꿈나무 카드 결제, 차액 카드 결제 등 여러 기능을 최적화하기 위해 요청 수를 줄이고 latency를 최소화하는 방법을 고민했습니다. 이를 위해 각 기능의 아키텍처를 한 번의 요청으로 처리하고, 결과를 웹소켓을 통해 수신하는 방식으로 최적화를 구현했습니다. 이 경험을 통해 기능 최적화의 중요성을 깊이 실감하며, 성능 향상에 중점을 두고 작업을 진행하게 되었습니다.

코드 최적화

코드 최적화 과정에서 불필요한 렌더링과 메모리 사용을 줄이기 위한 전략을 고민했습니다. 그 일환으로, 메서드의 메모리 사용과 호출 빈도를 고려하여 최적화를 진행했습니다. 예를 들어, useCallback을 활용해 메서드를 메모리에 캐싱할 때, 자주 호출되는 메서드에만 적용하는 방식으로 성능을 개선했습니다. 이 경험을 통해 효율적인 최적화 전략의 중요성을 실감했습니다.