# 트위터 카드 이미지 생성기 에이전트 스킬

> 올바른 2:1 가로세로 비율과 플랫폼별 제약 사항으로 최적화된 트위터 카드(X) 링크 미리보기 이미지를 생성합니다. 이 스킬은 트윗 미리보기가 완벽하게 보이도록 하여 청중의 관심을 끌고 참여를 높여줍니다.

- Canonical: https://nanoskill.ai/ko/skills/twitter-card-image-generator
- Markdown: https://nanoskill.ai/ko/skills/twitter-card-image-generator.md
- Author: kostja94
- Published: 2026-06-09T06:00:00.000Z
- Updated: 2026-07-25T04:19:51.168Z
- Language: ko
- Source type: github
- Popularity signal: 244

## Sources

- https://github.com/kostja94/social-cards-skills

## Install

```shell
npx skills add https://github.com/kostja94/social-cards-skills/tree/main/twitter-card-image-generator
```

## About

이 트위터 카드 이미지 생성기 스킬은 사용자가 X(트위터) 링크 미리보기를 위한 완벽하게 최적화된 이미지를 만들 수 있도록 지원하여, 콘텐츠가 타임라인에서 강력한 시각적 효과를 내도록 합니다. 일반적인 오픈 그래프 이미지와 달리, 이 도구는 트위터 고유의 2:1 가로세로 비율(1200x675px)과 플랫폼별 렌더링 특이점에 맞춰 조정되므로, 콘텐츠 크리에이터, 마케터, 개발자가 소셜 미디어 존재감을 높이고 참여를 유도하는 데 도움이 됩니다.

6가지의 고유한 생성 방식과 16가지 다양한 시각적 스타일을 활용하여, 이 스킬은 이미지 제작을 위한 포괄적인 옵션을 제공합니다. 배경용 AI 이미지 생성, 콘텐츠 인식 워크플로우, Satori/resvg 파이프라인 통합과 같은 고급 기능을 포함합니다. 다크 모드 호환성, 모바일 타임라인 크롭, 엣지 마스킹과 같은 주요 디자인 고려 사항이 내장되어 있어, 모든 사용자 경험에서 시각적으로 매력적이고 기능적인 이미지를 보장합니다.

표준 링크 미리보기를 넘어, 이 생성기는 비디오 및 오디오 콘텐츠에 이상적인 트위터 플레이어 카드용 매력적인 포스터 이미지 제작도 지원합니다. 통합된 YAML 검사와 일반적인 실수에 대한 안내를 통해, 사용자는 기술 사양을 충족하고 클릭률을 극대화하는 고품질 트위터 카드 이미지를 자신 있게 제작할 수 있으며, 공유 링크를 더 효과적이고 전문적으로 만듭니다.

## Key features

- **X(트위터) 링크 미리보기에 최적화됨**: 트위터의 2:1 종횡비(1200x675px)와 독특한 렌더링 동작에 특별히 설계된 이미지를 생성하여 콘텐츠가 타임라인에서 돋보이도록 합니다.
- **6가지 생성 방식 및 16가지 비주얼 스타일**: AI 이미지 생성과 콘텐츠 인식 워크플로우를 포함한 6가지 고유한 생성 방법을 16가지 비주얼 스타일에서 활용하여 다양하고 매력적인 트위터 카드 이미지를 만듭니다.
- **다크 모드 및 모바일 크롭 적응**: 트위터의 다크 모드에서 잘 보이고 모바일 타임라인 크롭에서 살아남는 이미지를 디자인하며, 최대 가시성을 위해 중요 콘텐츠를 안전 영역에 배치합니다.
- **플레이어 카드 포스터 생성**: 트위터 플레이어 카드를 위한 매력적인 포스터 이미지를 생성하며, 재생 버튼 오버레이와 비디오 제목을 포함하여 사용자가 멀티미디어 콘텐츠에 참여하도록 유도합니다.
- **종합적인 유효성 검사**: 이미지 크기, 카드 유형, URL 형식, 그리고 타임라인 안전 영역 및 다크 모드 호환성과 같은 디자인 고려 사항을 검증하는 내장된 YAML 검사의 이점을 누릴 수 있습니다.

