SpendWise - AI 지출 감사 도구

이 게시물은 GitHub Finish-Up-A-Thon Challenge를 위한 제출물입니다.

내가 만든 것

SpendWise AI는 사용자의 AI 도구 지출(Cursor, Copilot, Claude, ChatGPT, Gemini, Windsurf)을 검증된 벤더(Vendor) 가격과 비교하여 감사하고, 어디에서 과다 지출이 발생하는지, 그리고 어떻게 대처해야 하는지를 정확히 알려주는 무료 도구입니다.

본래 저는 이것을 한 스타트업의 일주일짜리 과제로 만들었습니다. 이 도구가 해결하는 문제는 간단합니다. 창업자와 엔지니어링 매니저(Engineering Manager)들은 여러 AI 도구에 비용을 지불하지만, 자신이 바가지를 쓰고 있는지 여부는 알지 못합니다. SpendWise는 가입 절차 없이 1분도 채 되지 않아 그 답을 제공합니다.

흥미로운 점은 핵심 감사 엔진(Audit Engine)에 AI가 전혀 들어있지 않다는 것입니다. 검증된 가격 데이터에 대해 6가지 하드코딩된 규칙(Hardcoded rules)을 실행하므로, 모든 권장 사항은 재현 가능하고 검증 가능합니다. AI(Groq의 Llama 3)는 구조화된 결과 위에 친절한 요약 문단을 작성할 때만 개입합니다. 제가 이런 선택을 한 이유는 금융 권장 사항은 결정론적(Deterministic)이어야 하기 때문입니다. 언제나 동일한 입력에 대해 동일한 출력이 나와야 합니다.

기술 스택은 Next.js 16, TypeScript, Tailwind + shadcn/ui, 데이터베이스를 위한 Supabase, AI 요약을 위한 Groq, 이메일을 위한 Resend, 그리고 테스트를 위한 Vitest를 사용했습니다. Vercel에 배포되었습니다.

라이브 앱: spendwise-ai-test.vercel.app
소스 코드: github.com/Karam-999/SpendWise-AI

데모

기존 감사 도구:

복귀 버전 (가격 변경 시 재감사):

spendwise-ai-test.vercel.app에서 1라운드 버전을 직접 체험해 볼 수 있습니다. 월 40달러인 Cursor의 Teams 플랜과 같은 도구를 선택하고 감사를 실행하여 전체 절감액 내역을 확인해 보세요. 2라운드 기능(가격 변경 감지, 재감사 차이 보기)은 별도의 브랜치에 있으며 아직 메인(Main) 브랜치에 병합되지 않았지만, 위의 데모 영상에서 전체 흐름을 확인할 수 있습니다.

복귀 스토리

이전 상태:

원래 버전은 기본적으로 계산기에 불과했습니다. AI 도구들을 입력하면 어디에서 돈을 아낄 수 있는지 보여주고 그것으로 끝이었습니다. 만약 다음 주에 Cursor가 가격 정책을 변경한다면, 당신의 감사(Audit) 결과는 이미 구식이 되어버리고 당신은 그 사실을 전혀 알 수 없었을 것입니다.

일회성 도구로서는 괜찮게 작동했습니다. 양식(Form), 감사 엔진(Audit engine), AI 요약, 이메일 리드 캡처(Email lead capture), OG 태그가 포함된 공유 가능 URL, 로컬 스토리지(localStorage) 지속성, 스팸 방지, 9개의 테스트, 그리고 CI를 모두 갖추고 있었습니다. 하지만 감사 결과에는 기억이 없었습니다. 가격 스냅샷(Pricing snapshot)도, 변경 감지(Change detection)도, 사용자를 다시 불러올 방법도 없었습니다.

추가한 사항:

첫 방문 이후에도 실제로 유용하게 유지되는 시스템으로 탈바꿈시켰습니다.

주요 변경 사항:

• 이제 모든 감사 결과는 당시 사용된 정확한 가격 데이터를 데이터베이스에 스냅샷(Snapshot)으로 저장합니다. 이를 통해 저는 항상 "그때"의 가격과 "지금"의 가격을 비교할 수 있습니다.

