십 년 전만 해도 웹사이트에서 이미지를 편집한다는 것은 그것을 업로드하고, 서버가 작업하기를 기다리고, 결과를 내려받는 것이었습니다. 오늘날 브라우저는 서버에 한 번도 접속하지 않고 30 MB 사진을 압축하거나, PNG를 WebP로 변환하거나, 이미지 묶음의 크기를 조정할 수 있습니다. 두 가지 기술이 그 전환을 가능하게 했습니다. Canvas 와 WebAssembly 입니다. 각각이 무엇을 하는지 보고 나면 둘 다 신비롭지 않습니다.
Canvas: 픽셀 단위 접근이 가능한 그리기 표면
모든 현대 브라우저는 Canvas API 를 탑재합니다 — JavaScript로 그릴 수 있는 빈 사각형이죠. 이미지 도구를 위한 그 진짜 힘은 도형을 그리는 게 아니라, Canvas가 코드에 이미지의 개별 픽셀에 대한 직접 접근을 준다는 것입니다.
사진을 캔버스에 불러오면, 브라우저가 여러분 코드에 숫자 배열을 건넵니다. 모든 픽셀의 빨강, 초록, 파랑, 알파(투명도) 값이죠. 거기서부터 일반적인 작업이 간단해집니다.
- 크기 조정 은 그 픽셀 격자를 더 작거나 큰 격자로 샘플링하는 것입니다.
- 자르기 는 직사각형 영역을 새 캔버스로 복사하는 것입니다.
- 회전과 뒤집기 는 그리기 전에 적용되는 기하 변환입니다.
- 형식 변환 은 캔버스를 내보낼 때 일어납니다 — JPEG, PNG, WebP를 요청하면 브라우저가 픽셀을 그에 맞게 인코딩합니다.
이 모든 것이 여러분 기기에서, 여러분 CPU와 가능한 경우 GPU를 써서 실행됩니다. 픽셀이 페이지를 떠나지 않으므로 아무것도 업로드되지 않습니다. 그래서 이미지 변환기가 PNG를 넣는 즉시 WebP로 바꿀 수 있습니다 — 기다릴 왕복이 없으니까요.
WebAssembly: 브라우저 안에서 거의 네이티브 속도
Canvas는 흔한 변환을 처리하지만, 어떤 작업은 진지한 연산 근력이 필요합니다 — 고품질 JPEG 인코딩, PNG 최적화, 배경을 오려내는 AI 모델 실행. JavaScript만으로는 이런 것에 너무 느릴 수 있습니다. 거기서 WebAssembly(흔히 Wasm으로 줄임)가 등장합니다.
WebAssembly는 브라우저가 네이티브에 가까운 속도로 실행할 수 있는 작고 저수준인 형식입니다. 개발자는 C, C++, Rust 같은 언어로 쓰인 빠르고 검증된 코드 — 데스크톱 이미지 소프트웨어를 구동하는 것과 같은 라이브러리 — 를 가져다 Wasm으로 컴파일합니다. 그러면 브라우저가 그 코드를 촘촘한 샌드박스 환경에서, 동등한 JavaScript보다 훨씬 빠르게 실행합니다.
실제로 이는 이제 브라우저 탭이 예전에 서버나 데스크톱 앱이 필요했던 일을 할 수 있다는 뜻입니다. 프로급 압축으로 이미지 인코딩, 메타데이터 제거, 배경 제거를 위한 신경망 실행 — 모두 로컬에서요.
로컬 처리가 비공개이면서 빠른 이유
Canvas와 WebAssembly를 합치면 이점이 자연스럽게 따라 나옵니다.
프라이버시 는 약속이 아니라 구조입니다. 픽셀이 페이지에 머물고 처리가 여러분 CPU에서 돌기 때문에 업로드 단계가 없습니다. 저장하거나, 로그로 남기거나, 캐시하거나, 학습할 여러분 파일의 서버 사본이 없습니다 — 파일이 애초에 전송된 적이 없으니까요. 개인정보 처리방침을 믿을 필요가 없습니다. 비행기 모드를 켜고 도구가 계속 작동하는 것을 지켜봄으로써 검증할 수 있습니다.
속도 는 네트워크를 통째로 잘라내는 데서 옵니다. 서버 도구의 가장 느린 단계는 대개 여러분 파일을 위로 올렸다 다시 내리는 것입니다. 그것을 없애면 40 MB 사진이 40 KB 사진만큼 빠르게 처리됩니다. 대기열도 없습니다 — 여러분 기기가 다른 수천 명의 것이 아니라 여러분 이미지 하나에만 작업합니다.
대부분의 사람이 예상 못 하는 보너스가 있습니다. 도구 전체가 그저 코드와 자산이므로 브라우저가 그것을 캐시할 수 있습니다. IMG.DIY는 서비스 워커를 갖춘 PWA라, 첫 방문 이후 도구가 여러분 기기에 저장되어 오프라인 에서 계속 작동합니다 — 비행기 모드에서, 비행기에서, 어디서든요. 압축과 변환은 연결이 전혀 필요 없습니다.
득실, 정직하게
브라우저 내 처리는 마법이 아니고 한계도 없지 않습니다. 아주 큰 묶음은 저사양 폰의 메모리를 압박할 수 있습니다. 작업이 데이터센터 대신 여러분 기기의 자원을 쓰기 때문이죠. 그리고 몇몇 기능은 정말로 네트워크가 필요합니다 — 페이지 속도 점검처럼 외부 서비스를 호출하는 것은 오프라인에서 돌 수 없습니다. 배경 제거는 중간 경우입니다. 로컬에서 돌지만, 모델 파일을 일회성으로 다운로드한 뒤에만요.
하지만 일상적인 작업 — 압축, 변환, 크기 조정, 자르기, 회전 — 에는 이제 브라우저가 마침 탭 안에 사는 완전하고 비공개이며 빠른 이미지 작업실입니다. 업로드도, 서버도, 대기도 없이.