소개
카드 결제 캡처 이미지만 올리면 AI가 자동으로 지출 내역을 추출·정리해주는 개인 지출 대시보드 PWA를 만들었습니다.
여러 장의 카드(KB체크, KB신용, 현대카드,은행자동이체)를 결제 문자나 앱 알림 화면을 캡처해서 올리기만 하면 AI가 매장명·금액·날짜·카드종류를 자동 추출하고, PC와 아이폰에서 동기화되는 대시보드를 만들고 싶었습니다.
진행 방법
사용 도구
Claude (Anthropic API) — 캡처 이미지에서 결제 내역 텍스트 추출 (Vision)
Supabase — 클라우드 DB로 기기 간 데이 터 동기화
Cloudflare Pages — PWA 배포 (아이폰 홈 화면 아이콘)
Chart.js — 카드별·매장별·월별 지출 차트
주요 기능
이미지 드래그&드롭 / 터치 업로드 — 여러 장 동시 가능
AI 자동 추출 — 매장명·금액·날짜·카드종류
4개 탭 대시보드 — 내역 / 카드별(도넛차트) / 매장별(합계) / 월별(바차트)
수정·삭제 — 잘못 인식된 항목 즉시 교정
월별 필터 — 과거 내역 계속 확인 가능
중복 방지 — 같은 캡처 두 번 올려도 자동 스킵
PWA — 아이폰 홈 화면에 앱 아이콘으로 추가
기기 간 동기화 — Supabase를 통해 PC↔아이폰 데이터 공유
결과와 배운 점
배운 점 & 꿀팁
Claude Vision API는 카드사별 파싱 규칙이 필요 없다 — 어떤 카드사 문자든, 앱 알림이든 캡처만 하면 AI가 알아서 추출합니다. 정규식 파싱 대비 개발 시간이 대폭 단축됩니다.
상대 시간("2시간 전", "1일 전") 처리가 핵심 — 탐나는전 같은 앱은 절대 날짜가 아닌 상대 시간으로 표시되므로, 프롬프트에 "오늘 날짜"를 명시하고 계산 규칙을 지정해야 합니다.
PWA + Supabase 조합이 강력하다 — 별도 앱스토어 등록 없이 홈 화면 아이콘 + 클라우드 동기화를 구현할 수 있습니다.
시행착오
아티팩트 iframe 제한 — Claude.ai 아티팩트 내에서는 Supabase 등 외부 API 호출이 차단됩니다. api.anthropic.com만 허용되므로, 동기화가 필요하면 반드시 외부 배포(Cloudflare Pages 등)해야 합니다.
날짜 형식 불일치 — AI가 2026-5-30 / 2026-05-30을 혼용 반환하여 같은 달이 두 개로 분리되는 버그 발생 → normalizeDate() 함수로 해결했습니다.
iOS 파일 업로드 — iframe 내에서 input.click() 프로그래밍 호출이 iOS Safari에서 차단됨 → PWA로 전환하여 해결했습니다.
confirm() 미작동 — 아티팩트 환경에서 confirm() 대화상자가 동작하지 않음 → 인라인 확인 UI로 대체했습니다.
