영수증 보관함 (Receipt DB) · v5.57
GPT로 정리한 영수증 텍스트를 영구 보관하고, 가계부처럼 들여다볼 수 있는
단일 HTML 앱. 외부 CDN이나 빌드 의존성 없이 GitHub Pages에서 실행됩니다.
🔗 사용하기: https://sh4sh-ux.github.io/receipt-db/
특징
- OCR/API 없이 원하는 AI 도구로 사진 → 텍스트 변환 → 앱에 붙여넣기
- 카테고리 자동 분류 — SVG/PNG 카테고리 아이콘과 사용자 지정 키워드로 추정, 사용자가 수정하면 학습
- 가계부 화면 — 월별 총지출, 전월 대비, 카테고리별 비중, 일별 지출 막대
- 모바일·데스크톱 반응형 — 모바일은 통계·내역·추가를 하단 탭으로 분리, 데스크톱 목록은 전체/월별 전환
- 금액 이중 검증 — 수량×단가·품목 금액·품목 합계·영수증 총액의 불일치를 저장 전 표시
- 멤버십(구독·선불권) — 넷플릭스·밀리의서재 같은 매달·매년 구독을 등록하면 결제일에 '결제됐나요?'로 확인해 영수증으로 남기고, 선불권 잔액도 같은 탭에서 관리
- 대신 결제(대납) — 다른 사람 대신 결제한 영수증에 받을 돈을 기록하고, 실제로 받은 금액·날짜를 그때그때 입력해 남은 금액을 관리(할부 개월·입금 횟수와 묶지 않음, 남은 0원이면 완료)
- 더치페이 일괄 전송 — 여러 영수증을 선택해 하나의 정산 모임으로 안전하게 전달
- 내 이름 기본 결제자와 영수증 → 더치페이 새 모임 연결
- IndexedDB에 영수증 + 사진 함께 영구 저장
- JSON 백업 다운로드/복원 (사진까지 포함)
- Dropbox 자동 백업 — Full Dropbox 권한으로 OAuth 연결 후
/07_Apps/영수증(RECEIPT-DB)에 영수증과 사진을 충돌 감지 방식으로 동기화·백업
- 오프라인 앱 셸 — 온라인에서는 최신 화면을 우선하고, 연결이 끊기면 마지막 설치 버전으로 실행
- 카테고리 아이콘 16종 — 사용자 원본 벡터를 그대로 사용한 투명 SVG, 라이트·다크 테마 자동 대응
사용 방법
- 추가 탭에서 프롬프트 복사 버튼을 누른 뒤,
- 사용 중인 AI 도구에 영수증 사진과 함께 붙여넣고
- 받은 응답을 그대로 앱의 붙여넣기 영역에 붙입니다
- 미리보기 확인 후 사진 첨부 → 저장
- 내역 탭에서 월별 요약 및 영수증 검색
백업
브라우저 데이터를 지우면 함께 사라지니, 설정 탭에서
정기적으로 JSON 백업 파일을 받아두세요. 사진까지 한 파일에 들어갑니다.
Dropbox 연결 시 자동 동기화 파일은 /07_Apps/영수증(RECEIPT-DB)/receipt-db_sync.json,
수동 백업 파일은 /07_Apps/영수증(RECEIPT-DB)/backups/ 아래에 저장됩니다.
같은 폴더에 매일 자동 백업(receipt-db_auto_날짜.json, 최근 30일·사진 제외)이 쌓이고, 설정 > Dropbox에서 복원에서 고를 수 있습니다.
Dropbox 앱은 Full Dropbox 접근 유형으로 만들어야 이 경로에 쓸 수 있습니다.
기술
- 순수 HTML + CSS + Vanilla JS (단일 파일, 약 490KB)
- IndexedDB v2 (
receipts / images / settings stores)
- 버전별 서비스 워커 앱 셸 + dependency-free 릴리스 검사
- 외부 CDN·폰트·빌드 시스템 없음
자매 앱
더치페이 — 같은 디자인 톤의 모임 정산 앱
변경 이력
버전별 변경 내용은 CHANGELOG.md에 있습니다.
