2026년 당시 저는 커피 비용을 수동으로 입력하는 것에 정말 좌절하고 있었습니다. 바로 그 순간 Floww가 탄생했습니다.

Floww는 단순한 예산 관리 앱이 아닙니다. 여러분의 무질서한 실제 금융 데이터(구겨진 영수증, 복잡한 은행 명세서, Gmail 거래 내역)를 구조화되고 실행 가능한 인텔리전스(Intelligence)로 변환하는 금융 엔진입니다. 제 프로젝트 페이지에서 전체 프로젝트 상세 내용을 확인하실 수 있습니다.

이 블로그에서는 제가 Floww를 어떻게 구축했는지, AI와 함께하는 독특한 Vibe Coding 경험, 그리고 Floww가 시장의 다른 모든 금융 앱과 근본적으로 무엇이 다른지에 대해 깊이 있게 다룹니다.

비전: 단순한 지출 추적기를 넘어서
대부분의 지출 추적기는 미화된 스프레드시트(Spreadsheet)에 불과합니다. 기본적인 CRUD(Create, Read, Update, Delete) 작업은 가능하게 해주지만, 결국 재무 상태를 이해하는 것보다 데이터를 입력하는 데 더 많은 시간을 소비하게 됩니다. Floww를 통해 저는 이 흐름을 뒤집고 싶었습니다. AI가 데이터 입력을 처리하고, 사용자는 의사결정만 내리는 방식입니다.

Floww를 근본적으로 다르게 만드는 것은 무엇일까요?

범용 문서 인텔리전스 (Universal Document Intelligence): Floww는 단순히 간단한 영수증만 읽는 것이 아닙니다. Google Gemini 2.5 Flash의 멀티모달 (Multi-modal) 기능을 사용하여 품목별 식료품 영수증, 상세 급여 명세서, 여러 페이지에 걸친 은행 명세서를 이해합니다.

Agent Floww: RAG (Retrieval-Augmented Generation) 기반의 인앱 챗봇입니다.

인증 (Auth): Firebase Auth + Gmail API (거래 동기화를 위한 OAuth 2.0)

스타일링 (Styling): Tailwind CSS + Framer Motion

배포 (Deployment): Netlify — GitHub를 통한 CI/CD

"Vibe Coding" 경험
Floww를 구축하는 과정은 전통적인 개발 프로세스가 아니었습니다. 저는 보일러플레이트 (Boilerplate) 코드를 작성하기보다 의도와 "바이브 (Vibe)"를 설명하는 방식인 AI 보조 코딩 (AI-assisted coding)에 크게 의존했습니다. 이것이 바로 바이브 코딩 (Vibe coding) 운동의 핵심입니다. AI가 스캐폴딩 (Scaffolding)을 처리하고, 인간은 사고 (Thinking)를 담당하는 것입니다.

"프리미엄 iOS 앱 같은 느낌을 주면서도, 웹 우선 (Web-first)의 영혼을 가진 대시보드를 만들어줘."

"내가 정규 표현식 (Regex)을 단 하나도 작성하지 않고도 식료품 영수증과 은행 명세서를 구분할 수 있는 문서 프로세서를 구축해줘."

AI가 보일러플레이트를 처리하는 동안 저는 가장 어려운 부분, 즉 Agent Floww의 프롬프트 엔지니어링 (Prompt engineering)과 멀티모달 (Multi-modal) OCR 파이프라인에 집중할 수 있었습니다. 덕분에 빈 폴더에서 시작하여 전통적인 방식에 걸리는 시간의 아주 일부만으로 프로덕션 준비가 된 금융 엔진을 완성할 수 있었습니다.

심층 분석: 핵심 기능 구축 방법

1. 멀티모달 (Multi-Modal) OCR 파이프라인
   Floww의 핵심은 Gemini 2.5 Flash를 기반으로 구축된 멀티모달 문서 이해 파이프라인입니다. 이 모델은 분류기 (Classifier, 이것이 어떤 종류의 문서인가?)와 추출기 (Extractor, 문서에서 구조화된 데이터를 추출함)의 역할을 동시에 수행합니다.

