Transformers.js 작동 원리: 브라우저에서 AI 모델 실행하는 법

핵심 메시지

• Transformers.js는 모델 로딩·전처리·추론·후처리를 하나의 고수준 API로 묶어, 자바스크립트만으로 브라우저나 서버에서 AI 모델을 로컬 실행하게 해준다.
• 텍스트 생성, 자동 음성 인식, 배경 제거 등 27가지 과제(task)를 같은 방식의 파이프라인 API로 처리한다.
• 모델은 ONNX 형식으로 저장돼 "무엇을 계산할지"와 "어떻게 계산할지"가 분리되며, WebGPU·wasm·CUDA 등 환경에 맞는 실행 제공자를 고를 수 있다.
• 양자화(FP16, Q4 등)로 모델을 더 작고 빠르게 만들 수 있지만 정확도와 맞바꾸는 트레이드오프가 있다.
• pipeline API에 task ID와 model ID만 넘기면 토크나이저·텐서 변환·디코딩 루프 같은 내부 과정을 라이브러리가 대신 처리한다.

쉽게 이해하기

Transformers.js는 최첨단 머신러닝을 자바스크립트 세계로 가져오는 라이브러리다. 모델 로딩부터 전처리, 추론, 후처리까지를 하나의 고수준 API로 감싸, 브라우저 안에서 AI 모델을 로컬로 돌릴 수 있게 한다. 1B 미만의 작은 LLM부터 GPT-OSS 20B 같은 전문가 혼합(MoE) 모델, 음성 인식, 이미지 배경 제거까지 같은 방식으로 실행된다.

근본 원리는 신경망과 텐서다. 신경망은 하나의 텐서를 받아 다른 텐서를 내놓는데, 텐서란 형태(shape)로 조직된 숫자일 뿐이다. 신경망을 실행하려면 층과 연산을 설명하는 아키텍처(모델 그래프), 가중치, 그리고 수학을 실행하는 런타임 세 가지가 필요하다.

Transformers.js는 모델을 ONNX(Open Neural Network Exchange) 형식으로 다룬다. ONNX는 계산 그래프와 학습된 가중치를 저장하며, 핵심은 모델 포맷과 런타임이 분리된다는 점이다. 즉 ONNX는 "무엇을 계산할지"를, 런타임은 "현재 하드웨어에서 어떻게 계산할지"를 결정한다. 같은 모델을 WebGPU·wasm·CUDA·DML 등 다른 실행 제공자로 돌릴 수 있는 이유다.

웹 추론에서 중요한 또 하나의 개념이 양자화다. 가중치를 FP32 대신 FP16, Q4처럼 더 낮은 정밀도로 저장·실행하면 파일이 작아지고 다운로드·메모리·추론이 빨라지지만 정확도를 잃을 수 있다. Transformers.js에서는 dtype 옵션으로 품질·속도·메모리의 균형을 조절할 수 있다.

가장 쉬운 사용법은 task ID 기반의 pipeline API다. task는 입력과 출력의 계약으로, 같은 API라도 과제에 따라 내부 실행이 다르다. text-generation은 토큰을 하나씩 예측·추가하는 반복 루프지만, depth-estimation은 한 번의 forward pass로 끝난다. 약 200개 아키텍처와 27개 과제를 하나의 통일된 API 뒤로 추상화하는 것이 이 라이브러리의 핵심 강점이다.

주요 인사이트

• ONNX가 모델 포맷과 런타임을 분리하기 때문에 같은 모델을 브라우저(WebGPU/wasm)와 네이티브(CUDA/DML)에서 그대로 돌릴 수 있다 — 이 분리가 자바스크립트 생태계에 큰 이점이다.
• 양자화는 다운로드 크기·메모리·속도를 줄이지만 정확도 손실이 있어, dtype 옵션으로 과제별 품질 요구에 맞춰 균형을 잡아야 한다.
• text-generation은 토큰을 하나씩 예측·추가하는 반복 루프인 반면 depth-estimation은 한 번의 forward pass로 끝나는 등, 같은 pipeline 호출처럼 보여도 과제마다 내부 실행이 다르다.
• 약 200개 모델 아키텍처와 27개 과제를 하나의 통일된 API로 추상화해, 비동기 자바스크립트 함수 하나 호출할 줄 알면 로컬 ML 기능을 웹앱에 넣을 수 있다.

자주 묻는 질문

관련 AI 소식