화면 모드

언어

English Español Français Deutsch Italiano Português 日本語 Русский 한국어 中文 (简体) 中文 (繁體) العربية Български Català Nederlands Ελληνικά हिन्दी Bahasa Indonesia Bahasa Melayu Polski Svenska ภาษาไทย Türkçe Українська Tiếng Việt

RoundCut 작동 원리

도구가 완전히 브라우저에서 실행되는 기술적 세부 사항 — 직접 확인하는 방법도 알려드립니다.

핵심 요약

RoundCut은 두 가지 브라우저 기본 API를 사용해 모든 도구를 브라우저에서 실행합니다. 픽셀 수준의 작업에는 HTML5 Canvas API를, 더 무거운 작업인 이미지 포맷 인코딩/디코딩과 AI 추론에는 WebAssembly를 사용합니다. 아무것도 업로드되지 않습니다. 서버에서는 아무것도 처리되지 않습니다. 우리는 파일에 접근하는 서버를 운영하지 않기 때문입니다.

약 30초면 직접 확인할 수 있습니다. 브라우저 DevTools를 열고 Network 탭으로 이동한 후 로그를 지우고 도구를 사용해 보세요. 보이는 네트워크 요청은 정적 사이트 에셋(HTML, CSS, JavaScript, 폰트, WebAssembly 모듈)뿐입니다. 이미지는 절대 페이지를 떠나지 않습니다.

왜 클라이언트 사이드인가

대부분의 온라인 이미지 도구는 반대로 동작합니다. 업로드하면 서버가 처리하고 결과를 다운로드하는 방식입니다. 이 모델에는 몇 가지 잘 알려진 단점이 있습니다. 파일이 다른 사람의 서버에 저장되고, 두 번의 왕복을 기다려야 하며, 운영자는 CPU 초당 비용을 지불합니다. 그래서 이런 서비스들이 계정, 워터마크, 유료 플랜을 추가하는 것입니다.

브라우저는 몇 년 전부터 이 작업의 대부분을 기본적으로 처리할 수 있게 되었습니다. <canvas> 요소가 자르기, 회전, 크기 조정, 재인코딩을 처리하고, WebAssembly를 통해 Squoosh에서 사용하는 것과 동일한 MozJPEG, libwebp, libavif, Oxipng C/Rust 라이브러리를 거의 네이티브 속도로 실행할 수 있습니다. 2026년 리빌드를 출시할 무렵, 브라우저는 사실상 데스크톱 이미지 편집 도구와 동등한 수준에 이르렀습니다. 더 이상 서버가 필요한 이유가 없었습니다.

결과적으로 세 가지 특성이 상호 강화되는 스택이 완성되었습니다. 프라이버시 (파일이 기기를 떠나지 않음), 속도 (업로드 없음, 대기열 없음, 서버 왕복 없음), 비용 (얼마나 많은 사람이 사용하든 CDN에서 정적 에셋을 월 몇 센트로 제공).

파이프라인 단계별 설명

1. 파일을 선택합니다

파일 선택기, 드래그 앤 드롭, 또는 붙여넣기로 이미지를 선택하면, 브라우저가 JavaScript에 File 객체를 전달합니다. JavaScript는 FileReader 또는 Blob.arrayBuffer() API를 사용해 바이트를 읽습니다. 이 단계에서 파일이 네트워크로 전송되는 일은 없습니다.

2. 브라우저가 이미지를 디코딩합니다

최신 브라우저는 JPG, PNG, WebP, GIF, AVIF, 그리고 (Safari와 최신 Chromium에서는) HEIC를 기본적으로 디코딩할 수 있습니다. createImageBitmap()을 사용해 메인 스레드 외부에서 원시 바이트를 GPU가 처리할 수 있는 비트맵으로 변환합니다. HEIC를 기본 디코딩하지 않는 브라우저에서는 브라우저 내에서 로컬로 실행되는 WebAssembly 디코더로 대체됩니다.

3. 도구가 작업을 수행합니다

다음으로 무슨 일이 일어나는지는 도구에 따라 다릅니다. RoundCut은 현재 세 가지 도구를 제공합니다.

  • Circle Crop — 원형 클리핑 경로를 사용한 Canvas 2D 픽셀 변환입니다. 선택한 회전과 확대/축소로 비트맵을 <canvas>에 그리고, 원형 클리핑을 적용한 후 원 내부를 ImageData로 읽어냅니다. 인터랙티브 자르기 프레임은 Cropper.js가 처리합니다.
  • Compress — jSquash WebAssembly 모듈(MozJPEG, libwebp, libavif, Oxipng)을 사용해 JPG, PNG, WebP 또는 AVIF를 재인코딩합니다. Squoosh와 동일한 업스트림 코덱입니다. 수백만 픽셀 사진 인코딩 중에도 UI가 반응하도록 Web Worker에서 실행되며, 나란히 보기 미리보기로 확정 전에 품질 차이를 확인할 수 있습니다.
  • Remove Background — 소형 ONNX 포맷 AI 모델(수 MB, 한 번 다운로드 후 캐시)이 ONNX Runtime Web을 통해 브라우저에서 실행됩니다. 실행 백엔드는 WebAssembly입니다. 첫 번째 실행에서 모델을 다운로드하고, 이후 모든 실행은 로컬에서 즉시 처리됩니다.

