AI 개발 도구 · 2026년 7월 11일 · 약 8분

Google LiteRT.js 사용법: 브라우저에서 .tflite AI 모델을 로컬로 실행하는 방법

Google이 공개한 LiteRT.js로 .tflite 모델을 브라우저에서 로컬 실행하는 기본 흐름을 초보자 기준으로 정리했습니다. WebAssembly, WebGPU, 실험적 WebNN의 차이를 먼저 보고, 지원되지 않는 연산이 있을 때 CPU로 돌아가는 fallback 설계까지 함께 점검해보세요.

• Google LiteRT.js
• LiteRT.js 사용법
• 브라우저 AI
• .tflite
• WebGPU AI
• WebNN
• 온디바이스 AI

출처: Google Developers Blog, Google AI Edge Docs

2026년 7월 9일 공개된 LiteRT.js의 핵심은 .tflite 모델을 서버로 보내지 않고 브라우저 안에서 실행하는 데 있습니다. 이미 TensorFlow Lite 모델을 갖고 있거나 작은 이미지·오디오 모델을 웹앱에 넣어 보고 싶다면, CPU 실행으로 동작을 확인한 뒤 XNNPACK, WebGPU, WebNN 같은 가속 옵션을 단계적으로 붙여보는 흐름이 현실적입니다.

핵심 키워드

• Google LiteRT.js 사용법
• 브라우저 .tflite 로컬 실행
• @litertjs/core 설치
• loadLiteRt WebAssembly 로딩
• loadAndCompile 모델 컴파일
• WebGPU 브라우저 AI 추론
• WebNN 실험 기능 주의점

LiteRT.js가 하는 일

LiteRT.js는 Google AI Edge의 LiteRT를 웹 브라우저에서 쓰기 위한 JavaScript 바인딩입니다. 개발자는 @litertjs/core 패키지를 설치하고, WebAssembly 런타임을 불러온 뒤, .tflite 모델을 로드해 입력 tensor를 넣고 결과를 받을 수 있습니다.

중요한 변화는 모델 추론이 브라우저 로컬에서 일어난다는 점입니다. 이미지 분류, 객체 탐지, 오디오 처리처럼 입력 데이터를 서버로 보내기 부담스러운 기능에서 먼저 검토할 수 있습니다. 다만 모델 크기, 브라우저 지원, 사용자 기기 성능에 따라 체감 속도는 달라집니다.

가장 작은 실행 흐름

공식 문서의 기본 흐름은 단순합니다. 먼저 LiteRT 런타임을 로드하고, 모델을 컴파일한 뒤, 입력 데이터를 Tensor로 감싸서 model.run에 넘깁니다. 결과가 GPU 쪽에 있으면 CPU에서 읽을 수 있도록 wasm 쪽으로 옮겨 typed array로 변환합니다.

처음 테스트할 때의 순서

초보자용 실행 순서

• 1. 작은 .tflite 모델 하나를 고릅니다. 이미지 분류나 간단한 오디오 모델처럼 입력과 출력이 분명한 모델이 좋습니다.
• 2. 모델의 입력 shape, 데이터 타입, 정규화 방식을 문서로 적습니다.
• 3. WebGPU나 WebNN보다 CPU 실행을 먼저 통과시킵니다.
• 4. 같은 입력으로 브라우저 결과와 기존 Python 또는 모바일 결과가 크게 다르지 않은지 확인합니다.
• 5. WebGPU 실행을 별도 옵션으로 켜고 속도와 결과 차이를 비교합니다.
• 6. WebNN은 실험 기능으로 분리해 테스트하고, 일반 사용자 기본 경로로 전제하지 않습니다.
• 7. 지원되지 않는 연산이 있거나 가속 옵션을 쓸 수 없을 때 CPU 경로로 돌아가는 동작을 확인합니다.

CPU, WebGPU, WebNN을 어떻게 봐야 하나

LiteRT.js의 CPU 경로는 XNNPACK을 활용합니다. 초보자에게는 이 경로가 가장 먼저 확인해야 할 기준점입니다. CPU에서 정확히 동작하지 않는 모델은 WebGPU로 옮겨도 문제 원인을 찾기 어렵습니다.

WebGPU는 브라우저에서 GPU 가속을 활용하는 선택지입니다. Google은 공식 발표에서 일부 컴퓨터 비전·오디오 모델 기준으로 기존 웹 런타임 대비 최대 3배, GPU나 NPU 가속이 CPU 대비 5~60배 빠른 사례를 제시했습니다. 이 벤치마크는 2024년형 MacBook Pro M4 Apple Silicon 환경을 포함한 Google의 측정 조건 기준이므로, 실제 제품에서는 사용자 기기, 브라우저, GPU 드라이버, 발열 상태별 측정이 필요합니다.

WebNN은 NPU 같은 전용 가속기를 겨냥하지만 아직 실험적 기능으로 봐야 합니다. Chrome과 Edge에서 관련 플래그나 JSPI 조건이 필요할 수 있고, 모든 사용자의 브라우저에서 자연스럽게 동작한다고 말하기는 어렵습니다. 그래서 WebNN은 옵션으로 테스트하고, 지원되지 않는 연산은 CPU 경로로 돌아갈 수 있다는 전제로 확인하는 편이 현실적입니다.

실무에서 먼저 해볼 만한 사용 사례

브라우저 로컬 실행에 어울리는 기능

• 이미지를 서버에 업로드하지 않고 브라우저에서 간단히 분류하기
• 웹캠 프레임에서 객체 탐지나 포즈 추정 결과를 빠르게 보여주기
• 짧은 오디오 샘플을 로컬에서 분류하기
• 사용자 기기에서 입력 전처리와 모델 추론을 함께 처리하기
• 서버 비용을 줄여야 하는 데모나 내부 도구에서 경량 모델을 실행하기

현재 단계에서 과하게 기대하면 안 되는 부분

LiteRT.js가 브라우저 AI 실행의 선택지를 넓힌 것은 맞지만, 모든 AI 모델을 브라우저에서 바로 빠르게 실행해준다는 뜻은 아닙니다. 특히 ChatGPT 같은 대화형 생성 AI를 일반 웹앱에서 그대로 실행할 수 있다고 해석하면 곤란합니다. Google은 향후 로드맵으로 온디바이스 생성 AI 최적화를 언급했지만, 이번 글의 실무 출발점은 .tflite 기반의 비교적 명확한 모델 추론입니다.

오늘 바로 해볼 한 가지

가장 작은 시작은 이미 공개된 작은 .tflite 모델을 하나 골라 CPU 경로로 실행해보는 것입니다. 그다음 같은 입력을 WebGPU에서도 돌려 결과와 시간을 비교하세요. 이 두 단계가 통과되면 WebNN은 별도 실험 브랜치나 옵션으로 분리해 확인하는 편이 좋습니다.