Google I/O를 시청해 주셔서 감사합니다. 주문형 콘텐츠를 확인하세요.

무료 AI 동영상 업스케일러가 WebGPU + WebCodecs를 사용하여 서버 비용 없이 MAU 25만 명에게 서비스를 제공하는 방법

Samrat Bhattacharyya

게시일: 2026년 3월 5일

Sam Bhattacharyya는 2023년에 무료 AI 동영상 업스케일러를 오픈소스 취미 프로젝트로 처음 만들었습니다. 2026년 2월 기준 월간 활성 사용자(MAU)가 250,000명으로 예상치 못하게 자연스럽게 증가했습니다. 이러한 결과는 서버 처리 비용이 전혀 없는 클라이언트 측 AI 처리로 프로젝트를 빌드했기 때문에 가능했습니다. 소프트웨어 설치나 로그인 없이 브라우저에서 동영상을 개선할 수 있습니다.

이 문서에서는 WebGPU와 WebCodecs를 사용하여 애플리케이션에 무료 클라이언트 측 처리를 추가한 방법을 설명합니다.

서버 비용 관련 문제

이전 역할에서 저는 수백만 명의 사용자가 있고 서버 측에서 동영상을 처리하는 데 상당한 예산 비용이 드는 브라우저 기반 라이브 스트리밍 도구의 AI 인프라를 관리했습니다.

서버 측 동영상 처리에 예산의 20% 가 사용되었습니다. 이는 회사에서 급여 다음으로 큰 변동비였습니다. 팀은 새로운 구현을 위해 스크립트, 오디오 또는 동영상 개선과 같은 모든 AI 기능에 대해 엄격한 예산 요구사항 (동영상 시간당 0.1달러)을 충족해야 했습니다.

클라이언트 측 AI는 유일한 예외로, 가상 배경 및 배경 소음 제거와 같은 기능은 자체 클라이언트 측 SDK를 사용하여 구현되었습니다. 이러한 AI 기능은 모델 추론과 동영상 처리가 사용자 기기에서 이루어졌기 때문에 서버 처리 비용이 발생하지 않았습니다.

WebCodecs와 같은 API를 사용하면 브라우저에서 본격적인 동영상 편집 제품군을 비롯한 전체 동영상 처리 파이프라인을 빌드할 수 있습니다. WebGPU를 사용하면 클라이언트 측 AI가 훨씬 더 효율적으로 작동합니다.

WebCodecs 및 WebGPU를 사용한 클라이언트 측 처리

무료 AI 동영상 업스케일러는 오픈소스 WebSR SDK를 사용합니다. 이 SDK는 이미지를 받아 업스케일링하고 결과를 캔버스에 그립니다.

초해상도 신경망은 반복되는 이미지 컨볼루션 (행렬 곱셈)을 적용하여 소스 이미지에서 이미지 특징을 추출함으로써 업스케일링을 수행합니다. 그런 다음 이러한 이미지 특징에 더 많은 컨볼루션이 적용되어 최종 고품질 이미지가 재구성됩니다.

WebSR은 이러한 신경망 컨볼루션 레이어를 WebGPU 컴퓨트 셰이더로 구현합니다. 예를 들어 예시 레이어와 전체 네트워크를 참고하세요. 렌더링 메서드를 호출하면 SDK가 업스케일링 네트워크의 각 레이어를 실행하고 최종 이미지를 캔버스에 출력합니다. 신경망 구현에 대해 자세히 알아볼 수 있습니다.

import WebSR from "https://esm.sh/@websr/websr@0.0.15";

const gpu = await WebSR.initWebGPU();
const canvas = document.getElementById("canvas");

const websr = new WebSR({
  network_name: "anime4k/cnn-2x-l",
  weights: await (
    await fetch("https://katana.video/files/cnn-2x-lg-2d-animation.json")
  ).json(),
  gpu,
  canvas,
});

const img = document.getElementById("source");
const bitmap = await createImageBitmap(img);

await websr.render(bitmap);

Codepen의 WebSR SDK 예시를 참고하세요.

MediaPipe 또는 TensorflowJS와 같은 프레임워크를 사용하여 WebSR SDK를 원하는 모델로 대체할 수 있습니다. 동영상 처리 파이프라인은 WebCodecs를 사용하며 트랜스코딩 파이프라인으로 구조화됩니다.

파이프라인은 여러 단계로 나뉩니다.

디먹싱: 파일 객체에서 인코딩된 동영상 청크를 읽습니다.
디코딩: 인코딩된 청크를 VideoFrame 객체로 디코딩합니다.
처리: 입력 VideoFrame을 업스케일링된 VideoFrame으로 변환합니다.
인코딩: 업스케일된 VideoFrame 객체를 새로운 인코딩된 청크로 인코딩합니다.
멀티플렉싱: 인코딩된 출력 청크를 출력 파일에 씁니다.

파이프라인은 Streams API를 사용합니다. 인코딩, 디코딩, 디멀티플렉싱 또는 멀티플렉싱은 스트림으로 구현됩니다. 데모를 위해 프로젝트는 webcodecs-utils 라이브러리의 멀티플렉싱 및 스트림 유틸리티를 사용합니다. 이 라이브러리는 VideoEncoder 및 VideoDecoder의 스트리밍 래퍼를 제공합니다.

