Canvas API 기반 Client-side 압축으로 서버 비용 0원 및 프라이버시 구현

Context

기존 이미지 압축 서비스의 서버 업로드 방식에 따른 개인정보 유출 위험과 계정 생성 및 파일 개수 제한이라는 사용자 경험 저하 문제 분석.

Technical Solution

• HTML5 Canvas API를 활용한 100% Browser-side 렌더링 및 인코딩 구조 설계
• canvas.toBlob() 함수를 통한 이미지 재인코딩 및 품질 최적화 로직 구현
• 출력물이 원본보다 커지는 현상을 방지하기 위한 Multi-pass compression 및 품질 단계적 하향 방식 채택
• WebP 우선 적용 후 실패 시 JPEG로 전환하는 Fallback Chain을 통한 최소 파일 크기 보장
• Next.js 15 정적 수출(Static Export) 및 CDN 배포를 통한 서버리스 아키텍처 구성

Impact

• Smart 프리셋(품질 0.65) 적용 시 가시적 손실 없이 50-70%의 용량 감소 달성
• Tiny 프리셋 적용 시 최대 90%의 압축률 확보
• 서버, 데이터베이스, 스토리지 제거를 통한 월 운영 비용 0달러 구현

Key Takeaway

특정 기능의 연산 부하를 Client-side로 전이함으로써 인프라 비용을 완전히 제거하고 데이터 보안성을 극대화하는 Edge Computing 설계의 효율성 확인.