피드로 돌아가기
Dev.toFrontend
원문 읽기
Canvas API 기반 Client-side 압축으로 서버 비용 0원 달성
I replaced server-side image compression with 40 lines of Canvas API code
AI 요약
Context
서버 사이드 이미지 압축 API 도입 시 발생하는 비용 및 Rate Limit 문제 해결 필요. 사용자 데이터의 외부 인프라 전송에 따른 보안 및 프라이버시 리스크 제거를 목표로 함.
Technical Solution
- Canvas API를 활용한 브라우저 기반 이미지 프로세싱으로 서버 의존성 완전 제거
- Multi-pass Compression 로직을 통한 출력 파일 크기 최적화 및 품질 단계별 Fallback 구조 설계
- WebP 우선 적용 후 크기 증가 시 JPEG로 전환하는 포맷 Fallback 전략 채택
- pdfjs-dist 및 jsPDF 라이브러리의 Lazy-loading 적용으로 초기 페이지 로드 성능 최적화
- revokeObjectURL 호출 및 Canvas 차원 초기화를 통한 Client-side 메모리 누수 방지
- Webpack 설정 내 canvas 모듈 제외 처리를 통한 Client-side 빌드 오류 해결
실천 포인트
1. Canvas 압축 시 결과물이 원본보다 커질 수 있으므로 반드시 크기 비교 로직 구현
2. JPEG 변환 전 배경색을 흰색으로 채워 투명 영역의 흑색 변색 방지
3. 모바일 브라우저의 Canvas 크기 제한을 고려한 Render Scale 캡핑 적용
4. PDF 라이브러리 선택 시 클라이언트 환경 호환성 검증 및 버전 고정