들어가며 — 설치 없이, 서버 없이, 데이터 유출 없이

지난 몇 주 동안 이 사이트에 브라우저 도구를 대거 추가했습니다. 파이썬 인터프리터, PostgreSQL 데이터베이스, 동영상 변환기, 심지어 x86 PC 에뮬레이터까지. 공통점이 하나 있습니다. 이들은 흉내가 아니라 진짜입니다. 파이썬 놀이터는 CPython을 실제로 실행하고, SQL 놀이터는 진짜 SQLite를 돌립니다. 그리고 이 모든 것이 백엔드 없이, 여러분의 브라우저 탭 안에서 일어납니다.

이걸 가능하게 한 기술이 WebAssembly(줄여서 WASM)입니다. 이 글은 마케팅 문구가 아니라, WASM이 실제로 무엇을 해결했고 무엇은 아직 못 하는지, 그리고 그 위에 만든 도구들을 어떻게 쓰면 되는지를 다룹니다.

WebAssembly가 왜 판을 바꿨나

WebAssembly는 브라우저에서 돌아가는 저수준 바이트코드 형식입니다. 자바스크립트를 대체하려는 것이 아니라, 자바스크립트가 잘 못하던 일을 맡습니다. 핵심 이점은 네 가지입니다.

- **근접 네이티브 속도**: WASM은 사전 컴파일된 바이너리 형식이라 파싱이 빠르고, JIT/AOT로 기계어에 가깝게 실행됩니다. C, C++, Rust로 짠 무거운 엔진도 실용적인 속도로 돕니다.

- **언어 이식성**: LLVM이나 전용 툴체인으로 컴파일할 수 있는 언어라면 대부분 WASM으로 옮길 수 있습니다. CPython, CRuby, SQLite, ffmpeg 같은 기존 C/Rust 코드베이스를 거의 그대로 브라우저로 가져옵니다.

- **샌드박스 격리**: WASM 모듈은 기본적으로 메모리와 시스템 접근이 막힌 샌드박스에서 실행됩니다. 호스트(자바스크립트)가 명시적으로 넘겨준 기능만 쓸 수 있어, 신뢰할 수 없는 코드를 돌리기에 안전합니다.

- **서버 불필요 + 프라이버시**: 연산이 전부 클라이언트에서 일어나므로 서버가 필요 없습니다. 그 결과 입력 데이터가 브라우저 밖으로 나가지 않습니다. 사진, 코드, 문서를 업로드하지 않아도 됩니다.

특히 마지막 항목이 실무적으로 큽니다. 아이폰 HEIC 사진을 변환하거나 회사 로그를 SQL로 뜯어볼 때, 그 데이터가 어느 서버에도 전송되지 않는다는 것은 단순한 편의가 아니라 보안 요건입니다.

WASM 모듈은 어떻게 로드되나

브라우저가 WASM 도구를 실행하는 과정은 대략 이렇습니다.

1. 페이지 로드

|

v

2. .wasm 바이너리 내려받기 (CDN 또는 자체 호스팅)

|

v

3. WebAssembly.instantiate() 로 컴파일 + 인스턴스화

|

v

4. 자바스크립트가 호스트 함수(파일·콘솔 등)를 주입

|

v

5. 엔진 실행 — 이후 연산은 전부 로컬

`.wasm` 파일은 CDN에서 받거나 사이트가 직접 호스팅합니다. 파이썬 같은 큰 런타임은 수 MB에서 수십 MB에 이르기 때문에, 첫 로드에는 시간이 걸립니다. 대신 브라우저가 이 파일을 캐시하므로 두 번째부터는 훨씬 빠릅니다. 이것이 "처음 한 번만 느리고 그다음은 즉각"인 이유입니다.

한 가지 주의할 점은 격리 요구사항입니다. 스레드나 공유 메모리(SharedArrayBuffer)를 쓰는 무거운 WASM 도구는 브라우저의 교차 출처 격리(COOP/COEP) 헤더를 요구할 수 있습니다. ffmpeg의 멀티스레드 빌드가 대표적입니다. 사이트가 이런 헤더를 올바로 설정해야 해당 기능이 켜집니다.

언어 플레이그라운드 — 진짜 인터프리터가 돈다

가장 직관적인 활용은 프로그래밍 언어를 통째로 브라우저에 넣는 것입니다. 이들은 문법 하이라이팅만 하는 에디터가 아니라, 실제 인터프리터를 실행합니다.

- [파이썬 놀이터](/tools/python-playground)는 Pyodide로 컴파일된 진짜 CPython 3.14를 실행합니다. `print` 출력이 그대로 잡히고, 필요하면 numpy도 설치됩니다.

- [Ruby 놀이터](/tools/ruby-playground)는 ruby.wasm으로 CRuby 3.4를 돌립니다. 블록, 클래스, 패턴 매칭까지 실제 루비 시맨틱 그대로입니다.

- [PHP 놀이터](/tools/php-playground)는 WordPress Playground의 WASM 엔진으로 PHP 8.3을 실행합니다.

