나의 가계부: 월급일·카드 결제일·투자 흐름을 함께 보는 개인 금융 앱

개인 개발 프로젝트 · 가상 데이터 시연 — 실제 계좌, 거래, Google Drive 자료는 공개하지 않습니다. 가상 데이터 데모 체험하기. 실제 금융 정보는 입력하지 마세요. 변경 내용은 방문자 브라우저에만 저장됩니다.

프로젝트 발표자료 PDF 보기

카드값은 다음 달에 빠져나가고, 월급일은 달력의 1일이 아닙니다. 은행 앱의 잔액만 보면 이번 달에 실제로 쓸 수 있는 돈과 앞으로 나갈 돈을 함께 판단하기 어렵습니다. 이 문제를 직접 풀기 위해 개인 가계부 웹 앱을 만들었습니다.

이 글과 시연 자료의 계좌·거래·금액은 모두 가상 데이터입니다. 실제 사용 데이터와 개인 Google Drive는 공개하지 않습니다.

가상 거래 4건으로 본 규칙

아래는 공개 데모를 2026년 10월 8일에 열었을 때 나오는 9월 거래 4건입니다. 같은 돈이라도 앱이 이체로 보는지, 지출로 보는지, 어느 달 예산에 넣는지가 다릅니다. 예산 기준은 데모의 통계 → 예산 화면에서 ‘카드 지출을 잡는 달’을 쓴 날 또는 결제하는 달로 바꿔 볼 수 있습니다.

체크카드 장보기는 통장에서 바로 빠지므로 두 기준 모두 9월입니다. 신용카드 외식은 결제하는 달 기준이면 결제일(10월 14일)이 있는 10월 예산으로 옮겨 갑니다. 같은 기준에서 8월 신용카드 이용분 460,346원은 결제일(9월 14일)이 있는 9월 예산에 카테고리대로 잡힙니다. 카드값 결제 자체를 지출로 한 번 더 세면 8월에 쓴 돈이 두 번 잡히므로, 결제는 통장에서 카드로 옮긴 돈(이체)으로만 남깁니다. 두 기준을 바꾸면 합계가 이렇게 달라집니다.

9월 차이는 9월 신용카드 이용분 508,714원이 10월로 빠지고 8월 이용분 460,346원이 9월로 들어온 몫입니다. 10월은 9월 이용분 508,714원이 들어오고 10월에 카드로 쓴 143,959원이 11월로 넘어갑니다. 같은 지출인데 기준에 따라 예산 사용률이 43%와 60%로 갈리므로, 월급과 카드 결제일이 다른 사람은 어느 기준으로 볼지 먼저 정하는 편이 낫습니다.

데모는 처음 열 때(또는 데모 초기화 뒤) 그날을 기준으로 지난 5개월과 이번 달 거래를 만들고, 그 뒤에는 브라우저에 저장된 사본을 씁니다. 다른 날 열면 날짜와 이번 달 합계가 위 값과 다를 수 있습니다.

데모에서 볼 순서

숫자는 위와 같은 2026년 10월 8일 화면입니다.