aiRouter.ts — Gemini 분류기 프롬프트
// Gemini 2.5 Flash inlineData를 사용한 문서 분류기 + 추출기
const prompt = `이 문서를 주의 깊게 분석하세요. 다음 중 무엇인지 결정하세요:

1. 품목별 청구서 (ITEMIZED BILL, 수량이 포함된 항목별 내역)
2. 지출 (EXPENSE, 단일 영수증)
3. 수입 (INCOME, 급여 명세서)
4. 은행 명세서 (BANK STATEMENT, 다수의 거래 내역)

각 유형에 대한 특정 스키마 (Schema)가 포함된 JSON을 반환하세요...`

// Base64 이미지가 Gemini의 inlineData로 직접 전달됨
const result = await model.generateContent([
{ inlineData: { mimeType: "image/jpeg", data: base64Image } },
{ text: prompt }
]);
Gemini의 inlineData 기능을 사용하여, Base64 이미지를 모델로 직접 파이프라인(pipe)화합니다. Gemini는 단순히 원시 텍스트(raw text)를 읽는 것에 그치지 않고, 공간적 레이아웃(spatial layout)을 이해하여 복잡한 문서에서 항목(line items)을 높은 정확도로 추출할 수 있습니다.

1. Agent Floww — RAG 기반 금융 어시스턴트
   Agent Floww는 단순한 LLM 래퍼(wrapper)가 아닌, 앱 내 RAG (Retrieval-Augmented Generation, 검색 증강 생성) 챗봇입니다. 질문을 던지면 서버는 Prisma/PostgreSQL에서 사용자의 월간 지출, 수입, 예산을 동적으로 가져와 이 실시간 데이터를 시스템 프롬프트(system prompt)에 "금융 컨텍스트 (Financial Context)"로 주입합니다. 이를 통해 초개인화된 정확한 답변을 보장합니다.

이 방식 덕분에 Agent Floww는 사용자가 차트를 하나도 필터링할 필요 없이 지난달의 정확한 Swiggy 지출액을 알 수 있습니다. 금융 데이터는 검색 코퍼스(retrieval corpus)가 되고, Gemini는 추론(reasoning)을 수행합니다.

1. Gmail 동기화 — 거래 내역 자동 기록
   가장 강력하면서도 (과소평가된) 기능 중 하나입니다. Floww는 OAuth 2.0을 통해 사용자의 Gmail에 연결하여 거래 관련 이메일(결제 확인서, 주문 영수증, 은행 알림 등)을 스캔합니다. 이를 자동으로 추출하여 지출로 기록하므로 수동 입력이 전혀 필요 없습니다.

2. 금융 건강 점수 (Finance Health Score)
   Floww는 수입 대비 지출 비율, 예산 준수 여부, 저축 패턴을 기반으로 실시간 금융 건강 점수를 계산합니다. 이는 정적인 숫자가 아니라, 거래 내역을 추가할 때마다 업데이트됩니다. 일상적인 금융 습관을 위한 신용 점수라고 생각하면 됩니다.

결과 및 배운 점
Floww는 오늘날 소프트웨어가 구축되는 방식의 거대한 변화를 보여줍니다. 바이브 코딩 (vibe coding)과 잘 선택된 현대적 스택 (Next.js 15, tRPC, Gemini API)을 결합함으로써, 일반적인 팀이라면 구축에 수개월이 걸렸을 제품을 출시할 수 있었습니다.

커피 영수증을 스캔하든 여러 페이지의 은행 명세서를 업로드하든, Floww는 이 모든 것을 조용하고 우아하게 처리합니다. 그리고 이것은 시작일 뿐입니다. RAG 에이전트 (RAG agent)와 OCR 파이프라인 (OCR pipeline)은 훨씬 더 복잡한 금융 도구에 동력을 공급할 수 있는 기초 수준의 기술입니다.