브라우저에서 AI가 돌아갈까? WebGPU와 온디바이스 AI 성능 확인하기
브라우저 안에서 AI를 돌리려면 무엇이 필요할까요? WebGPU와 WebGL의 차이, 온디바이스 AI의 장점, shader-f16과 WASM 대체 경로, 웹 벤치의 선택형 AI 추론과 GPU 연산 결과 읽는 법을 정리했습니다.
- 작성일
- 수정일
요즘은 글을 요약하고, 사진을 분류하고, 말을 받아 적는 AI 기능이 웹페이지 안으로 들어오고 있습니다. 그런데 이런 기능이 서버가 아니라 내 브라우저 안에서 직접 돌아간다는 사실은 아직 낯설게 느껴집니다. 정말 브라우저에서 AI가 돌아갈까요? 결론부터 말하면, 작은 모델이라면 돌아갑니다. 다만 얼마나 쾌적하게 돌아가는지는 기기마다 크게 다릅니다. 이 글은 그 차이를 만드는 WebGPU와 온디바이스 AI의 기본 개념, 필요한 조건, 그리고 웹 벤치로 내 기기를 확인하는 방법을 차례로 설명합니다.
WebGPU란 무엇이고 WebGL과 무엇이 다를까
WebGPU는 웹 브라우저에서 GPU를 직접 다룰 수 있게 해 주는 새로운 웹 표준 API입니다. 그동안 브라우저에서 GPU를 쓰는 대표 방법은 WebGL이었습니다. WebGL은 이름 그대로 그래픽, 즉 화면에 무언가를 그리는 일을 중심으로 설계되었습니다. 계산만 GPU에 시키고 싶을 때는 그림을 그리는 척하는 우회 방법을 써야 했습니다.
WebGPU는 두 가지 면에서 다릅니다. 첫째, 최신 그래픽 인터페이스(Vulkan, Metal, Direct3D 12 계열)의 구조를 반영해 설계되어 GPU에 일을 맡기는 방식이 더 명시적이고 효율적입니다. 둘째, 컴퓨트 셰이더를 정식으로 지원합니다. 컴퓨트 셰이더는 그림이 아니라 순수한 계산을 GPU의 수많은 코어에 나누어 실행하는 프로그램입니다. 행렬 곱셈처럼 같은 계산을 대량으로 반복하는 작업이 바로 여기에 잘 맞고, 오늘날 AI 모델의 계산 대부분이 행렬 곱셈입니다.
- WebGL: 그래픽 렌더링 중심의 오래된 API. 대부분의 브라우저에서 폭넓게 쓰입니다.
- WebGPU: 그래픽과 범용 계산을 모두 염두에 둔 새 API. 컴퓨트 셰이더로 AI 같은 병렬 계산을 직접 표현할 수 있습니다.
- 공통점: 둘 다 웹 페이지가 설치 없이 기기의 GPU를 쓰게 해 줍니다.
정리하면, WebGPU는 "브라우저에서 GPU로 계산하기"를 제대로 지원하는 길이어서 브라우저 안 AI와 궁합이 좋습니다. 다만 모든 브라우저와 기기에서 똑같이 켜져 있는 것은 아닙니다. 지원 현황은 브라우저 버전, 운영체제, 그래픽 드라이버, 설정에 따라 달라지고 시간이 지나며 계속 바뀌므로, 이 글에서는 어느 브라우저가 된다고 단정하지 않고 직접 확인하는 방법을 안내합니다.
브라우저 안 AI(온디바이스 AI)의 장점
온디바이스 AI는 모델을 서버에 두고 요청을 보내는 대신, 모델을 내 기기로 내려받아 거기서 직접 계산하는 방식입니다. 브라우저에서 이를 하면 앱 설치도 필요 없습니다. 장점은 크게 세 가지입니다.
- 개인정보: 입력한 문장이나 사진이 기기 밖으로 나가지 않고 그 자리에서 처리됩니다. 민감한 내용을 다루는 기능일수록 이 점이 중요합니다.
- 오프라인: 모델을 한 번 받아 두면 인터넷 연결이 불안정한 곳에서도 쓸 수 있는 가능성이 생깁니다. 다만 브라우저 캐시가 지워지거나 저장 공간이 부족하면 다시 받아야 할 수 있습니다.
- 서버 비용: 계산을 사용자 기기가 맡으니 서비스 운영자는 추론용 서버를 대량으로 두지 않아도 됩니다. 무료 서비스나 작은 사이트도 AI 기능을 시도해 볼 수 있다는 뜻입니다.
물론 단점도 있습니다. 모델을 내려받아야 하므로 처음 한 번은 시간과 데이터가 들고, 내 기기의 성능이 곧 품질과 속도의 한계가 됩니다. 그래서 크고 똑똑한 모델이 아니라 작게 줄인 모델이 주로 쓰입니다. 어떤 기기에서 얼마나 쾌적할지를 미리 가늠해 보는 일이 중요해지는 이유입니다.
브라우저에서 AI를 돌리기 위한 조건
브라우저 AI가 잘 돌아가려면 몇 가지가 맞아야 합니다. 하나씩 확인해 보세요.
- WebGPU 지원: 브라우저가 WebGPU를 제공하고, 그래픽 어댑터를 실제로 얻을 수 있어야 합니다. 브라우저 버전이 최신이어도 드라이버나 설정 때문에 꺼져 있을 수 있습니다.
- 메모리: 모델을 올릴 공간이 필요합니다. 작은 모델이라도 내려받은 파일과 계산 중간값이 메모리를 차지합니다. 탭을 많이 열어 둔 상태, 여유가 적은 휴대폰에서는 부담이 커집니다.
- shader-f16: WebGPU의 선택 기능으로, 셰이더에서 16비트 부동소수점(f16)을 쓸 수 있게 합니다. 숫자를 절반 크기로 다루므로 같은 일을 더 적은 메모리와 대역폭으로 할 수 있어 AI에 유리합니다. 이 기능은 모든 GPU와 드라이버에서 제공되지는 않아서 있는 기기와 없는 기기가 나뉩니다.
- 저장 공간과 네트워크: 모델 파일을 받아 둘 공간과, 처음 받을 때의 데이터 사용량을 감안해야 합니다. 요금이 부담되는 모바일 데이터 환경에서는 와이파이에서 시도하세요.
- 전원과 발열: 노트북은 절전 모드나 배터리 상태에서 성능이 낮아질 수 있고, 휴대폰은 열이 오르면 속도를 낮춥니다.
이 조건 중 어느 것이 되는지 일일이 설정 화면을 뒤질 필요는 없습니다. 웹 벤치는 측정 결과 화면에서 사용한 GPU 경로와 WebGPU 어댑터의 기능·한도를 보여 주고, 지원되지 않아 제외된 항목에는 그 이유를 표시합니다. 이 정보를 읽으면 내 기기에서 무엇이 부족한지 단서를 얻을 수 있습니다.
WebGPU가 없을 때: WASM 대체 경로
WebGPU를 쓸 수 없다고 해서 브라우저 AI를 아예 못 쓰는 것은 아닙니다. 대체 경로로 WASM(WebAssembly)이 있습니다. WASM은 브라우저가 CPU에서 빠르게 실행하는 이진 형식의 코드로, 많은 AI 런타임이 GPU가 없을 때의 안전망으로 사용합니다.
차이는 계산이 어디서 일어나느냐입니다. WebGPU 경로에서는 GPU의 수많은 코어가 병렬로 계산하고, WASM 경로에서는 CPU가 계산합니다. 같은 모델이라도 WASM이 훨씬 느리게 나오는 일이 흔합니다. 이것은 고장이 아니라 실행 경로의 차이입니다. 그래서 두 경로의 결과를 한 줄에 놓고 우열을 가리면 오해하기 쉽습니다.
- WebGPU 경로: GPU에서 계산합니다. 지원되는 기기에서는 보통 더 쾌적한 것을 기대할 수 있습니다.
- WASM 경로: CPU에서 계산합니다. 어디서나 동작할 가능성이 높지만 느릴 수 있습니다.
- 웹 벤치는 WebGPU가 없어 WASM으로 돌렸을 때 결과에 "WASM 대체"라고 따로 표시합니다.
웹 벤치의 AI 추론 항목은 어떻게 돌아갈까
웹 벤치의 AI 추론은 선택 항목입니다. 기본 측정만으로도 CPU, 메모리, GPU, 브라우저, 저장소를 충분히 확인할 수 있고, AI는 원할 때만 더하는 구조입니다. 다음은 그 동작 방식입니다.
- 모델 다운로드에 동의한 경우에만 실행합니다. 동의 체크박스를 켜지 않으면 아무것도 내려받지 않습니다.
- 동의하면 Hugging Face의 공개 CDN에서 모델을 받습니다. 브라우저 캐시가 있으면 재사용하지만, 저장 공간이 부족하거나 브라우저 설정에 따라 다시 받을 수 있습니다.
- 입력은 고정된 문장과 고정된 이미지입니다. 내 파일이나 개인 데이터는 쓰지 않으며, 같은 입력으로 재기 때문에 기기끼리 공정하게 견줄 수 있습니다.
- 텍스트 모델은 SmolLM2-135M-Instruct, 이미지 모델은 MobileNetV4입니다. 두 모델은 상업 이용이 가능한 Apache-2.0 라이선스로 공개된 것이며, 라이선스 페이지에서 출처를 확인할 수 있습니다.
- 다운로드 크기는 형식에 따라 다릅니다. 텍스트 모델은 q4f16 형식이 약 117MB, q4 형식이 약 181MB이고, 이미지 모델은 약 15.1MB입니다. 토크나이저와 실행 파일은 별도이며, 두 텍스트 형식을 모두 시도하는 경우 총 다운로드가 약 350MB에 이를 수 있습니다.
- 측정 시작 전 화면에는 다운로드 약 130MB라는 안내가 표시됩니다. 실제 받는 양은 기기의 지원 형식에 따라 달라질 수 있으니 진행 화면의 파일별 용량을 함께 확인하세요.
- AI를 측정하면 종합 점수에 포함할지 선택할 수 있고, 동의하지 않았거나 중단·실패한 경우에는 총점에서 자동으로 제외됩니다. 순위표도 AI 포함과 제외로 나뉩니다.
- WebGPU를 쓸 수 있으면 GPU로, 쓸 수 없으면 WASM으로 실행하고 어느 경로였는지 결과에 표시합니다.
텍스트 모델의 형식은 기기에 맞춰 정해집니다. WebGPU 어댑터가 shader-f16 기능을 지원하면 q4f16 형식을, 그렇지 않거나 WASM 경로이면 q4 형식을 씁니다. q4f16 로드에 실패하면 q4로 대체하며, 그 사실도 진행 화면에 알려 줍니다. 그래서 결과에는 경로(WebGPU 또는 WASM 대체)와 텍스트 형식(q4f16 또는 q4)이 함께 적힙니다. 이 둘이 같은 결과끼리만 비교하세요.
측정은 항목마다 워밍업을 거친 뒤 3회 반복합니다. 도중에 탭을 숨기면 그 회차를 버리고, 돌아오면 캐시를 재사용해 워밍업부터 다시 측정합니다. 측정 중에는 탭을 그대로 띄워 두는 편이 정확합니다.
AI 결과와 GPU 연산 항목 읽는 법
AI 추론 결과는 네 가지 값으로 나옵니다.
- 첫 토큰 시간(ms): 생성을 시작해서 첫 글자(토큰)가 나오기까지 걸린 시간입니다. 낮을수록 좋습니다. 챗봇에서 "버튼을 누르고 반응이 오기까지"의 체감과 가깝습니다.
- 프롬프트 처리(토큰/s): 입력한 문장을 모델이 읽어 들이는 속도입니다. 입력 토큰 수를 첫 번째 계산 시간으로 나눈 값이며 높을수록 좋습니다. 긴 문서를 넣는 기능에서 중요합니다.
- 텍스트 생성(토큰/s): 128토큰을 생성하는 동안 첫 토큰 이후 127토큰의 처리량입니다. 높을수록 좋고, 글이 화면에 흘러나오는 속도와 직결됩니다.
- 이미지 분류 1장(ms): 고정된 224×224 이미지 한 장을 분류하는 시간입니다. 전처리는 제외하며 낮을수록 좋습니다.
토큰은 모델이 글을 쪼개 다루는 단위로, 대략 단어 또는 단어 조각이라고 생각하면 됩니다. 이 값들은 SmolLM2-135M이라는 작은 모델 기준이어서, 더 큰 모델이 같은 속도로 돌아간다는 뜻은 아닙니다. 어디까지나 "작은 AI 기능이 쾌적할지"를 가늠하는 참고 지표입니다.
그다음 GPU 연산 카테고리를 함께 보면 해석이 훨씬 쉬워집니다. GPU 연산은 그래픽이 아니라 계산을 GPU에 맡겼을 때의 속도를 재는 항목으로, 브라우저 안의 영상 처리나 AI 추론처럼 병렬 계산이 많은 작업과 가장 가깝습니다.
- 행렬곱 f32·f16: GFLOPS 단위로, 높을수록 좋습니다. AI의 핵심 계산과 가장 닮은 항목입니다. f16은 shader-f16 기능이 있을 때만 실행됩니다.
- 이미지 컨볼루션, 파티클 시뮬레이션, 병렬 합: 초당 처리 원소 수로 표시하며 높을수록 좋습니다.
- 모든 GPU 연산은 결과 버퍼를 읽어 CPU로 구한 정답과 비교해 올바른지 검증합니다. 빠르지만 틀린 값은 점수로 인정하지 않습니다.
GPU 연산 항목이 제외되었다면 WebGPU가 없거나 필요한 기능이 부족하다는 신호일 수 있습니다. f16 행렬곱만 빠졌다면 WebGPU는 되지만 shader-f16이 없는 환경이라는 뜻일 가능성이 큽니다. 이런 경우 AI 텍스트 모델도 q4f16이 아니라 q4 형식으로 실행되는 것이 자연스럽습니다.
결과로 내 기기의 AI 적합도 가늠하기
숫자를 어떻게 받아들일지가 가장 헷갈리는 부분입니다. 아래 순서로 읽으면 무리 없이 판단할 수 있습니다.
- 먼저 경로를 봅니다. WebGPU로 돌았는지, WASM 대체였는지 확인하세요. WASM 대체라면 GPU의 도움 없이 CPU로 돌린 결과이니 느린 값이 나와도 자연스럽습니다.
- 형식을 봅니다. q4f16과 q4는 서로 다른 조건이므로 형식이 같은 결과끼리 비교해야 합니다.
- GPU 연산 점수를 봅니다. 행렬곱 같은 항목이 잘 나온다면 병렬 계산 체력이 있다는 뜻이고, AI 처리량도 그에 맞게 나올 가능성이 높습니다.
- 텍스트 생성(토큰/s)을 사용 사례에 대어 봅니다. 글이 흘러나오는 속도가 느리면 대화형 기능은 답답하게 느껴질 수 있습니다. 반대로 분류나 짧은 요약처럼 한 번에 끝나는 작업은 느려도 견딜 만합니다.
- 첫 토큰 시간을 봅니다. 클릭 후 반응이 오기까지의 대기 시간이라 체감 쾌적함에 크게 영향을 줍니다.
- 이미지 분류 시간을 봅니다. 사진 정리나 필터링처럼 여러 장을 연달아 처리하는 기능이라면 한 장당 시간이 곱절로 쌓입니다.
같은 기기에서도 조건에 따라 값이 달라집니다. 노트북이 배터리 모드이거나, 다른 탭이 GPU를 쓰고 있거나, 기기가 뜨거워진 상태라면 낮게 나올 수 있습니다. 한 번의 숫자에 매달리기보다, 같은 조건에서 두세 번 반복해 범위로 읽으세요. 휴대폰과 노트북, 또는 이전 기기와 새 기기를 비교하고 싶다면 경로와 형식을 맞춘 뒤 같은 브라우저에서 측정하는 편이 공정합니다.
이 글에서 구체적인 점수 기준이나 "몇 점 이상이면 가능" 같은 선을 긋지 않은 이유가 있습니다. 모델과 사용 사례마다 필요한 속도가 다르고, 점수는 어디까지나 고정된 입력에서의 참고값이기 때문입니다. 내 기기의 값을 내가 쓰려는 기능에 대어 보는 것이 가장 정확한 판단입니다.
WebGPU·온디바이스 AI 지원 확인 체크리스트
마지막으로, 내 기기에서 브라우저 AI를 시도하기 전에 점검할 항목을 모았습니다.
- 브라우저를 최신 버전으로 업데이트했나요?
- 웹 벤치 결과 화면에서 GPU 경로가 WebGPU로 표시되나요? WebGL2로만 나온다면 WebGPU가 꺼져 있거나 지원되지 않는 환경일 수 있습니다.
- WebGPU 어댑터 정보(기능·한도)가 표시되나요? shader-f16 지원 여부를 확인하세요.
- GPU 연산 항목(특히 행렬곱 f32·f16)이 제외되지 않고 실행되었나요? 제외되었다면 결과 화면의 제외 사유를 읽어 보세요.
- 남는 메모리와 저장 공간이 충분한가요? 다른 무거운 탭과 앱을 닫고 시도하세요.
- 노트북은 전원을 연결하고 고성능 모드로, 휴대폰은 충전기를 연결하고 시원한 곳에서 시도하세요.
- 모바일 데이터가 아니라 와이파이에서 모델을 내려받을 수 있나요? 약 130MB 안팎이 안내되며, 형식에 따라 더 받을 수 있습니다.
- AI 측정을 켠 상태로 두세 번 측정해 범위를 확인했나요? 경로(WebGPU 또는 WASM 대체)와 텍스트 형식(q4f16 또는 q4)을 함께 기록해 두세요.
웹 벤치는 설치와 로그인 없이 브라우저에서 CPU, 메모리, GPU, 브라우저, 저장소 성능을 재는 무료 도구입니다. 빠른 측정은 약 30초, 기본 측정은 2~3분 정도 걸리고, AI 추론은 원할 때만 동의하고 더할 수 있습니다. 측정은 모두 기기 안에서 처리하며, 결과는 순위 등록에 동의한 경우에만 서버로 전송합니다. 먼저 AI 없이 기본 측정으로 GPU 경로와 GPU 연산 결과를 확인하고, 궁금하면 AI 추론을 더해 보세요.
