Vercel, AI 에이전트 셰이더용 WebGPU 라이브러리 ‘vgpu’ 오픈소스로 공개 — 25KB 짜리 초경량 셰이더, 브라우저·Node·CI 한 번에

셰이더, 왜 아직도 어려운가

웹사이트에 화려한 시각 효과를 넣고 싶을 때 가장 먼저 부딪히는 벽이 ‘셰이더(shader)’입니다. 셰이더란 GPU 위에서 픽셀 단위로 돌아가는 작은 프로그램인데, 화면의 색·움직임·빛을 계산하는 역할을 합니다.

WebGPU는 이 셰이더를 웹 브라우저에서 직접 돌릴 수 있게 해주는 W3C 표준 GPU API입니다. WebGL의 후속 표준으로, Vulkan·Metal·Direct3D 12 같은 최신 네이티브 GPU 프레임워크와 1:1로 매칭됩니다. 그런데 아무리 좋은 API라도 그 위에 그림을 그리려면 어댑터·바인드 그룹 레이아웃·파이프라인 디스크립터라는 보일러플레이트 코드를 직접 작성해야 합니다.

쉽게 말해, WebGPU는 “좋은 엔진”을 줬지만 “운전대를 잡고 차를 몰 줄 모르는 사람”에게는 여전히 어렵다는 뜻입니다.

Vercel은 자사 사이트 vercel.com의 시각 효과를 만들기 위해 이 비용을 직접 치러왔고, 이제 그 결과를 누구나 쓸 수 있도록 오픈소스로 공개했습니다.

vgpu란 무엇인가

vgpu는 .wgsl(WebGPU 셰이딩 언어) 파일을 TypeScript 모듈처럼 임포트·익스포트할 수 있게 해주는 경량 라이브러리입니다. 단일 Gpu 컨텍스트 하나만 노출하기 때문에, 숨겨진 전역 상태 없이 하나의 API로 브라우저·Node·테스트 환경을 모두 다룰 수 있습니다.

브라우저에서 시작하는 4줄 코드

README에 적힌 가장 빠른 시작 코드는 딱 네 줄입니다.

const gpu = await init();
const surface = gpu.surface(canvas, { dpr: [1, 2] });
const wave = gpu.effect(WAVE_WGSL, { set: { speed: 2 } });
gpu.frame.loop(() => { wave.set({ time: gpu.time }); wave.draw(); });

여기서 surface는 캔버스를 감싸 device pixel ratio를 1~2 사이로 제한하고, effect는 WGSL 코드를 풀스크린 이펙트로 컴파일합니다. 프레임 루프는 명시적이라 암묵적인 씬 그래프 상태가 존재하지 않아 디버깅이 쉽습니다.

WGSL을 “모듈”로 다룬다는 차별점

대부분의 WebGPU 코드가 헤매는 부분이 바인딩 선언을 손으로 적어야 하는 점입니다. vgpu는 빌드 시점에 .wgsl 모듈 그래프를 해석해서 바인딩을 자동으로 리플렉트하고, 사용하지 않는 선언은 제거한 뒤 압축된 셰이더 소스를 출력합니다.

결과적으로 풀스크린 이펙트 하나가 gzip 기준 25KB로 출시되며, 이 크기 제한은 저장소의 CI 스냅샷 테스트에서 자동 강제됩니다. 25KB를 넘으면 빌드가 실패하니, 개발자가 의식하지 않아도 번들 사이즈가 지켜집니다.

세 가지 런타임, 하나의 API

패키지는 vgpu, vgpu/node, vgpu/mock, vgpu/scene, vgpu/client, vgpu/core의 서브패스 익스포트를 제공합니다.

① 브라우저

위 네 줄 코드가 그대로 동작합니다. 캔버스에 풀스크린 이펙트가 그려집니다.

② 헤드리스 Node (Dawn 기반)

