서버 비용 0원, framewebworker로 구현한 클라이언트 사이드 렌더링

Context

서버 기반 비디오 렌더링으로 인한 느린 처리 속도와 높은 인프라 비용 발생. Chromium 및 Remotion 의존성으로 인해 Docker 이미지 크기가 비대해진 구조. 렌더링 작업 추적을 위한 복잡한 폴링 메커니즘과 서버 상태 관리 부담 증가.

Technical Solution

• framewebworker 라이브러리를 도입하여 비디오 프레임 처리를 브라우저 Web Worker로 이관
• Inngest 배경 함수, 6개의 API 경로, Deno 런타임을 제거하여 서버리스 렌더링 아키텍처 구현
• useClientStitch 및 render() 함수를 통해 클라이언트에서 직접 비디오 세그먼트와 캡션을 합성하는 방식
• OffscreenCanvas 및 WebCodecs API를 활용하여 메인 스레드 간섭 없는 비동기 렌더링 처리
• 렌더링 상태를 서버 DB가 아닌 로컬 상태로 관리하여 불필요한 네트워크 통신 및 상태 동기화 로직 제거
• buildVideoSegments 로직을 통해 비디오를 한 번만 로드하고 세그먼트를 매핑하는 최적화 수행

Impact

• Chromium, Remotion, Deno 제거로 Docker 이미지 크기 약 200 MB 절감

Key Takeaway

최신 브라우저의 GPU 접근 권한과 Web Worker 성능을 활용하면 CPU/GPU 집약적인 미디어 처리 작업도 서버 없이 클라이언트 단에서 완결 가능한 구조 설계가 가능함.