심층 분석: 브라우저 메모리 제한을 우회하여 7,000개 이상의 AI 모델 호환성 엔진을 구축하는 방법

로컬 하드웨어 모델의 인기가 높아짐에 따라, 적절한 LLM(Large Language Model) 구성을 선택하는 과정은 다음과 같은 어려운 마찰 문제에 시달려 왔습니다: "이 모델이 실제로 내 기기에서 로드될까, 아니면 RAM을 과도하게 점유하여 시스템을 멈추게 할까?"

이 포스트에서는 7,000개 이상의 AI 모델을 다루는 고정밀 브라우저 기반 추정기인 ModelFit을 어떻게 구축했는지 설명합니다. 우리는 비동기 **WebGPU 프로파일링 (WebGPU profiling)**을 사용하여 표준 브라우저의 장치 개인정보 보호 제한을 어떻게 우회했는지, 브라우저에서 양자화 (Quantization) 파일 크기가 어떻게 계산되는지, 그리고 매칭 코어를 구동하는 수학적 원리는 무엇인지 파헤쳐 봅니다.

핵심 기술 핵심 (The Core Technical Core)

                                  +-----------------------------+
                                  |    Browser Hardware API     |
                                  | (Navigator Global Probe)    |
...

1. 브라우저의 8GB 핑거프린팅 제한 우회

역사적으로 현대 브라우저는 개발자가 16GB, 32GB 또는 128GB의 RAM을 설치했는지 여부와 관계없이 navigator.deviceMemory를 8GB로 제한해 왔습니다. 이는 트래킹 핑거프린팅 (Fingerprinting)을 제한하기 위한 의도적인 보안 설계입니다.

이를 극복하기 위해 ModelFit은 하이브리드 장치 시그니처 분석기를 구현합니다. 우리는 먼저 동기식 브라우저 속성을 조사한 다음, 활성 하드웨어 경계를 쿼리하기 위해 비동기 **WebGPU 프로브 (WebGPU Probe)**를 시작합니다:

// GPU 경계를 비동기적으로 쿼리
const adapter = await (navigator as any).gpu.requestAdapter();
if (adapter) {
...

CPU 코어 수(navigator.hardwareConcurrency), GPU 제조업체 문자열, 그리고 명시적인 WebGPU 하드웨어 제한을 상관 분석함으로써, 우리는 서버 측 텔레메트리 (Telemetry)나 능동적인 핑거프린팅 트래킹 없이 사용자의 하드웨어를 거의 완벽하게 추측하여 재구성합니다.

2. 양자화 (Quantization) 및 파라미터 산술

모델의 실제 디스크 점유 공간과 실행 VRAM은 파라미터 크기($P$)와 가중치당 사용되는 비트 수($B$)에 크게 좌우됩니다. 로컬 가중치에 대한 기본 메모리 계산식은 다음과 같이 공식화됩니다:

$$\text{Estimated VRAM} = \frac{P \times B}{8} \times \lambda$$

여기서:

• $P$는 파라미터 수(parameter count)를 십억 단위로 나타낸 값입니다 (예: Qwen-7B의 경우 7.2B).
• $B$는 활성화된 양자화 정밀도 (quantization precision)를 나타냅 (일반적인 GGUF 설정의 경우 4-bit, 8-bit, 또는 16-bit float).
• $\lambda$는 오버헤드 승수 (overhead multiplier)입니다 (표준 KV 캐시 (KV Cache), 컨텍스트 윈도우 (Context Window) 메모리, 그리고 백엔드 프레임워크 로딩 오버헤드를 안전하게 고려하기 위해 $1.2$를 사용합니다).

다음은 저희의 브라우저 구현 방식입니다:

export function estimateModelSize(parameterSize: number, quantization: QuantizationLevel): number {
  if (!parameterSize) return 0;

...

3. 매끄러운 진행 엔진 설계 (Designing a Smooth Progress Engine)

개발자들은 즉각적인 시각적 신호를 원합니다. 저희는 각 모델 항목에 직접 내장된 깔끔한 진행 표시기 (progress indicators)를 추가했습니다. 이를 통해 사용자는 특정 모델이 자신의 RAM 중 몇 퍼센트를 소비하는지 쉽게 시각화할 수 있습니다:

{sizeGB !== null && sizeGB > 0 && (
  <div className="mt-1 max-w-[280px] space-y-1">
    <div className="flex justify-between items-center text-[10px] font-mono text-slate-400">
...

4. 실시간 최적 모델 순위 산정 (Ranking the Best Fits in Real-Time)

개발자의 마찰 (friction)을 최소화하기 위해, 저희는 **스마트 추천 카드 (Smart Recommendations Card)**를 구현했습니다. 사용자가 방대한 목록을 일일이 정렬해야 하는 대신, 저희는 오픈 모델 가중치 (open model weights)를 파싱하여 호환성 순위를 즉시 투영하고 상위 3가지 옵션을 선정합니다:

const smartRecommendations = useMemo(() => {
  const openModels = flatModels.filter(m => m.model.open_weights === true);

...

• 커스텀 양자화 평가기 (Custom Quantization Evaluator): 사용자가 자신의 양자화 깊이 (quantization depth, 예: Q4_K_M 대 Q8_K_S)를 직접 선언하여 절대적인 바이트 정밀도를 얻을 수 있도록 합니다.
• WASM 기반 속도 벤치마크 (WASM-Based Speed Benchmarks): 대규모 가중치를 실행하기 전에, 대화형 브라우저 내 계산을 활용하여 CPU 스레드 (CPU threads)를 측정하고 예상되는 초당 토큰 수 (tokens/sec)를 표시합니다.

여기에서 체험해 보세요: https://model-fit-gamma.vercel.app/

코드 및 상세 정보: https://www.dailybuild.xyz/project/154-modelfit