Araluma 작동 원리

핵심 요약

Araluma은 하이브리드 아키텍처를 사용합니다. 두 가지 도구는 업로드 없이 완전히 브라우저에서 실행되며, 나머지 두 도구는 브라우저가 동등한 품질을 제공할 수 없는 경우에 한해 단 한 번의 네트워크 요청을 자체 인프라로 전송합니다. 이 페이지와 각 도구에서 어떤 경로를 사용하는지 항상 안내합니다.

도구	처리 위치
Circle Crop	100% 브라우저 내, Canvas API. 업로드 없음, 오프라인 작동.
Compress 미리보기 (슬라이더 + 포맷 비교)	100% 브라우저 내, canvas.toBlob. 업로드 없음.
Compress 최종 다운로드	api.araluma.com(독일 VPS의 Fastify + sharp + libvips)로 단 한 번의 왕복.
Remove Background	Cloudflare의 엣지 GPU에서 BiRefNet을 실행하는 Cloudflare Worker로 단 한 번의 왕복. 클라우드에 연결할 수 없는 경우 브라우저 내 WebAssembly 폴백으로 전환.

약 30초면 직접 확인할 수 있습니다. DevTools → Network를 열고 로그를 지운 뒤 Circle Crop이나 Compress 미리보기 슬라이더를 사용해 보세요. 이미지 바이트를 포함한 요청이 페이지를 떠나지 않는 것을 확인할 수 있습니다. 서버를 사용하는 두 도구에서는 위에 명시된 엔드포인트로 작업당 정확히 한 번의 업로드가 발생합니다.

하이브리드를 선택한 이유

대부분의 온라인 이미지 도구는 두 가지 극단 중 하나입니다. 모든 것을 서버에 업로드하는 방식(왕복 대기 시간이 발생하고 운영자가 파일을 보관)이거나, 전부 브라우저에서 처리하는 방식(인코딩·AI 단계에서 품질과 속도를 희생)입니다. 어느 쪽도 모든 상황에서 최선은 아닙니다.

저희는 브라우저가 이미 뛰어난 영역에서는 클라이언트 사이드를 선택했습니다. <canvas> 요소는 자르기, 회전, JPG/WebP 손실 미리보기 인코딩을 훌륭하게 처리합니다. 그리고 브라우저가 측정 가능하게 뒤처지는 영역에서는 서버 사이드를 선택했습니다.

• 이미지 압축, 최종 다운로드 단계. 서버 사이드 sharp + libvips 8.17은 동일한 시각적 품질에서 브라우저 인코더보다 바이트 단위로 10~15% 작은 파일을 생성하며, 브라우저가 제공하지 않는 AVIF 속도·크로마 튜닝과 JPEG XL 출력도 지원합니다. 슬라이더/미리보기는 브라우저에서 즉시 실행되므로 반복 작업이 빠릅니다. “다운로드” 버튼을 누를 때만 서비스를 거칩니다.
• AI 배경 제거, 기본 경로. Cloudflare의 cf.image.segment가 실행하는 BiRefNet 모델(remove.bg와 동일한 아키텍처)은 실제 GPU가 있어야 13초 안에 완료됩니다. 브라우저 내 폴백(ONNX Runtime + WebAssembly 기반 ISNet)도 동작하지만, 첫 실행에 2040초, 이후 2~10초가 소요되며 머리카락·털·세밀한 경계에서 눈에 띄게 거친 결과를 냅니다.

서버 사이드 두 경로에서 감수하는 비용은 작업당 단 한 번의 왕복입니다. 클라이언트 사이드(Circle Crop, Compress 미리보기)를 유지함으로써 반복이 가장 빈번한 단계에서 왕복 비용을 피할 수 있습니다.

파이프라인 단계별 설명

1. 파일을 선택합니다

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

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

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

3. 도구가 작업을 수행합니다 — 이 단계에서 경로가 나뉩니다

