belt CLI 스킬 설치:
npx skills add belt-sh/cli
OG 이미지 디자인
inference.sh CLI를 통해 소셜 공유 이미지(Open Graph)를 생성하세요.
빠른 시작
inference.sh CLI (
belt)가 필요합니다. 설치 안내
belt login
# HTML-to-image로 OG 이미지 생성
belt app run infsh/html-to-image --input '{
"html": "<div style=\"width:1200px;height:630px;background:linear-gradient(135deg,#1a1a2e,#16213e);display:flex;align-items:center;padding:60px;font-family:system-ui;color:white\"><div><h1 style=\"font-size:56px;margin:0;line-height:1.2\">How We Reduced Build Times by 80%</h1><p style=\"font-size:24px;opacity:0.8;margin-top:20px\">engineering.yourcompany.com</p></div></div>"
}'
플랫폼별 사양
| 플랫폼 | 크기 | 화면 비율 | 파일 크기 | 형식 |
|---|---|---|---|---|
| 1200 x 630 px | 1.91:1 | < 8 MB | JPG, PNG | |
| Twitter/X (summary_large_image) | 1200 x 628 px | 1.91:1 | < 5 MB | JPG, PNG, WEBP, GIF |
| Twitter/X (summary) | 800 x 418 px | 1.91:1 | < 5 MB | JPG, PNG |
| 1200 x 627 px | 1.91:1 | < 5 MB | JPG, PNG | |
| Discord | 1200 x 630 px | 1.91:1 | < 8 MB | JPG, PNG |
| Slack | 1200 x 630 px | 1.91:1 | — | JPG, PNG |
| iMessage | 1200 x 630 px | 1.91:1 | — | JPG, PNG |
범용 안전 권장: 1200 x 630 px, PNG 또는 JPG, 5 MB 미만.
골든 레이아웃
┌──────────────────────────────────────────────────┐
│ │
│ ┌─────────────────────────────────┐ ┌───────┐ │
│ │ │ │ │ │
│ │ 제목 텍스트 (최대 60자) │ │ 로고/ │ │
│ │ ─────────────────── │ │ 시각 │ │
│ │ 부제목 (최대 100자) │ │ 자료 │ │
│ │ │ │ │ │
│ │ 작성자 / 사이트명 │ └───────┘ │
│ └─────────────────────────────────┘ │
│ │
└──────────────────────────────────────────────────┘
1200 x 630 px
디자인 규칙
텍스트
| 규칙 | 값 |
|---|---|
| 제목 글꼴 크기 | 48-64px |
| 부제목 글꼴 크기 | 20-28px |
| 최대 제목 길이 | 60자 (일부 플랫폼에서 잘림) |
| 최대 부제목 길이 | 100자 |
| 줄 높이 | 1.2-1.3 (제목 기준) |
| 글꼴 두께 | 제목: Bold/Black, 부제목: Regular |
| 텍스트 대비 | WCAG AA 최소 (4.5:1 비율) |
안전 영역
┌──────────────────────────────────────────────────┐
│ ┌──────────────────────────────────────────────┐│
│ │ 모든 가장자리에서 40px 패딩 ││
│ │ ││
│ │ 콘텐츠는 여기에 위치 ││
│ │ ││
│ │ ││
│ └──────────────────────────────────────────────┘│
└──────────────────────────────────────────────────┘
- 모든 가장자리에서 최소 40px 패딩
- 일부 플랫폼은 가장자리를 자르거나 둥근 모서리를 추가함
- 중요 텍스트는 바깥쪽 5% 영역에 절대 배치하지 않음
색상
| 배경 유형 | 사용 시점 |
|---|---|
| 단색 브랜드 컬러 | 일관된 시리즈, 기업용 |
| 그라데이션 | 현대적이고 눈길을 끄는 경우 |
| 오버레이가 있는 사진 | 블로그 포스트, 사설 |
| 어두운 배경 | 대비가 좋고, 피드에서 두드러짐 |
어두운 배경이 소셜 피드에서 더 성과가 좋습니다 — 대부분의 피드는 흰색/밝은 배경이므로 어두운 OG 이미지가 더 눈에 띕니다.
콘텐츠 유형별 템플릿
블로그 포스트
belt app run infsh/html-to-image --input '{
"html": "<div style=\"width:1200px;height:630px;background:linear-gradient(135deg,#667eea,#764ba2);display:flex;align-items:center;padding:60px;font-family:system-ui,sans-serif;color:white\"><div style=\"flex:1\"><p style=\"font-size:18px;text-transform:uppercase;letter-spacing:2px;opacity:0.8;margin:0\">Engineering Blog</p><h1 style=\"font-size:52px;margin:16px 0 0;line-height:1.2;font-weight:800\">How We Reduced Build Times by 80%</h1><p style=\"font-size:22px;opacity:0.9;margin-top:16px\">A deep dive into our CI/CD optimization</p></div></div>"
}'
제품/출시 발표
belt app run infsh/html-to-image --input '{
"html": "<div style=\"width:1200px;height:630px;background:#0f0f0f;display:flex;align-items:center;justify-content:center;font-family:system-ui;color:white;text-align:center\"><div><p style=\"font-size:20px;color:#22c55e;text-transform:uppercase;letter-spacing:3px\">Now Available</p><h1 style=\"font-size:64px;margin:12px 0;font-weight:900\">DataFlow 2.0</h1><p style=\"font-size:24px;opacity:0.7\">Automated reports. Zero configuration.</p></div></div>"
}'
튜토리얼/방법
belt app run infsh/html-to-image --input '{
"html": "<div style=\"width:1200px;height:630px;background:linear-gradient(to right,#1a1a2e,#16213e);display:flex;align-items:center;padding:60px;font-family:system-ui;color:white\"><div><div style=\"display:inline-block;background:#e74c3c;color:white;padding:8px 16px;border-radius:4px;font-size:16px;font-weight:bold;margin-bottom:16px\">TUTORIAL</div><h1 style=\"font-size:48px;margin:0;line-height:1.2\">Build a REST API in 10 Minutes with Node.js</h1><p style=\"font-size:20px;opacity:0.7;margin-top:16px\">Step-by-step guide with code examples</p></div></div>"
}'
AI 생성 시각 OG
# 텍스트 기반 대신 눈에 띄는 시각 자료가 필요할 때
belt app run falai/flux-dev-lora --input '{
"prompt": "clean professional social sharing card, dark gradient background, abstract geometric shapes, modern tech aesthetic, minimal, no text, 1200x630 equivalent aspect ratio",
"width": 1200,
"height": 630
}'
OG 메타 태그 참고
<!-- 필수 (Facebook, LinkedIn, Discord, Slack) -->
<meta property="og:title" content="여기에 제목 (최대 60자)" />
<meta property="og:description" content="설명 (최대 155자)" />
<meta property="og:image" content="https://yoursite.com/og-image.png" />
<meta property="og:url" content="https://yoursite.com/page" />
<meta property="og:type" content="article" />
<!-- Twitter/X 전용 -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="여기에 제목" />
<meta name="twitter:description" content="설명" />
<meta name="twitter:image" content="https://yoursite.com/og-image.png" />
<!-- 이미지 크기 (선택 사항이지만 권장) -->
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
Twitter 카드 유형
| 카드 유형 | 이미지 크기 | 사용 시점 |
|---|---|---|
summary | 800 x 418 (작은 썸네일) | 짧은 업데이트, 링크 |
summary_large_image | 1200 x 628 (전체 너비) | 블로그 포스트, 기사, 발표 |
특별한 이유가 없다면 항상 summary_large_image를 사용하세요 — 큰 이미지가 클릭을 훨씬 더 많이 유도합니다.
일관성 시스템
여러 페이지를 가진 블로그나 사이트의 경우 템플릿 시스템을 만드세요:
| 요소 | 일관성 유지 | 변경 가능 |
|---|---|---|
| 배경 스타일 | 동일한 그라데이션 또는 브랜드 컬러 | — |
| 글꼴 패밀리 | 동일한 글꼴 | — |
| 레이아웃 | 동일한 위치 | — |
| 로고/브랜딩 | 동일한 위치 (모서리) | — |
| 카테고리 배지 | 동일한 스타일 | 카테고리별 색상 |
| 제목 텍스트 | 동일한 크기/두께 | 내용 변경 |
OG 이미지 테스트
| 도구 | URL |
|---|---|
| Facebook 디버거 | developers.facebook.com/tools/debug/ |
| Twitter 카드 검사기 | cards-dev.twitter.com/validator |
| LinkedIn 포스트 검사기 | linkedin.com/post-inspector/ |
| OpenGraph.xyz | opengraph.xyz |
# OG 디버깅 도구 검색
belt app run tavily/search-assistant --input '{
"query": "open graph image debugger preview tool test og:image"
}'
일반적인 실수
| 실수 | 문제점 | 해결 방법 |
|---|---|---|
| OG 이미지가 아예 없는 경우 | 플랫폼이 무작위 페이지 요소나 아무것도 표시하지 않음 | 항상 og:image 설정 |
| 텍스트가 너무 작은 경우 | 모바일 미리보기에서 읽을 수 없음 | 1200px 너비 기준 제목 최소 48px |
| 밝은 배경 | 흰색/밝은 피드에서 사라짐 | 어둡거나 채도 높은 배경 사용 |
| 텍스트가 너무 많은 경우 | 복잡하고 압도적임 | 최대: 제목 + 부제목 + 브랜드 |
| 이미지가 너무 큰 경우 (>5MB) | 일부 플랫폼에서 로드되지 않음 | 이상적으로 1MB 미만으로 최적화 |
| 안전 영역 패딩이 없는 경우 | 일부 플랫폼에서 텍스트 잘림 | 모든 가장자리에서 40px 패딩 |
| 플랫폼별로 다른 이미지를 사용하는 경우 | 일관되지 않은 공유 경험 | 모든 곳에 1200x630 사용 |
| HTTP 이미지 URL | 많은 플랫폼에서 HTTPS 필요 | 항상 HTTPS로 OG 이미지 제공 |
| 상대 이미지 경로 | 공유 시 해석되지 않음 | 전체 절대 URL 사용 |
관련 스킬
npx skills add inference-sh/skills@ai-image-generation
npx skills add inference-sh/skills@landing-page-design
npx skills add inference-sh/skills@prompt-engineering
모든 앱 둘러보기: belt app list