에지에서 AI 활용: WebAssembly와 ONNX를 통한 고성능 추론
I’m happy to translate the article for you, but I’ll need the actual text you’d like translated. Could you please paste the content (or the specific sections) you want converted into Korean? Once I have the text, I’ll keep the source link and formatting exactly as you requested.
소개
현대 웹은 정적인 콘텐츠 그 이상을 요구합니다. 사용자는 브라우저에서 직접 데이터를 처리할 수 있는 지능적이고 반응성이 뛰어난 애플리케이션을 기대합니다 — 지속적인 서버 통신에 의존하지 않아도 됩니다. 여기서 **WebAssembly (WASM)**와 **Open Neural Network Exchange (ONNX)**의 강력한 조합이 등장하여 브라우저 내에서 거의 네이티브 수준의 AI 성능을 구현합니다. 번거로운 플러그인과 느린 네트워크 요청은 잊으세요; 우리는 엣지 AI 시대에 진입하고 있으며, 이 가이드가 그 방법을 보여줄 것입니다.
전통적인 접근 방식이 부족한 이유
전통적으로 복잡한 AI 모델을 실행하려면 일반적으로 서버에 있는 상당한 계산 자원이 필요했습니다. 주로 웹 페이지 렌더링을 위해 설계된 브라우저는 신경망 추론에 내재된 거대한 행렬 연산을 처리하는 데 한계가 있었습니다. 점점 빨라지고 있는 JavaScript도 이러한 작업에 최적화되어 있지는 않았습니다.
오직 드라이버만으로 자동차 엔진을 만들려고 한다고 상상해 보세요 – 가능하지만 엄청나게 비효율적입니다.
이러한 비효율성은 지연 시간 증가, 서버 비용 상승, 그리고 민감한 데이터를 처리하기 위해 원격 서버로 전송해야 하는 프라이버시 문제를 초래했습니다.
WebAssembly (WASM)
WASM는 모든 것을 바꿉니다. C++, Rust, Go와 같은 언어들의 휴대 가능한 컴파일 대상이 되도록 설계된 바이너리 명령어 형식입니다. 이를 **“웹을 위한 범용 가상 머신”**이라고 생각하면 됩니다.
- 브라우저의 JavaScript 엔진이 코드를 해석하는 대신, WASM은 사전 컴파일된 코드를 거의 네이티브 속도로 실행할 수 있게 하며, 사용자의 운영 체제나 하드웨어에 관계없이 동작합니다.
- 내부적으로 WASM은 전용 선형 메모리 공간에서 동작하여 예측 가능한 성능과 수동 메모리 관리를 제공합니다—실시간 AI 애플리케이션에 필수적입니다.
- 이는 JavaScript와 종종 연관되는 가비지 컬렉션 일시 중지를 우회하여 보다 부드러운 사용자 경험을 제공합니다.
ONNX – 표준 모델 포맷
WASM은 런타임 환경을 제공하지만, AI 모델 자체를 표현하는 표준화된 방법이 필요합니다. 모델은 보통 PyTorch, TensorFlow, JAX와 같은 다양한 프레임워크에서 학습됩니다.
**ONNX (Open Neural Network Exchange)**는 이 문제를 해결합니다. 머신러닝 모델을 표현하기 위한 개방형 포맷으로, 하나의 프레임워크에서 학습된 모델을 다른 프레임워크에서 실행할 수 있게 해주는 공통 언어 역할을 합니다.
ONNX를 AI 모델의 “PDF”라고 생각하면 됩니다. PDF가 서로 다른 운영 체제와 소프트웨어에서도 일관된 렌더링을 보장하듯이, ONNX는 서로 다른 런타임에서도 일관된 모델 실행을 보장합니다.
이러한 상호 운용성은 활기찬 AI 생태계에 필수적입니다.
Deployment Stages
The process of deploying AI models to the browser using WASM and ONNX involves three key stages:
- Export – Convert the model from its native framework (e.g., PyTorch) to the ONNX format. This creates a computational graph defining the model’s architecture and weights.
- Runtime – Load the ONNX model into a WASM runtime (like
onnxruntime-web). The runtime parses the graph and maps operations to optimized WASM implementations, potentially leveraging WebGPU for GPU acceleration. - Execution – Pass input data to the WASM runtime, which executes the graph and returns the inference results.
성능 최적화
브라우저 기반 AI의 잠재력을 진정으로 발휘하려면 성능 최적화가 필요합니다. 두 가지 핵심 기술이 중요합니다:
- Quantization – 모델 가중치의 정밀도를 낮추는 것(예: 32‑bit 부동소수점에서 8‑bit 정수로)으로 모델 크기를 줄이고 연산 속도를 높이며 정확도에 미치는 영향은 최소화됩니다.
- WebGPU Integration – WebGPU를 통해 GPU의 병렬 처리 능력을 활용하면 특히 복잡한 모델의 텐서 연산을 크게 가속화합니다. WASM은 오케스트레이터 역할을 하여 데이터 흐름을 관리하고 집약적인 작업을 GPU에 오프로드합니다.
실용 예시: SaaS 애플리케이션에서 감성 분석
실제 예시로 SaaS 웹 애플리케이션용 감성‑분석 컴포넌트를 살펴보겠습니다. 브라우저에서 직접 추론을 실행함으로써 제로‑레턴시 데이터 프라이버시를 달성할 수 있습니다 – 사용자 입력이 로컬에서 처리되어 네트워크 왕복이 사라지고 민감한 데이터가 안전하게 보호됩니다.
'use client';
import React, { useState, useTransition } from 'react';
import * as ort from 'onnxruntime-web';
// --- Configuration ---
const MODEL_URL =
'https://huggingface.co/onnx-community/distilbert-base-uncased-finetuned-sst-2-english/resolve/main/model.onnx';
// --- Main Logic ---
async function loadModel(): Promise<ort.InferenceSession> {
console.log('Loading ONNX model via WASM...');
const sessionOptions: ort.InferenceSession.SessionOptions = {
executionProviders: ['wasm'],
graphOptimizationLevel: 'all',
};
try {
const session = await ort.InferenceSession.create(MODEL_URL, sessionOptions);
console.log('Model loaded successfully.');
return session;
} catch (error) {
console.error('Failed to load model:', error);
throw new Error('Model initialization failed.');
}
}
async function runInference(
session: ort.InferenceSession,
text: string
): Promise<{ label: string; confidence: number }> {
// Simplified preprocessing (replace with a proper tokenizer in production)
const inputIds = text
.toLowerCase()
.split(' ')
.map(
(word) =>
({
hello: 1,
world: 2,
good: 3,
bad: 4,
}[word] || 0)
);
const attentionMask = inputIds.map(() => 1);
const inputTensor = new ort.Tensor(
'int64',
BigInt64Array.from(inputIds.map(BigInt)),
[1, inputIds.length]
);
const attentionMaskTensor = new ort.Tensor(
'int64',
BigInt64Array.from(attentionMask.map(BigInt)),
[1, attentionMask.length]
);
const feeds = { input_ids: inputTensor, attention_mask: attentionMaskTensor };
const results = await session.run(feeds);
const outputTensor = results[Object.keys(results)[0]] as ort.Tensor;
const logits = Array.from(outputTensor.data as Float32Array);
const expLogits = logits.map(Math.exp);
const sumExp = expLogits.reduce((a, b) => a + b, 0);
const probabilities = expLogits.map((e) => e / sumExp);
const label = probabilities[1] > probabilities[0] ? 'POSITIVE' : 'NEGATIVE';
return { label, confidence: Math.max(...probabilities) };
}
export async function analyzeSentiment(
text: string
): Promise<{ label: string; confidence: number }> {
const session = await loadModel();
return runInference(session, text);
}위 스니펫은 WASM을 통해 ONNX 모델을 로드하고, 최소한의 전처리를 수행한 뒤 추론을 실행하고 결과를 해석하는 방법을 보여줍니다.
er }> {
const session = await loadModel();
return await runInference(session, text);
}이 간소화된 예시는 핵심 원리를 보여줍니다. 실제 운영 환경에서는 자리표시자 전처리를 보다 견고한 토크나이저로 교체하고, 모델을 반복적으로 로드하는 것을 방지하기 위해 캐싱 메커니즘을 구현해야 합니다.
Conclusion
WebAssembly와 ONNX는 AI 모델 배포 방식을 혁신하고 있습니다. 계산을 사용자에게 더 가깝게 가져옴으로써 성능, 프라이버시 및 효율성의 새로운 수준을 열어줍니다. WASM 런타임이 계속 성숙해지고 WebGPU 채택이 확대됨에 따라, 브라우저 내에서 더욱 정교한 AI 애플리케이션이 원활히 실행될 수 있게 되어 웹을 강력한 분산 AI 추론 엔진으로 변모시킬 것입니다. 가능성은 사실상 무한합니다.
여기서 시연된 개념과 코드는 책 The Edge of AI에 제시된 포괄적인 로드맵을 직접 참고한 것입니다. 로컬 LLM(Ollama), Transformers.js, WebGPU, 그리고 Performance Optimization Amazon Link of the AI with JavaScript & TypeScript 시리즈.
📚 Programming Central에서 TypeScript & AI 시리즈를 지금 무료로 이용하세요 – 8권, 160개 챕터, 그리고 각 챕터마다 수백 개의 퀴즈가 포함되어 있습니다.