왜 당신의 예산 앱은 실패할까: 계획 vs 현실 추적 with DonFlow
Source: Dev.to
번역을 진행하려면 번역하고자 하는 전체 텍스트를 제공해 주시겠어요? 텍스트를 알려주시면 요청하신 대로 한국어로 번역해 드리겠습니다.
완벽한 예산을 세웠다. 삼 일간 지속됐다.
지난 1월, 나는 스프레드시트를 열어 매달 예산을 달러 단위로 모두 계획했다.
식료품: $400. 외식: $150. 구독: $50. 교통: $120. 기분이 좋았다. 정리된 느낌. 어른스러웠다.
1월 4일까지 이미 친구 생일 저녁 식사 때문에 외식 예산을 초과했다. 1월 15일까지는 내 상황이 어디인지 전혀 몰랐다. 스프레드시트는 방치되었다. 익숙한가?
기존 예산 앱의 문제점
나는 모든 예산 앱을 사용해봤다—Mint, YNAB, Toshl, 이름만 대면 다 써봤다. 이 앱들은 한 가지는 잘한다: 이미 일어난 일을 기록한다. 디지털 영수증이다. 하지만 실제로 중요한 질문에 답하지 못한다:
“지금 내 계획에서 얼마나 벗어나고 있지?”
대부분의 앱은 재정을 뒤쪽 거울처럼 다룬다. 거래를 분류하고, 파이 차트를 보고, 과다 지출했다는 알림을 받을 수도 있다. 그때는 이미 돈이 사라진 뒤다.
DonFlow 소개
DonFlow는 다음을 가능하게 하는 미래 지향적인 도구입니다:
- 예산 계획 설정 – 카테고리별로 지출하고자 하는 금액을 정의합니다.
- 실제 지출 가져오기 – 은행 내보내기 파일이나 수동 입력을 통해 가져옵니다.
- 드리프트 확인 – 계획 대비 실제 상황을 실시간으로 업데이트합니다.
- 조기 경고 받기 – 카테고리를 초과하기 전에 경고를 받습니다, 초과 후가 아니라.
브라우저에서만 실행됩니다—서버도 없고, 회원가입도 없으며, 데이터가 기기를 떠나지 않습니다. 모든 데이터는 IndexedDB에 저장되므로 재무 데이터는 정확히 여러분의 디바이스에 보관됩니다.
작동 방식
- 예산 계획 만들기 – 카테고리와 월별 금액을 추가합니다.
- 거래 가져오기 – 복사·붙여넣기, CSV/Excel 파일 업로드, 혹은 수동 입력으로 가져옵니다.
- 시각적 피드백 – DonFlow가 데이터를 오버레이하고 다음과 같이 표시합니다:
- 🟢 온 트랙 – 계획 내 지출
- 🟡 드리프팅 – 한계에 근접 중
- 🔴 예산 초과 – 계획을 초과했습니다
월말 보고서를 기다릴 필요가 없습니다.
은행 내보내기 처리
은행은 CSV, XLSX, OFX 등 매우 다양한 형식으로 내보냅니다. DonFlow는 SheetJS를 사용해 스프레드시트를 파싱합니다:
import * as XLSX from 'xlsx';
async function parseTransactionFile(file) {
const buffer = await file.arrayBuffer();
const workbook = XLSX.read(buffer, { type: 'array' });
const sheet = workbook.Sheets[workbook.SheetNames[0]];
const rows = XLSX.utils.sheet_to_json(sheet, { header: 1 });
// Auto-detect columns: date, description, amount
const headers = rows[0].map(h => String(h).toLowerCase());
const dateCol = headers.findIndex(h =>
h.includes('date') || h.includes('날짜'));
const amountCol = headers.findIndex(h =>
h.includes('amount') || h.includes('금액'));
return rows.slice(1).map(row => ({
date: row[dateCol],
amount: parseFloat(row[amountCol]),
description: row[headers.findIndex(h =>
h.includes('desc') || h.includes('memo') || h.includes('적요'))]
}));
}파서는 영어와 한국어 모두에서 일반적인 헤더 패턴을 자동으로 감지하여 수동 열 매핑을 없애줍니다.
IndexedDB 로 로컬에 데이터 저장
All plans and transactions live in IndexedDB—no cookies, no localStorage limits, no cloud:
const DB_NAME = 'donflow';
const DB_VERSION = 1;
function openDB() {
return new Promise((resolve, reject) => {
const request = indexedDB.open(DB_NAME, DB_VERSION);
request.onupgradeneeded = (e) => {
const db = e.target.result;
if (!db.objectStoreNames.contains('transactions')) {
db.createObjectStore('transactions', {
keyPath: 'id', autoIncrement: true
});
}
if (!db.objectStoreNames.contains('budgetPlans')) {
db.createObjectStore('budgetPlans', {
keyPath: 'id', autoIncrement: true
});
}
};
request.onsuccess = () => resolve(request.result);
request.onerror = () => reject(request.error);
});
}Your data survives browser refreshes and works offline. Close the tab, come back next week—everything’s still there. → 데이터는 브라우저 새로고침에도 살아남으며 오프라인에서도 작동합니다. 탭을 닫았다가 다음 주에 다시 열어도 모든 것이 그대로 유지됩니다.
왜 서버가 없나요?
- 아키텍처 자체의 프라이버시 – 귀하의 금융 데이터는 제가 제어하는 서버에 절대 접촉하지 않습니다. 데이터베이스 침해 위험이 없습니다.
- 마찰 제로 – 가입 양식이 없으므로 실제로 5 초 만에 시작할 수 있습니다.
- 지속 비용 없음 – 서버 비용을 충당하기 위해 구독료를 청구할 필요가 없습니다. 영원히 무료입니다.
- 어디서든 작동 – 기업 방화벽 뒤든, 비행기 안이든 상관없습니다. 단순히 HTML, CSS, 그리고 JavaScript일 뿐입니다.
데모 체험
DonFlow를 가장 빠르게 체험하는 방법은 “데모 데이터 체험” 버튼을 클릭하는 것입니다. 샘플 예산 계획과 3개월 치 거래 내역을 로드하여 즉시 다음을 확인할 수 있습니다:
- 계획 대비 실제 비교가 어떻게 작동하는지
- 드리프트 경고가 어떻게 표시되는지
- 카테고리가 시간에 따라 어떻게 분류되는지
가짜 이메일이나 신용카드가 필요 없습니다—클릭만 하면 바로 탐색할 수 있습니다.
👉 DonFlow 체험하기 (실제 데모 URL로 교체)
로드맵 및 오픈‑소스
DonFlow는 오픈 소스이며 활발히 개발되고 있습니다. 향후 기능은 다음과 같습니다:
- OFX/QFX 가져오기 — 직접 은행 명세서 지원
- 다중 통화 — 한 통화로 벌고 다른 통화로 지출하는 사람들을 위해
- 예산 템플릿 — 일반적인 시나리오(학생, 프리랜서, 가족)를 위한 사전 구축된 계획
- PDF 내보내기 — 공유 가능한 월간 보고서
코드는 GitHub에 있습니다:
🔗
자유롭게 기여하고, 이슈를 제출하거나, 코드를 살펴보세요.
행동 촉구
저는 뒤만 보는 예산 앱에 대한 제 자신의 좌절감을 해결하기 위해 DonFlow를 만들었습니다. 같은 고민을 하셨다면 한 번 사용해 보세요.
지원받길 원하는 금융 데이터 형식은 무엇인가요? OFX? QIF? 특정 은행에 대한 직접 API 연결? 댓글을 남겨 주세요—여러분의 답변이 다음 릴리스를 좌우할 수도 있습니다.
DonFlow는 무료이며 오픈 소스이고, 완전히 브라우저에서 실행됩니다. 여러분의 돈, 여러분의 데이터, 여러분의 기기.