임베드 가이드

URL 구조

모든 GIF에는 임베드 시 참조할 세 가지 URL이 있습니다:

{ID}를 8자리 GIF ID로 교체하세요 (예: xK9mQ2pL).

1. Markdown

GitHub README 파일에서 가장 일반적인 형식. GIF 이미지를 상세 페이지 링크로 감쌉니다:

[![Demo](https://media.agentgif.com/ID.gif)](https://agentgif.com/ID)

중앙 정렬 (Markdown의 GitHub 스타일 HTML):

<p align="center">
  <a href="https://agentgif.com/ID">
    <img src="https://media.agentgif.com/ID.gif" alt="demo" width="800">
  </a>
</p>

2. HTML <img>

크기 및 스타일 전체 제어를 위해 <img> 태그에 원시 GIF URL을 사용하세요:

<a href="https://agentgif.com/ID">
  <img src="https://media.agentgif.com/ID.gif"
       alt="Terminal demo"
       width="800"
       loading="lazy">
</a>

The loading="lazy" attribute defers loading until the image is near the viewport — useful for pages with multiple GIFs.

3. iframe (인터랙티브 플레이어)

iframe 임베드에는 테마 전환, 재생 컨트롤, cast 재생이 포함된 인터랙티브 터미널 플레이어가 포함됩니다:

<iframe
  src="https://agentgif.com/embed/ID/"
  width="800"
  height="500"
  frameborder="0"
  allow="clipboard-write"
  loading="lazy"
></iframe>

플레이어는 상위 페이지에서 다크/라이트 모드를 자동으로 감지합니다. 쿼리 파라미터로 테마를 강제할 수 있습니다:

https://agentgif.com/embed/ID/?theme=dracula

4. Script 위젯 (자동 임베드)

단일 div와 script 태그를 추가하면 위젯이 모든 것을 자동으로 처리합니다:

<div data-agentgif="ID"></div>
<script src="https://agentgif.com/widget.js" async></script>

위젯은 컨테이너 너비에 맞게 조정되는 반응형 플레이어를 렌더링합니다. 한 페이지에 여러 임베드가 있는 경우 동일한 스크립트를 공유합니다 — 한 번만 포함하세요.

5. oEmbed

AgentGIF supports oEmbed for auto-discovery. Platforms like Notion, Slack, Discord, and WordPress can automatically render a rich preview when you paste an AgentGIF URL.

각 GIF 페이지의 HTML <link> 태그가 자동 검색을 활성화합니다:

<link rel="alternate" type="application/json+oembed"
  href="https://agentgif.com/oembed?url=https://agentgif.com/ID&format=json" />

oEmbed 엔드포인트를 직접 쿼리하세요:

curl "https://agentgif.com/api/v1/oembed/?url=https://agentgif.com/ID&format=json"

응답:

{
  "type": "photo",
  "version": "1.0",
  "title": "Docker Compose Up",
  "width": 1000,
  "height": 580,
  "url": "https://media.agentgif.com/ID.gif",
  "provider_name": "AgentGIF",
  "provider_url": "https://agentgif.com"
}

6. Badge (SVG)

GIF에 연결되는 소형 SVG Badge. README 파일의 Badge 행에 유용합니다:

<a href="https://agentgif.com/ID">
  <img src="https://agentgif.com/badge/ID.svg" alt="AgentGIF demo">
</a>

Markdown에서:

[![AgentGIF](https://agentgif.com/badge/ID.svg)](https://agentgif.com/ID)

플랫폼별 팁

GitHub README

GitHub은 README 파일에서 Markdown과 HTML을 모두 렌더링합니다. 최상의 결과를 위해 중앙 정렬 HTML 패턴을 사용하세요 — GIF를 중앙에 배치하고 너비를 제한합니다:

<p align="center">
  <a href="https://agentgif.com/ID">
    <img src="https://media.agentgif.com/ID.gif" alt="demo" width="800">
  </a>
</p>

GitHub은 <iframe> 및 <script> 태그를 제거합니다 — Markdown 또는 HTML <img> 방식만 사용하세요.

See the full guide: How to Embed GIFs in GitHub README.

Notion

AgentGIF URL을 Notion 페이지에 직접 붙여넣으세요. Notion의 oEmbed 지원이 자동으로 미리보기를 렌더링합니다. 또는 /embed 블록을 사용하여 임베드 URL을 붙여넣으세요.

Slack & Discord

GIF 상세 URL(https://agentgif.com/ID)을 붙여넣으세요. 두 플랫폼 모두 oEmbed 언퍼링을 지원하고 GIF 이미지와 함께 풍부한 미리보기를 표시합니다.

문서 사이트 (Docusaurus, MkDocs, VitePress)

Markdown 또는 HTML 임베드를 사용하세요. 대부분의 문서 생성기는 Markdown 파일에서 표준 HTML을 지원합니다. 생성기가 iframe을 제거하지 않는 경우 iframe 임베드가 작동합니다.

반응형 크기

컨테이너 너비에 맞게 조정되는 반응형 임베드를 위해:

<div style="max-width: 800px; margin: 0 auto;">
  <a href="https://agentgif.com/ID">
    <img src="https://media.agentgif.com/ID.gif"
         alt="demo"
         style="width: 100%; height: auto;">
  </a>
</div>

반응형 iframe의 경우 종횡비가 있는 컨테이너로 감싸세요:

<div style="position: relative; padding-bottom: 58%; max-width: 800px;">
  <iframe src="https://agentgif.com/embed/ID/"
          style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
          frameborder="0"></iframe>
</div>