Transformers.js v4 출시: 브라우저에서 20B 모델까지 실행하는 혁신적 업데이트 | AI Trends

Hugging FaceAI/ML조회 7회

Transformers.js v4 출시: 브라우저에서 20B 모델까지 실행하는 혁신적 업데이트

C++ WebGPU 백엔드 도입으로 성능을 극대화하고 20B 규모의 대형 모델까지 브라우저 및 서버사이드 자바스크립트 환경에서 실행할 수 있게 된 Transformers.js v4의 주요 업데이트를 다룹니다.

이 요약은 AI가 원문을 분석해 생성했습니다. 정확한 내용은 원문 기준으로 확인하세요.

핵심 요약

Transformers.js v4는 C++로 재작성된 WebGPU 백엔드를 통해 브라우저와 서버사이드 자바스크립트 모두에서 압도적인 성능을 제공한다. 이제 브라우저 내에서 20B 파라미터 규모의 모델까지 실시간으로 추론이 가능하다.

배경

Hugging Face는 자바스크립트 환경에서 트랜스포머 모델을 실행하기 위한 라이브러리인 Transformers.js의 네 번째 메이저 버전을 출시했다.

대상 독자

웹 개발자, AI 엔지니어, 클라이언트 사이드 AI 구현에 관심 있는 소프트웨어 개발자

의미 / 영향

웹 브라우저가 단순한 뷰어를 넘어 강력한 AI 실행 환경으로 완전히 진화했음을 보여준다. 서버 비용 부담 없이 클라이언트 사이드에서 대규모 언어 모델을 직접 실행함으로써 데이터 프라이버시 보호와 운영 비용 절감을 동시에 달성할 수 있는 실질적인 기술적 토대가 마련됐다. 이는 엣지 컴퓨팅 기반의 AI 애플리케이션 확산을 가속화할 것으로 예상된다.

챕터별 상세

00:00

C++ 기반 WebGPU 백엔드 도입

기존 자바스크립트 전용이었던 WebGPU 백엔드를 C++로 완전히 재작성하여 성능과 이식성을 높였다. ONNX Runtime 팀과 협력하여 모든 지원 모델에서 테스트를 완료했으며, 이제 동일한 코드가 브라우저뿐만 아니라 Node.js, Bun, Deno 등 다양한 런타임에서 동작한다. WebGPU 가속이 브라우저에 국한되지 않고 모든 자바스크립트 환경으로 확장됨에 따라 플랫폼 간 일관된 성능을 보장한다.

WebGPU는 웹 브라우저에서 GPU 가속 연산을 수행하기 위한 최신 API로, 기존 WebGL보다 효율적인 연산이 가능하다.

01:55

성능 최적화 및 대형 모델 실행

엑스포트 전략을 전면 재검토하고 아키텍처별로 최적화된 Fused Kernels를 적용하여 추론 속도를 대폭 개선했다. Liquid AI의 LFM 2.5(1.2B) 모델은 브라우저에서 매우 빠른 토큰 생성 속도를 보여주며 저사양 기기에서도 원활하게 동작한다. 특히 20B 파라미터 규모의 GPT-OSS 모델을 브라우저에서 초당 40토큰의 속도로 실행하는 데 성공했다. 이는 Mixture of Experts(MoE) 기법을 활용하여 각 토큰 생성 시 전체 네트워크의 일부만 활성화함으로써 연산 효율을 극대화한 결과이다.

Fused Kernels는 여러 연산을 하나의 GPU 커널로 묶어 메모리 접근 횟수를 줄이고 연산 속도를 높이는 최적화 기법이다.

02:34

확장된 모델 지원 및 신규 기능

