BillForge — 경량 청구서 생성기, PDF 내보내기 및 Google Sheets 동기화

Source: Dev.to

🚀 HTML, CSS, JavaScript만으로 가벼운 인보이스 생성기를 만들었습니다.

제가 사용해 본 대부분의 인보이스 도구는 다음과 같은 문제점이 있습니다:

• 너무 무겁다
• 로그인/회원가입이 필요하다
• 단순한 사용 사례에 비해 과도하다

그래서 최소한의 기능만 갖춘 것을 직접 만들기로 했습니다.

BillForge 소개

BillForge는 브라우저에서 완전히 실행되는 가벼운 인보이스 생성기입니다. 다음을 목표로 설계되었습니다:

• 즉시 사용 가능 (설정 불필요)
• 백엔드 없이 동작 (선택적인 Google Sheets 연동)
• 깔끔하고 인쇄 가능한 인보이스 생성
• PDF로 손쉽게 내보내기

기능

• 동적 인보이스 생성 – 항목을 실시간으로 추가/제거
• 실시간 합계 계산
• PDF로 내보내기 (html2canvas + jsPDF 사용)
• WhatsApp 또는 Gmail을 통한 공유
• 선택적 Google Sheets 연동으로 인보이스 데이터 저장

기술 스택

• HTML5
• CSS3
• Vanilla JavaScript
• html2canvas – 인보이스 레이아웃을 캡처
• jsPDF – 캡처된 캔버스를 PDF로 변환
• Google Apps Script (선택 사항) – 데이터를 Google Sheets에 저장

작동 원리

1. 앱이 html2canvas를 사용해 인보이스 레이아웃을 캡처합니다.
2. 캡처된 캔버스가 jsPDF에 전달되어 PDF 파일을 생성합니다.
3. Google Sheets 연동이 활성화된 경우, Google Apps Script 엔드포인트가 인보이스 데이터를 받아 시트에 저장합니다.

라이브 데모 & 소스 코드

• Live Demo:
• GitHub Repository:

도전 과제 및 배운 점

• DOM 기반 PDF 생성은 항상 간단하지 않다.
• PDF 품질과 파일 크기 사이의 균형을 맞추는 것이 까다롭다.
• UI를 깔끔하게 유지하는 것이 사용성에 큰 차이를 만든다.
• 간단한 프로젝트라도 선택적인 백엔드 연동을 통해 이점을 얻을 수 있다.

향후 계획

• 인보이스 내역 보기
• 커스텀 테마
• CSV/Excel로 내보내기

피드백 요청

다음에 대해 의견을 듣고 싶습니다:

• 이런 도구에 어떤 기능을 기대하시나요?
• 개선점이나 아이디어가 있나요?

읽어 주셔서 감사합니다!