# Resizo Embed — 개요

Resizo Embed는 어떤 웹사이트라도 단 하나의 HTML 스니펫만으로 삽입할 수 있는 여섯 가지 무료 iframe 기반 이미지 도구 위젯 시스템입니다. 위젯은 [resizo.in](https://www.resizo.in/ko/embed/)에서 제공되며, 전적으로 방문자의 브라우저에서 실행되고 API 키, 계정, 백엔드 통합 등이 전혀 필요하지 않습니다. 임베드는 개인, 상업, 엔터프라이즈 용도로 무료이며, 유일한 조건은 위젯 푸터의 작은 "Powered by Resizo" 링크를 그대로 보이도록 유지하는 것입니다.

## 사용 가능한 위젯

| 위젯 | 임베드 경로 | 용도 |
| --- | --- | --- |
| Image Resizer | `/embed/image-resizer/` | 종횡비 잠금이 있는 정확한 픽셀 크기로 리사이즈. |
| JPG Compressor | `/embed/compress-image/` | 품질 슬라이더로 JPG, PNG, WebP 파일 용량 축소. |
| WebP Converter | `/embed/webp-converter/` | PNG와 JPG를 WebP로 변환. |
| Passport Photo | `/embed/passport-photo/` | 미국, 영국, EU, 인도, 캐나다의 공식 사양에 맞춘 여권/비자 사진 생성. |
| Batch Resize | `/embed/batch-resize/` | 여러 이미지를 한 번에 일괄 리사이즈; 결과는 ZIP으로 다운로드. |
| Watermark Tool | `/embed/watermark/` | 위치, 색상, 불투명도, 회전을 지정해 텍스트 워터마크 추가. |

## 최소 임베드 스니펫

```html
<iframe
  src="https://www.resizo.in/embed/image-resizer/"
  width="100%"
  height="640"
  loading="lazy"
  title="Resizo — Image Resizer"
  style="border:none;border-radius:12px;overflow:hidden;display:block;max-width:100%;"
></iframe>
```

각 위젯은 총 약 5~10 KB(HTML + CSS + 바닐라 JavaScript) 크기이며 기본적으로 lazy 로딩됩니다. iframe 내부에 프레임워크, 트래킹 SDK, 분석 비콘은 일절 없습니다.

## URL 파라미터

| 파라미터 | 값 | 기본값 | 설명 |
| --- | --- | --- | --- |
| `theme` | `light`, `dark` | (`prefers-color-scheme`을 따름) | 시각 테마를 고정으로 강제합니다. 생략하면 방문자의 OS 환경설정에 자동으로 맞춥니다. |

기본 URL 패턴은 `https://www.resizo.in/embed/{tool-id}/[?theme=light|dark]`입니다.

## 프라이버시 및 보안 모델

임베드는 Resizo의 "업로드 없음, 영속화 없음" 아키텍처를 그대로 상속받습니다:

- **업로드 없음.** 위젯은 `FileReader`로 사용자 파일을 읽고 HTML5 Canvas API로 처리합니다. 이미지 데이터를 수신하는 네트워크 엔드포인트는 존재하지 않습니다.
- **쿠키 없음.** iframe 내부에서 쿠키를 일절 설정하지 않습니다. 기본적으로 `localStorage`나 `sessionStorage`에도 아무것도 기록하지 않습니다.
- **파일 내용에 대한 텔레메트리 없음.** 파일명, 치수, 메타데이터가 전송되지 않습니다.
- **정책이 아닌 아키텍처로 GDPR + CCPA 준수.** DevTools → Network 탭으로 확인 가능: 처리 중 어떤 요청도 발생하지 않습니다.
- **`sandbox` 속성은 지원되지 않습니다.** 반드시 생략해야 합니다. `sandbox`는 위젯이 의존하는 파일 다운로드를 차단하기 때문입니다. 엄격한 Content-Security-Policy가 적용 중이라면 `frame-src https://www.resizo.in;`을 추가하세요.

## 자동 리사이즈 프로토콜 (postMessage)

각 위젯은 레이아웃이 변할 때마다 자신의 콘텐츠 높이를 부모 윈도우로 전송합니다:

```json
{ "source": "resizo-embed", "type": "size", "height": 742 }
```

부모 페이지는 메시지를 수신하여 iframe의 `style.height`를 업데이트해 내부 스크롤바를 제거할 수 있습니다. 임베드가 여러 개인 페이지에서 높이 업데이트를 올바르게 라우팅하려면 `event.source`를 각 iframe의 `contentWindow`와 매칭하세요. 별도의 서드파티 `iframe-resizer` 라이브러리는 필요하지 않습니다.

## 플랫폼 호환성

동일한 iframe 스니펫이 커스텀 HTML을 허용하는 모든 플랫폼에서 작동합니다:

- **WordPress** — 커스텀 HTML 블록(블록 에디터) 또는 "Text" 탭(클래식 에디터). 보안 플러그인의 경우 `resizo.in`을 화이트리스트에 추가해야 할 수 있습니다.
- **Ghost** — HTML 카드.
- **Webflow** — Embed 요소.
- **Wix** — Add → Embed Code → Embed HTML.
- **Squarespace** — Code Block.
- **Notion** — 위젯 URL과 함께 `/embed` 슬래시 명령어.
- **Shopify** — Pages → `</>` (Show HTML) 클릭 → 붙여넣기.
- **정적 HTML** — 파일에 직접 붙여넣기; 빌드 단계 없음.

또한 **React**(`useEffect`로 자동 리사이즈), **Vue**(`onMounted` / `onBeforeUnmount`), **Angular**(`ngOnInit` / `ngOnDestroy`)용 드롭인 컴포넌트도 제공됩니다.

## 브라우저 지원

| 브라우저 | 최소 버전 |
| --- | --- |
| Chrome / Edge (Chromium) | 80+ |
| Firefox | 78+ |
| Safari (iOS Safari 포함) | 14+ |
| Chrome Android | 80+ |

WebP 내보내기는 Chrome, Safari, Edge에서 완전히 지원됩니다. 내부적으로 사용하는 Canvas API는 [caniuse.com/canvas](https://caniuse.com/canvas) 기준 전 세계 98.5% 이상의 지원율을 보입니다.

## 버저닝

임베드는 렌더 시점에 `resizo.in`에서 가져오므로 개선 사항은 자동으로 배포됩니다. 사이트에 붙여넣은 임베드 *코드* 자체는 그대로 유지됩니다. URL이나 메시지 포맷의 호환성 깨짐 변경은 회피하며, 부득이하게 필요한 경우 기존 URL은 버전이 매겨진 경로 하에서 이전 동작을 계속 제공합니다.

## 관련 문서

- [Embed Generator](https://www.resizo.in/ko/embed/) — iframe 스니펫을 생성하는 인터랙티브 빌더.
- [Embed 문서 (HTML)](https://www.resizo.in/ko/embed/docs/) — 플랫폼별 튜토리얼, 프레임워크 컴포넌트, 트러블슈팅이 포함된 전체 통합 가이드.
- [Resizo 개요](https://www.resizo.in/docs/overview.ko.md) — Resizo의 정체와 아키텍처적 근거.
- [Resizo의 작동 원리](https://www.resizo.in/docs/how-it-works.ko.md) — 브라우저 기반 처리 파이프라인과 프라이버시 모델.
- [기능](https://www.resizo.in/docs/features.ko.md) — 전체 기능 목록과 소셜 미디어 프리셋 치수.