백엔드 없이 브라우저 네이티브 API만으로 구현한 이미지 툴킷 최적화 기록

Context

외부 라이브러리와 서버 의존성으로 인해 번들 크기 증가와 인프라 비용 발생 가능성 상존. 대량 이미지 처리 시 메인 스레드 점유로 인한 UI 프리징 현상 발생. 프론트엔드 API 키 노출로 인한 보안 취약점 발견.

Technical Solution

• 외부 라이브러리 대신 Canvas API를 활용하여 이미지 리사이징, 크롭, 그레이스케일 처리 로직을 브라우저 네이티브 환경에서 구현
• 서버 기반 다운로드 방식에서 URL.createObjectURL을 이용한 클라이언트 사이드 Blob 생성 방식으로 전환하여 서버 비용 제거 및 프라이버시 강화
• Web Workers 도입을 통해 무거운 이미지 프로세싱 작업을 별도 스레드로 분리하여 배치 작업 중에도 UI 응답성 유지
• canvas.toBlob의 quality 파라미터를 조정하여 별도 압축 API 없이 이미지 용량 최적화 수행
• Cloudflare Workers를 프록시 계층으로 배치하여 API 키를 서버 사이드에 은닉하고 클라이언트 노출 차단
• CSS Logical Properties 적용으로 LTR 및 RTL 레이아웃을 단일 선언으로 통합 관리하는 다국어 대응 구조 설계

Impact

• canvas.toBlob의 quality 0.7 설정으로 시각적 손실 없이 이미지 크기 약 60-70% 절감

Key Takeaway

브라우저 네이티브 API의 잠재력을 극대화하면 인프라 비용을 최소화하고 성능과 보안을 동시에 확보하는 서버리스 아키텍처 구현 가능.