Binary Search와 Canvas API 기반 Serverless 로컬 압축 시스템 구축

How I Built a Browser-Based File Compression Tool for India Using Canvas API and pdf-lib — No Backend Needed

resizekb2026년 6월 8일4분intermediate

AI 요약

Context

정부 포털의 엄격한 파일 용량 제한과 민감한 개인정보 유출 위험이 공존하는 인도 시장의 특수한 환경 분석. 기존 서버 업로드 방식의 개인정보 보안 취약점 및 고정 Quality 설정으로 인한 이미지 품질 저하 문제를 해결하기 위한 Client-side 전용 아키텍처 설계.

Technical Solution

Canvas API를 활용하여 서버 전송 없이 브라우저 내에서 즉시 처리하는 Zero-backend 구조 채택
JPEG Quality 값에 대해 Binary Search 알고리즘을 적용하여 타겟 KB 내 최적의 화질을 찾는 동적 압축 로직 구현
pdf-lib 라이브러리를 통한 PDF 페이지별 래스터화 및 JPEG 재압축 프로세스로 PDF 용량 최적화
CPU 집약적인 Canvas 연산으로 인한 저사양 Android 기기 랙 방지를 위해 Progress Indicator 도입
파일 크기 비교 로직을 통해 압축 후 용량이 오히려 증가하는 Edge case를 방지하고 원본 파일을 반환하는 예외 처리 구현
Cloudflare Pages 기반의 Global CDN 배포를 통한 인프라 비용 최소화 및 배포 자동화

실천 포인트

1. 민감 정보 처리 시 Network Tab 확인을 통한 Data Leakage 검증

2. 고정 수치 설정 대신 Binary Search를 통한 최적의 Quality 값 탐색 검토

3. CPU 부하가 큰 Client-side 작업 시 사용자 경험을 위한 비동기 상태 표시기 구현

4. WASM 기반 라이브러리 도입을 통한 JavaScript 연산 성능 한계 극복 고려

태그

#Binary Search #Client-side Processing #pdf-lib #Canvas API #Serverless

원문 읽기