TensorFlow.js에서 WebLLM까지: Web ML의 진화

웹 브라우저에서 머신러닝을 한다는 것은 불과 몇 년 전까지만 해도 상상하기 힘든 일이었습니다.자바스크립트는 느리고, 브라우저는 무거운 연산을 처리하기에 적합하지 않다는 인식이 지배적이었기 때문입니다.하지만 Web ML 기술은 놀라운 속도로 진화하며 이러한 편견을 깨뜨렸습니다.

1. 태동기: TensorFlow.js의 등장(2018)

2018년, 구글은 ** TensorFlow.js ** 를 세상에 공개했습니다.이것은 Web ML의 빅뱅과도 같은 사건이었습니다.파이썬(Python)의 전유물이었던 딥러닝을 자바스크립트 생태계로 가져온 것입니다.

개발자들은 브라우저에서 직접 모델을 학습시키거나, 미리 학습된 모델을 불러와 추론(Inference)하는 것이 가능해졌습니다.초기의 활용은 주로 이미지 분류, 포즈 감지(PoseNet), 얼굴 인식 등 비교적 가벼운 모델 위주였지만, 이는 ‘웹에서 AI가 돌아간다’는 가능성을 증명하기에 충분했습니다.

2. 도약기: WebAssembly(Wasm) 가속

자바스크립트 엔진(V8 등)의 성능 향상에도 불구하고, 딥러닝의 행렬 연산은 여전히 무거웠습니다.이를 돌파하기 위해 ** WebAssembly(Wasm) ** 기술이 도입되었습니다.

WebAssembly는 C++이나 Rust로 작성된 코드를 브라우저에서 실행 가능한 바이너리 포맷으로 컴파일하여, 네이티브에 가까운 실행 속도를 제공합니다.이를 통해 TensorFlow.js의 백엔드 성능이 크게 향상되었고, 더 복잡하고 정교한 모델을 웹에서 돌릴 수 있는 기틀이 마련되었습니다.

Realays는 이러한 기술적 발전의 정점에 서 있습니다. 우리는 WebGPU와 최신 Web ML 기술을 적극 도입하여, 사용자에게 이전에는 경험하지 못했던 빠르고 강력한 웹 AI 서비스를 제공하고 있습니다.

각 세대별 성능 비교

TensorFlow.js (2018)

• 모델 크기: 주로 10MB 이하의 경량 모델
• 추론 속도: MobileNet 기준 약 100-200ms (CPU)
• 주요 사용 사례: 이미지 분류, 포즈 감지, 물체 인식

WebAssembly 가속기 (2020)

• 성능 향상: CPU 연산 속도 2-3배 개선
• 모델 지원: 더 복잡한 CNN, RNN 모델 지원
• 주요 사용 사례: 실시간 비디오 처리, 음성 인식

WebGPU + WebLLM (2023~)

• 모델 크기: 수 GB 급 LLM 지원 (Llama 3, Gemma 등)
• 추론 속도: GPU 가속으로 10-100배 향상
• 주요 사례: 챗봇, 텍스트 생성, 이미지 생성 AI

실제 적용 예제

1. PoseNet을 활용한 자세 인식

import * as poseDetection from "@tensorflow-models/pose-detection";

async function detectPose(video) {
  // MoveNet 모델 로드
  const detector = await poseDetection.createDetector(
    poseDetection.SupportedModels.MoveNet,
  );

  // 비디오에서 포즈 감지
  const poses = await detector.estimatePoses(video);

  return poses;
}

2. WebLLM을 활용한 챗봇

import { ChatModule } from "@mlc-ai/web-llm";

async function initChatbot() {
  const chat = new ChatModule();

  // Llama-3 모델 로드 (WebGPU 필요)
  await chat.reload("Llama-3-8B-Instruct-q4f32_1");

  // 대화 생성
  const response = await chat.generate("안녕하세요!");
  console.log(response);
}

기술 선택 가이드

언제 TensorFlow.js를 사용하나요?

• 가벼운 모델 (< 50MB)
• 넓은 브라우저 호환성 필요
• CPU에서도 충분한 성능

언제 WebGPU를 사용하나요?

• 대형 모델 (> 100MB)
• 실시간 처리 필요
• 최신 브라우저 타겟팅 가능

언제 WebAssembly를 사용하나요?

• CPU 집약 연산
• GPU가 없는 환경 대비
• 레거시 브라우저 지원

성능 최적화 팁

1. 모델 양자화

// 모델을 int8로 양자화하여 크기 1/4 감소
await tf.loadGraphModel("model.json", {
  quantizationBytes: 1, // 8-bit 양자화
});

2. WebWorker 활용

// 메인 스레드를 차단하지 않고 백그라운드에서 추론
const worker = new Worker("ml-worker.js");
worker.postMessage({ image: imageData });
worker.onmessage = (e) => {
  console.log("Prediction:", e.data);
};

3. 모델 캐싱

// IndexedDB에 모델 캐시
const model = await tf.loadLayersModel("indexeddb://my-model");
if (!model) {
  const model = await tf.loadLayersModel("https://cdn.com/model.json");
  await model.save("indexeddb://my-model");
}

Web ML의 한계와 해결 방법

한계 1: 브라우저 메모리 제한

문제: 대형 모델 로드 시 메모리 부족 해결:

• 모델 양자화 적용
• 스트리밍 로드 방식 사용
• 필요한 부분만 동적 로드

한계 2: 초기 로딩 시간

문제: 모델 다운로드에 시간 소요 해결:

• Progressive Loading (점진적 로딩)
• Service Worker 캐싱
• CDN 활용

한계 3: GPU 접근 제한

문제: 모든 브라우저가 WebGPU 미지원 해결:

• Fallback 전략 구현
• WebGL 백엔드 병행 지원
• CPU 최적화 버전 제공

미래 전망

예상되는 발전

1. 더 큰 모델: 100B+ 파라미터 모델도 브라우저에서 실행
2. 멀티모달: 텍스트, 이미지, 음성 동시 처리
3. 연합 학습: 사용자 데이터로 로컬 학습 후 집계
4. 실시간 협업 AI: P2P로 여러 브라우저가 AI 연산 분산

산업별 영향

• 교육: 개인화 학습 AI 튜터
• 의료: 실시간 건강 모니터링
• 크리에이티브: 브라우저 기반 AI 디자인 도구
• 게임: NPC의 지능적 대화 및 행동

자주 묻는 질문

Q: 서버 AI와 비교해 얼마나 빠른가요? A: 네트워크 지연을 고려하면 단순 추론은 Edge AI가 5-10배 빠릅니다. 다만 복잡한 모델은 서버가 여전히 우위입니다.

Q: WebGPU는 언제 모든 브라우저에서 사용 가능한가요? A: Chrome과 Edge는 이미 지원하며, Safari와 Firefox도 2024-2025년 중 지원 예정입니다.

Q: 모바일에서도 WebGPU가 작동하나요? A: 네, Android Chrome 94+에서 작동합니다. iOS는 Safari에서 제한적으로 지원됩니다.

---

다음 포스트에서는 Web ML 개발 프로세스를 단계별로 상세히 다루겠습니다.