• 가격 재정의(Pricing overrides)를 수용하는 /api/detect-changes 엔드포인트를 구축했습니다. 이 엔드포인트는 입력된 값을 저장된 모든 감사 결과와 비교하고, 영향을 받는 항목들을 다시 실행하며, 사용자별로 무엇이 변경되었는지 알려주는 통합 이메일을 발송합니다.

• /audit/[id]/reaudit 경로에 재감사 차이(Re-audit diff) 뷰를 추가했습니다. 여기서는 이전 권장 사항과 새로운 권장 사항을 나란히 보여주며, 절감액의 차이(Savings delta), 변경/추가/삭제된 권장 사항을 강조 표시하고, 점수 비교를 제공합니다.

• 주입 가능한 가격(Injectable pricing)을 지원하도록 감사 엔진을 리팩터링(Refactor)해야 했습니다. 기존 버전은 가격이 프라이빗 상수(Private constant)로 하드코딩되어 있었는데, 이는 1단계(Round 1)에서는 적절한 결정이었으나 2단계(Round 2)를 어렵게 만들었습니다. 결국 가격을 내보내고(Exporting), 커스텀 가격을 수용하는 타입화된(Typed) 버전의 엔진을 생성했으며, 15개의 내부 참조를 업데이트했습니다. 리팩터링 후에도 기존 9개의 테스트는 모두 통과했습니다.

• 가격 차이(Pricing diff) 로직을 위한 6개의 새로운 테스트를 작성했습니다. 이제 총 테스트 개수는 15개이며, 빌드(Build)와 타입 체크(Type checking) 모두 깨끗하게 통과합니다.

의도적으로 건너뛴 것들: HTML 이메일 템플릿 (하나의 요소를 다듬는 대신 전체 흐름을 작동시키기 위해 일반 텍스트(plain text)를 전송함), 관리자 대시보드 (데이터는 이미 SQL을 통해 쿼리 가능함), 그리고 예약된 크론(scheduled cron) (수동 엔드포인트는 작동하지만, Vercel Cron은 Pro 티어가 필요함).

GitHub Copilot 사용 경험

저는 Copilot을 주로 그렇지 않았다면 시간을 잡아먹었을 지루한 작업들에 사용했습니다.

**문서화 (Documentation)**가 가장 큰 수확이었습니다. 작성해야 할 마크다운(markdown) 파일이 많았는데 (아키텍처 문서, PR 설명, 개발 로그, 회고 등), Copilot 덕분에 초안을 빠르게 작성할 수 있었습니다. 제가 검토하고 다시 작성하긴 했지만, 빈 페이지에서 시작하지 않아도 된다는 점이 많은 시간을 절약해 주었습니다.

버그 수정 (Bug fixing) 또한 도움이 된 분야였습니다. Supabase 삽입(insert)이 조용히 실패할 때 (RLS(Row Level Security)로 인해 데이터와 에러 모두 null을 반환하는 상황), Copilot은 무슨 일이 일어나고 있는지 추적하기 위한 진단용 로깅(diagnostic logging)을 빠르게 작성하도록 도와주었습니다. 또한 <Link> 대신 <a> 태그를 사용하는 것과 같은 Next.js 린트(lint) 문제나 잘못된 setState 패턴도 잡아냈습니다.

2라운드 리팩터링(refactor) 중의 TypeScript 타입 체크 (TypeScript type checking) 단계에서 Copilot은 진가를 발휘했습니다. 하드코딩된 PRICING.을 주입된 pricing. 파라미터로 변경하고, 가격 데이터 구조를 위한 새로운 타입들을 생성하며 15개의 참조(reference)를 수정하고 있었습니다. Copilot의 인라인 제안(inline suggestions) 덕분에 이러한 기계적인 리팩터링을 훨씬 빠르게 수행할 수 있었습니다.

6개의 새로운 가격 차이(pricing diff) 테스트를 위한 테스트 스캐폴딩 (Test scaffolding) 작업입니다. Copilot이 보일러플레이트(boilerplate) (import, describe/it 블록)를 생성해 주었고, 저는 실제 테스트 로직을 채워 넣었습니다.

사용하지 않은 부분: 실제 감사 규칙 (모든 가격 정보를 벤더 페이지와 대조하여 수동으로 검증함), 아키텍처 결정, 그리고 비즈니스/전략 문서입니다. 그런 것들은 자동 완성(autocomplete)이 아니라 실제 사고가 필요합니다.