피드로 돌아가기
Dev.toFrontend
원문 읽기
Client-side PDF 렌더링을 통한 Zero-Server 아키텍처 구현
I Built a Free Invoice Generator, Resume Builder, and Cover Letter Generator That Don't Require Signup
AI 요약
Context
기존 PDF 생성 서비스들의 과도한 Signup Wall과 서버 기반 데이터 수집 방식에 따른 프라이버시 침해 문제 식별. PDF 생성이라는 단순 기능이 불필요한 SaaS 모델로 비대해진 구조적 비효율성 분석.
Technical Solution
- pdf-lib 라이브러리를 활용한 100% Browser-based PDF 생성 구조 설계로 서버 통신 제거
- React State와 HTML/CSS Live Preview를 결합하여 실시간 렌더링 피드백 루프 구현
- 픽셀 좌표 기반의 pdf-lib 제약을 극복하기 위해 텍스트 래핑 및 페이지 분기를 자동 계산하는 drawTable 헬퍼 함수 개발
- ATS(Applicant Tracking System) 호환성 확보를 위해 Custom Font를 배제하고 StandardFonts(Helvetica)만 사용하는 설계 선택
- Canvas API를 이용한 Client-side 이미지 리사이징 후 embedPng()를 통한 PDF 임베딩 처리
- Web Worker 내 PDF 생성 및 Blob URL 기반 다운로드 방식으로 메인 스레드 차단 방지 및 보안 강화
실천 포인트
- 민감 정보 처리 서비스 설계 시 서버 저장 없이 브라우저 메모리 내에서 완결되는 Client-side Processing 검토 - PDF 생성 시 ATS 등 외부 파서와의 호환성을 고려하여 표준 폰트 사용 및 텍스트 읽기 순서(Reading Order) 최적화 적용 - 복잡한 표 구조 렌더링 시 텍스트 길이에 따른 동적 높이 계산 로직을 공통 모듈화하여 재사용성 확보