나에게 맞는 금융 상품을 추천받자!😀 사용자 금융 정보와 HONEYMONEY의 모든 이용자의 데이터베이스를 통해 맞춤형 상품을 추천합니다.
| 팀원 | 역할 |
|---|---|
| 박효진 | Front-end 개발, UI/UX 디자인, Chatbot 프롬프트 엔지니어링 |
| 허세령 | Back-end 개발, Chatbot, 환율 계산기, 추천 상품 페이지 Front-end 개발 |
python
javascript
Django
Django-rest-framework
dj-rest-auth
pillow
Vue3
vuetify
pinia
axios
chart.js
😄사용자는 회원가입 시 연봉, 자산, 저축 성향, 저축 희망 기간을 입력합니다. 최소 10000명의 유저가 가입된 HONEYMONEY에서는 모든 사용자의 금융 정보를 기반으로 내 금융 정보 맞춤 상품 10개를 추천합니다.
😄사용자가 회원가입 시 입력한 나이를 기반으로 상품을 추천합니다. HONEYMONEY 내 같은 나이 대의 유저들이 가장 많이 가입한 상품 10개를 추천합니다.
-
예금, 자유 적금, 정기 적금 상품 모아보기
- 금융 상품의 가입 기간 별 금리 비교
- 모든 상품끼리의 금리 비교
- 은행 별 상품 검색
- 상품 리스트에서 나의 희망 적립 기간을 한 눈에 보기 쉽게!
-
주변 은행 검색하기
- 카카오맵 API 활용
- 도/시, 시/군/구 기준 원하는 은행 찾기
- 은행 검색 시 은행이 가진 금융 상품 리스트 출력
-
환율 계산기
- 송금 받을 때, 송금 보낼 때, 매매 기준율 기준으로 외화 -> 원화 계산
-
금융 상품 알고리즘 추천
- 나와 비슷한 금융 정보를 가진 이용자들의 가입 상품
- 내 나이대 이용자들의 가입 상품
-
HONEYMONEY 커뮤니티 기능
- 게시글 작성 및 댓글 작성
-
금융 상품 찜하기
- 금융 상품 상세 페이지에서 상품 담기, 취소하기
- HONEYMONEY 사용자 중 몇 명이 찜했는지 확인 가능
- 기간 별 금리를 차트로 한 눈에 확인
-
유저의 프로필 페이지
- 내 금융 정보 변경 가능
- 회원 탈퇴 기능
- 내가 담은 상품 목록 출력 (예금, 적금) 및 담기 취소
- 내가 담은 상품 개수 확인 가능
-
금융 챗봇
- 웹 사이트의 모든 화면에서 언제든지 챗봇과 대화하기 가능
- 내 금융 정보를 기반으로 챗봇에게 금융 상품 추천받기
-
회원가입 🟢🟢🟢🟢🟢🔵
-
로그인 🟢🟢🟢🟢🟢🔵
-
웹 소개 메인 🟢🟢🟢🟢🟢🔵
-
금융 상품 조회 4.a 금융 상품 조회 전 예,적금 선택 🟢🟢🟢🟢🟢🔵
4.b 예금 상품 목록 🟢🟢🟢🟢🟢🔵
4.c.1 자유 적금형 🟢🟢🟢🟢🟢🔵
4.c.2 정기 적금형 🟢🟢🟢🟢🟢🔵
4.d 상품 Detail 페이지 🟢🟢🟢🟢🟢🔵
-
내 주변 은행 찾기 🟢🟢🟢🟢🟢🔵
-
개인(신규) 프로필 정보를 통한 추천 알고리즘 🟢🟢🟢🟢🟢🔵
-
환율 조회 🟢🟢🟢🟢🟢🔵
-
커뮤니티 8.a 게시글 조회 🟢🟢🟢🟢🟢🔵
Creation 🟢🟢🟢🟢🟢🔵
Read 🟢🟢🟢🟢🟢🔵
Update 🟢🟢🟢🟢🟢🔵
Delete 🟢🟢🟢🟢🟢🔵
8.b 댓글 조회 🟢🟢🟢🟢🟢🔵
Creation 🟢🟢🟢🟢🟢🔵
Read 🟢🟢🟢🟢🟢🔵
Update 🟢🟢🟢🟢🟢🔵
Delete 🟢🟢🟢🟢🟢🔵
-
개인 프로필 🟢🟢🟢🟢🟢🔵
-
금융 상품 Chat Bot 🟢🟢🟢🟢🟢🔵
default.mp4
- v-tab과 v-carousel을 이용한 메인페이지
- Tab을 클릭하거나 마우스 오버 시 carousel 화살표 호버. 클릭 시 동일하게 이동 가능
- 이미지는 https://www.bing.com/images/create 이용
default.mp4
- v-form의 v-select을 통해 데이터 받아서 반응성 변수 활용
- front에서 api 직접 요청 x back으로 요청 o
2024-05-27.23-58-18.mp4
- KAKAO MAP API 사용
- 비로그인 시 로그인 팝업(1회)
- 로그인 하지 않아도 은행 검색 기능 활성화
2024-05-27.23-58-58.mp4
- 로그인 권유 팝업을 통해 로그인 페이지 유도
2024-05-28.01-20-27.mp4
- 로그인 되어있을 경우 팝업이 뜨지않고 하단의 금융 상품 조회 가능
2024-05-28.00-08-25.mp4
- 로그인 창의 회원가입 또는 modal을 통해 이동 가능
- 필수 데이터* 확인
- 약관 동의 확인
- 자동 로그인
2024-05-28.00-15-07.mp4
- Vuelidate 라이브러리를 통해 Front에서 1차 유효성 검사 실시
- 비밀번호 자리수를 만족하지 못하거나 다른 비밀번호 입력시 error 발생
2024-05-28.00-15-07_1.mp4
- 입력값 범위 설정 가능 (- 값 사용 불가)
- 필수 데이터 미 입력시 alert를 통한 알람
2024-05-28.00-15-07_2.mp4
- 약관 미 동의시 확인 메세지 알람
- Username 중복 시 메세지 알람
2024-05-28.00-16-18.mp4
- Vuelidate를 통해 1차 유효성 검사
- 비밀번호 input 중, type visible 토글
- 로그인 완료 시 환영 문구 출력
2024-05-28.01-12-49.mp4
- Edit Profile을 통해 변경(dialog)
- 회원 프로필 사진 변경 가능
2024-05-28.01-13-29.mp4
- hint를 통해 UX 향상
- 새로고침 없는 Create, Read, Delete
- 수정 시 dialog를 통해 실시간 수정 가능
- 댓글 작성자 권한 부여
2024-05-28.01-15-24.mp4
- 게시글 생성 페이지와 수정 페이지
- 게시글 작성자 권한 부여
- 댓글 없을 시 특정 문구 출력
- 글 작성자와 댓글 작성자가 동일할 경우 글씨 색상과 하이라이트 표시
2024-05-28.01-16-15.mp4
- 삭제 시도 시 적절한 alert 사용
- 삭제 후 게시글 List로 이동
- 포함된 댓글 자동 삭제
2024-05-28.01-17-15_6.mp4
- 예금 / 적금 선택 페이지
- v-data-table-virtual을 통해 데이터 테이블 제작
- 가입시 기입한 유저 desire Period를 사용한 테이블 하이라이트 (예시 24개월)
2024-05-28.01-17-15_2.mp4
- 데이터 가공을 통해 6, 12, 24, 36 개월 데이터 추출
- sort 가능
- 하이라이트된 데이터의 수치별 색상 표시 (3이상 초록색, 이하 주황색)
2024-05-28.01-17-15_3.mp4
- 은행별 금융 상품 조회 가능
2024-05-28.01-17-56.mp4
- 자유 적립식, 정액 적립식 분류
- 은행별 금융 상품 조회 가능
- 유형 토글 가능
2024-05-28.01-19-50.mp4
- 상품 명 클릭을 통해 예금의 세부 내용 확인
- 기간별 금리(기본 금리 + 최고 우대 금리) 막대 그래프 비교
2024-05-28.01-21-46.mp4
- 상품 명 클릭을 통해 적금의 세부 내용 확인
- 자유적립식, 정액적립식 tab 기능
- 자유적립식과 정액적립식 막대 그래프 한눈 비교
- 우측 상단 꿀통 버튼 클릭을 통해 꿀통에 담기 가능
- 꿀통 추가 / 제거 적절한 애니메이션
2024-05-28.01-22-32.mp4
- 실시간 꿀통에 담은 예금(위) / 적금(아래) 확인 가능
- carousel을 통한 UX 향상
- 상품 Detail 확인 가능
- 카드의 X 표시를 통해 쉬운 삭제 가능
- 카드 좌측 위 꿀통 그림속 카드 갯수 출력
- 담긴 꿀통의 은행 로고 출력
2024-05-28.01-23-19_2.mp4
- 자산, 연봉, 희망기간 등 개인 정보에 맞춤 추천 서비스
- 예금 / 적금 한눈에 확인 가능
2024-05-28.01-23-19.mp4
- 연령대 별 추천 서비스
- 예금 / 적금 한눈에 확인 가능
2024-05-28.01-34-22.mp4
- Profile 변경 후 실시간 적용되는 Recommend 상품
- 변경사항 적용되는 희망기간 하이라이트
2024-05-28.09-40-39_4.mp4
- v-show + dialog 활용
- GPT-4 사용 (개인 API 키)
- Prompt Engineering을 통한 금융 챗봇 최적화
2024-05-28.09-40-39_1.mp4
- 나이, 연봉, 재산, 희망 기간에 따른 개인 계정에 맞춤 데이터 사용
2024-05-28.09-40-39_2.mp4
- 부족한 정보 (URL, 전화번호) 추가 제공
- URL 제공을 위한 데이터 가공
2024-05-28.09-43-13_1.mp4
- 프로필 설정에서 회원탈퇴 가능
- 취소 / 확인 시 적절한 alert 설정
2024-05-28.09-43-13_2.mp4
- 계정 데이터 삭제 확인
- 이전 게시한 게시글, 댓글 모두 자동 삭제
시작부터 말하지 않아도 분업이 정해져서 신기했고, 믿을만한 팀원을 만나 마음껏 프론트에 집중할 수 있어서 너무 재밌었다. front에서 사용하기 위한 db를 모두 구축해둔 덕분에 막힘 없이 진행할 수 있었다..
앞선 기수분들이 사용했던 stack을 쓰겠다고 당차게 시작했지만, Vuetify의 벽은 너무 높았다. 물론 부트스트랩과 동일한 부분도 많았지만, 스피너나 다이얼로그 등이 영어 단어가 달라서 docs보는데 시간이 조금 걸렸다.
지금까지 배웠던 기술 및 스택 들을 사용해보는 과정이어서 더 재미있었고, 알고리즘까지 빠지지 않고 등장해서 반가웠다. 또한 front는 굉장히 주관적인 요소라 fix하는대까지 너무 긴 시간이 걸렸고, 표현 요소를 제대로 못할때마다 답답함이 많았다.
빠르게 back을 끝내고 front를 도와준 페어에게 고맙고, 고마운 만큼 전반적인 디자인을 깔끔하게 했다고 개인적으론 생각한다. 굉장히 만족스러운 프로젝트였고, 포트폴리오로 쓰기에 흠집없는 결과물이라고 자부할 수 있다.
가장 재미있었던 것은 의외로 AI Chat Bot인데, css는 디자인 하는 것이라 질리는 감이 있었는데, 직접 Chat Bot을 훈련시켜 원하는 대답과 유저 정보를 미리 넘겨주어 사용자 UX를 향상시킬 수 있다는 점이 매력적이었다. 파인 튜닝을 진행하고 싶었으나 데이터를 모두 준비해둔 상태에서 시작하려니, 유료였다는 점에서 포기한게 아쉬웠다.. 다음 프로젝트에는 AI요소를 이용한 작은 프로젝트를 진행해보고 싶다.
개발자의 분업과 협업이 이런 것인가? 프로젝트를 진행하면서 역할 분담이 쉽지 않을 것이라 생각했지만, 서로 각자의 역할을 120% 해주면서 처음부터 끝까지 순조롭게 흘러갈 수 있게 해준 페어에게 고맙습니다! 코드 오류 찾는 게 힘들었지, 팀워크는 완벽했다!
한 학기 동안 배우면서 ‘이런 건 굳이 왜 쓰지?’ 라고 생각했던 것들이 이해되기도 하고, 새로운 라이브러리를 쓰면서 docs 보는 능력이 생긴 것 같다.
특히, front-end 구축이 점차 진행되면서 컴포넌트의 필요성을 뼈저리게 느꼈다. 우리 프로젝트는 재사용 따위는 없는 빡하드코딩이다. 이번 프로젝트를 계기로 다음번엔 컴포넌트를 적극 활용해서 클린 코딩에 가까워 지도록 해야겠다.
일주일동안 에이바우트에 살면서 앞이 안보일 정도로 피곤에 쩔었지만, 시간 가는 줄도 모르고 결과물 보면서 뿌듯해 했다. 재밌고 후회 없이 내 인생 첫 프로젝트를 완성할 수 있음에 감사하다! 😄