• Circle Crop. 원형 클리핑 경로를 사용한 Canvas 2D 픽셀 변환입니다. 선택한 회전과 확대/축소로 비트맵을 <canvas>에 그리고, 원형 클리핑을 적용한 후 원 내부를 ImageData로 읽어냅니다. 인터랙티브 자르기 프레임은 Cropper.js가 처리합니다. 완전히 브라우저 내에서 처리됩니다.
• Compress — 미리보기 및 슬라이더. canvas.toBlob을 사용해 JPG, PNG, WebP, AVIF를 재인코딩하여 품질 슬라이더를 움직일 때 나란히 보기 미리보기를 업데이트합니다. 완전히 브라우저 내에서 처리됩니다. 아직 업로드가 없습니다.
• Compress — 다운로드. “다운로드”를 누르면 이미지가 api.araluma.com로 한 번 전송됩니다(Hostinger가 운영하는 독일 VPS에서 실행되는 Fastify 서비스, Node 24 + sharp 0.34 + libvips 8.17, Squoosh가 서버 경로에서 사용하는 것과 동일한 C 라이브러리). 미리보기에서 설정한 동일한 파라미터로 재인코딩되어 브라우저로 스트리밍됩니다. 서비스는 테넌트별로 격리된 콘텐츠 주소 기반 캐시(입력 바이트 + 파라미터의 해시)를 500 MB 한도로 유지하므로, 동일한 이미지를 동일한 설정으로 다시 다운로드하면 캐시된 바이트가 재사용됩니다. 캐시는 사용자, IP, 파일명으로 색인되지 않습니다. 서비스에 연결할 수 없으면 브라우저 내 미리보기 blob으로 폴백합니다.
• Remove Background — 기본 클라우드 경로. 이미지가 Cloudflare Worker(araluma-bg-remover)에 한 번 업로드되어 프라이빗 R2 버킷(araluma-bg-temp)에 스테이징된 후, Cloudflare의 엣지 GPU에서 BiRefNet 모델을 실행하는 cf.image.segment 변환으로 처리되고 결과가 스트리밍됩니다. 스테이징된 R2 객체는 결과와 무관하게 R2 수명 주기 규칙에 따라 1시간 이내에 삭제됩니다. 일반적인 사진은 1~3초 안에 완료됩니다. 일일 IP별 한도와 5 MB 업로드 한도로 무료 티어를 지속 가능하게 유지합니다.
• Remove Background — WebAssembly 폴백. Worker에 연결할 수 없는 경우(네트워크 끊김, 엄격한 방화벽, 일일 할당량 소진, 또는 파일이 5 MB 클라우드 한도 초과), 도구가 투명하게 브라우저 내 ISNet 모델로 전환합니다. ONNX Runtime Web과 WebAssembly를 통해 로컬에서 실행됩니다. 첫 실행 시 약 80 MB 모델을 다운로드하는 데 2040초가 소요되며, 이후 실행은 210초입니다. 이 경로에서는 업로드가 없습니다 — DevTools에서 직접 확인할 수 있습니다.

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

출력 비트맵이 Blob으로 인코딩되고 object URL로 래핑되어 브라우저의 표준 파일 저장 대화상자에 제공됩니다. 파일이 디스크에 나타납니다.

직접 확인하는 방법

원하는 방법을 선택하세요.

방법 1 — Network 탭 관찰하기

1. 새 탭에서 Araluma을 열고 DevTools → Network를 엽니다.
2. Circle Crop 또는 Compress 미리보기 슬라이더를 사용합니다. HTML/CSS/JS/폰트 요청과 첫 사용 시 관련 WebAssembly 모듈 요청만 보일 것입니다. 이미지 바이트를 포함한 요청은 없습니다.
3. 이제 Compress → 다운로드 또는 Remove Background를 사용합니다. api.araluma.com(Compress) 또는 Remove Background Worker로 정확히 하나의 POST 요청이 이미지를 포함해 전송되고, 결과가 담긴 응답이 하나 돌아오는 것이 보입니다. 요청에 마우스를 올리면 크기와 타이밍을 확인할 수 있습니다.

“Initiator” 열은 각 요청을 시작한 스크립트를, “Type” 열은 전송된 내용을 알려줍니다. 어느 것도 숨기지 않습니다.

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

1. 아무 Araluma 도구 페이지나 불러옵니다. Remove Background를 작은 이미지로 한 번 사용해서 브라우저 내 ISNet 모델이 캐시되게 합니다.
2. DevTools → Network에서 오프라인 체크박스를 선택합니다(또는 Wi-Fi를 끕니다).
3. 페이지를 새로 고침합니다. 정적 에셋이 캐시되어 있으므로 여전히 로드됩니다.
4. 각 도구를 사용해 봅니다.
   • Circle Crop과 Compress 미리보기는 계속 작동합니다 — 네트워크가 필요 없습니다.
   • Compress 다운로드는 브라우저 내 미리보기 blob으로 폴백합니다(인코딩이 약간 덜 효율적이지만 작동합니다).
   • Remove Background는 ISNet WebAssembly 모델로 폴백하며 외부 요청 없이 작동합니다.