import {
  SimpleDemuxer,
  VideoDecodeStream,
  VideoProcessStream,
  VideoEncodeStream,
  SimpleMuxer,
} from "https://esm.sh/webcodecs-utils";

import WebSR from "https://esm.sh/@websr/websr@0.0.15";

// Fetch demo video
const arrayBuffer = await (
  await fetch("https://katana.video/files/hero-small.mp4")
).arrayBuffer();
const videoFile = new File([arrayBuffer], "hero-small.mp4", {
  type: "video/mp4",
});

// Initialize WebGPU and WebSR
const gpu = await WebSR.initWebGPU();
const weights = await (
  await fetch("https://katana.video/files/cnn-2x-lg-2d-animation.json")
).json();
const websr = new WebSR({
  network_name: "anime4k/cnn-2x-l",
  weights,
  gpu,
  canvas,
});

// Set up demuxer
const demuxer = new SimpleDemuxer(videoFile);
await demuxer.load();
const decoderConfig = await demuxer.getVideoDecoderConfig();

const encoderConfig = {
  codec: "avc1.4d0034", // https://webcodecsfundamentals.org/codecs/avc1.4d0034.html
  width: 640,
  height: 360,
  bitrate: 1000000,
  framerate: 30,
};

// Set up muxer
const muxer = new SimpleMuxer({ video: "avc" });

// Build the upscaling pipeline
await demuxer
  .videoStream()
  .pipeThrough(new VideoDecodeStream(decoderConfig))
  .pipeThrough(
    new VideoProcessStream(async (frame) => {
      // AI upscale with WebSR
      await websr.render(frame);
      const upscaledFrame = new VideoFrame(canvas, {
        timestamp: frame.timestamp,
        duration: frame.duration,
      });

      return upscaledFrame;
    }),
  )
  .pipeThrough(new VideoEncodeStream(encoderConfig))
  .pipeTo(muxer.videoSink());

// Get output
const blob = await muxer.finalize();

Codepen에서 전체 파이프라인을 확인하세요.

Streams API는 WebCodecs와 함께 사용할 때 특히 유용합니다. 인코딩과 같은 한 단계가 과부하되면 역압을 사용하여 디코딩과 같은 업스트림 단계를 자동으로 느리게 하기 때문입니다. 이렇게 하면 메모리 문제가 방지되고 효율성이 개선됩니다.

이렇게 하면 다음과 같은 간단한 사용자 환경이 만들어집니다.

파일 입력으로 동영상을 업로드합니다.
시스템에서 동영상을 로컬로 처리합니다.
결과를 Blob으로 다운로드할 수 있습니다.

WebCodecs에서 트랜스코딩 파이프라인 빌드에 대해 자세히 알아보세요. GitHub에서 무료 AI 동영상 업스케일러의 전체 처리 파이프라인(코드 400줄 미만)을 확인할 수도 있습니다.

결과

무료 AI 동영상 업스케일러의 유일한 프로모션은 하나의 Reddit 게시물이었습니다. 그럼에도 불구하고 사용자가 포럼에서 도구를 공유하는 입소문 덕분에 월간 활성 사용자 수가 250,000명으로 자연스럽게 증가했으며, 전월 대비 성장률은 32% 입니다.

250,000명

월별 활성 사용자 수

10,000

일일 처리된 동영상 수

30,000

월별 처리된 동영상 시간

0 _$

서버 처리 비용

서버 비용 없이 하루에 동영상 10,000개 (한 달에 동영상 30,000시간)를 처리합니다.

무료 AI 동영상 업스케일러는 유료 AI 업스케일링 서비스의 리드 생성 도구로 사용됩니다. 서버 측에서 실행되는 더 강력한 AI 모델을 사용하여 이 서비스도 빌드했습니다. 이 접근 방식은 마케팅 없이 수익성을 창출하며 초기 애플리케이션은 무료 및 오픈소스로 유지됩니다.

권장사항 및 리소스

WebCodecs 및 WebGPU 이전에는 동영상 처리 집약적인 애플리케이션에 번거로울 수 있는 데스크톱 소프트웨어나 비용이 많이 드는 서버 측 처리가 필요했습니다. 서버 비용은 동영상 애플리케이션의 운영 비용에서 상당한 부분을 차지하는 경우가 많았습니다.

이러한 브라우저 API를 사용하면 효율적인 클라이언트 측 동영상 처리 애플리케이션을 빌드할 수 있습니다. 이러한 애플리케이션은 데스크톱 소프트웨어보다 직관적이고 마찰이 적으며 서버 측 처리보다 저렴하고 확장 가능합니다.

WebCodecs와 무료 AI 동영상 업스케일러 또는 Katana와 같은 동영상 애플리케이션을 빌드하는 방법에 대해 자세히 알아보려면 WebCodecsFundamentals를 참고하세요. 프로덕션 및 구현 세부정보에 중점을 두고 프로덕션 WebCodecs 애플리케이션을 빌드하는 방법을 알아봅니다.