LiteRT.js로 브라우저에서 .tflite AI 모델 실행하기: WebGPU 기반 고성능 웹 AI 런타임

브라우저에서도 고성능 AI 추론이 가능한 LiteRT.js 등장

웹 브라우저에서 AI 모델을 실행하는 기술은 꾸준히 발전해 왔지만, 성능과 활용성에는 한계가 있었습니다. 특히 기존 JavaScript 기반 AI 런타임은 모바일이나 데스크톱에서 사용하는 네이티브 AI 런타임과 비교했을 때 성능 차이가 존재했습니다.

Google은 이러한 한계를 해결하기 위해 LiteRT.js를 공개했습니다. LiteRT.js는 기존 Android와 iOS에서 사용되던 LiteRT(TensorFlow Lite) 런타임을 JavaScript 환경에서도 그대로 사용할 수 있도록 만든 라이브러리입니다.

가장 큰 특징은 동일한 .tflite 모델을 브라우저에서 직접 실행할 수 있다는 점입니다. 별도의 서버에서 AI 추론을 수행하지 않고 사용자 브라우저에서 실행되므로 개인정보 보호가 강화되고, 서버 비용 없이 매우 낮은 지연 시간(Low Latency)을 제공합니다.

이번 글에서는 LiteRT.js의 구조와 동작 방식, 주요 특징, 성능, 사용 방법 그리고 TensorFlow.js와의 차이점을 살펴보겠습니다.

반응형

---

LiteRT.js란?

LiteRT.js는 새로운 AI 모델 포맷을 만든 것이 아닙니다.

Google이 기존에 Android, iOS, Desktop에서 사용하던 LiteRT 네이티브 런타임을 WebAssembly(Wasm)로 컴파일하고 JavaScript에서 사용할 수 있도록 바인딩한 라이브러리입니다.

즉,

• 기존 LiteRT 런타임 그대로 사용
• JavaScript API 제공
• 브라우저에서 .tflite 모델 실행

이라는 구조를 가지고 있습니다.

기존 TensorFlow.js는 JavaScript 기반 커널을 사용했지만 LiteRT.js는 네이티브 런타임을 그대로 활용하기 때문에 기존 플랫폼에서 축적된 다양한 최적화를 그대로 사용할 수 있습니다.

이를 통해

• 성능 개선
• 양자화(Quantization) 최적화
• 하드웨어 가속 기능

등이 웹 환경에도 그대로 적용됩니다.

---

LiteRT.js의 동작 구조

LiteRT.js는 하나의 런타임에서 세 가지 실행 백엔드를 지원합니다.

1. CPU 실행

CPU 환경에서는 Google의 고성능 CPU 라이브러리인 XNNPACK을 사용합니다.

특징은 다음과 같습니다.

• 멀티스레드 지원
• Relaxed SIMD 지원
• 가장 넓은 연산자(Operator) 지원 범위

CPU는 다른 가속기를 사용할 수 없는 경우 기본 실행 환경으로 동작합니다.

---

2. GPU 실행

GPU에서는 Google의 ML Drift를 활용하며 브라우저의 WebGPU를 통해 실행됩니다.

WebGPU를 이용하면 브라우저에서도 GPU 가속 AI 추론이 가능해져 실시간 영상 처리와 같은 작업에서 큰 성능 향상을 기대할 수 있습니다.

---

3. NPU 실행

NPU는 WebNN API를 이용합니다.

현재는 Chrome과 Edge에서 실험적으로 지원되고 있으며 아직은 WebGPU보다 활용 범위가 제한적입니다.

---

백엔드 선택 방식

LiteRT.js에는 중요한 제약 사항이 있습니다.

Partial Delegation 미지원

모델의 일부는 GPU, 일부는 CPU처럼 나누어 실행할 수 없습니다.

즉,

• 모델 전체를 GPU에서 실행하거나
• 모델 전체를 CPU에서 실행해야 합니다.

---

