브라우저에서 AI 돌리는 시대, 이제 진짜 왔습니다
안녕하세요, 개발자 여러분 👋 오늘은 구글이 조용히(?) 하지만 굉장히 임팩트 있게 공개한 LiteRT.js 이야기를 해볼게요.
한 줄로 요약하면 이렇습니다.
"TensorFlow.js는 이제 레거시입니다. .tflite 모델을 브라우저에서 네이티브 성능으로 돌리세요."
기존 웹 AI는 솔직히 말하면 좀 답답했어요. TensorFlow.js는 자바스크립트 커널 기반이라 무거운 모델을 돌리면 팬이 돌아가기 시작하죠. 그런데 LiteRT.js는 안드로이드/iOS/데스크톱에서 이미 검증된 LiteRT 런타임을 WebAssembly로 그대로 가져왔습니다.
이게 왜 중요하냐면요:
- 🔒 프라이버시: 추론이 100% 클라이언트에서 일어나요. 서버로 이미지/음성이 안 넘어갑니다.
- 💰 서버 비용 0원: GPU 서버 안 돌려도 됩니다.
- ⚡ 초저지연: 네트워크 왕복이 없으니 실시간 UX가 가능해요.
- 🔁 크로스 플랫폼 통일: 모바일/엣지/웹이 같은 모델, 같은 스택을 씁니다.
특히 국내 스타트업 환경에서는 추론 서버 유지비가 꽤 부담인데, 이 부분이 상당히 매력적이에요. 자세한 배경은 근거자료에서 확인하실 수 있습니다.
핵심 기능 뜯어보기: 왜 3배, 60배가 나오는가
1. 하드웨어 가속 스택이 다릅니다
LiteRT.js의 성능 비결은 WebAssembly로 컴파일된 네이티브 런타임이에요. 백엔드는 이렇게 나뉩니다.
| 백엔드 | 대상 하드웨어 | 용도 |
|---|---|---|
| XNNPACK | CPU | 기본 폴백, 안정성 |
| ML Drift (WebGPU) | GPU | 비전/오디오 실시간 처리 |
| WebNN (via CoreML 등) | NPU | 온디바이스 생성 AI (로드맵) |
벤치마크 결과가 인상적인데요, 객체 추적·오디오 전사·이미지 조작 같은 실시간 워크로드에서 CPU 대비 GPU/NPU가 5~60배 빠릅니다. 그리고 기존 웹 런타임 대비해서도 최대 3배 우위를 보여요.
2. PyTorch → .tflite 원스텝 변환
LiteRT Torch를 쓰면 PyTorch 모델을 한 단계로 변환할 수 있어요. 여기에 AI Edge Quantizer로 레이어별 양자화 스킴을 커스터마이즈하면 사이즈는 줄이고 성능은 올리면서 품질은 유지할 수 있습니다.
3. 코드가 진짜 짧습니다
자, 실제 사용 예시를 볼까요? GPU 가속으로 .tflite 모델을 로드하고 추론하는 코드입니다.
// LiteRT.js 코어 모듈 임포트
import { loadLiteRt, loadAndCompile, Tensor } from '@litertjs/core';
// 1. WebAssembly 런타임 초기화 (wasm 디렉토리 경로 지정)
await loadLiteRt('path/to/wasm/directory/');
// 2. .tflite 모델 로드 및 WebGPU 백엔드로 컴파일
const model = await loadAndCompile('path/to/your/model.tflite', {
accelerator: 'webgpu' // 'wasm' 또는 'webnn'도 가능
});
// 3. 입력 텐서 준비 (예: 1x3x244x244 이미지 배치)
const inputTypedArray = new Float32Array(1 * 3 * 244 * 244);
const inputTensor = new Tensor(inputTypedArray, [1, 3, 244, 244]);
// 4. 추론 실행
const results = await model.run(inputTensor);
// 5. 결과는 GPU에 있으므로 CPU로 옮겨서 TypedArray로 변환
const resultArray = (await results[0].moveTo('wasm')).toTypedArray();
기존 TensorFlow.js로 .tflite를 돌리려던 분들이라면, 이 코드가 얼마나 깔끔한지 바로 아실 거예요. accelerator 옵션 하나만 바꾸면 CPU/GPU/NPU를 갈아끼울 수 있다는 게 핵심입니다.
4. 실전 데모: YOLO와 Depth Anything
공식 데모에서는 Ultralytics YOLO 모델이 Ultralytics Python 패키지에 공식 LiteRT export로 통합됐어요. 몇 줄이면 모바일·엣지·브라우저에 배포됩니다. 또 Depth Anything V2로 웹캠 영상을 실시간 3D 포인트 클라우드로 바꾸는 데모도 WebGPU로 돌아가요. Real-ESRGAN으로 128x128 패치를 512x512로 업스케일하는 것도 브라우저 안에서 됩니다.
이 기술의 한계와 주의사항 (냉정하게)
좋은 소식만 드리면 안 되니까, 실무에서 걸릴 만한 부분들을 짚어볼게요.
⚠️ 1. 초기 로딩 비용
WebAssembly 런타임 + 모델 파일을 처음 받을 때 수 MB~수십 MB의 다운로드가 발생합니다. 모바일 네트워크에서는 이게 UX를 망칠 수 있어요. 반드시 HTTP 캐시, Service Worker, IndexedDB 전략을 같이 설계하셔야 합니다.
⚠️ 2. WebGPU 브라우저 지원 편차
2024년 기준 Safari, Chrome은 WebGPU를 지원하지만 Firefox는 아직 실험 단계이고, 구형 안드로이드 WebView는 지원이 들쭉날쭉해요. 폴백 전략(XNNPACK CPU)을 반드시 준비해야 합니다.
⚠️ 3. NPU(WebNN)는 아직 로드맵
공식 발표에도 나오듯 WebNN은 upcoming입니다. 지금 당장 NPU 가속을 기대하면 안 되고, GPU(WebGPU) 기반으로 설계한 뒤 WebNN이 안정화되면 전환하는 전략이 현실적이에요.
⚠️ 4. 국내 SI/금융권 환경에서의 주의점
국내 SI나 금융권 프로젝트에서는 **CSP(Content Security Policy)**가 빡빡한 경우가 많아요. WebAssembly 실행은 wasm-unsafe-eval을 요구하는데, 이게 정책에 걸리면 아예 못 돌립니다. 프로젝트 초반에 보안팀과 반드시 협의하세요. 또 폐쇄망 환경에서는 wasm 바이너리를 사내 CDN에 두는 방식으로 설계해야 합니다.
⚠️ 5. TensorFlow.js 자산과의 호환
기존 TFJS로 만든 커스텀 레이어나 JS 커널이 있다면 그대로 못 씁니다. .tflite로 변환 가능한 모델만 옮겨야 해요. 마이그레이션 비용을 미리 산정하세요.
결론: 지금 시작해야 하는 이유
정리하겠습니다.
LiteRT.js는 "브라우저 AI의 다음 표준"이 될 가능성이 높습니다. 이유는 명확해요.
- 안드로이드/iOS/데스크톱에서 이미 검증된 런타임을 그대로 재사용합니다.
- PyTorch → .tflite → 브라우저까지 파이프라인이 통일됩니다.
- WebNN 로드맵까지 감안하면 NPU까지 커버하는 유일한 웹 AI 스택이 됩니다.
다음 단계 학습 방향을 제안드리면:
- 1단계: 공식 LiteRT.js npm 패키지로 간단한 이미지 분류 모델부터 돌려보세요.
- 2단계: YOLO 모델을 Ultralytics로 export해서 객체 탐지 데모를 만들어보세요.
- 3단계:
AI Edge Quantizer로 양자화를 적용해 모델 사이즈를 절반 이하로 줄여보세요. - 4단계: WebNN이 안정화되는 시점에 NPU 백엔드로 전환을 검토하세요.
함께 보면 좋은 글
- Oracle에서 PostgreSQL로, AI가 마이그레이션을 혁신하는 방법 (feat. Azure) — 엔터프라이즈 환경에서 AI 인프라를 어떻게 재편하는지 궁금하다면 이 글을 추천해요.
- NVIDIA IGX Thor, 산업용 엣지 AI의 게임 체인저 등장 — 브라우저를 넘어 엣지 디바이스까지 AI 추론의 지형이 어떻게 바뀌는지 보고 싶다면 필독입니다.
브라우저 AI는 이제 "장난감"이 아니라 "프로덕션 옵션"입니다. 삽질 미리 하지 마시고, 공식 문서부터 훑어보세요 🚀