HARUMAN
하루 만 원으로 시작하는 올바른 소비 습관
- Period
- 2023.08 – 2023.10
- Role
- 기획 · Front-End
- Cycle
- 기획 → 개발
Why
타국 대비 부족한 경제 교육 문제를 핀테크로 풀고 싶었습니다.
하지만 가계부는 이미 쓴 돈의 합계를 보여줄 뿐, 쓰기 직전에 멈춰 세우지는 못합니다.
'만원의 행복'을 모티브로 하루 예산 만 원을 걸고, 남은 금액을 물결 높이로 보여줘 지출 전에 체감하게 했습니다.
7주 기한이라 Flutter 대신 React PWA를 직접 검토해 제안했습니다 — 새 언어를 배우는 대신 완성도에 시간을 쓰는 선택이었습니다.
My Role in the Architecture
백엔드(Java/MySQL/Redis)가 소비 데이터와 OpenAI 응답을 API로 제공했습니다.
Kakao·Google OAuth 2.0 로그인을 붙여 진입 장벽을 낮췄습니다.
이를 소비해 화면을 만드는 프론트엔드 — PWA 클라이언트, 상태 관리, 데이터 시각화 레이어 — 를 담당했습니다.
D3·Chart.js 시각화 로직은 응답 값을 어떻게 표현할지에 대한 제 설계입니다.
Flutter와 PWA 사이에서 기술을 직접 검토해, 7주 기한에 맞는 PWA 채택을 제안했습니다.
GitLab Convention을 정하고 MR로 merge 전 리뷰하며 버전 관리를 진행했습니다.
Stack
Highlights
7주 안에 완성도를 높이는 기술 선택
Flutter와 PWA 사이에서 고민했습니다.
새 언어(Dart)를 배우기보다 익숙한 TS·JS로 완성도를 높이는 쪽이 낫다고 판단해 React 기반 PWA로 웹뷰 배포했습니다.
물결로 잔액을 보여주는 메인 화면
남은 금액의 비율을 물결 높이로 표현해, 지출을 입력하면 물결이 줄어들며 사용 금액을 직관적으로 체감하게 한 화면입니다.
물결 애니메이션(선형 보간, lerp)은 팀원이 주도해 구현했습니다.
Chart.js 도넛 차트로 소비 패턴 분석
카테고리별 소비 패턴은 Chart.js 도넛 차트로 보여줬습니다.
결제 API를 쓸 수 없어, 지출 금액과 카테고리는 사용자가 직접 입력하도록 구현했습니다.
월별 기록과 D3 버블 차트 통계
월별 페이지에서 이전 도전·성공·실패 기록과 소비 이력을 조회할 수 있게 만들었습니다.
금액대별 잔액 현황은 D3 버블 차트로 시각화해 경쟁 심리를 자극하는 절약 유도 페이지를 만들었습니다.
금액대별 사용자 그룹을 한 번에 받아, D3 force 시뮬레이션으로 버블 크기와 배치를 계산했습니다.
Friction & Resolution
BE·FE가 기술 소통 창구만 쓰다 보니, 전체 진행 상황을 서로 다르게 그리는 문제가 생겼습니다.
데일리 컨벤션과 주간 진행 공유를 추가로 만들어 팀 전체가 같은 그림을 보게 했습니다.
모바일·PWA·OAuth 등 낯선 기술은 팀원과 학습 내용을 공유하며 막힌 부분을 빠르게 풀었습니다.
카카오 OAuth 인가코드 중복 전송, 랭킹 페이지 버블차트 데이터 누적 — 두 버그를 직접 추적해 고쳤습니다.
적금 추천은 금액대·카테고리로 나눠도 중복값이 많고, 이율·선호 은행까지 넣은 가중치 계산이 어려워 완벽한 매칭까지는 풀지 못했습니다.
프론트 경험이 있는 리더에게 기술 결정 과정을 배우며, 이전 프로젝트에서 혼자 진행하던 비체계성을 개선했습니다.
Result
- SSAFY 특화 프로젝트 베스트 멤버 선정
Next project