여기서 ‘Dawn’은 Google이 만든 WebGPU의 네이티브 C++ 구현체입니다. Chromium 프로젝트의 일부이며, dawn.node 바인딩을 통해 Node.js에서도 WebGPU를 쓸 수 있게 해줍니다. vgpu/node는 이 Dawn 위에 오프스크린 렌더링을 제공합니다.

const target = gpu.target({ size: [256, 256], format: "rgba8unorm" });
const pixels = await target.read();

이게 가능해지면서 CI에서 셰이더를 자동으로 렌더링하고 픽셀 단위로 비교하는 워크플로우가 실용적이 됩니다.

③ 결정적 Mock

GPU를 절대 건드리면 안 되는 환경(예: 일부 CI 러너)을 위해 결과가 항상 동일한 결정적(deterministic) 모의 어댑터가 별도로 제공됩니다.

에이전트 우선(agent-first) 패키징

Vercel은 vgpu를 단순한 GPU 라이브러리가 아니라 “AI 에이전트가 그대로 쓸 수 있는 라이브러리”로 설계했다고 강조합니다. 그 증거가 패키징에 그대로 보입니다.

• CLI 바이너리 제공: npx vgpu docs, npx vgpu examples, npx vgpu check가 전역 설치 없이 동작합니다.
• agents.md와 llms.txt: vgpu.sh에 게시되어 AI 에이전트가 문서를 그대로 읽고 학습할 수 있습니다.
• OpenAPI 3.1 명세: HTTP API를 기계가 읽을 수 있는 표준 형식으로 기술해, 토큰 인증이 필요 없는 예제 검색 API를 노출합니다.
• 호스팅되는 읽기 전용 MCP 서버: vgpu.sh/api/mcp에서 MCP(Model Context Protocol, AI 모델이 외부 도구·데이터에 표준 방식으로 연결되는 개방형 프로토콜) 엔드포인트를 제공합니다. @modelcontextprotocol/server가 직접 의존성으로 포함되어 있어 신뢰도가 높습니다.
• 설치 가능한 에이전트 스킬: 저장소에서 바로 받아 쓸 수 있는 스킬이 함께 제공됩니다.

기사에서 꼭 알아야 할 핵심 용어 6개

개발자에게 vgpu가 의미하는 것

• 3종 런타임 통합: 브라우저·헤드리스 Node·결정적 Mock을 하나의 코드로 다룰 수 있어, 동일한 셰이더를 운영 환경과 테스트 환경에서 동시에 검증할 수 있습니다.
• 번들 사이즈 자동 관리: 25KB 예산이 CI에서 강제되므로, 셰이더가 무한히 커지는 일을 구조적으로 막아줍니다.
• 바인딩 리플렉션: 손으로 쓰던 바인딩 선언이 빌드 타임에 자동 생성되므로, 셰이더와 CPU 코드가 어긋나기 쉬운 고전적 버그가 사라집니다.
• AI 에이전트 호환성: llms.txt, OpenAPI 3.1, MCP 서버가 기본 제공되므로, 챗GPT·Claude 같은 에이전트가 라이브러리를 곧바로 호출해 코드를 생성하거나 문서를 검색할 수 있습니다.

마무리 — 누가, 왜 주목해야 할까

Vercel이 vercel.com 운영 과정에서 다듬은 vgpu는, WebGPU의 강력함과 막막함을 동시에 정리해 주는 TypeScript 라이브러리입니다. 특히 다음 세 그룹에 강하게 추천됩니다.

1. 브라우저에서 고성능 시각 효과를 직접 다루고 싶은 프론트엔드 엔지니어
2. AI 에이전트가 셰이더 코드를 생성·검증하도록 만들고 싶은 AI 플랫폼 팀
3. GPU 없는 CI 환경에서도 셰이더를 안전하게 테스트해야 하는 인프라·DevOps 엔지니어

MIT 라이선스, npm v0.3.1, 의존성은 pixelmatch·pngjs·@modelcontextprotocol/server 등으로 가볍습니다. 호스팅 서비스가 아니므로 계정·할당량·추론 요금이 전혀 발생하지 않습니다.