계약서, 견적서, 보고서 등 반복 문서를 템플릿 기반으로 자동 생성하는 B2B SaaS. 드래그앤드롭 에디터로 비개발자도 템플릿 제작 가능.
매달 수천 건의 계약서를 수동으로 작성하던 고객사의 문제를 해결하기 위해 만든 문서 자동화 SaaS입니다.
User Flow:
관리자 → 드래그앤드롭으로 템플릿 설계 (변수 바인딩, 조건부 섹션, 반복 블록) → API 또는 Zapier 트리거 → 데이터 주입 → PDF 렌더링 → 이메일 발송 / S3 저장
프론트엔드 핵심:
• 드래그앤드롭 에디터 — Vue 3 Composition API + vuedraggable로 블록 기반 편집기 구현. 각 블록(텍스트, 표, 이미지, 서명란)이 독립적인 설정 패널을 가짐
• 실시간 프리뷰 — 편집 시 debounce된 PDF 미리보기를 iframe으로 표시
• 변수 시스템 — Mustache 문법으로 동적 데이터 바인딩, 중첩 객체 및 배열 반복 지원
PDF 렌더링 일관성 — Puppeteer로 HTML → PDF 변환 시, 브라우저 렌더링과 PDF 결과물의 페이지 분할 위치가 달라 표가 중간에 잘리는 문제. 고객사마다 미세하게 다른 출력 요구사항.
Lambda Cold Start — PDF 생성을 AWS Lambda에서 처리하는데, Puppeteer 번들(~300MB)의 cold start가 8초 이상. 고객이 '생성' 버튼을 누르고 10초 이상 기다리는 상황.
대용량 문서 메모리 이슈 — 수백 페이지짜리 보고서 생성 시 Puppeteer가 메모리 2GB 이상 사용하여 Lambda가 OOM(Out of Memory)으로 종료.
CSS page-break-inside: avoid + 커스텀 페이지네이션 — 표, 이미지 등 분할되면 안 되는 요소에 page-break 규칙 적용. 블록 단위로 높이를 사전 계산하여 페이지 경계를 예측하고, 자동으로 빈 공간을 삽입하는 레이아웃 엔진 자체 구현.
Provisioned Concurrency + 경량 PDF 엔진 분기 — 간단한 문서는 @react-pdf/renderer로 서버에서 직접 생성 (cold start 무관), 복잡한 문서만 Puppeteer Lambda로 라우팅. Provisioned Concurrency로 상시 warm 인스턴스 5개 유지하여 cold start 제거.
스트리밍 렌더링 — 대용량 문서를 10페이지 단위로 분할 렌더링 후 pdf-lib로 병합. 메모리 사용량을 500MB 이내로 제한하고, 진행률을 WebSocket으로 클라이언트에 실시간 전달.
