WebAssembly(Wasm)로 온디바이스 AI 구현하기: TFLite vs ONNX 실전 배포 가이드

WebAssembly(Wasm)로 온디바이스 AI 구현하기: TFLite vs ONNX 실전 배포 가이드

개발자 여러분, 혹시 이런 고민을 해보신 적 없으신가요? "AI 모델을 웹에 넣고 싶은데, 매번 서버를 띄우는 건 비용도 많이 들고, 응답 속도(Latency)도 너무 느려요."

클라이언트 측에서 AI를 돌리는 것이 가장 이상적입니다. 데이터 전송 비용을 아끼고, 사용자 프라이버시를 완벽하게 지킬 수 있기 때문이죠. 하지만 과거에는 웹 브라우저의 성능 한계 때문에 '서버가 필수'라는 인식이 강했습니다.

하지만 이제 상황이 바뀌고 있습니다. 바로 **WebAssembly(Wasm)**라는 기술 덕분입니다. Wasm은 웹 브라우저의 성능 한계를 돌파하며, 복잡한 네이티브 코드를 웹 환경에서 구동할 수 있게 해준 핵심 열쇠입니다.

이 포스트에서는 이 Wasm을 활용하여, 가장 널리 쓰이는 두 가지 AI 모델 포맷인 TFLite와 ONNX를 비교하고, 여러분이 당장 프로젝트에 적용할 수 있는 실질적인 3단계 로드맵을 제시합니다.

🚀 1. 서버 없이 AI를 구동해야 하는 이유: 클라이언트 측 AI의 부상

왜 서버를 거치지 않고 브라우저에서 AI를 돌려야 할까요? 핵심은 세 가지입니다.

1. 극단적인 레이턴시 개선 (Latency): 사용자가 버튼을 누르고 결과를 받는 과정에서 네트워크 왕복 시간(RTT)이 사라집니다. 실시간 카메라 필터, 즉각적인 이미지 인식 등 '순간적인 반응'이 필요한 서비스에서 필수적입니다.
2. 프라이버시 보장 (Privacy): 민감한 사용자 데이터(얼굴 이미지, 음성 녹음 등)를 서버로 전송할 필요가 없습니다. 모든 처리가 기기 내부에서 끝나므로, 데이터 유출 위험이 원천 차단됩니다.
3. 비용 효율성 (Cost): 트래픽이 발생할 때마다 서버 자원을 소모하는 비용을 절감할 수 있습니다. 특히 대규모 사용자 기반의 서비스일수록 이 비용 절감 효과는 막대합니다.

이러한 요구사항을 만족시키기 위해 등장한 것이 바로 **WebAssembly(Wasm)**입니다. Wasm은 C++, Rust와 같은 저수준 언어로 작성된 코드를 웹에서 네이티브에 가까운 속도로 실행할 수 있게 해주는 바이너리 포맷입니다. 즉, JavaScript의 한계를 뛰어넘어 '성능'이라는 측면에서 웹을 업그레이드한 기술이라고 이해하시면 됩니다.

🧠 2. WebAssembly와 온디바이스 AI의 작동 원리 이해하기

AI 모델을 브라우저에서 구동하는 과정은 단순히 JS 라이브러리를 가져다 쓰는 것보다 복잡합니다. 모델의 특성상, 계산 과정 자체가 고성능의 병렬 처리를 요구하기 때문입니다.

Wasm의 역할: Wasm은 AI 추론 엔진(Inference Engine)의 핵심 로직(예: 행렬 곱셈, 활성화 함수 등)을 담는 컨테이너 역할을 합니다. 개발자는 PyTorch나 TensorFlow 같은 프레임워크에서 학습된 모델을 Wasm이 이해할 수 있는 형태로 **변환(Conversion)**하는 과정을 거쳐야 합니다.

AI 모델 구동의 전체 흐름 (Workflow):

[모델 학습] $\rightarrow$ [모델 변환/최적화] $\rightarrow$ [Wasm 바이너리 로드] $\rightarrow$ [브라우저 메모리에서 추론 실행] $\rightarrow$ [결과 반환]

이 흐름을 이해하는 것이 성공적인 온디바이스 AI 배포의 80%를 차지한다고 해도 과언이 아닙니다.

⚖️ 3. 핵심 비교 분석: TFLite vs. ONNX (어떤 모델 포맷을 선택해야 할까?)

가장 중요한 의사결정 지점입니다. 모델을 어떤 포맷으로 가져가느냐에 따라 사용해야 할 라이브러리와 구현 난이도가 달라집니다.

