PPYAKK.BANK
금융 상품 비교 및 추천 애플리케이션 프로젝트
2024.05.16 ~ 2024.05.24 (2주)
사용 기술
담당 역할
실시간 환율 정보 대시보드 구현 및 주요 통화 환율 변동 추이 시각화 및 차트를 활용한 은행별 예·적금 상품을 한눈에 비교할 수 있도록 시각화 + 사용자의 자산, 수익 등의 정보를 통해 기존 사용자들이 가입한 예적금 데이터들과 비교하여 적절한 예적금 상품 추천 알고리즘 구현
프로젝트 개요
목표
- •사용자의 연봉, 자산, 연령대 등의 개인정보를 기반으로 적절한 예적금 상품을 추천해줍니다.
- •사용자 맞춤형 금융 솔루션을 제공하여 금융 의사결정 과정을 간소화하고 최적의 수익률을 제공하는 상품 선택을 도와줍니다.
배경
- •시중에 존재하는 수 많은 예적금 상품 중 적절한 상품을 고르기는 어려우므로 자신의 금융상태와 가장 유사한 유저들이 가입한 금융상품을 추천하고자 했습니다.
주요 기능
금융, 환율, 지도 API를 이용한 사용자에게 편의성 제공 및 예적금 추천
- •금융결제원 오픈API, 카카오톡 지도 API를 활용하여 데이터 제공
사용 기술
기술 스택
선택 이유
Vue.js
컴포넌트 기반 아키텍처로 재사용성 높은 UI 개발 및 반응형 데이터 바인딩 활용했습니다.
Bootstrap 5
반응형 그리드 시스템과 UI 컴포넌트 활용으로 개발 효율성 증대시켰습니다.
Django
Python 기반의 강력한 MVT(Model-View-Template) 아키텍처로 백엔드 시스템 신속 구축했습니다.
구현 사항
- •API 통합: 여러 API의 비동기 요청을 효율적으로 관리하기 위한 Promise.all 패턴 적용했습니다.
- •추천 알고리즘 구현: 10,000개 더미데이터 전처리 및 정규화 과정 구현으로 추천 시스템 신뢰성있는 알고리즘을 연구했습니다.
- •UI/UX 측면 추가: 직관적인 단계별 입력 폼 설계로 사용자 이탈률 감소 목표로 했습니다.
예적금 데이터 조회
은행 지도
상품 추천 페이지
문제 해결 사례
문제
프론트엔드와 백엔드 간 API 명세가 정리되지 않은 상태에서 개발을 진행하면서, 필드명 불일치나 응답 구조 차이로 인한 데이터 바인딩 오류가 자주 발생했습니다. 실제로 약 20개 이상의 API 엔드포인트 중 절반 이상에서 요청/응답 구조가 달라 추가 디버깅이 필요했고, 기능 구현 과정에서 하루 평균 2~3건의 API 관련 오류가 발생하는 문제가 있었습니다.
해결 방안
API 구조를 명확히 하기 위해 Swagger 기반의 API 문서화를 도입했습니다. 모든 엔드포인트에 대해 요청 파라미터, 응답 데이터 구조, 예시 값을 문서로 정리하고 프론트엔드와 백엔드가 이를 기준으로 개발하도록 협업 프로세스를 정립했습니다. 또한 기능 개발 전에 API 명세서를 기준으로 상호 검증하는 방식으로 커뮤니케이션 흐름을 개선했습니다.
결과
Swagger 기반 문서화를 통해 약 20개 이상의 API 엔드포인트를 표준화할 수 있었으며, 데이터 바인딩 오류 발생 빈도를 하루 평균 2~3건에서 주 1건 이하 수준으로 약 70% 이상 감소시켰습니다. 또한 API 관련 디버깅 시간을 크게 줄이면서 기능 개발 속도와 협업 효율을 동시에 개선할 수 있었습니다.
프로젝트 성과
성과
- •다양한 API의 정상적인 통신을 통해 사용자에게 다양한 서비스 제공
결과
- •사용자 친화적인 UI/UX 제공으로 사용하기 편리하고 적절한 예적금 상품을 추천해주었음
프로젝트 회고
아쉬웠던 점
- •API를 통해 데이터를 받아오는 과정을 단축 시킬 수 있었다면 기존에 추가하려고 했던 챗봇 기능의 퀄리티를 조금 더 올렸을 것 같습니다.
- •상품을 추천해 줄 때 좀 더 상세한 알고리즘을 사용하여 더 수준 높은 정보를 제공해줄 수 있었으면 좋았을 것 같은 아쉬움이 있었습니다.
개선 방안
- •Vue.js 컴포넌트 설계 패턴 숙달 및 상태 관리 라이브러리 활용 능력이 향상되었습니다.
- •RESTful API 통신 및 비동기 프로그래밍에 대한 이해도를 증가시켰습니다.
- •금융 도메인 지식 습득 및 데이터 기반 의사결정 시스템 구현 경험을 했습니다.
새롭게 배운 것
- •하나의 서비스를 제공하기 위해서는 프론트엔드와 백엔드의 프로세스가 원할히 이뤄지기 위해 커뮤니케이션의 중요성을 알았습니다.
깨달은 점
- •개발자가 되기 위해서는 끊임 없는 공부를 해야하고, 아무것도 모르는 사용자가 사용할 때도 막힘 없이 사용할 수 있는 최상의 UI를 제공하는 것이 중요한 것을 깨달았습니다.