- [Lua 놀이터](/tools/lua-playground)는 wasmoon으로 Lua 5.4를 돌립니다. 테이블, 메타테이블, 코루틴까지 됩니다.

간단한 예로, 파이썬 놀이터에 이런 코드를 넣으면 서버 왕복 없이 즉시 결과가 나옵니다.

def fib(n):

a, b = 0, 1

for _ in range(n):

a, b = b, a + b

return a

print([fib(i) for i in range(10)])

[0, 1, 1, 2, 3, 5, 8, 13, 21, 34]

핵심은 이 결과가 "미리 저장된 정답"이 아니라는 것입니다. 코드를 바꾸면 진짜 인터프리터가 다시 실행합니다.

데이터베이스와 데이터 도구 — SQL을 브라우저에서

데이터 계열 도구는 WASM의 진가가 특히 잘 드러납니다. 실제 데이터베이스 엔진이 탭 안에서 돌기 때문입니다.

- [SQL 놀이터](/tools/sql-playground)는 진짜 SQLite를 WASM으로 실행합니다. 샘플 DB에 JOIN, GROUP BY, 윈도우 함수를 연습하고 결과를 CSV로 내보낼 수 있습니다.

- [PostgreSQL 놀이터](/tools/postgres-playground)는 PGlite로 진짜 PostgreSQL 18을 돌립니다. JSONB, 전문검색, 재귀 CTE, `EXPLAIN ANALYZE`까지 실제 Postgres 문법 그대로 동작하고, IndexedDB에 데이터를 저장할 수도 있습니다.

- [DuckDB 데이터 분석 놀이터](/tools/duckdb-playground)는 DuckDB-Wasm으로 CSV, JSON, Parquet를 SQL로 분석합니다. `SUMMARIZE`, `PIVOT` 같은 분석 특화 문법을 쓸 수 있습니다.

- [jq 놀이터](/tools/jq-playground)는 JSON을 jq 필터로 실시간 가공합니다.

예를 들어 Postgres 놀이터에서는 이런 재귀 CTE가 실제로 실행됩니다.

WITH RECURSIVE counter(n) AS (

SELECT 1

UNION ALL

SELECT n + 1 FROM counter WHERE n < 5

)

SELECT n, n * n AS square FROM counter;

데이터가 브라우저를 떠나지 않으므로, 민감한 CSV를 붙여넣고 분석해도 안전합니다. 이것은 온라인 SQL 도구 대부분이 제공하지 못하는 성질입니다.

빌드·컴파일 도구 — 툴체인이 브라우저 안에

빌드 도구야말로 원래 네이티브 성능이 절실한 영역인데, WASM 덕분에 이것들도 브라우저로 들어왔습니다.

- [SWC 플레이그라운드](/tools/swc-playground)는 Rust로 만든 초고속 컴파일러 SWC를 실행해 TypeScript/JSX를 트랜스파일하고 AST까지 보여줍니다.

- [esbuild 플레이그라운드](/tools/esbuild-playground)는 esbuild-wasm으로 트랜스폼과 번들을 수행합니다.

- [Sass/SCSS 컴파일러](/tools/sass-playground)는 dart-sass로 SCSS를 CSS로 컴파일합니다.

- [Graphviz 렌더러](/tools/graphviz-renderer)는 DOT 언어를 SVG 다이어그램으로 그립니다.

- [Typst 플레이그라운드](/tools/typst-playground)는 Rust로 짠 Typst 조판 엔진을 실행해 LaTeX 대안 문서를 PDF로 뽑습니다.

- [WebAssembly 스튜디오](/tools/wasm-studio)는 wabt로 WAT(WebAssembly 텍스트)를 바이너리로 컴파일하고, 헥사덤프와 역어셈블을 보여주며 실제로 실행까지 합니다. WASM으로 WASM을 배우는 셈입니다.

이들의 공통점은 "설치 지옥"이 없다는 것입니다. node_modules도, 로컬 툴체인도 필요 없이 링크만 열면 바로 컴파일러가 돕니다.

미디어와 이미지 — ffmpeg와 ImageMagick이 통째로

미디어 처리는 전통적으로 무거운 네이티브 라이브러리의 영역이었습니다. 그것들도 이제 브라우저에서 돕니다.

- [동영상 변환기](/tools/video-converter)는 ffmpeg.wasm으로 동영상을 GIF로 만들고, 오디오를 추출하고, 트림·리사이즈·배속을 처리합니다. 파일 업로드가 없습니다.

- [만능 이미지 변환기](/tools/magick-converter)는 진짜 ImageMagick 엔진(WASM)으로 아이폰 HEIC, TIFF, PSD 등 270여 개 포맷을 읽어 JPG, PNG, WebP, AVIF로 변환합니다.

- [OCR 텍스트 추출기](/tools/ocr-extractor)는 Tesseract WASM으로 이미지 속 한국어·영어·일본어 글자를 추출합니다.

- [ASCII 아트 변환기](/tools/ascii-art-converter)는 사진을 문자 그림으로 바꿉니다.