자동 CPU 폴백(Fallback)

선택한 가속기에서 모델 전체를 실행할 수 없는 경우 자동으로 WebAssembly 기반 CPU 실행으로 전환됩니다.

따라서 호환성 측면에서는 CPU 실행이 가장 안정적인 선택입니다.

---

LiteRT.js 성능

Google이 공개한 성능 결과는 크게 두 가지입니다.

다른 웹 AI 런타임 대비

CPU와 GPU 환경에서

최대 3배 빠른 추론 성능을 제공합니다.

주요 대상은

• 컴퓨터 비전
• 오디오 처리

모델입니다.

---

CPU 대비 GPU/NPU

GPU 또는 NPU를 사용하는 경우

최대 5~60배의 성능 향상이 가능합니다.

특히 다음과 같은 실시간 AI 작업에서 효과가 큽니다.

• 객체 추적(Object Tracking)
• 음성 전사(Audio Transcription)

다만 성능은 GPU 종류, 드라이버, 발열 상태 등 실행 환경에 따라 달라질 수 있습니다.

---

PyTorch 모델을 LiteRT.js에서 사용하는 방법

LiteRT.js는 .tflite 모델만 실행할 수 있습니다.

PyTorch 모델은 LiteRT Torch를 이용해 .tflite 형식으로 변환해야 합니다.

다만 변환을 위해서는 다음 조건을 만족해야 합니다.

• torch.export.export로 내보낼 수 있는 모델
• Python 조건문이 런타임 Tensor 값에 의존하지 않아야 함
• 입력 및 출력 크기가 고정되어 있어야 함
• Batch 크기 역시 고정되어 있어야 함

모델 크기를 줄이고 성능을 높이기 위해서는 AI Edge Quantizer를 이용해 양자화를 적용할 수 있습니다.

---

LiteRT.js 기본 사용 방법

LiteRT.js 사용 과정은 매우 단순합니다.

순서는 다음과 같습니다.

1. LiteRT Runtime 로드
2. .tflite 모델 로드
3. 실행 백엔드 선택
4. 입력 Tensor 생성
5. 모델 실행
6. 결과 가져오기
7. Tensor 메모리 해제

예를 들어 WebGPU를 사용하는 경우 다음과 같은 흐름으로 동작합니다.

import { loadLiteRt, loadAndCompile, Tensor } from '@litertjs/core';

await loadLiteRt('path/to/wasm/');

const model = await loadAndCompile('model.tflite', {
  accelerator: 'webgpu'
});

const input = new Tensor(
  new Float32Array(1 * 3 * 224 * 224),
  [1, 3, 224, 224]
);

const results = await model.run(input);

이후 결과 Tensor를 CPU 메모리로 이동한 뒤 일반 배열 형태로 사용할 수 있습니다.

---

반드시 알아야 할 메모리 관리

LiteRT.js에서 가장 주의해야 할 점은 Tensor 메모리가 자동으로 해제되지 않는다는 것입니다.

JavaScript의 일반 객체처럼 Garbage Collection이 적용되지 않으므로 사용이 끝난 Tensor는 반드시 직접 삭제해야 합니다.

input.delete();

for (const t of results)
    t.delete();

cpuTensor.delete();

삭제하지 않으면 GPU 또는 시스템 메모리가 계속 증가하여 메모리 누수가 발생할 수 있습니다.

---

WebNN 사용 시 추가 설정

WebNN을 사용할 경우에는 JSPI(JavaScript Promise Integration)를 활성화해야 합니다.

await loadLiteRt('path/to/wasm/', {
    jspi: true
});

그리고 모델 로드 시 사용할 장치를 지정할 수 있습니다.

accelerator: 'webnn'

webNNOptions: {
    devicePreference: 'npu'
}

선택 가능한 장치는 다음과 같습니다.

• cpu
• gpu
• npu

---

모델 테스트 도구

모델을 실제 서비스에 적용하기 전에 무작위 입력으로 테스트할 수 있는 도구도 함께 제공됩니다.

다음 명령으로 설치할 수 있습니다.

npm i @litertjs/model-tester

실행은 다음과 같습니다.

npx model-tester

이 도구는

• WebGPU
• WebNN
• CPU

환경에서 동일한 모델을 테스트할 수 있으며 입력 Tensor의 형태도 확인할 수 있습니다.

---

LiteRT.js 활용 사례

Google은 LiteRT.js 출시와 함께 다양한 활용 예제를 공개했습니다.

실시간 객체 탐지

YOLO 모델을 이용해 브라우저에서 실시간 객체를 탐지할 수 있습니다.

동일한 모델을 모바일과 웹에서 함께 사용할 수 있다는 장점이 있습니다.

---

웹캠 기반 깊이 추정

Depth-Anything-V2 모델을 이용하여 웹캠 영상을 실시간 3D 포인트 클라우드로 변환할 수 있습니다.

WebGPU의 성능을 활용해 상호작용 가능한 수준의 속도를 제공합니다.

---

이미지 업스케일링

Real-ESRGAN 모델을 이용해 저해상도 이미지를 브라우저에서 직접 고해상도로 변환할 수 있습니다.

이미지를 서버에 업로드하지 않기 때문에 개인정보 보호 측면에서도 유리합니다.

---

시맨틱 검색

EmbeddingGemma를 이용한 벡터 검색도 브라우저 내부에서 수행할 수 있습니다.

임베딩 생성이 모두 클라이언트에서 이루어져 별도의 서버 연산이 필요하지 않습니다.

---

LiteRT.js와 TensorFlow.js 비교

항목	LiteRT.js	TensorFlow.js
모델 형식	.tflite	TF.js 모델
실행 커널	네이티브 LiteRT 런타임	JavaScript 기반 커널
CPU	XNNPACK	JS/Wasm
GPU	WebGPU(ML Drift)	WebGL, WebGPU
NPU	WebNN 지원	미지원
메모리 관리	수동 .delete()	자동 관리
플랫폼 재사용	Android, iOS, Desktop과 동일 모델	웹 전용

Google은 LiteRT.js가 TensorFlow.js 전체를 대체하는 것이 아니라 Graph Model 실행 영역을 보완하는 역할이라고 설명합니다.

또한 TensorFlow.js는 전처리와 후처리 작업에 계속 활용할 수 있으며, @litertjs/tfjs-interop 패키지를 통해 두 라이브러리 간 Tensor를 효율적으로 전달할 수 있습니다.

---

728x90

LiteRT.js는 Google의 LiteRT 런타임을 웹 환경으로 확장한 기술로, 기존 .tflite 모델을 브라우저에서 그대로 실행할 수 있도록 지원합니다. WebAssembly 기반의 네이티브 런타임과 WebGPU, WebNN을 활용해 기존 JavaScript 기반 웹 AI 환경보다 높은 성능을 제공하며, 모바일·데스크톱·웹에서 동일한 모델을 재사용할 수 있다는 점도 큰 장점입니다.

다만 현재는 Tensor 메모리를 직접 관리해야 하며, WebNN은 아직 실험 단계라는 점을 고려해야 합니다. 그럼에도 불구하고 WebGPU 기반의 로컬 AI 실행은 서버 비용 절감, 낮은 지연 시간, 개인정보 보호 측면에서 의미 있는 가능성을 보여줍니다.

앞으로 WebGPU와 WebNN 생태계가 더욱 성숙해진다면 LiteRT.js는 웹 AI 애플리케이션 개발의 핵심 런타임 중 하나로 자리 잡을 것으로 기대됩니다.

300x250

https://www.marktechpost.com/2026/07/15/google-releases-litert-js-a-javascript-binding-of-litert-that-runs-tflite-models-in-browsers-via-webgpu/

Google Releases LiteRT.js: A JavaScript Binding of LiteRT That Runs .tflite Models in Browsers via WebGPU