Vyorin Budget: 사람들이 실제로 사용하는 예산 추적기

이 글은 Hacktoberfest Open-Source AI Challenge Week 2: Side Hustle 제출물입니다.

제가 만든 것 (What I Built)

대부분의 예산 관리 앱은 같은 이유로 실패합니다. 사용자에게 힘을 느끼게 하기보다 죄책감을 느끼게 만들기 때문입니다. 은행 계좌를 연결하고, 3개월 치 데이터를 분류하며, Swiggy 지출에 대해 기분이 나빠져서 일주일 만에 포기하게 됩니다.

Vyorin Budget은 흐름을 바꿉니다: 수입 → 예산 → 지출 → 인사이트.

저는 우리가 인도에서 실제로 생활하는 방식에 맞춰 이 앱을 만들었습니다. 달력 월(calendar month) 단위가 아니라, 급여일(payday)부터 급여일까지입니다. 만약 5일에 급여를 받는다면, 사용자 한 달은 5일부터 다음 달 4일까지 진행됩니다. Vyorin은 이를 이해합니다.

누가 비용을 지불할까요? (Who Would Pay for It?)

이것은 Week 2: Side Hustle 주제였기 때문에, 저는 처음부터 수익 모델(margins)을 염두에 두고 설계했습니다. 인프라 비용은 제로입니다.

프리랜서: 클라이언트별 예산 분류, 자동 GST 적립 기능 및
수입 우선 온보딩 (Income-first onboarding): 수입을 추가하기 전까지는 지출을 추가할 수 없습니다. 이는 명확성을 강제하고 이탈률(churn)을 낮춥니다. 첫 로드 시에는 전체 화면으로 급여 입력창만 보이고 다른 것은 아무것도 없습니다.
반복 청구서 (Recurring bills): 임대료, OTT, SIP 등 주기적인 지출에 대해 토글 🔁 기능을 사용합니다. 이는 다음 달의 항목을 자동으로 생성해 줍니다. 인사이트에서는 “주기적 지출로 ₹18,500 — 수입의 37%”와 같은 수치를 보여줍니다.
급여일 소진율 (Payday burn rate): 급여일을 월의 1일, 5일, 10일, 15일, 25일 또는 마지막 날로 설정합니다. 메인 스트립에는 “하루 ₹1,240 • 급여일까지 14일”이 표시되며, 예산을 초과하면 빨간색으로 변합니다.
저축 목표 (Savings goals): 고아 여행(Goa Trip)이나 비상금(Emergency Fund) 같은 목표를 만듭니다. 진행률 막대(Progress bars)가 저축액을 추적하고 사용 가능한 지출 금액을 조정하는 데 도움을 주어, 실수로 고아 자금을 쓰는 것을 방지합니다.
100% 로컬 (100% local): 로그인도, 은행 연동도, 클라우드도 없습니다. 모든 데이터는 localStorage에 저장됩니다. 이 앱은 오프라인에서 작동하며 ₹ 아이콘과 함께 PWA로 설치할 수 있습니다.

데모

실제 앱 (Live App): https://vyorin-budget.netlify.app

45초 테스트

링크를 엽니다. 급여를 먼저 요청하는 전체 화면 환영 모달이 보일 것입니다. 이는 의도된 것입니다.
₹60,000을 급여로 추가합니다. 식비(Food)와 교통비(Transport)에 예산을 설정합니다 (각각 ₹10,000 및 ₹5,000).
+ 버튼을 누릅니다. 메모에 “Swiggy Biryani”를 적어 식비로 ₹450을 추가합니다. 소진율이 즉시 업데이트되는 것을 확인하세요.
월 옆의 톱니바퀴 아이콘을 누릅니다. 급여일을 5일로 설정합니다. “하루 ₹X • 급여일까지 Y일”을 확인합니다.
설치하기:

Android Chrome: 메뉴 → 앱 설치(Install app).
iPhone Safari: 공유 → 홈 화면에 추가(Add to Home Screen).

빌드 하이라이트 (Build Highlights)

단일 파일: 약 254 KB이며, node_modules가 없습니다.
375px 및 390px의 뷰포트 너비에서 0 px 오버플로우를 보입니다.
Lighthouse PWA 점수: 100점.
Lighthouse 접근성(Accessibility) 점수: 96점.

코드

실제 앱 및 코드 (Live App and Code): https://vyorin-budget.netlify.app

