피드로 돌아가기
Dev.toFrontend
원문 읽기
Zero-Server 아키텍처 기반의 Client-side PDF 생성 시스템 구현
Every Invoice Tool Wants My Data. I Built One That Doesn't.
AI 요약
Context
기존 인보이스 도구들의 서버 사이드 PDF 생성 방식에 따른 데이터 프라이버시 침해 및 불필요한 회원가입 강제 문제를 해결하기 위한 설계. 백엔드 저장소 없이 브라우저 내에서 모든 데이터를 처리하는 Local-first 접근 방식 채택.
Technical Solution
- Next.js 기반의 Client-side Rendering 구조를 통한 Zero Server Storage 실현
- jsPDF 라이브러리를 활용하여 서버 전송 없이 사용자 브라우저 내에서 PDF 직접 생성
- CJK 문자 깨짐 해결을 위한 NotoSansSC 폰트의 동적 Fetch 및 AbortController 기반 8초 타임아웃 설정으로 런타임 프리징 방지
- Intl.NumberFormat API를 활용하여 55개 국가의 통화 표기법 및 소수점 처리 로직을 브라우저 네이티브 수준에서 최적화
- localStorage 기반의 상태 관리로 세션 간 비즈니스 프로필 및 인보이스 시퀀스 유지
- HeadlessChrome User-Agent 필터링 로직을 수집 단계에 적용하여 E2E 테스트 데이터로 인한 분석 지표 왜곡 제거
실천 포인트
- 다국어 폰트 동적 로딩 시 네트워크 지연에 따른 메인 스레드 차단 방지를 위해 Timeout 및 Fallback 폰트 전략 수립 - 통화 및 숫자 포맷팅 시 커스텀 룩업 테이블 대신 브라우저 표준 Intl API 우선 검토 - Analytics 데이터 수집 시 쿼리 시점이 아닌 수집 시점에 Headless 브라우저 및 테스트 트래픽 필터링 적용 - Local-first 설계 시 데이터 유실 가능성을 고려한 백업 전략 또는 선택적 계정 생성 옵션 설계