1. 홈 — 주거래 통장 잔액 14,754,039원과 다음 출금(10월 14일 카드 결제 508,714원)이 맨 위에 나옵니다. 현금·예금 26,954,039원에서 아직 안 낸 카드값 652,673원(9월 이용분 508,714원 + 10월 이용분 143,959원)을 뺀 가용 현금 26,301,366원이 이 앱의 핵심 숫자입니다. 아래 ‘이번 달 돈의 흐름’은 수입 4,205,155원, 지출 966,397원, 저축·투자 700,000원, 남은 돈 2,538,758원으로 나눠 보여 줍니다.
2. 내역 — 10월 거래 5건이 날짜별로 묶여 있고 최근 2일만 펼쳐져 있습니다. 수입·지출 합계(+3,238,758원)에 정기 저축 이체 700,000원은 들어가지 않습니다.
3. 통계 → 예산 — ‘카드 지출을 잡는 달’을 바꾸면 사용률이 43%와 60% 사이에서 바뀝니다. 결제하는 달 기준에서는 이 달 예산에 들어온 카드값(9월 이용분 508,714원)과 다음 달로 넘어가는 금액(143,959원)을 함께 적어 줍니다.
4. 결산 — 9월 결산은 수입 4,074,378원, 지출 1,850,069원, 저축률 54.6%이고, 카드별 사용(체크카드 305,938원, 신용카드 508,714원)을 지난달과 비교합니다.
5. 목표 — 비상금 목표는 최근 평균 월 지출의 6개월치로 잡혀 있고, 월 저축 목표 900,000원 중 이번 달에 넣은 700,000원(77.8%)이 표시됩니다.
6. 자산·투자 — 자산 28,487,766원에서 학자금 대출 6,000,000원을 뺀 순자산 22,487,766원, 가상 펀드 평가금액 2,186,400원(투자원금 2,000,000원)이 나옵니다. 카드값은 부채가 아니라 가용 현금에서 빼는 돈으로 다룹니다.
7. 설정 — 데모 안내, 데이터 규모(내역 66건, 계좌 6개, 평가 6개월), 월 시작일(월급일에 맞춘 가계부 기간), 개발 히스토리가 있습니다. 바꾼 내용은 위쪽 데모 초기화로 되돌립니다.

무엇을 만들었나

지출·수입·이체 기록에 카드 청구, 예산, 자산, 투자 평가, 목표 계획을 연결한 웹 앱입니다. 화면은 하나의 HTML 파일로 구성했고, 실사용 버전은 Google Apps Script 웹 앱으로 실행합니다. 데이터는 사용자 본인의 Google Drive에 JSON 파일로 저장합니다.

개인 사용을 위해 별도 서버를 운영하지 않는 구조로 만들었습니다. Apps Script와 연결된 Google 서비스에는 계정별 사용 한도가 있으므로, “누구나 무제한 무료 서비스”로 소개하지는 않습니다.

설계할 때 중요하게 본 세 가지

1. 카드 사용일과 결제일을 구분

카드 지출은 쓴 날의 내역으로 남깁니다. 예산, 통계 월별, 결산, 홈의 지출은 설정에 따라 쓴 달 또는 결제하는 달로 집계하고, 내역과 일별 달력은 늘 쓴 날로 보여 줍니다. 할부는 회차별로 나누고, 결제 기록은 은행 통장에서 카드로 이동한 돈으로 처리해 수입·지출이 중복되지 않게 했습니다.

2. 돈의 이동과 소비를 구분

내 통장 사이의 이체, 투자 계좌 입금, 대출 원금 상환은 소비와 분리했습니다. 대출 상환을 기록하면 원금은 대출 계좌로 가는 이체(빚이 줄어듦)로, 이자는 ‘대출이자’ 지출로 나눠 들어갑니다. 데모의 매달 20일 ‘대출 이자’(9월 26,529원)도 대출이자 지출로 들어가 있습니다. 홈 화면에서는 현금·예금에서 카드 미결제 금액을 뺀 가용 현금을 보여 주고, 목표 화면에서는 저축 속도와 앞으로의 통장 잔액을 계산합니다.

3. 가져오기와 복원에서 실수를 줄임

은행·카드사 파일을 여러 개 가져올 때 날짜·계좌·금액으로 중복을 확인하고, 입력 전에 미리보기를 보여 줍니다. 데이터를 교체하거나 복원하기 전에는 현재 데이터와 비교할 수 있게 했습니다. 저장 시 이전 파일을 주기적으로 백업하고, 다른 기기에서 먼저 수정한 경우 덮어쓰기를 막습니다. 공개 데모에서는 실제 금융 파일이 들어오지 않도록 가져오기 버튼을 모두 숨겼습니다.

6일 동안 68개 판으로 다듬은 기록

앱 안의 개발 히스토리(데모의 설정 화면 맨 아래)에는 2026년 9월 10일 v1.1부터 9월 15일 v1.69까지 68개 판의 수정 내역이 남아 있습니다. 날짜별로는 9월 10일 15개, 11일 23개, 12일 1개, 13일 2개, 14일 12개, 15일 15개입니다. 위 원칙과 관련된 판만 골라 보면 이렇습니다.