별도의 GitHub 저장소는 없습니다. 배포된 소스 자체가 코드입니다. 마우스 오른쪽 버튼을 클릭하여 '소스 보기(View Source)'를 통해 앱을 검사할 수 있습니다.

단일 index.html 파일 — 약 2,800줄 분량입니다.
빌드 과정 없이 CDN을 통한 React 사용.
localStorage 키를 통한 데이터 지속성 확보:
- vyorin-budget-tracker-v1
- vyorin-goals
- vyorin-payday
Blob URL을 통한 PWA(Progressive Web App) 지원: 매니페스트와 서비스 워커가 페이지 내에서 생성되어 단일 파일 앱이 Netlify에서도 작동할 수 있게 합니다.
핵심 로직에는 반복 지출 처리, 소비 계산 및 월별 이월 처리를 담당하는 autoGenerateRecurring(), calculateBurnRate(), 그리고 getDaysToPayday()가 포함됩니다.

왜 단일 파일인가? 감사 가능성(Auditability) 때문입니다. 가게 주인은 이를 CA(공인회계사)에게 이메일로 보낼 수 있습니다. 숨겨진 서버는 없습니다. 포크하여 벵골어 상점들을 추가하고 $0으로 어디든 호스팅할 수 있습니다.

제작 과정 (How I Built It)

Vyorin을 만들 때 **Meta AI (Muse Spark)**를 페어 프로그래머로 활용했으며, 오픈 소스 사고방식에 기반했습니다.

아이디어 구상 (Ideation)

제가 처음 던진 프롬프트는

향후 업그레이드는 로컬 추론(local inference)입니다. WebLLM을 브라우저에서 실행하여 휴리스틱(heuristics) 대신 1B 오픈 모델로 대체합니다. 아키텍처는 동일하고, 비용은 $0이며, 데이터가 기기를 벗어나지 않습니다.

오픈 혁신이 중요한 이유?

만약 제가 폐쇄형 금융 API를 사용해야 했다면, Vyorin은 존재하지 못했을 것입니다.

폐쇄적인 경로는 이렇습니다. Plaid는 월 최소 $500이며 SBI에 대한 지원이 제한적입니다. RazorpayX는 월 ₹15,000이고, OpenAI는 카테고리별로 $0.002가 발생하며, 여기에 Firebase 비용까지 추가됩니다. 손익분기점을 넘기려면 100명의 유료 사용자가 필요합니다. 그러다 결국 포기하게 됩니다.

오픈이 가능하게 만든 것들

정책이 아닌 물리적 원칙으로서의 개인정보 보호: 서버가 없다는 것은 데이터가 휴대폰을 벗어나지 않는다는 의미입니다. 폐쇄형 API로 이런 약속을 해보세요.
무비용 확장성: Netlify는 $0, 데이터베이스도 $0, AI도 $0입니다. 만약 내일 10,000명의 사용자가 온다 해도 인프라 비용은 여전히 $0입니다. 이것은 사용자 한 명당 100% 마진을 가져가는 부업과 같습니다.
허가 없이 현지화: 상점 이름으로

남은 금액 ₹53,950 • 일일 비용 ₹1,798 • 다음 달까지 30일 남음.

그는 일일 비용 ₹1,798을 응시했다.

“만약 저 ₹12,000짜리 강좌를 사면요?” 그가 물었다.

내가 그것을 추가하자. 소진율(burn rate)이 일일 ₹1,398로 떨어졌다. 막대가 호박색으로 변했다.

그는 조용히 있다가 말했다:

“예전에는 장부에 적는 것을 잊곤 했어요. 이제 휴대폰이 얼마나 남았는지 알려주네요.”

이전에 나는 장부 기록을 잊곤 했다. 이제는 휴대폰이 나에게 남은 금액을 알려준다.

3일째 되던 날, 그가 전화를 걸어왔다: “1일까지 하루에 ₹420이 남았어요. 저 도메인을 사야 할까요?”

7일째 되던 날, 옆 가게에서 차를 파는 그의 친구가 그것을 보고 물었다. “이거 얼마예요?”

내가 말했다. “지금은 무료고, 가게 이름으로 쓰려면 ₹200만 받아요.”

그는 현금 상자에서 100루피 지폐 두 장을 내밀어 주었다.

그것이 나의 첫 수익이었다. 나는 아직도 그 ₹200를 지갑에 가지고 있다.

직접 해보려면, 수입 항목 하나와 Swiggy 지출 항목 하나를 추가해 보세요. 소진율(burn rate)을 관찰하세요.

바로 이 순간이다.