v4는 200개 이상의 아키텍처와 3,000개 이상의 호환 모델을 지원하며, 이는 Hugging Face Hub에서 즉시 확인 가능하다. TranslateGemma를 통한 55개 언어 번역, Qwen 3.5 기반의 멀티모달 시각 이해, Voxtral을 이용한 실시간 음성 인식 등 다양한 데모를 통해 성능을 입증했다. 또한 Chatterbox Turbo를 사용하여 단 5초의 참조 오디오만으로 음성 클로닝이 가능하며, 웃음이나 숨소리 같은 비언어적 표현까지 제어할 수 있다. Mamba 레이어와 Multi-head Latent Attention 등 최신 아키텍처 구성 요소도 완벽하게 지원한다.

Multi-head Latent Attention은 메모리 사용량을 줄이면서 어텐션 연산 속도를 높이는 최신 기술이다.

05:03

개발자 경험 및 도구 개선

새로운 Model Registry API를 도입하여 모델 파일에 대한 가시성과 제어력을 높였다. 개발자는 모델이 필요로 하는 정확한 파일 목록을 확인하고, 전체 다운로드 크기를 계산하며, 캐시 상태를 관리할 수 있다. 특히 progress_total 콜백을 통해 개별 파일이 아닌 전체 모델 다운로드 진행률을 정확하게 표시하는 UI 구현이 가능해졌다. 환경 설정에서는 Wasm 캐시 사용 여부를 선택할 수 있고, 커스텀 fetch 함수를 전달하여 인증 토큰이나 중단 신호를 관리하는 등 네트워크 요청 파이프라인과의 통합이 유연해졌다.

Wasm(WebAssembly) 캐시는 브라우저가 컴파일된 바이너리를 저장하여 다음 방문 시 로딩 속도를 높이는 기능이다.

06:38

코드베이스 구조화 및 빌드 최적화

거대했던 단일 모델 파일을 아키텍처별 개별 파일로 분리하여 코드 가독성과 유지보수성을 높였다. PNPM 워크스페이스로 전환하고 Prettier를 적용하여 프로젝트 전반의 코드 스타일을 통일했다. TypeScript 사용자들을 위해 파이프라인 출력 타입을 동적으로 정의하여 작업 유형에 따른 정확한 타입 추론이 가능하도록 개선했다. 빌드 도구로 esbuild를 채택하여 빌드 시간을 2초에서 200ms로 10배 단축했으며, 결과물 크기도 줄였다. Tokenizers.js는 의존성 없는 8.3KB 크기의 독립 패키지로 분리되어 어디서든 가볍게 사용할 수 있다.

esbuild는 Go 언어로 작성된 매우 빠른 자바스크립트 번들러 및 미니파이어이다.

실무 Takeaway

C++ WebGPU 백엔드를 활용하면 브라우저와 서버 환경 구분 없이 고성능 AI 추론 파이프라인을 구축할 수 있다.
MoE(Mixture of Experts) 아키텍처 모델을 선택하면 20B 규모의 대형 모델도 클라이언트 사이드에서 실용적인 속도로 실행 가능하다.
Model Registry API를 사용하여 사용자에게 정확한 모델 로딩 진행률을 제공함으로써 웹 앱의 UX를 개선할 수 있다.
독립된 Tokenizers.js 패키지를 사용하면 전체 라이브러리 설치 없이도 8.3KB의 적은 용량으로 텍스트 토큰화 기능을 구현할 수 있다.

언급된 리소스

문서Transformers.js v4 Release Blog

DemoLFM2.5 1.2B Thinking WebGPU Demo

DemoGPT-OSS 20B WebGPU Demo

GitHubTokenizers.js GitHub

AI 분석 전체 내용 보기

AI 요약 · 북마크 · 개인 피드 설정 — 무료

출처 · 인용 안내

원문 발행 2026. 03. 30.수집 2026. 03. 30.출처 타입 YOUTUBE

인용 시 "요약 출처: AI Trends (aitrends.kr)"를 표기하고, 사실 확인은 원문 보기 기준으로 진행해 주세요. 자세한 기준은 운영 정책을 참고해 주세요.