네 가지 도구가 오프라인에서 작동했다면(하나는 약간 성능 저하, 셋은 동일), 정의상 서버는 이미지를 볼 수 없었던 것입니다.

저희가 보는 것과 보지 않는 것

클라이언트 사이드 경로에서 저희는 이미지에 관해 아무것도 보지 않습니다. 확인할 요청도, 저장할 캐시도, 검색할 로그 항목도 없습니다.

서버 사이드 경로에서:

• Compress 다운로드는 인코딩 시간(일반적으로 수백 밀리초) 동안 이미지 바이트를 보고, 캐시 TTL 동안 콘텐츠 주소 기반 캐시 항목을 유지하며, 그게 전부입니다. 캐시는 사용자, IP, 파일명, 또는 “당신의” 이미지를 찾는 데 사용할 수 있는 어떤 식별자로도 색인되지 않습니다. 이미지 내용은 로깅하지 않습니다. 인코딩 서비스는 컷오버 이전 v1이 제공하던 동일한 두 테넌트에 걸쳐 공유되며, 테넌트별 CORS, 속도 제한, HMAC 서명 캐노니컬 URL을 적용합니다.
• Remove Background는 스테이징 업로드와 세그멘테이션 호출 시간(일반적으로 총 1~3초) 동안 이미지를 보며, 이후 스테이징된 사본은 R2 수명 주기 규칙에 따라 삭제됩니다. 저희 바이트를 외부 모델 제공업체에 전달하는 일은 없습니다. BiRefNet 모델은 Cloudflare 자체 인프라 내에서 실행되며, remove.bg / fal.ai / Replicate 방식의 외부 API를 사용하지 않습니다.

모든 경로에서 저희 분석 제공업체(Cloudflare Web Analytics)는 집계 페이지뷰 데이터(URL, 국가, 브라우저 계열, Core Web Vitals)를 기록합니다. 쿠키 없음, 영구 식별자 없음, 특정 개인과 연결된 정보 없음.

첫 사용 시 WebAssembly 모듈을 다운로드하는 도구(HEIC 디코더, ISNet ONNX 모델)의 경우, 호스팅 제공업체는 누군가가 해당 모듈을 가져갔다는 것을 파악합니다. CSS 파일을 가져간 것과 마찬가지입니다. 모듈 자체에는 이미지에 관한 정보가 전혀 포함되어 있지 않습니다.

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

기술 스택

궁금한 분들을 위해:

• Astro — 정적 사이트 생성기. 모든 페이지는 순수 HTML로 제공되며, 인터랙티브 도구가 있는 곳에만 점진적으로 향상된 JavaScript “islands”가 사용됩니다.
• 바닐라 CSS와 커스텀 프로퍼티 — Tailwind, CSS-in-JS 없음. 전체 디자인 시스템이 단 하나의 tokens.css 파일에 담겨 있습니다.
• canvas.toBlob / <canvas> — Compress 미리보기와 Circle Crop 전체에서 JPEG, PNG, WebP, AVIF(브라우저 지원) 인코딩에 사용됩니다.
• Cropper.js — 자르기 사각형 인터랙션 레이어.
• ONNX Runtime Web — Remove Background의 ISNet WebAssembly 폴백을 실행합니다.
• Cloudflare Pages — 정적 빌드를 호스팅하고 엣지에서 제공합니다.
• Cloudflare Workers + R2 + cf.image.segment (BiRefNet) — 기본 Remove Background 파이프라인.
• Fastify + sharp 0.34 + libvips 8.17 on Node 24 — api.araluma.com의 Compress 다운로드 서비스, 독일 Hostinger VPS에서 운영.
• Cloudflare Web Analytics — 집계된 쿠키 없는 페이지뷰 카운트.

브라우저 지원

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

유일한 필수 요건은 JavaScript(모든 도구에 필요)와 네트워크 연결(Compress 다운로드 또는 기본 Remove Background 경로 사용 시에만 — 다른 경로는 첫 페이지 로드 후 완전히 오프라인에서 실행됩니다)입니다.

문의

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