피드로 돌아가기
Dev.toFrontend
원문 읽기
HTML5 Canvas API 기반 Client-side Conversion으로 WebP 호환성 및 개인정보 보호 해결
Why WebP to JPG Conversion Breaks on Most Tools — And How the HTML5 Canvas API Fixes It
AI 요약
Context
WebP 포맷의 높은 압축률(JPG 대비 25~35% 감소)에도 불구하고 레거시 플랫폼의 낮은 지원율로 인한 파일 업로드 실패 빈번. 기존 Server-side 변환 방식은 데이터 전송 과정에서의 Privacy 리스크와 이중 압축으로 인한 화질 저하 및 엣지 케이스 처리 실패라는 한계 노출.
Technical Solution
- HTML5 Canvas API를 활용하여 서버 전송 없이 브라우저 내에서 즉각적인 포맷 변환을 수행하는 Client-side 아키텍처 설계
URL.createObjectURL및Image객체를 통해 원본 파일을 메모리에 로드하고canvas.toBlob메서드로 타겟 MIME 타입 및 Quality 제어- JPG 포맷의 투명도 미지원 특성을 해결하기 위해
fillStyle과fillRect를 사용하여 배경을 흰색으로 사전 렌더링하는 전처리 로직 구현 - 대용량 배치 처리 시 UI 프리징 방지를 위해 변환 작업 간 지연 시간을 부여하는 큐잉(Queuing) 메커니즘 적용
- TIFF 등 Canvas API 미지원 포맷 대응을 위해
UTIF.js와 같은 외부 디코딩 라이브러리 통합 구조 채택
실천 포인트
1. JPG 변환 시 투명 배경 영역이 검은색으로 렌더링되지 않도록 배경색 지정 로직 확인
2. 대량 이미지 처리 시 메인 스레드 차단을 막기 위한 비동기 큐 또는 Web Worker 도입 검토
3. Canvas API의 포맷 지원 범위(TIFF, GIF 애니메이션 등)를 사전에 확인하고 필요 시 외부 디코더 라이브러리 검토
4. 사용자 경험 향상을 위해 Quality 수치 대신 예상 결과 파일 크기를 실시간으로 제공하는 UI 설계