프론트엔드 개발자님, 3년 뒤에도 'API 연동'만 하실 건가요?

솔직히 말해서, 우리끼리 술 한잔하면서 이야기해봅시다. '자바스크립트로 머신러닝을 한다'는 소리를 들으면 무슨 생각이 드나요? 아마 십중팔구는 "그걸 왜 웹에서 해? 파이썬 놔두고 변태인가?"라거나 "속도 느려서 못 써먹어"라고 비웃었을 겁니다. 저도 한때는 그랬습니다. 청주에서 웹 에이전시 다닐 때 제이쿼리 범벅된 코드를 보며, 브라우저는 그저 돔(DOM)이나 조작하는 녀석이라고 생각했으니까요.

그런데 최근 Jax-JS라는 물건이 나왔습니다. 이걸 보고도 "아직 멀었네"라고 생각한다면, 당신은 이미 도태되고 있는 중일지도 모릅니다.

오늘은 Google DeepMind의 JAX를 자바스크립트로, 그것도 WebGPU를 태워서 구현해버린 미친 프로젝트 이야기를 좀 해보려 합니다.

Jax-JS가 던지는 충격

이 라이브러리는 간단히 말해 '웹 브라우저에서 돌아가는 JAX'입니다. 의존성(Dependency) 제로, 순수 자바스크립트로 짜였습니다. 중요한 건 이게 단순한 장난감(Toy Project) 수준이 아니라는 겁니다.

핵심은 WebGPU와 WebAssembly입니다.
자바스크립트가 느린 건 맞습니다. JIT 컴파일러가 아무리 좋아도 수치 연산 루프를 돌리기엔 태생적인 한계가 있죠. 그런데 Jax-JS는 영리하게도 자바스크립트 인터프리터를 건너뜁니다.

파이썬의 JAX처럼 프로그램을 추적(Trace)합니다.
이걸 GPU 커널(Shader)이나 WebAssembly로 컴파일해버립니다.
브라우저가 GPU에 직접 명령을 내려서 네이티브에 가까운 속도를 뽑아냅니다.

쉽게 말해, 자바스크립트는 거들 뿐, 실제 연산은 당신의 그래픽 카드가 미친 듯이 처리한다는 소리입니다.

코드는 좀 '더럽게' 생겼습니다

제가 항상 주니어들한테 하는 말이 있습니다. "우아한 코드 찾다가 밤새지 말고, 돌아가는 코드를 짜라." Jax-JS가 딱 그 철학을 보여줍니다. 자바스크립트는 파이썬처럼 연산자 오버로딩이 안 되니까 문법이 좀 투박합니다.

import { numpy as np } from "@jax-js/jax";

// 파이썬의 ar * 10 대신 이렇게 씁니다.
const ar = np.array([1, 5, 6, 7]);
console.log(ar.mul(10).js()); // -> [10, 50, 60, 70]

보시다시피 `ar * 10`이 아니라 `ar.mul(10)`입니다. 그리고 `.js()`를 호출해야 우리가 아는 자바스크립트 배열로 돌아옵니다. 게다가 메모리 관리도 수동에 가깝습니다. 자바스크립트에는 가비지 컬렉터(GC)가 있지만, 성능을 위해 Rust처럼 이동(Move) 시멘틱을 차용했습니다. `.ref`로 참조 카운트를 직접 관리해야 할 때도 있죠.

이게 불편해 보이나요? 저는 오히려 '생존 본능'이 느껴져서 좋습니다. 언어의 한계를 탓하는 게 아니라, 문법적 편의를 포기하더라도 성능이라는 실리를 챙긴 겁니다.

진짜로 쓸 만한가? (성능 검증)

개발자(Eric)가 M1 Pro 맥북에서 테스트한 결과가 충격적입니다.

속도: 텍스트 임베딩 모델(CLIP)을 돌리는데 약 500 GFLOP/s가 나옵니다.
처리량: 초당 5,000억 회의 계산을 4년 된 노트북 브라우저에서 처리합니다.
실사례: 18만 단어 분량의 소설 텍스트를 다운로드해서, 브라우저에서 실시간 의미 기반 검색(Semantic Search)을 돌려버립니다. 서버 통신 없이요.

심지어 MNIST 데이터셋으로 신경망을 처음부터 학습시키는 데 몇 초면 끝납니다. 핫 모듈 리로딩(HMR) 켜놓고 모델 학습시키면서 코드를 수정하는 경험? 이건 파이썬 개발자들도 못 해본 경험일 겁니다.

WebGPU, 이제는 선택이 아닙니다

많은 개발자가 "AI는 백엔드 개발자나 데이터 사이언티스트의 영역"이라고 선을 긋습니다. 그리고 프론트엔드에서는 이미 만들어진 API나 갖다 쓰면서 만족하죠. 하지만 Jax-JS 같은 도구들이 시사하는 바는 명확합니다.

클라이언트(브라우저)가 강력한 연산 장치가 되고 있습니다.
서버 비용 줄이려고 혈안이 된 비즈니스 오너들 입장에서 생각해보세요. 서버에서 비싼 GPU 돌리는 대신, 사용자 기기의 GPU를 써서 AI를 돌릴 수 있다면? 이건 엄청난 비즈니스 기회입니다.

// WebGPU 백엔드 활성화 코드
import { init, setDevice } from "@jax-js/jax";
await init("webgpu");
setDevice("webgpu");

단 세 줄이면 당신의 웹앱이 GPU를 갈구기 시작합니다. `grad()`로 자동 미분도 되고, `jit()`로 컴파일 최적화도 됩니다. 텐서플로우(TensorFlow.js)나 ONNX Runtime도 있지만, Jax-JS처럼 의존성 없이 가볍게 치고 들어오는 라이브러리의 등장은 판도를 바꿀 수 있습니다.

마치며

SI 현장에서 구를 때 뼈저리게 느낀 게 하나 있습니다. 기술은 기다려주지 않는다는 겁니다. "자바스크립트는 원래 느려"라는 패배주의에 젖어 있을 때, 누군가는 이렇게 한계를 뚫어버립니다.

지금 당장 Jax-JS로 상용 서비스를 만들라는 게 아닙니다. 하지만 최소한 "웹에서 ML은 안 돼"라는 고정관념은 쓰레기통에 처박아야 합니다. 3년 뒤, 백엔드 API만 기다리는 개발자와 브라우저 자원을 100% 활용해 클라이언트 사이드 AI를 구현하는 개발자. 연봉 테이블이 어디서 갈릴지는 뻔하지 않습니까?

이번 주말에는 넷플릭스 끄고 WebGPU 튜토리얼이라도 한 번 훑어보시죠. 형이 진심으로 걱정돼서 하는 말입니다.