💰 Wallet-Guardians는 사용자의 소득과 지출을 체계적으로 관리하고, 예산을 설정하여 효과적으로 절약 습관을 기를 수 있도록 돕는 웹 애플리케이션입니다.
이 프로젝트는 단순한 가계부를 넘어서, 재미있는 절약 시스템과 사용자 간의 경쟁 요소를 결합하여 즐겁게 소비를 관리할 수 있도록 설계되었습니다.
대부분의 자취를 하는 학생 및 직장인들은 예상치 못한 지출로 인해 과소비하는 경향이 있습니다.
이를 해결하기 위해, 이 앱은 사용자에게 직접 소득과 지출을 기록하고 월별 예산을 설정할 수 있는 기능을 제공합니다.
💡 특징
- 자취하는 학생 및 직장인의 예상치 못한 지출 문제 해결
- 소득과 지출 기록 & 월별 예산 설정 기능 제공
- 영수증 첨부로 재정 기록 신뢰성 확보
- 매달 사용할 예산 목표 금액 설정하여 지출 관리 효율성 증대
- 목표 금액 대비 실제 사용 금액을 한눈에 확인 가능
- 일별 지출 기록을 추가할 수 있는 캘린더 제공
- 날짜별 지출 내역 & 목표 금액 대비 진행 상황 표시
- 사용자가 직접 영수증 사진 업로드하여 기록 가능
- 사진을 기반으로 한 소비 데이터 손쉽게 관리
- 영수증이 없는 구매도 기록 가능하도록 간편한 UI 제공
- 필수 입력 필드:
- 🛍️ 구매 항목명
- 💰 지출 금액
- 📆 구매 날짜
- 📘 메모
- JWT 인증 방식 적용으로 보안 강화
- 회원 정보 수정 & 닉네임 설정 가능
- 사용자 간 친구 추가 기능 제공
- 친구와 소비 패턴 비교 & 목표 달성 응원 가능
- 설정한 목표 예산 초과 시 경고 메시지 표시
- 알림 스타일 예시:
- "
⚠️ 예산 초과! 다음 소비를 조심하세요!" - "🚨 예산 관리 모드가 활성화되었습니다!"
- "
- 목표 금액 & 현재 지출 비교 그래프 제공
- 한눈에 직관적으로 소비 성향 파악 가능
- 소비 카테고리별 칭호 예시:
- 식비: 5회 - "가끔은 이런 것도 먹어주는 게" / 20회: "먹는 게 제일 좋아" / 100회 - "식비만 100번 결제하셨습니다..."
- 교통비: 5만 원 - "바쁘다 바빠 현대사회" / 10만 원 - "택시비는 아니죠?"
- 쇼핑: 5회 - "어머, 이건 꼭 사야 해" / 10회: "이건 꼭 사야 해...?" / 20회 - "잠시 눈을 감고 생각해 봅시다"
- 취미/여가: 5번 - "재밌어. 짜릿해." / 10번: "도파민에 숙성 중" / 20번 - "도파민 중독 신고 번호는 1..."
- 기타 지출: 5회 - "예상을 벗어난 소비" / 15회 - "카테고리 추가는 DM으로 문의주세요"
- 무소비: 0회 - "진정한 무소유"
-
- 모든 소비 하나의 카테고리에 집중 - "한 우물만 파는 중"
- 예산 관련 칭호:
- 예산 20% 사용 - "지갑 속은 안전해"
- 예산 50% 사용 - "다음은 너다"
- 예산 90% 사용 - "신에게는 아직 예산이 남아있습니다"
- 예산 초과 - "가계부 파괴자"
- 사용자가 처음 보게되는 웹 화면에는 시작하기
- 그 후 로그인 혹은 회원가입을 합니다.
- 로그인에 성공하면 목표금액을 설정합니다.
- 목표금액은 한 달에 한번 설정 할 수 있습니다. 만약 이전에 목표금액을 설정했다면 바로 메인페이지로 진입합니다.
- 메인페이지에는 크게 SideBar(Navbar)와 내부 컨텐츠가 있으며, SideBar에는 사용자의 이름, 목표 금액, 칭호가 포함됩니다.
지출은 총 두 가지 방식으로 추가할 수 있습니다.
- 영수증 사진 업로드 방식 (영수증을 업로드하면 자동으로 내부의 금액을 분석하여 지출에 추가됩니다)
- 직접 추가 방식 (직접 추가한 값을 토대로 지출에 추가됩니다)
- 목표 금액 수정 기능
- 프로필 페이지의 기능
- 비밀번호 변경
- 계정삭제
- 프로필 사진 업로드
- 사용자가 한 눈에 볼 수 있는 통계 그래프 제공 ( 지출 현황 & 목표 금액과의 차이)
- 사용자가 업로드한 영수증들을 업로드했던 페이지 제공
친구를 추가하면 오른쪽 위의 친구 모달에 빨간 점이 떠 요청 혹은 전송된 표시 제공
- React.js + React Router: UI 렌더링 및 페이지 라우팅
- Recharts: 데이터 시각화 (소비 분석 차트)
- Emotion.js (CSS-in-JS): UI 스타일링
- Axios: API 요청 및 데이터 관리
- Context API: 상태 관리 (예산, 소비 내역 등)
- Spring Boot: REST API 개발
- Spring Security + JWT: 인증 및 보안
- Spring Data JPA: DB 연동 및 관리
- Google Cloud Storage: 영수증 이미지 저장, 프로필 사진 저장
- CloudSQL: 사용자 및 소비 데이터 저장
- Naver Cloud Platform: 영수증 분석 기능 OCR
- Docker & Docker Compose: 배포 및 환경 설정 자동화
- GitHub Actions: CI/CD 구축
- Postman: API 테스트 및 문서화
- Figma: API 테스트 및 문서화
- Google Cloud Platform: 서버 엔진 구동
| 역할 | 이름 | GitHub |
|---|---|---|
| 🧑🏻💻 Project Manager | 최원빈 | https://github.com/ChoiTheCreator |
| 🏗 백엔드 개발 | 서아영 | https://github.com/Seooooo24 |
| 🏗 백엔드 개발 | 김시온 | https://github.com/enohs |
| 🏗 백엔드 개발 | 정석우 | https://github.com/Jungsukwoo |
| 🎨 프론트엔드 개발 | 최원빈 | https://github.com/ChoiTheCreator |
| 🎨 프론트엔드 개발 | 이성진 | https://github.com/leesj0188 |
| 🖌 UI/UX 디자이너 | 최원빈 | https://github.com/ChoiTheCreator |
- AI 기반 소비 패턴 예측: 머신러닝을 활용한 맞춤 소비 분석 제공
- 소셜 기능 강화: 친구와 팀을 이루어 절약 챌린지 진행
- 다양한 결제 방식 지원: 은행 연동 및 카드 사용 분석 기능 추가
- 모바일 앱 출시: 웹뿐만 아니라 모바일에서도 최적화된 사용 경험 제공
💡 GitHub Issues에서 피드백을 남겨주세요! 🚀