스크립트
00:00:00Google이 머신 러닝과 AI 모델을
00:00:05브라우저 안에서 거의 네이티브 속도로 실행할 수 있게 해주는 새로운 런타임 라이브러리를 출시했습니다. 바로 LiteRT.js인데, 정말 인상적입니다.
00:00:12그래서 이번 영상에서는 LiteRT.js를 살펴보고, 작동 원리를 알아본 뒤 직접 테스트해보려고 합니다.
00:00:18브라우저에서 완전히 작동하는 실시간 3D 모션 캡처 애플리케이션을 만들어 볼 겁니다.
00:00:24정말 재미있을 것 같으니, 바로 시작해보죠. 도대체 LiteRT.js란 무엇일까요? 간단히 말해 LiteRT의 자바스크립트 바인딩입니다.
00:00:36LiteRT는 구글의 온디바이스 추론 런타임으로, 이미 수년째 안드로이드, iOS, 임베디드
00:00:42하드웨어에서 모델을 실행해왔죠. 그런데 LiteRT.js는 웹어셈블리(WebAssembly)를 사용해
00:00:50LiteRT.js 코어 npm 패키지를 통해 같은 런타임을 브라우저로 가져온 것입니다. LiteRT.js가 특별한 이유는 무엇일까요?
00:00:58구글에는 이미 TensorFlow.js라는 브라우저 머신 러닝 라이브러리가 있었고, 수년 동안 사용되어 왔습니다.
00:01:04하지만 TensorFlow.js는 자바스크립트 기반 커널에서 실행되며, 그것이 큰 병목 현상이었습니다.
00:01:11자바스크립트 커널은 네이티브 런타임처럼 CPU나 GPU를 완전히 활용할 수 없습니다. 그래서 TensorFlow.js는 항상
00:01:19네이티브 앱 성능에 미치지 못했습니다. 하지만 LiteRT.js는 WebAssembly를 사용하며, 자체적으로 최적화된 커널을 탑재하고 있습니다.
00:01:27즉, 안드로이드와 iOS 추론을 구동하는 바로 그 네이티브 런타임이 WASM으로 컴파일되어
00:01:34LiteRT.js에 노출되는 것입니다. 이제는 웹 스타일의 추상화 계층이 아니라,
00:01:40진정으로 최적화된 런타임 엔진을 얻게 되는 것이죠. 이는 백엔드 아키텍처에도 반영되어 있습니다. LiteRT.js는
00:01:47CPU, GPU, 심지어 NPU에서도 잘 작동할 수 있도록 세 가지 다른 계층을 가지고 있습니다. CPU 측면에서는,
00:01:55구글의 최적화된 CPU 커널 라이브러리인 XNNPack을 사용하며, 이는 멀티스레드와 완화된 SIMD를 지원합니다.
00:02:04이것은 GPU 없이도 어디서나 실행할 수 있는 범용적인 폴백 방식입니다. 하지만 GPU의 경우,
00:02:11WebGPU 위에서 ML Drift를 사용하는데, 여기서 진정한 성능이 나옵니다. 네이티브 GPU
00:02:18커널을 활용하므로 셰이더 같은 것들이 더 이상 자바스크립트 오케스트레이션으로 렌더링되지 않습니다. NPU의 경우,
00:02:24크롬과 엣지에서 아직 실험 단계인 WebNN이 있으며, 전력 효율적인 추론을 위해 전용 신경망
00:02:31처리 하드웨어를 타겟팅합니다. 구글이 자체적으로 벤치마킹한 결과에 따르면,
00:02:37M4 칩이 탑재된 2024 맥북 프로에서 수행했을 때,
00:02:45시각 및 음성 모델 전반에서 다른 웹 런타임보다 CPU와 GPU에서 3배 더 빠른 추론 성능을 보였다고 합니다. 또한
00:02:53객체 추적, 음성 전사, 이미지 조작과 같은 작업을 CPU가 아닌 GPU나 NPU에서 실행할 때,
00:03:00작업에 따라 5배에서 최대 60배까지 더 빠른 성능 향상을 얻을 수 있었습니다.
00:03:07물론 이는 최상의 시나리오라는 점을 언급해야 합니다. 구글도 이 점을 인정하고 있죠.
00:03:13따라서 특정 GPU, 열 스로틀링, 드라이버 품질에 따라 성능 차이는 있을 수 있습니다. 그리고 이 런타임에서 정말 중요한 것이 하나 더 있습니다.
00:03:18이미 PyTorch나 TensorFlow에서 사용하는 모델이 있다면, 혹은 기존에 가지고 있는
00:03:24TF Lite 파일이 있다면 LiteRT.js에서 바로 실행할 수 있습니다.
00:03:30PyTorch를 사용 중이라면 모델을 바로 .tflite로 변환해주는 LiteRT
00:03:38Torch 변환 경로도 있습니다. 또한, 완전한 재작성 없이 모델 크기를 줄여주는 AI Edge
00:03:44Quantizer도 있죠. 따라서 TensorFlow.js에서 사용하던 기존 워크플로우를
00:03:50새로운 LiteRT.js로 쉽게 포팅할 수 있다는 것이 정말 멋집니다. 그런데 이걸로 무엇을
00:03:58실제로 할 수 있을까요? 구글이 제공하는 몇 가지 멋진 데모를 보면 활용 범위를 알 수 있습니다.
00:04:03실시간 YOLO 객체 탐지, 웹캠 피드를 실시간 3D 포인트 클라우드로 변환하는
00:04:09Depth Anything 라이브러리를 활용한 단안 깊이 추정을 할 수 있습니다. 또한 Real-ESRGAN 라이브러리를 통해
00:04:16이미지 업스케일링도 가능합니다. 이 모든 데모는 백엔드나 API 없이
00:04:23전적으로 브라우저 내부의 클라이언트 사이드에서 실행됩니다. 그리고 다음으로 무엇이 올지도 발표했는데요,
00:04:29LiteRT.LM.js입니다. 이것은 로컬 브라우저에서 대규모 언어 모델을 실행하기 위한 것입니다.
00:04:36즉 컴퓨터 비전뿐만 아니라, 곧 로컬 LLM 추론도 지원하게 된다는 거죠.
00:04:42좋습니다. 하지만 얼마나 강력한지 직접 테스트해보고 싶었습니다.
00:04:48그래서 웹캠을 사용하여 실시간 포즈 추정을 수행하는 모션 캡처 애플리케이션을 만들기로 했습니다.
00:04:55이 앱 역시 제약 없이 오프라인에서 브라우저 클라이언트 사이드로 완전히 실행됩니다.
00:05:03Cloud Code에서 새로운 Fable 5 모델을 사용해 이 앱을 코딩했고, 결과물은 이렇습니다.
00:05:10참고로, 이 리포를 다운로드해서 직접 해보고 싶으신 분들을 위해 설명란에
00:05:15프로젝트 링크를 추가해 두었습니다. 보시다시피 LiteRT.js가 블레이즈 포즈(Blaze Pose) 모델을 사용하여
00:05:2333개의 신체 랜드마크를 추출하고, Three.js를 통해 3D 캐릭터를 실시간으로 움직이고 있습니다. 백엔드 서버는 없고
00:05:31지금 보시는 모든 것이 이 컴퓨터에서 완전히 오프라인으로 일어나고 있습니다. 보시면
00:05:38CPU에서는 평균 38 FPS 정도이며 추론 속도는 23.3밀리초입니다. 그리고 포즈
00:05:47추정이 약간 지연되는 것을 볼 수 있습니다. 하지만 WebGPU 버전으로 전환하면
00:05:548.4밀리초의 추론 속도로 120 FPS를 확실하게 뽑아냅니다. 포즈 추정도 조금 더
00:06:02빠르고요. 프레임 속도는 약 3배 증가하고 추론 시간은 2.8배 단축되었습니다.
00:06:10이는 구글이 발표한 수치와 일치하며, 그들이 공개한 범위 내에서는 적당한 수준입니다. 블레이즈 포즈는
00:06:16매우 가벼운 모델이라 GPU가 처리해야 할 원시 데이터가 적다는 점을 고려해야 합니다.
00:06:23그럼에도 텐서 연산을 CPU에서 WebGPU로 옮기면 지연 시간이 확실히 줄어듭니다.
00:06:30또한 포즈 캡처 애니메이션을 기록하고 JSON이나 바이오비전(BVH) 모션 캡처 파일로
00:06:36내보내는 기능도 추가했습니다. 이를 블렌더 같은 프로그램에서 열어
00:06:44자신만의 커스텀 캐릭터에 해당 애니메이션을 리타겟팅할 수 있습니다. 보시다시피
00:06:49완벽하지는 않습니다. 움직임이 아주 상세하거나 세련되지는 않았죠. 아직 개발 중인 단계니까요.
00:06:56하지만 새로운 LiteRT.js를 사용하여 10분 만에 이 초기 버전을 작동시킬 수 있었다는 게 정말 멋집니다.
00:07:01자, 여기까지입니다. LiteRT.js에 대한 핵심 요약이었습니다.
00:07:08WebAssembly가 복잡한 애플리케이션을 브라우저에서 실행할 수 있는 능력을 어디까지 끌어올렸는지 정말 놀라울 따름입니다.
00:07:14이 새로운 LiteRT.js 라이브러리는 때때로 자바스크립트가
00:07:21네이티브급 성능을 내는 데 걸림돌이 될 수 있다는 점을 입증합니다. 이 라이브러리에 정말 깊은 인상을 받았고
00:07:27올해 말 정식 출시되면 바로 사용해보고 싶습니다. 여러분은
00:07:35LiteRT.js에 대해 어떻게 생각하시나요? 사용해보셨나요? 사용하실 계획인가요? 아래 댓글로 알려주세요. 여러분,
00:07:40이런 기술적인 분석이 도움이 되었다면 영상 아래의 좋아요 버튼을 눌러 알려주세요.
00:07:45그리고 채널 구독도 잊지 마세요. 지금까지 BetterStack의 Andres였으며
00:07:50다음 영상에서 뵙겠습니다.