카드 결제일 기준은 처음에 예산에만 적용했고(v1.29, 9월 11일), 나흘 뒤 통계 월별·결산·홈 지출에도 같은 기준을 적용했습니다(v1.57, 9월 15일). 지금 데모에서 결제하는 달 기준을 고르면 이 화면들이 함께 바뀌고, 내역과 일별 달력만 쓴 날로 남습니다.

구현 구조

브라우저 화면 (index.html)
    ├─ 실사용: Google Apps Script → Google Drive의 ledger.json
    ├─ 예비: Python 서버 → 서버의 ledger.json
    └─ 파일 모드: 브라우저 파일 접근 → PC의 ledger.json

공개 가상 데이터 데모: 같은 화면 코드 + 가상 데이터 → 방문자 브라우저에만 저장

화면과 계산 로직은 JavaScript로 구현했습니다. Apps Script는 Drive 저장·백업, 이메일 알림, Google Sheets 기반 시세 조회를 담당합니다. 화면 파일을 세 저장 방식에서 공통으로 사용하도록 연결 부분을 분리했습니다.

검증과 점검 결과

자동 시험 792개

2026년 9월 29일 기록 기준으로 원래 앱의 로컬 자동 시험 792개가 통과했습니다. 범주는 다음과 같습니다. 시험 코드는 공개 자료에 넣지 않았고, 이 글을 고치면서 다시 돌리지는 않았습니다.

이 시험은 코드와 가상 실행 환경을 확인합니다. 실제 Google 계정의 배포·권한·예약 실행 상태는 따로 확인해야 합니다.

공개 데모 화면 점검 (2026년 10월 8일)

공개 데모와 같은 파일을 헤드리스 Chromium으로 열고, 시각을 2026년 10월 8일 12시(한국 시간)로 고정해, Claude Code가 화면 8개를 차례로 눌러 확인했습니다.

현재 한계

• 자동 시세는 Google Finance가 제공하는 종목에 한정됩니다.
• 반복 거래 입력은 앱을 열 때 적용됩니다.
• 공개 데모는 Google Drive 저장, 시세 자동 조회, 이메일 알림을 연결하지 않았습니다. 그래서 데모만으로 실제 Google 계정의 배포·권한·예약 실행 상태까지 검증할 수는 없습니다.
• 휴대폰 폭에서 자산 화면 맨 위 카드가 조금 넘칩니다(위 점검 결과).
• 화면이 아직 HTML 한 파일입니다. 다음에는 역할별 모듈로 나누고 실제 배포 환경의 자동 검증 범위를 넓힐 계획입니다.

기술 메모

• 화면: HTML, CSS, JavaScript (코드 v1.69)
• 저장: Google Apps Script, Google Drive JSON, 브라우저 임시 사본
• 보조 기능: 시간 기반 알림, Google Sheets 시세 조회, 은행·카드 파일 가져오기
• 검증: 로컬 자동 시험 792개 통과 (2026년 9월 29일 기록)

참고

• Google Apps Script 사용 한도
• Google Apps Script 웹 앱 접근 권한

AI 사용 고지 — 가계부 앱은 Codex와 Claude Code로 만들었습니다. 이 개정본(2026년 10월 8일)은 Claude Code(Anthropic의 AI 코딩 도구)가 고쳐 썼습니다. 예시 거래 표와 ‘데모에서 볼 순서’의 숫자는 Claude Code가 공개 데모와 같은 파일을 헤드리스 Chromium으로 열어 화면과 가상 데이터 생성 코드에서 읽었고, 화면 넘침·오류·요청 점검도 Claude Code가 같은 방식으로 자동 실행했습니다. 시험 792개와 범주는 2026년 9월 29일 기록과 발표자료에서, 개발 기록은 데모 안 개발 히스토리에서 옮겼습니다. 시험은 이번에 다시 돌리지 않았습니다. 2026년 10월 8일 J. Kim이 이 개정본을 읽고 승인했습니다.

이 사이트와 만든 사람 소개는 About에 있습니다.