4. 결과를 다운로드합니다

출력 비트맵이 Blob으로 인코딩되고 object URL로 래핑되어 브라우저의 표준 파일 저장 대화상자에 제공됩니다. 지원되는 경우 File System Access API를 사용해 저장할 폴더를 직접 선택할 수 있습니다. 파일이 디스크에 나타나며, 서버를 거치는 것은 아무것도 없습니다.

직접 확인하는 방법

“업로드 없음” 주장은 2분 이내에 확인할 수 있습니다. 원하는 방법을 선택하세요.

방법 1 — Network 탭 관찰하기

  1. 새 탭에서 RoundCut을 엽니다.
  2. DevTools를 열고(F12 또는 우클릭 → 검사) Network 탭으로 이동합니다.
  3. Network 탭의 “지우기” 버튼을 클릭해 처음부터 시작합니다.
  4. 도구를 사용합니다. 이미지를 업로드하고, 편집하고, 결과를 다운로드합니다.
  5. Network 로그를 확인합니다. HTML, CSS, JS, 폰트, (무거운 도구 첫 사용 시) 해당 WebAssembly 모듈에 대한 요청이 보일 것입니다. 이미지 바이트를 포함한 요청은 없을 것입니다.

“Initiator” 열은 각 요청을 시작한 스크립트를, “Type” 열은 전송된 내용을 알려줍니다. “Fetch/XHR”로 필터링하면 데이터 요청에 집중할 수 있습니다. 모두 작고, 모두 정적 오리진을 향하며, 파일을 포함한 것은 하나도 없습니다.

방법 2 — 오프라인에서 도구 사용하기

  1. 아무 RoundCut 도구 페이지나 불러옵니다. 한 번 사용해서 관련 WebAssembly 모듈이 캐시되게 합니다.
  2. DevTools를 열고 Network 탭에서 오프라인 체크박스를 선택합니다(또는 Wi-Fi를 끕니다).
  3. 페이지를 새로 고침합니다. 브라우저가 정적 에셋을 캐시했으므로 여전히 로드됩니다.
  4. 도구를 처음부터 끝까지 다시 사용합니다. 여전히 작동합니다.

오프라인에서 도구가 작동했다면, 작업 중에 서버에 접촉하지 않았다는 것이 정의상 분명합니다. 이것이 가장 강력한 증거입니다. 다른 어떤 기기에도 연결할 수 없는 상황에서 작업이 내 기기에서 이루어진 것입니다.

우리가 보는 것

수집되는 것을 명확히 하겠습니다. 페이지를 로드하면 분석 제공업체 (Cloudflare Web Analytics)가 어떤 브라우저가 어느 나라에서 그 URL을 로드했다고 기록합니다. 쿠키 없음, 영구 식별자 없음, 특정 인물과 연결된 정보 없음.

첫 번째 사용 시 WebAssembly 모듈을 다운로드하는 도구(jSquash 코덱, ONNX 배경 제거 모델)의 경우, 호스팅 제공업체는 누군가가 해당 모듈을 가져갔다는 것을 파악합니다. CSS 파일을 가져간 것처럼요. 모듈 자체에는 이미지에 관한 정보가 전혀 포함되어 있지 않습니다.

전체 데이터 목록은 개인정보처리방침에 있습니다.

기술 스택

궁금한 분들을 위해 RoundCut의 기반 기술을 소개합니다.

  • Astro — 정적 사이트 생성기. 모든 페이지는 순수 HTML로 제공되며, 인터랙티브 도구가 있는 곳에만 점진적으로 향상된 JavaScript “islands”가 사용됩니다.
  • 바닐라 CSS와 커스텀 프로퍼티 — Tailwind, CSS-in-JS 없음. 전체 디자인 시스템이 단 하나의 tokens.css 파일에 담겨 있습니다.
  • jSquash — 이미지 인코딩을 위한 MozJPEG, libwebp, libavif, Oxipng WebAssembly 바인딩.
  • Cropper.js — 자르기 도구용 자르기 사각형 인터랙션 레이어.
  • ONNX Runtime Web — WebAssembly를 통해 브라우저에서 배경 제거 모델을 실행합니다.
  • Cloudflare Pages — 정적 빌드를 호스팅하고 엣지에서 제공하며, DNS와 DDoS 보호를 제공합니다.
  • Cloudflare Web Analytics — 집계된 쿠키 없는 페이지뷰 카운트.

브라우저 지원

모든 도구는 Chrome, Firefox, Safari, Edge의 현재 버전과 이전 버전에서 데스크톱과 모바일 모두 작동합니다. 사이트는 점진적 향상(Progressive Enhancement)을 사용합니다. 브라우저가 최신 API(showSaveFilePicker, OffscreenCanvas 등)를 지원하면 사용하고, 지원하지 않으면 이전 방식으로 대체됩니다. “지원되지 않는 브라우저” 장벽은 없습니다.

유일한 필수 요건은 JavaScript입니다. JavaScript가 비활성화되면 도구를 실행할 수 없습니다. 이미지 작업을 처리하는 서버 자체가 없으므로 서버 측 대체 수단도 없습니다.

문의

다루지 않은 내용이 있나요? support@araluma.com으로 이메일 주세요. 기술적인 질문도 환영합니다.