Fin:D - Project Detail

Situation

어떤 문제를 해결하려 했는가

"내 월급과 성향에 딱 맞는 예금은 없을까?", "어려운 금융 용어, 누가 좀 쉽게 설명해줬으면 좋겠다."
이러한 고민에서 출발하여, 금융 지식이 부족한 2030 사회초년생을 타겟으로 개발되었습니다. 단순한 금리 비교를 넘어, 사용자의 자산, 소득, 투자 성향을 정밀하게 분석하여 개인화된 포트폴리오를 제공합니다.

Action — What I Built

내가 구체적으로 기여한 것

UI/UX 설계 & 컴포넌트 구현

Vue 3 Composition API 기반으로 전체 프론트엔드를 설계했습니다. 컴포넌트 재사용성을 고려한 구조로 개발 생산성을 높이고, Pinia를 도입하여 사용자 정보와 금융 상품 데이터를 전역에서 효율적으로 관리했습니다.

소셜 로그인 (Google OAuth)

사회초년생 타겟의 진입 장벽을 낮추기 위해 Google OAuth 2.0 소셜 로그인을 구현했습니다. Django 백엔드와 Vue 프론트엔드 간 인증 흐름을 설계하여 안전한 사용자 경험을 제공합니다.

외부 API 통합 연동

금융감독원(FSS), 카카오맵(Mobility), 유튜브/네이버 검색 등 성격이 다른 외부 API를 하나의 서비스로 통합했습니다. 비동기 처리와 데이터 정규화를 통해 안정적인 데이터 파이프라인을 구축했습니다.

AI 어드바이저 연동

OpenAI GPT API를 활용한 프롬프트 엔지니어링으로, 금융 약관과 상품 특징을 쉽게 설명하는 AI 챗봇을 구현했습니다. "왜 이 상품이 추천되었는가"에 대한 추천 근거(XAI)를 제시하여 신뢰도를 높였습니다.

Result — Challenge & Growth

기술적 도전과 성장

Challenge 이질적인 데이터의 통합

금융(FSS), 지도(Kakao), 미디어(Youtube) 등 응답 형식과 인증 방식이 모두 다른 외부 API를 하나의 유기적인 서비스로 통합해야 했습니다.

Solution 비동기 처리 & 데이터 정규화

각 API의 응답을 공통 포맷으로 정규화하는 어댑터 계층을 설계하고, 비동기 호출로 사용자 체감 속도를 개선했습니다. 이 과정에서 데이터 파이프라인 설계 역량을 크게 향상시켰습니다.

Challenge 복잡한 전역 상태 관리

사용자 정보, 금융 상품 목록, 추천 결과, 챗봇 대화 이력 등 다양한 상태를 컴포넌트 간 효율적으로 공유해야 했습니다.

Solution Pinia 도입 & 모듈 분리

Pinia를 도입하여 도메인별로 Store를 분리하고, Composition API와 결합하여 반응형 데이터 흐름을 구현했습니다. 컴포넌트 재사용성을 고려한 설계로 개발 생산성을 높이는 경험을 했습니다.

주요 구현 화면

1. 스마트 맞춤형 상품 추천

금융감독원 API 데이터를 기반으로 사용자의 나이, 자산, 연봉, 투자 성향(안정형~공격형)을 분석합니다. 단순 필터링이 아닌 가중치 기반 알고리즘을 적용하여 최적의 예적금 상품을 큐레이션합니다.

금융감독원 전체 상품 데이터 DB화
우대 조건(첫 거래, 비대면 등) 상세 필터링
Chart.js를 활용한 금리 시각화

2. 생성형 AI 금융 어드바이저

초보자가 이해하기 힘든 금융 약관이나 상품 특징을 GPT 모델이 쉽게 풀어서 설명해줍니다. "왜 이 상품이 나에게 추천되었어?"라는 질문에 대해 추천 근거(XAI)를 제시하여 신뢰도를 높였습니다.

OpenAI API 연동 및 프롬프트 엔지니어링
실시간 문맥 파악 및 대화형 상담

3. O2O 서비스 및 콘텐츠 큐레이션

온라인 추천을 넘어 오프라인 경험까지 연결합니다. 카카오맵 API를 활용해 주변 은행을 찾고, 초보자를 위한 금융 뉴스 및 유튜브 영상을 큐레이션하여 앱 내 체류 시간을 증대시켰습니다.

위치 기반 은행 찾기 및 길찾기 (Kakao Mobility)
유튜브/네이버 검색 API 기반 콘텐츠 자동 수집

Fin:D (핀디)

My Role