추가 비용 없이 작동하는 아키텍처: 브라우저에서 전부 돌아가는 자산 관리 플랫폼을 만든 이유

WebLLM 은 ONNX/MLC 포맷의 모델을 브라우저 WebGPU 로 실행한다. 서버 호출이 없고 키 노출 문제도 없다.

import * as webllm from '@mlc-ai/web-llm';
const engine = await webllm.CreateMLCEngine('Llama-3.2-1B-Instruct-q4f32_1');
const reply = await engine.chat.completions.create({
  messages: [{ role: 'user', content: '이 포트폴리오 리스크 분석해줘' }],
});

대가: 첫 로드 400~700MB, 저사양 기기는 느림. 해법: 첫 방문 시 다운로드 진행 UI, 모델 로컬 캐시 활용.

Yjs 는 CRDT 라이브러리로 순서 독립한 병합 을 보장한다. 로컬은 y-indexeddb 로 저장, 멀티기기 동기는 y-webrtc(피어간) 또는 y-websocket(공공 relay).

import * as Y from 'yjs';
import { IndexeddbPersistence } from 'y-indexeddb';
const doc = new Y.Doc();
new IndexeddbPersistence('portfolio', doc);
const items = doc.getArray('assets');
items.push([{ ticker: 'AAPL', qty: 10 }]);
// 다음 로드 시 자동 복원

서버 DB 스키마/마이그레이션/백업 전부 사라진다. 대가: '내 기기 고장 나면 끝' — UX 로 '클라우드 백업은 옵션' 을 제공.

10,000개 포트폴리오 경로를 매 프레임 그릴 때 <mesh> 를 개별 생성하면 드로우콜 폭발. InstancedMesh 는 동일 기하를 행렬 버퍼 로 한 번에 그려 GPU 가 병렬 처리.

<instancedMesh args={[geom, mat, 10000]}>
  {paths.map((p, i) => setMatrix(i, p))}
</instancedMesh>

몬테카를로 시뮬레이션을 백엔드 배치 가 아닌 브라우저 GPU 로 이동 — 비용 0, 응답 즉시. 제약: WebGPU 지원 브라우저 필요.

[좋은 답변] (1) 사용자 증가 = 비용 증가 무관(수익성 수렴), (2) 프라이버시 차별화 — 규제 산업 진입 용이, (3) 오프라인 동작 — 항공/격오지 시장 포섭. 단 DAU 가 아무리 늘어도 서버 비용 0 이 CAC 회수 기간을 극단적으로 단축.

[좋은 답변] (1) 옵트인 클라우드 백업(E2E 암호화), (2) 멀티기기 peer sync — 최소 2기기 권장, (3) 정기 .json export 안내, (4) CRDT snapshot 을 사용자 제공 스토리지(Dropbox/GDrive) 에 저장. 기본은 로컬, 백업은 선택.

[좋은 답변] (1) 첫 방문엔 서버 LLM fallback, 백그라운드로 다운로드, (2) 더 작은 모델(Phi-3 mini 0.5B) 로 시작, 필요시 업그레이드, (3) Service Worker 로 청크 단위 캐시 + 재시도, (4) WebGPU 미지원 브라우저 감지해 텍스트 UX 로 대체.