피드로 돌아가기
Dev.toFrontend
원문 읽기
pdf.js 기반 Client-side 렌더링을 통한 서버리스 PDF 변환 구조 설계
How to convert a PDF to images entirely in the browser (no upload)
AI 요약
Context
기존 PDF 변환 서비스의 서버 업로드 방식에 따른 데이터 프라이버시 침해 위험 존재. 서버 렌더링으로 인한 리소스 비용 발생 및 네트워크 왕복 시간으로 인한 지연 시간 발생.
Technical Solution
- pdf.js 라이브러리를 활용한 Browser-only 렌더링 파이프라인 구축
- Web Worker 설정을 통한 무거운 파싱 작업의 메인 스레드 분리 및 UI 성능 최적화
- targetDPI/72 공식을 적용한 Viewport Scale 조정을 통해 72 DPI의 저해상도 한계 극복
- JPG 포맷의 Alpha 채널 부재로 인한 흑색 배경 현상을 방지하기 위한 White Background 사전 렌더링 로직 구현
- Canvas 메모리 부하 방지를 위해 전체 페이지 일괄 처리 대신 Page-by-page 순차 렌더링 방식 채택
- FileReader와 ArrayBuffer API를 활용한 로컬 바이너리 데이터 직접 처리 구조 설계
실천 포인트
- PDF 렌더링 시 목적에 맞는 DPI 설정(웹 96, 스크린 150, 인쇄 300) 검토 - pdf.js 사용 시 GlobalWorkerOptions.workerSrc 설정 여부 확인 - JPG 변환 시 배경색 채우기 로직 포함 여부 점검 - 대용량 파일 처리 시 Canvas 메모리 누수 방지를 위한 Page-by-page 루프 적용