## Use cases

- **블로그 게시물용 트위터 카드 이미지 생성**: 새 블로그 게시물에 대해 시각적으로 매력적인 1200x675px 트위터 카드 이미지를 자동으로 생성하여 X에서 공유될 때 전문적이고 매력적으로 보이도록 합니다.
- **비디오용 플레이어 카드 포스터 디자인**: 트위터에 공유되는 비디오 콘텐츠에 최적화된 포스터 이미지를 제작하여, 비디오가 재생되기도 전에 더 높은 클릭률을 유도합니다.
- **소셜 공유를 위한 다크 모드 호환성 보장**: 기존 Open Graph 이미지를 조정하거나 다크 모드 친화적인 디자인으로 새로 생성하여, 모든 사용자가 디스플레이 설정에 관계없이 트위터 카드 이미지가 멋지게 보이도록 보장합니다.

## Result preview

이 스킬로 제작된 성능이 뛰어난 트위터 카드 이미지를 살펴보세요.

![A dark-themed Twitter Card preview for FlowMind AI featuring the headline 'The Future of AI Agents' in large white and indigo typography. The design uses a futuristic navy-blue gradient background with subtle grid lines and connected-node graphics representing AI networks. A 'Read More' button appears below the headline alongside an estimated reading time, creating a clean, modern SaaS-style layout optimized for social media engagement.](https://file.nanoskill.ai/Twitter-card-outcome-1.png)

![A brand style guide page showcasing the FlowMind AI color palette and visual language. Large color swatches display indigo, cyan, emerald green, deep black, dark surface blue, and semi-transparent gray text colors, each labeled with HEX values and usage descriptions. Below, a section outlines design principles focused on dark-mode optimization, color hierarchy, typography consistency, and visual balance for Twitter-native experiences.](https://file.nanoskill.ai/Twitter-card-outcome-3.png)

![A strategic design briefing page divided into four dark-themed cards titled Objective, Target Audience, Visual Identity, and Format. The page summarizes campaign goals, audience segments including tech professionals and startup founders, brand colors and style direction, and technical specifications such as Twitter’s 1200×675 pixel format, mobile-safe composition, and dark-mode compatibility.](https://file.nanoskill.ai/Twitter-card-outcome-5.png)

![A realistic Twitter feed mockup displaying a post from FlowMind AI about the future of AI agents. The tweet includes descriptive promotional copy and an embedded Twitter Card preview featuring a futuristic AI-themed visual. Engagement metrics such as comments, reposts, likes, and shares appear beneath the post, while a note at the bottom highlights projected improvements in click-through rate and user engagement from using optimized visual cards.](https://file.nanoskill.ai/Twitter-card-outcome-6.png)

## Result walkthrough

### 설치

AI 에이전트에 트위터 카드 이미지 생성기 스킬을 추가하세요.

![A terminal-style screenshot showing the installation of the Twitter Card Image Generator skill. The console output displays the command 'npx skills add https://github.com/kostja94/social-cards-skills', followed by interactive prompts and confirmation messages indicating successful installation, universal agent setup, and symlinking for Hermes Agent access.](https://file.nanoskill.ai/Twitter-card-install.png)

### 콘텐츠 설명

콘텐츠 세부 정보, 브랜드 아이덴티티, 선호하는 시각적 방향을 공유하세요.

![A screenshot of a terminal or interface asking the user to provide content details for generating a Twitter Card image. The prompt requests title/topic, key message, brand/account name, visual assets (logo, color palette, style), and call-to-action, showing how the skill gathers information before designing the card.](https://file.nanoskill.ai/describe-content.png)

### 결과 생성

강력한 시각적 계층 구조와 참여 중심의 디자인 개선으로 플랫폼에 최적화된 트위터 카드 이미지를 만듭니다.

![A screenshot of a terminal or interface showing the generation step for the Twitter Card image. It highlights the user confirming inputs and the system preparing the final platform-optimized image, ready for export as a high-resolution, social-media-ready graphic. The screen emphasizes that the card will follow 1200×675px format, mobile-safe layout, dark-mode compatibility, and engagement-focused design principles.](https://file.nanoskill.ai/Generation.png)

## Skill definition

# 트위터 카드 이미지 생성기

X(트위터) 링크 미리보기에 최적화된 이미지를 생성하세요 — 누군가 링크를 공유할 때 타임라인에 나타나는 카드입니다. 트위터 카드는 표준 Open Graph와 다른 고유한 이미지 크기와 렌더링 동작을 가집니다. 이 스킬은 트위터의 2:1 비율과 플랫폼별 특이사항에 맞춘 전체 생성 파이프라인을 다룹니다.

**og-image-generator**의 6가지 생성 접근 방식과 6가지 비주얼 스타일이 여기에 모두 적용됩니다. 유일한 차이점은 다음과 같습니다: 출력 크기(1200x630 대신 1200x675), X 특화 디자인 적용, 타임라인 안전 영역, 플레이어 카드 지원.

## 사용 시기

- 사용자가 X/트위터 링크 미리보기, `summary_large_image` 또는 플레이어 카드 포스터용 **1200×675px(2:1)** 이미지가 필요한 경우
- 사용자가 `twitter:image`, 트위터 카드, X 미리보기 이미지, 트윗 미리보기 또는 타임라인 카드 디자인을 언급하는 경우
- 사용자가 다크 모드에 안전한 레이아웃, 상단 60% 콘텐츠 영역 또는 X의 둥근 모서리 잘림에 대비한 20px 가장자리 마스크가 필요한 경우
- 사용자가 이미 **og-image-generator**를 사용 중이고 동일한 스타일과 파이프라인의 트위터 적응형 변형을 원하는 경우

## 사용하지 말아야 할 때

- Facebook, LinkedIn, Slack 등에 사용할 **일반 OG 이미지(1200×630, 1.91:1)** — 대신 **og-image-generator**를 사용하세요.
- 이미지 파일을 생성하지 않고 **HTML 메타 태그만 설정**하는 경우 — marketing-skills의 **twitter-cards**를 사용하세요.
- **SVG 출력** — 트위터는 카드 이미지로 SVG를 지원하지 않습니다. PNG 또는 JPG를 사용하세요.
- **노코드 비주얼 편집기 또는 호스팅 API** — 에이전트 파이프라인을 실행하는 대신 [Oginify](https://oginify.com)를 사용하세요.

**호출 시**: **처음 사용** 시, 이 스킬이 다루는 내용과 중요성을 1~2문장으로 소개한 후 주요 출력을 제공합니다. **이후 사용** 또는 사용자가 건너뛰기를 요청하면 바로 주요 출력으로 넘어갑니다.

## 1. 트위터가 이미지를 소비하는 방식

트위터는 다음 우선순위로 이미지를 읽습니다:

1. `twitter:image` — 명시적으로 설정된 경우 직접 사용
2. `og:image` — 트위터 카드 태그가 없으면 OG 이미지로 대체
3. 이미지 없음 — 일반 텍스트 링크 미리보기

**핵심 통찰**: Facebook과 LinkedIn은 `twitter:image`를 읽지 않습니다. 트위터만 트위터 카드 태그를 읽습니다. 즉, 실제 렌더링 파이프라인은 공유할 수 있지만 메타데이터에 두 이미지 경로가 모두 필요합니다.

## 2. 트위터 이미지 사양

| 속성 | 사양 |
|----------|--------------|
| **비율** | 2:1 (공식); 실제로는 ~1.91:1로 렌더링됨 |
| **권장** | 1200x675px (2:1); 1200x628px (OG와 크로스 플랫폼) |
| **최소** | 300x157px |
| **최대** | 4096x4096px |
| **파일 크기** | 5MB 미만 |
| **형식** | JPG, PNG, WebP, GIF (첫 프레임만); SVG 미지원 |

**카드 유형에 따라 이미지 표시 방식이 결정됩니다:**

| 카드 유형 | 이미지 동작 |
|-----------|---------------|
| `summary_large_image` | 전체 너비 주요 이미지 (대부분의 페이지에 권장) |
| `summary` | 작은 썸네일 (100x100px 정사각형) |
| `player` | 비디오/오디오 임베드; 이미지는 재생 전 포스터 프레임 |
| `app` | 앱 아이콘; 이미지는 앱 아이콘 + 프로모션 이미지 |

대부분의 사용 사례에서는 1200x675px의 `summary_large_image`를 목표로 합니다.

## 3. 6가지 생성 접근 방식 (트위터 적응형)

**og-image-generator** §1의 6가지 접근 방식 모두 트위터 이미지에 사용할 수 있습니다. 유일한 차이는 출력 크기입니다. 이 섹션에서는 트위터 특화 적응 사항을 다룹니다. 전체 렌더링 파이프라인 문서는 **og-image-generator** §1을 참조하세요.

### 3.1 AI 이미지 생성 (코어 #1)

OG와 동일한 3부분 프롬프트 전략이지만 트위터 특화 프레임을 적용합니다:

```
Part 1 — Visual description: background, composition, mood
Part 2 — Text specification: EXACT text, in quotes, with size hints
Part 3 — Twitter constraints: "1200x675px, 2:1 aspect ratio, key text in
         upper 60%, dark background preferred for dark mode"
```

**하이브리드 접근 방식(권장)**: AI가 배경/분위기를 생성하고 Satori가 텍스트를 오버레이합니다. AI 모델이 여전히 어려워하는 중국어 텍스트에 중요하며, 트위터의 ~40% 다크 모드 사용으로 인해 텍스트 정확도가 더욱 두드러집니다.

전체 AI 도구 비교 표(GPT Image 2.0, Flux, Nano Banana, DALL-E 3, Midjourney)는 **og-image-generator** §1.1을 참조하세요.

### 3.2 에이전트-네이티브 콘텐츠 인식 워크플로우 (코어 #2)

OG(§1.2)와 동일한 6단계 워크플로우: 콘텐츠 읽기 → 스타일 매칭 → 시각적 요소 추출 → 생성 선택 → 생성 → 검증. 각 단계에서 트위터 특화 추가 사항:

**2단계 (스타일 매칭)** — 트위터 다크 모드 고려: 다크 배경 스타일(Terminal/CLI, Midnight Ink Magazine, Brutalist 다크 모드) 또는 X용 다크 변형이 있는 스타일을 선호합니다.

**3단계 (시각적 요소 추출)** — 모바일에서 트위터 타임라인이 ~1:1로 잘리므로 가장 중요한 시각적 요소는 정사각형 안에서 작동해야 합니다. 1200x675에서 작동하는 가로 데이터 리본은 정사각형 잘림에서 보이지 않을 수 있습니다. 1:1에서 잘 보이는 요소를 하나 이상 추출하세요.

**4단계 (생성 선택)** — 동일한 의사 결정 트리. AI 생성의 경우, "텍스트가 트위터의 ~260px 모바일 렌더링 너비를 견딜 수 있는가?"를 추가하세요.

**6단계 (검증)** — OG 검사와 트위터 특화 검사(§8)를 모두 실행합니다.

### 3.3 Satori + resvg (코드 기반)

OG와 동일한 파이프라인입니다. 높이를 630에서 675로 변경하세요. 전체 구현은 **og-image-generator** §1.3을 참조하세요.

```tsx
// Shared endpoint serves both OG and Twitter:
export async function GET(req: Request) {
  const { searchParams } = new URL(req.url);
  const title = searchParams.get('title') ?? 'Default';
  const platform = searchParams.get('platform') ?? 'og'; // 'og' | 'twitter'

  const width = 1200;
  const height = platform === 'twitter' ? 675 : 630;

  return new ImageResponse(
    <OgTemplate title={title} height={height} />,
    { width, height },
  );
}
```

**그런 다음 페이지 메타데이터에서:**

```tsx
const ogUrl = `/og?title=${encodeURIComponent(title)}`;
const twitterUrl = `/og?title=${encodeURIComponent(title)}&platform=twitter`;

export const metadata: Metadata = {
  openGraph: {
    images: [{ url: ogUrl, width: 1200, height: 630 }],
  },
  twitter: {
    card: 'summary_large_image',
    images: [twitterUrl],  // Twitter-specific 1200x675
  },
};
```

### 3.4 Puppeteer, 관리 서비스, JSON 설정

OG와 동일 — 뷰포트/높이를 630 대신 675로 설정하세요. **og-image-generator** §1.4–1.6을 참조하세요. v3 페이지 우선순위 시스템(S/A/B/C) 및 파이프라인 선택에 대해서는 [content-strategy.md](../og-image-generator/references/content-strategy.md) 및 [pipeline-guide.md](../og-image-generator/references/pipeline-guide.md)를 참조하세요.

## 4. X 특화 디자인 고려 사항

트위터는 Facebook/LinkedIn과 다르게 이미지를 렌더링합니다. 다음 사항을 염두에 두고 디자인하세요:

**다크 모드(사용자의 약 40%)**: 이미지는 피드에서 트윗에 둘러싸여 인라인으로 표시됩니다. 어두운 배경은 자연스럽게 어우러지고, 밝은 배경은 눈에 띄지만 다크 모드에서 거슬릴 수 있습니다. 모든 템플릿에는 다크 변형 또는 다크 모드 친화적 기본값이 있어야 합니다. 6가지 스타일 중 Terminal/CLI, Midnight Ink Magazine, Brutalist(검은 배경)는 원래 다크 모드 친화적입니다. Swiss Minimal과 Newspaper는 다크 모드 대안을 제공해야 합니다.

**타임라인 잘림(모바일)**: 모바일에서 `summary_large_image` 이미지는 트윗이 확장될 때까지 타임라인에서 ~1:1로 잘립니다. 전체 2:1 이미지는 탭했을 때만 표시됩니다. 가장 중요한 콘텐츠(제목, 주요 비주얼)는 이미지의 상단 60%에 배치하세요. 잘림을 견디는 중앙 정사각형 영역입니다. 절대 하단 20%에 중요한 텍스트를 배치하지 마세요.

**작은 크기에서 텍스트 가독성**: 타임라인 이미지는 모바일 피드에서 ~260px 너비로 표시됩니다. 텍스트가 읽을 수 있도록 1/4 스케일(~300px 너비)으로 템플릿을 테스트하세요. 이는 OG의 ~500px 데스크톱 피드 크기보다 더 엄격합니다.

**가장자리 마스크**: 트위터는 카드 이미지에 미세한 둥근 모서리 마스크를 적용합니다. 로고나 중요한 요소를 가장자리 20px 이내에 배치하면 부분적으로 잘릴 위험이 있습니다.

**트위터 권장 템플릿 적응(스타일별):**

| OG 템플릿 | 트위터 적응 |
|-------------|-------------------|
| Terminal/CLI | 창 크롬을 더 낮게 이동(트위터의 둥근 모서리가 왼쪽 상단 점을 잘림); 다크 모드 대비를 위해 악센트 색상 사용 |
| Magazine Editorial | Midnight Ink 사전 설정 사용(X용으로 설계된 다크 변형); 사진 우물을 더 높게 이동(하단 대신 상단 50%) |
| Swiss Minimal | 다크 모드 변형 추가: `#0a0a0a` 배경에 악센트 유지, 흰색 텍스트; 데이터 행은 1:1 잘림에서 잘 살아남음 |
| Pixel Retro | 기본적으로 어두운 배경 — NES/Arcade/CGA 사전 설정은 이미 X 준비 완료; 가장자리 마스크 해제를 위해 HUD 요소를 10% 축소 |
| Brutalist | 검은 배경 변형은 이미 다크 모드 네이티브; 비대칭 제목 블록은 기본적으로 상단 60% 영역에 머무름 |
| Newspaper | `#1a1a1a` 배경 다크 변형 추가; 다중 섹션 레이아웃은 정사각형 잘림 영역을 위해 세로로 쌓아야 함 |

## 5. 플레이어 카드 포스터

비디오/오디오 콘텐츠의 경우 `player` 카드 유형에는 포스터 이미지가 필요합니다:

```html
<meta name="twitter:card" content="player">
<meta name="twitter:player" content="https://example.com/player.html">
<meta name="twitter:player:width" content="480">
<meta name="twitter:player:height" content="480">
<meta name="twitter:image" content="https://example.com/poster.jpg">
```

포스터 이미지는 사용자가 재생을 탭하기 전에 표시됩니다. 매력적인 썸네일로 디자인하세요. 재생 버튼 오버레이(원 안에 중앙 삼각형), 비디오 제목, 콘텐츠의 프레임을 포함하세요. 동일한 2:1 비율 권장 사항이 적용됩니다. 재생 버튼은 중앙 정사각형 영역에서 가장 큰 요소여야 합니다.

AI 생성 포스터의 경우: "중앙 재생 버튼이 있는 비디오 썸네일, 상단 1/3에 제목 텍스트, 검은 배경, 1200x675px"로 프롬프트하세요.

## 6. 스타일 시스템 (OG와 공유 — 16가지 스타일)

트위터 이미지는 **og-image-generator** §3 및 [references/style-system-v3.md](../og-image-generator/references/style-system-v3.md)의 동일한 16가지 비주얼 스타일을 사용합니다. 모든 템플릿이 트위터에서 작동합니다. 캔버스 높이를 675px로 변경하기만 하면 됩니다.

| # | 스타일 | 다크 모드 | X CTR 잠재력 | 템플릿 |
|---|-------|-----------|----------------|----------|
| 1 | 터미널 / CLI | 항상 다크 | ★★★★★ | [terminal.tsx](../og-image-generator/templates/terminal.tsx) |
| 2 | 매거진 편집 | Midnight Ink | ★★★ | [magazine.tsx](../og-image-generator/templates/magazine.tsx) |
| 3 | 스위스 미니멀 | 변형 필요 | ★★ | [swiss.tsx](../og-image-generator/templates/swiss.tsx) |
| 4 | 픽셀 레트로 | 모두 다크 | ★★★★ | [pixel.tsx](../og-image-generator/templates/pixel.tsx) |
| 5 | 브루탈리스트 | 검은 배경 | ★★★★★ | [brutalist.tsx](../og-image-generator/templates/brutalist.tsx) |
| 6 | 신문 | 변형 필요 | ★★★ | [newspaper.tsx](../og-image-generator/templates/newspaper.tsx) |
| 7 | 네오-브루탈리즘 | 있음 | ★★★★★ | [neo-brutalism.tsx](../og-image-generator/templates/neo-brutalism.tsx) |
| 8 | 벤토 그리드 | 다크 베이스 | ★★★★ | [bento-grid.tsx](../og-image-generator/templates/bento-grid.tsx) |
| 9 | 네오-스위스 그라데이션 | 밝음 | ★★ | [neo-swiss-gradient.tsx](../og-image-generator/templates/neo-swiss-gradient.tsx) |
| 10 | 다크 그라데이션+텍스처 | 항상 다크 | ★★★★★ | [dark-gradient-texture.tsx](../og-image-generator/templates/dark-gradient-texture.tsx) |
| 11 | 텍스트 오버레이 | 배경에 따라 다름 | ★★★★ | [text-overlay-hybrid.tsx](../og-image-generator/templates/text-overlay-hybrid.tsx) |
| 12 | 시네마틱 | 다크 친화적 | ★★★ | [cinematic.tsx](../og-image-generator/templates/cinematic.tsx) |
| 13 | 콜라주 | 다양함 | ★★★★ | [collage.tsx](../og-image-generator/templates/collage.tsx) |
| 14 | 리소그래프 | 종이 베이스 | ★★★ | [risograph.tsx](../og-image-generator/templates/risograph.tsx) |
| 15 | 베이퍼웨이브 | 다크 네온 | ★★★★★ | [vaporwave.tsx](../og-image-generator/templates/vaporwave.tsx) |
| 16 | 그런지 | 바랜 다크 | ★★★★ | [grunge.tsx](../og-image-generator/templates/grunge.tsx) |

**X 최고 성능**: 터미널, 브루탈리스트, 네오-브루탈리즘, 다크 그라데이션, 베이퍼웨이브 — 높은 대비 + 다크 배경이 X 타임라인에 최적. **X 피해야 할 것**: 다크 변형이 없는 지나치게 기업적인 온-브랜드 스타일; 다크 모드 타임라인에서 순백색 배경.

## 7. 폰트 & 타이포그래피

OG와 동일한 규칙입니다. **og-image-generator** [references/typography.md](../og-image-generator/references/typography.md)를 참조하세요.

트위터 특화 추가 사항: 타임라인 이미지가 ~260px 너비로 렌더링되므로(OG의 ~500px 데스크톱 피드 대비), 최소 글꼴 크기를 4px 늘립니다. 24px 대신 28px 최소값을 사용하세요.

## 8. 에이전트 YAML 검사

```yaml
checks:
  # P0 — must pass
  - id: dimensions-twitter
    description: twitter:image is 1200x675px (2:1) or 1200x628px (cross-platform)
  - id: card-type-match
    description: twitter:card is summary_large_image when using a large image
  - id: absolute-url
    description: twitter:image URL is absolute (https://) and publicly accessible
  - id: format
    description: Image format is PNG, JPG, or WebP (not SVG)

  # P1 — should pass
  - id: og-fallback
    description: og:image is also set (as fallback for platforms that don't read twitter:image)
  - id: timeline-safe-zone
    description: Critical text and primary visual anchor are in the top 60%; nothing critical in bottom 20%
  - id: square-crop-survival
    description: The most important visual element reads correctly in a 1:1 center crop (mobile timeline)
  - id: dark-mode
    description: Template includes a dark-background variant or uses a dark-friendly default style
  - id: edge-mask-clearance
    description: Logos and critical elements are ≥20px from all edges (Twitter rounded corner mask)

  # P2 — nice to have
  - id: cross-platform-compatible
    description: Same image at 1200x628px works for both OG and Twitter without separate generation
  - id: ai-text-validated
    description: If AI-generated, all text was validated against source — no hallucinated or misspelled text
  - id: player-poster
    description: Player card pages have a dedicated poster image with play button
  - id: content-aware-twitter
    description: Image reflects page-specific content, not just a title in a Twitter-sized template
```

## 9. 흔한 실수

1. **잘못된 비율**: 조정 없이 OG의 1200x630(1.91:1)을 사용하는 경우. 트위터가 이를 허용하지만, 1200x675(2:1)가 카드를 더 잘 채우고 레터박싱을 방지합니다.
2. **누락된 `twitter:image` 태그**: OG 대체에만 의존하는 경우 — 명시적인 `twitter:image` 없이는 트위터가 어떤 이미지를 선택할지 제어할 수 없습니다.
3. **하단 20%의 텍스트**: 트위터는 모바일에서 이미지를 ~1:1로 자릅니다. 하단 근처의 중요한 텍스트가 타임라인에서 잘립니다.
4. **다크 모드 고려 없음**: 밝은 배경 이미지는 트위터의 다크 모드 타임라인에서 거슬립니다. 사용자의 약 40%가 다크 모드를 사용합니다.
5. **SVG 사용**: 트위터는 카드 이미지로 SVG를 지원하지 않습니다. 항상 PNG 또는 JPG를 출력하세요.
6. **정적 첫 프레임이 없는 GIF**: 트위터는 GIF의 첫 번째 프레임만 표시합니다. 프레임 1이 의미 있는 정지 이미지인지 확인하세요.
7. **260px 뷰에서 AI 텍스트 환각**: 전체 크기에서 올바르게 보이는 AI 생성 텍스트가 작게 렌더링될 때 깨진 문자가 나타날 수 있습니다. 1/4 스케일로 검증하세요.
8. **가장자리에 닿는 로고**: 트위터의 둥근 모서리 마스크가 가장자리에서 ~10px을 자릅니다. 로고를 가장자리에서 ≥20px 떨어뜨리세요.

## 10. 테스트

- **카드 유효성 검사기**: https://cards-dev.twitter.com/validator — 카드가 어떻게 렌더링될지 정확히 보여줍니다. 미리 보려면 URL을 붙여넣으세요.
- **수동 테스트**: 테스트 계정에서 링크를 트윗한 다음 타임라인 및 확장 뷰를 확인하세요.
- **다크 모드 테스트**: 라이트 모드와 다크 모드 트위터 클라이언트에서 카드를 확인하세요.
- **캐시 무효화**: 트위터는 카드 데이터를 적극적으로 캐시합니다(최대 7일). 변경 후 카드 유효성 검사기를 사용하여 강제로 다시 스크랩하세요.
- **모바일 잘림 테스트**: 1:1 비율로 카드를 스크린샷(675x675 중앙으로 잘라)하여 정사각형 잘림이 페이지 콘텐츠를 여전히 전달하는지 확인하세요.

## 11. 관련 스킬

이러한 스킬은 선택 사항입니다. 이 스킬은 독립적으로 작동합니다. 추가 기능이 필요하면 설치하세요:

**동일 레포지토리** (항상 함께 설치):

- **og-image-generator**: OG 이미지 생성(1200x630, 1.91:1) — 전체 렌더링 파이프라인, 6가지 모든 스타일, 시드 템플릿, 타이포그래피 가이드, Satori 제약 사항. 이 트위터 카드 생성기는 전체 인프라를 재사용합니다.

**별도 레포지토리** (설치 여부 선택 가능):

- **twitter-cards** (marketing-skills): `twitter:card`, `twitter:site`, `twitter:creator`에 대한 HTML 메타 태그 설정, 유효성 검사. 태그를 SET하는 방법을 처리합니다. 이 스킬은 이미지를 CREATE하는 방법을 처리합니다.
- **open-graph** (marketing-skills): `og:title`, `og:image`, `og:url`에 대한 HTML 메타 태그 설정, 플랫폼 테스트 도구
- **social-share-generator** (marketing-skills): 사용자가 X에 링크를 공유할 때 트위터 카드 데이터를 소비하는 공유 버튼 UI

## FAQ

### 트위터 카드 이미지 생성기란 무엇인가요?

트위터 카드 이미지 생성기는 X(트위터) 링크 미리보기에 최적화된 이미지를 생성하는 도구 또는 기술입니다. 이러한 이미지는 트위터의 고유한 종횡비(2:1, 1200x675px)와 디자인 고려 사항을 준수하여, 링크가 플랫폼에서 공유될 때 올바르고 매력적으로 표시되도록 합니다.

### 이 생성기는 일반적인 Open Graph(OG) 이미지 생성기와 어떻게 다른가요?

OG 이미지 생성기와 인프라를 공유하지만, 이 기술은 출력 크기를 트위터의 1200x675px(2:1) 종횡비에 맞추고, X 특화된 디자인 적응을 포함하며, 타임라인 안전 영역을 고려하고, 플레이어 카드 요구 사항을 지원합니다. 일반적인 OG 이미지는 일반적으로 1200x630px(1.91:1)입니다.

### 트위터 카드 이미지에 권장되는 크기는 무엇인가요?

트위터 카드 이미지에 권장되는 크기는 1200x675 픽셀로, 2:1 종횡비를 제공합니다. 이렇게 하면 이미지가 카드를 효과적으로 채우고 레터박싱을 방지할 수 있습니다.

### 트위터 카드에 SVG 이미지를 사용할 수 있나요?

아니요, 트위터는 카드 이미지에 SVG를 지원하지 않습니다. PNG, JPG 또는 WebP 형식을 사용해야 합니다. GIF를 사용하면 첫 번째 프레임만 표시됩니다.

### 이 생성기는 트위터 카드 이미지의 다크 모드를 어떻게 처리하나요?

이 생성기는 트위터의 다크 모드 사용을 고려하여 어두운 배경 스타일을 선호하거나 템플릿에 다크 모드 변형을 제공합니다. 이를 통해 이미지가 다크 모드 타임라인에 자연스럽게 녹아들고, 트위터 사용자의 약 40%에게 시각적 매력을 유지합니다.

### '타임라인 안전 영역'이란 무엇이며, 트위터 카드 이미지에 왜 중요한가요?

'타임라인 안전 영역'은 핵심 콘텐츠(제목, 주요 시각 요소)를 배치해야 하는 이미지의 상위 60%를 의미합니다. 이는 트위터가 트윗이 확장되기 전까지 모바일 타임라인에서 이미지를 약 1:1로 자르기 때문에 중요하며, 하위 20%에 있는 콘텐츠는 잘릴 수 있습니다.