서버 비용 0원, WebGPU 기반 브라우저 내 AI 이미지 업스케일링 구현

Context

AI 이미지 업스케일링 시 발생하는 GPU 서버 비용과 대역폭 부담이 큼. 클라이언트-서버 간 이미지 전송 과정에서 사용자 개인정보 노출 위험 존재. 네트워크 의존성으로 인한 오프라인 환경의 기능 제약 발생.

Technical Solution

• TensorFlow.js 기반의 Real-ESRGAN 및 Real-CUGAN 모델을 브라우저에 직접 탑재하여 클라이언트 사이드 추론 구조 설계
• WebGPU를 우선 적용하고 WebGL을 폴백으로 사용하는 동적 백엔드 탐지 로직을 통해 하드웨어 가속 최적화
• 메인 스레드 차단 방지를 위해 Web Worker 내에서 모델 로드 및 이미지 처리 프로세스를 격리하는 비동기 아키텍처 채택
• 대용량 이미지 처리 시 메모리 부족 문제를 해결하기 위해 이미지를 작은 단위로 나누어 처리하는 Tile-Based Processing 방식 적용
• IndexedDB를 활용한 모델 캐싱 전략으로 최초 로드 이후의 모델 다운로드 시간 제거 및 즉각적인 실행 환경 구축

Impact

• WebGPU 사용 시 WebGL 대비 2-3배 빠른 추론 속도 달성
• 최초 실행 시 30-60초 소요되던 로딩 시간을 캐싱 후 5-15초로 단축
• 처리 중 메모리 점유율 약 500MB 수준 유지

Key Takeaway

강력한 브라우저 API와 Web Worker를 조합하면 고성능 AI 모델을 서버 없이 클라이언트 단에서 완결성 있게 실행하는 Edge AI 아키텍처 구현 가능.