동영상 변환은 WASM의 한계와 강점을 동시에 보여주는 좋은 예입니다. 네이티브 ffmpeg보다는 느리지만, 짧은 클립을 GIF로 만드는 정도는 충분히 실용적이고, 무엇보다 영상 파일이 서버로 올라가지 않습니다.

그 밖의 도구 — AI, 에뮬레이터, 시뮬레이터

WASM의 응용은 언어와 미디어를 넘어섭니다.

- [브라우저 AI 실험실](/tools/browser-ai-lab)은 Transformers.js(ONNX 런타임)로 감정 분석, 임베딩 유사도, 한↔영 번역, 제로샷 분류, 요약을 서버 없이 실행합니다. WebGPU가 있으면 GPU 가속까지 씁니다. 입력 텍스트는 어디에도 전송되지 않습니다.

- [브라우저 PC 에뮬레이터](/tools/linux-emulator)는 v86으로 진짜 x86 PC를 부팅합니다. FreeDOS를 클릭 한 번에 띄우거나 자기 `.img`/`.iso` 이미지를 부팅할 수 있습니다.

- [Git 실습장](/tools/git-playground)과 [웹 터미널](/tools/web-terminal), [리눅스 터미널](/tools/linux-terminal)은 명령어 실습 환경을 시뮬레이션합니다.

- [eBPF 놀이터](/tools/ebpf-playground)는 eBPF 명령어 세트와 커널 검증기를 시뮬레이션합니다. (실제 커널 훅이 아니라 개념 학습용입니다.)

- [암호 & 해시 실험실](/tools/crypto-lab)과 [암호학 스터디](/tools/cipher-lab)는 Argon2, SHA/HMAC, AES-GCM, RSA/ECDSA와 고전 암호·암호해독을 클라이언트에서 실습합니다.

이 목록에서 두 가지 결이 보입니다. 하나는 진짜 엔진(AI 모델, x86 CPU, 암호 라이브러리)을 WASM으로 가져온 것이고, 다른 하나는 개념을 시각화하는 시뮬레이터(git 그래프, eBPF 검증기)입니다. 후자는 실제 시스템을 실행하지는 않지만, 눈으로 원리를 익히는 데 최적화되어 있습니다.

현실적인 한계 — WASM이 못 하는 것

WASM은 강력하지만 만능은 아닙니다. 도구를 쓰기 전에 알아 둘 한계가 있습니다.

- **첫 로드 크기**: 파이썬이나 Postgres 같은 큰 런타임은 다운로드가 수 MB에서 수십 MB입니다. 캐시가 도와주지만 첫 방문은 느립니다.

- **네이티브보다 느림**: 근접 네이티브지 네이티브 자체는 아닙니다. 무거운 동영상 인코딩이나 대용량 데이터 처리는 네이티브 도구보다 느립니다.

- **직접적인 시스템 접근 불가**: 샌드박스라서 임의의 파일 시스템, 네트워크 소켓, GPU에 마음대로 접근할 수 없습니다. 브라우저가 허용한 API(File System Access, WebGPU 등)만 씁니다. 그래서 진짜 리눅스 커널을 부팅하는 v86 같은 도구도 실제로는 에뮬레이션된 하드웨어 위에서 돕니다.

- **메모리 상한**: 기본 WASM은 32비트 주소 공간이라 메모리에 한계가 있습니다(메모리64 제안이 이를 완화 중). 초대용량 데이터셋은 부담스럽습니다.

- **멀티스레드는 조건부**: 스레드를 쓰려면 앞서 말한 격리 헤더가 필요하고, 모든 환경에서 켜지는 것은 아닙니다.

정리하면, WASM은 "적당히 무거운 작업을 서버 없이 프라이버시를 지키며" 하는 데 최적입니다. 초대용량·초고성능 작업은 여전히 서버나 네이티브가 낫습니다.

마치며

WebAssembly가 만든 변화의 본질은 "무거운 도구를 아무 설치 없이, 아무 데이터 유출 없이 브라우저에서 쓰는 것"입니다. 진짜 CPython, 진짜 PostgreSQL, 진짜 ffmpeg가 여러분의 탭 안에서 돌고, 그 과정에서 코드도 데이터도 밖으로 나가지 않습니다.

한계는 분명합니다. 첫 로드는 느리고, 초고성능 작업에는 부적합합니다. 하지만 배우고, 실험하고, 민감한 데이터를 다루는 대부분의 일상 작업에는 충분합니다. 위에 링크한 도구들을 하나씩 열어 보세요. 서버 없이 이만큼 된다는 사실이 꽤 놀라울 겁니다.

참고 자료

- WebAssembly 공식 사이트: https://webassembly.org/

- MDN WebAssembly 가이드: https://developer.mozilla.org/en-US/docs/WebAssembly

- Pyodide: https://pyodide.org/

- PGlite: https://pglite.dev/

- DuckDB-Wasm: https://duckdb.org/docs/api/wasm/overview

- Transformers.js: https://huggingface.co/docs/transformers.js

- ffmpeg.wasm: https://ffmpegwasm.netlify.app/