WebGPU 첫걸음: 브라우저에서 GPU를 사용하는 이유 > IT 기술 공유

• 목록

[한 줄 요약]
WebGPU는 웹 브라우저의 자바스크립트가 그래픽카드(GPU)를 이용해 3D 그래픽과 병렬 계산을 수행하도록 만든 웹 표준 API입니다.

1. CPU와 GPU의 차이
CPU는 복잡한 일을 순서대로 빠르게 처리하는 데 강합니다. GPU는 비교적 단순한 계산을 아주 많이 동시에 처리하는 데 강합니다. 수백만 픽셀을 바꾸거나 큰 행렬을 계산하는 작업은 GPU에 잘 맞습니다.

2. WebGL과 무엇이 다른가요?
WebGL은 주로 그래픽 렌더링을 위해 설계됐습니다. WebGPU는 최신 GPU의 렌더링뿐 아니라 범용 계산도 더 명확한 구조로 제공합니다. 데이터 시각화, 이미지 처리, 물리 시뮬레이션, 일부 머신러닝 연산에 활용할 수 있습니다.

3. 네 가지 핵심 개념
- Adapter: 브라우저가 찾은 GPU 후보
- Device: 실제 명령을 보낼 논리적 장치
- Buffer: GPU가 읽고 쓰는 데이터 공간
- Pipeline: 셰이더와 실행 규칙을 묶은 절차

4. 지원 여부 확인
if (!navigator.gpu) {
  console.log("WebGPU 미지원");
} else {
  const adapter = await navigator.gpu.requestAdapter();
  const device = await adapter.requestDevice();
  console.log("GPU 준비 완료", device);
}

실제 계산에는 WGSL 셰이더, 버퍼, 파이프라인이 필요합니다. 처음에는 배열 덧셈이나 이미지 흑백 변환처럼 결과를 확인하기 쉬운 예제로 시작하세요.

5. 주의할 점
GPU로 데이터를 복사하는 비용도 있으므로 작은 계산은 CPU가 더 빠를 수 있습니다. 장치별 선택 기능을 확인하고 오류 처리도 준비해야 합니다. W3C 문서는 Candidate Recommendation Draft이므로 변경 이력도 확인하세요.

6. 직접 해볼 과제
개발자 도구에서 위 코드를 실행해 adapter가 반환되는지 확인하세요. 그다음 데이터 크기를 늘리며 CPU와 GPU 처리 시간을 비교해 보세요.

[공식 참고 자료]
https://www.w3.org/TR/webgpu/
https://gpuweb.github.io/gpuweb/