브라우저: 이제 나도 GPU 좀 쓰자! (feat. WebGPU)

AI 기능 넣으려고 하면 보통 OpenAI API 연결하죠? 근데 이거 돈도 들고, 내 데이터가 밖으로 나가는 거라 찜찜하고, 네트워크 느리면 답답합니다. 그래서 요즘 뜨는 게 Edge AI, 좀 있어 보이게 말하면 **On-Device AI<strong>입니다. 그냥 쉽게 말해서 "사용자 컴퓨터 성능을 훔쳐 쓰자"는 겁니다. (농담입니다)

이 글에서는 WebGPU가 무엇인지, 어디에 쓸 수 있는지, 그리고 실전에서 어떻게 활용하는지 구체적으로 알아봅니다.

WebGPU가 뭐길래?

예전엔 브라우저에서 3D 돌리려면 WebGL 썼는데, 이게 좀 구식입니다. OpenGL ES 기반이라 API가 복잡하고, GPU의 최신 기능을 활용하기 어렵습니다. 그래서 나온 차세대 표준이 WebGPU입니다.

핵심은 "</strong>그래픽카드(GPU)한테 직접 말을 걸 수 있다**"는 겁니다. 게임 그래픽뿐만 아니라, AI 연산(행렬 곱셈 같은 거)을 미친 듯이 빠르게 할 수 있게 된 거죠.

WebGL vs WebGPU: 뭐가 다른가?

Compute Shader 지원: WebGL은 그래픽 렌더링만 가능했지만, WebGPU는 범용 계산(GPGPU)을 기본 지원합니다. AI 추론, 물리 시뮬레이션 등에 직접 GPU를 활용할 수 있습니다.
현대적인 API 디자인: Vulkan, Metal, DirectX 12를 참고한 설계라, 네이티브 수준의 GPU 제어가 가능합니다.
멀티스레드 지원: 명령어 인코딩을 여러 스레드에서 병렬로 수행할 수 있습니다. 복잡한 씬에서 빛납니다.
더 나은 에러 핸들링: WebGL의 "에러가 나도 무시하고 계속 실행"하는 방식 대신, 명시적인 에러 처리가 가능합니다.

브라우저 지원 현황

2026년 현재 Chrome, Edge, Firefox에서 기본 지원되고, Safari도 지원이 진행 중입니다. 전 세계 브라우저의 약 80%가 WebGPU를 지원하고 있어서, 프로덕션에서 사용해도 무방한 수준입니다. WebGPU를 지원하지 않는 브라우저에서는 WebGL로 폴백하는 전략을 쓰면 됩니다.

실제로 돌려보니...

Transformers.js 같은 라이브러리 쓰면, 브라우저에서 바로 소형 LLM이나 이미지 인식 모델을 돌릴 수 있습니다. 제가 배경 제거(누끼 따기) 기능을 WebGPU로 구현해 봤는데, 서버로 이미지 보내고 받고 할 필요 없이 0.1초 만에 브라우저 안에서 처리가 끝나더라고요. 서버 비용? 0원입니다. 사용자 사진이 서버로 전송 안 되니까 프라이버시 문제? 완벽 해결입니다.

브라우저에서 돌릴 수 있는 AI 사용 사례

실전에서 활용 가능한 케이스들을 정리합니다:

이미지 관련
- 배경 제거(누끼): SAM(Segment Anything Model)의 경량 버전을 브라우저에서 돌립니다.
- 이미지 업스케일: 저해상도 이미지를 고해상도로 변환. 사진 편집 앱에서 유용합니다.
- 얼굴 인식/블러: 개인정보 보호를 위해 얼굴을 자동으로 감지하고 블러 처리합니다. 데이터가 서버로 나가지 않으니 더 안전합니다.
텍스트 관련
- 실시간 번역: 웹페이지 콘텐츠를 클라이언트에서 번역합니다.
- 텍스트 자동 완성: 소형 언어 모델로 입력 예측을 합니다.
- 감성 분석: 리뷰나 댓글의 긍정/부정을 분석합니다.
오디오 관련
- 음성-텍스트 변환(Whisper): OpenAI의 Whisper 모델을 브라우저에서 돌려 음성을 텍스트로 변환합니다.
- 노이즈 제거: 화상 회의에서 배경 소음을 제거합니다.

핵심 기술 스택

Transformers.js

Hugging Face에서 만든 라이브러리로, Python의 Transformers 라이브러리를 JavaScript로 포팅한 겁니다. 수백 개의 사전 학습된 모델을 브라우저에서 바로 사용할 수 있습니다.

설치는 npm 한 줄이면 끊고, 모델 로딩도 몇 줄이면 됩니다. 첫 로딩 시 모델 파일을 다운로드하지만, IndexedDB에 캐싱되어 두 번째부터는 즉시 로딩됩니다.

ONNX Runtime Web

Microsoft의 ONNX Runtime을 WebAssembly + WebGPU로 포팅한 버전입니다. PyTorch나 TensorFlow로 학습한 모델을 ONNX 형식으로 변환한 후, 브라우저에서 실행할 수 있습니다.

장점은 최적화입니다. ONNX Runtime은 모델 그래프를 최적화하고, 양자화(Quantization)를 적용하여 모델 크기를 줄이면서 속도를 높입니다. 원래 2GB짜리 모델을 200MB로 줄일 수도 있습니다.

브라우저에서 AI 돌리기: WebGPU 찍먹해보기