🔷 TensorFlow Lite (TFLite)

TFLite는 원래 모바일(Android/iOS) 환경에 최적화된 경량화 포맷입니다.

• 장점: 모바일 디바이스의 특성(메모리 제약, 특정 연산자 최적화)을 가장 잘 이해하고 있습니다. 이미 많은 모바일 배포 사례가 존재합니다.
• 단점: 생태계가 TensorFlow에 종속적이며, 웹 환경에 맞게 포팅할 때 추가적인 작업이 필요할 수 있습니다.
• 웹 배포 시 고려사항: tensorflow.js를 통해 접근하는 것이 가장 일반적이지만, 순수 Wasm 기반의 고성능 추론을 위해서는 별도의 Wasm 백엔드 연동이 필요할 수 있습니다.

🔶 ONNX (Open Neural Network Exchange)

ONNX는 모델 포맷의 '표준화'에 초점을 맞춘 개방형 포맷입니다.

• 장점: PyTorch, TensorFlow, Keras 등 다양한 프레임워크에서 모델을 내보낼 수 있는 범용성이 압도적입니다. 산업 표준에 가깝습니다.
• 단점: TFLite처럼 특정 엣지 디바이스에 최적화되어 있다는 느낌은 덜할 수 있습니다.
• 웹 배포 시 장점: ONNX Runtime Web과 같은 라이브러리가 강력한 Wasm 백엔드를 제공하며, 다양한 백엔드(CPU, WebGPU 등)를 선택할 수 있는 유연성이 높습니다.

📊 사용 사례별 최적 포맷 비교 테이블

💡 개발자 팁: 만약 프로젝트의 핵심이 **'다양한 모델을 쉽게 교체하며 테스트'**하는 것이라면 ONNX를, **'특정 모바일 환경에 가장 가깝게 최적화'**하는 것이 목표라면 TFLite를 우선 검토하는 것이 좋습니다.

🛠️ 4. 실전 가이드: Wasm을 이용한 AI 모델 구동 3단계 로드맵

이론을 넘어, 실제로 코드를 짜는 과정이 중요합니다. 아래는 가장 범용적이고 성능이 검증된 ONNX $\rightarrow$ Wasm 기반의 로드맵입니다.

🗺️ 워크플로우 다이어그램 (데이터 흐름)

1. [개발 환경] PyTorch/TF $\xrightarrow{\text{Export}}$ ONNX 모델 파일 (.onnx)
2. [변환/최적화] ONNX $\xrightarrow{\text{Runtime Tool}}$ Wasm 바이너리 (또는 JS 바인딩)
3. [클라이언트] 웹 브라우저 (JS/TS) $\xrightarrow{\text{Load}}$ Wasm 모듈
4. [추론 실행] 입력 데이터 (Tensor) $\xrightarrow{\text{Wasm 추론}}$ 결과 Tensor

단계 1: 모델 준비 및 변환 (백엔드/CLI)

먼저, 학습된 모델(예: PyTorch .pth 파일)을 ONNX 포맷으로 변환해야 합니다. 이 과정은 Python 환경에서 진행됩니다.

단계 2: 프론트엔드 통합 (JavaScript/TypeScript)

웹 브라우저 환경에서는 JavaScript를 사용합니다. 라이브러리(예: ONNX Runtime Web)를 사용하여 변환된 모델을 로드하고 추론을 실행합니다.

핵심 코드 개념 (개념적 예시):

// 1. 라이브러리 로드
import * as ort from 'onnxruntime-web';

async function runInference(modelPath, inputTensor) {
    // 2. 세션 생성 및 모델 로드
    const session = await ort.InferenceSession.create(modelPath);
    
    // 3. 입력 텐서 준비 (JavaScript ArrayBuffer 형태)
    const feeds = { input_name: inputTensor }; 
    
    // 4. 추론 실행 (가장 중요한 단계)
    const results = await session.run(feeds); 
    
    // 5. 결과 파싱 및 반환
    return results['output_name'].data;
}

단계 3: 성능 최적화 (필수 고려 사항)

• WebGL/WebGPU 사용: 가능하다면 CPU 기반 연산 대신 GPU 가속을 활용하는 백엔드 구현을 선택해야 합니다.
• 입력 데이터 전처리: JavaScript에서 텐서(Tensor)를 생성할 때, 모델이 요구하는 정확한 크기(Shape)와 데이터 타입(Float32 등)을 지키는 것이 가장 까다롭고 중요한 부분입니다.

요약 정리: