불규칙 수입 대학생을 위한 지출 관리 서비스

다음 입금일까지 하루에 얼마씩 쓸 수 있는지 알려 주는 서비스

대학생이 현재 잔액과 다음 수입 예정일, 그리고 그날그날의 지출을 입력하면, 다음 입금일까지 남은 일수로 나눈 오늘 쓸 수 있는 안전 금액과 카테고리별 남은 예산, 이대로 쓰면 잔액이 0원이 되는 예상 날짜 그래프를 한 화면에 보여 주는 서비스입니다.

• 만든 사람: 2404 강경빈
• 과목: 정보과학 프로젝트 (2학년 2학기)
• 사용 AI 도구: Claude (Claude Code)

---

1. 왜 만드는가

직장인의 돈과 대학생의 돈은 흐름이 다릅니다.

	직장인	대학생
입금일	매달 같은 날	알바비 10일, 용돈 1일, 과외비 말일
금액	매번 같음	그때그때 다름
예산 단위	한 달	다음 입금일까지

기존 가계부 앱은 직장인의 월급을 기준으로 만들어져 있어서, 입금일과 금액이 매번 달라지는 대학생에게는 잘 맞지 않습니다. 또 대부분 "이번 달에 얼마 썼는지"만 알려 줄 뿐, **"지금부터 다음 알바비까지 하루에 얼마씩 써도 되는지"**는 알려 주지 않습니다.

그래서 돈이 들어온 직후엔 마음 놓고 쓰다가, 월말엔 밥값과 교통비가 모자랍니다.

2. 핵심 계산 규칙

이 서비스의 전부는 이 식 하나입니다.

오늘의 안전 지출 금액 = (현재 잔액 − 남은 고정지출 − 예정된 지출) ÷ 다음 입금일까지 남은 일수

설계 원칙 세 가지:

1. 잔소리하지 않는다 — "쓰지 마세요"가 아니라 "여기까지는 괜찮아요"
2. 어제 쓴 만큼 오늘이 줄어든다 — 배달로 2만 원 쓰면 내일 한도가 저절로 내려감
3. 기록이 쉬워야 계속한다 — 학식·버스·카페는 버튼 한 번으로 입력 끝

3. 화면 구성 (3개)

화면	파일	하는 일
메인	index.html	잔액·D-day, 오늘의 안전 금액(가장 크게), 카테고리별 막대, 빠른 입력 버튼
지출 입력	expense.html	금액 → 카테고리 → 저장, 3단계로 끝나는 기록 폼
통계	stats.html	잔액 예측 꺾은선 그래프, 0원 예상일 표시, 카테고리별 지출 구성

4. 지출 카테고리 (6개)

식비 · 배달 · 카페 · 유흥/모임 · 교통 · 기타

5. IPO 구조

입력 (Input)

• 현재 통장 잔액과 보유 현금
• 다음 수입의 종류(알바비·용돈·과외비), 입금 예정일, 예상 금액
• 고정지출(통신비·구독료·교통 정기권)의 항목명·금액·결제일
• 지출의 금액·카테고리·날짜·메모
• 자주 쓰는 항목을 등록해 두는 원터치 빠른 입력 버튼
• 이미 예정된 지출(생일 모임 등)의 날짜와 예상 금액

처리 (Process)

1. 오늘부터 다음 입금 예정일까지 남은 일수를 센다
2. 현재 잔액에서 그 기간의 고정지출·예정 지출을 빼서 실제로 쓸 수 있는 돈을 구한다
3. 이 금액을 남은 일수로 나누어 오늘의 안전 지출 금액을 계산한다
4. 카테고리별 예산에서 이미 쓴 금액을 빼 남은 예산과 소진율(%)을 구한다
5. 최근 7일 하루 평균 지출 속도로 잔액이 0원이 되는 날짜를 예측한다
6. 지출이 새로 기록될 때마다 위 계산을 전부 다시 수행한다

출력 (Output)

• 오늘의 안전 지출 금액 (메인 화면 한가운데, 가장 큰 글씨)
• 카테고리별 남은 예산 가로 막대 그래프
• 잔액 변화 꺾은선 그래프와 0원 예상 날짜 표시
• 지출을 기록하면 위 세 가지가 즉시 재계산되어 반영

6. 기술 스택

단계	기술	이유
1~5차시 (프론트)	HTML · CSS · JavaScript (빌드 도구 없음)	웹 개발이 처음이라 파일 하나하나가 무슨 일을 하는지 눈으로 확인하기 위해
5차시 (배포)	Vercel	GitHub 저장소를 연결하면 정적 파일이 그대로 배포됨
6~8차시 (서버·DB)	Supabase	로그인과 데이터 저장을 직접 서버 없이 처리. 금액은 민감 정보이므로 RLS를 켜서 본인 데이터만 조회

7. 개발 일정 (8차시)

• 1차시 · 준비 — 저장소 개설, 주제 확정, 화면 3개와 카테고리 6개 결정
• 2차시 · 프론트 — 메인 화면 뼈대 배치, 임시 숫자 표시 확인
• 3차시 · 프론트 — 지출 입력 폼 완성, 빠른 입력 버튼 3개
• 4차시 · 프론트 — 안전 지출 금액 계산 구현, 실제 숫자가 화면에 표시
• 5차시 · 프론트 — 막대·꺾은선 그래프 완성, Vercel 첫 배포
• 6차시 · 서버·DB — Supabase 생성·테이블 설계, 로그인 연결 확인
• 7차시 · 서버·DB — 지출 저장 기능 구현, RLS 적용 확인
• 8차시 · 서버·DB — 저장 데이터 불러와 재계산, 새로고침 유지·최종 배포

8. 실행 방법

배포된 주소: https://infscienceproject2404kkb.vercel.app

로컬에서 볼 때는 start-server.bat 을 실행한 뒤 브라우저에서 http://localhost:5500 으로 접속합니다.