DOM 노드 5,200개를 2개로 최적화한 Single-File PDF Generator 설계

I built a 'life in weeks' poster generator in one HTML file

Ali Alp2026년 5월 7일6분intermediate

AI 요약

Context

사용자의 생애 주기를 A4 용지 한 장에 시각화하는 도구 구현 과정에서 5,200개의 원형 요소를 효율적으로 렌더링해야 하는 과제 직면. 과도한 DOM 노드 생성으로 인한 성능 저하와 웹 프리뷰와 PDF 출력물 간의 시각적 불일치 해결이 필요했음.

SVG Path Data 병합을 통한 렌더링 최적화: 5,200개의 태그 대신, moveto와 arc 명령어를 조합한 단일 문자열을 생성하여 단 2개의 요소로 모든 원형 렌더링 처리
Unified Coordinate System 구축: SVG와 jsPDF가 동일한 A4 규격(595.27 x 841.89 pt)과 좌표계 원점을 공유하도록 설계하여 프리뷰와 결과물의 일치성 확보
중앙 집중형 Layout Engine 설계: computeLayout 함수 하나에서 모든 좌표 및 크기 상수를 계산하여 종의 변경(인간/개/고양이)에 따른 레이아웃 가변성 대응
Zero-Dependency 아키텍처 지향: Framework와 Bundler를 배제하고 단일 HTML 파일 구조를 채택하여 빌드 단계 제거 및 오프라인 실행 가능성 확보
Client-side 전용 데이터 처리: Backend 없이 브라우저 내에서 모든 연산을 수행함으로써 데이터 전송 비용 제거 및 개인정보 유출 가능성 원천 차단

실천 포인트

1. 대량의 유사 도형 렌더링 시 개별 DOM 요소 대신 단일 Path 문자열 결합 검토

2. 서로 다른 렌더링 엔진(SVG, PDF 등) 사용 시 공통 좌표 계산 함수를 통해 Single Source of Truth 유지

3. 기능 요구사항이 단순한 경우 Build Step 제거를 통해 배포 및 유지보수 복잡도 최소화

태그