인포그래픽 생성기
모든 콘텐츠, 데이터 또는 주제로부터 완전한 인포그래픽 사양을 생성합니다. 구조화된 레이아웃 + 모든 카피 + 데이터 포인트 + 색상 구성표를 출력하여 HTML/CSS, Satori(서버사이드), Canva, Figma 또는 모든 디자인 도구에서 렌더링할 준비가 됩니다.
이미지가 포함된 LinkedIn 게시물은 참여율이 2~3배 증가합니다. 이 스킬은 디자인 기술 없이도 콘텐츠를 시각적 자산으로 전환합니다.
content-pipeline의 Satori 렌더링에서 영감을 받음: AI가 콘텐츠 작성 → 구조화된 사양 → 브랜드 이미지로 렌더링.
단계
이 스킬은 S2: 콘텐츠 단계에 속합니다.
사용 시점
viral-post-writer가 LinkedIn 게시물을 만든 후 – 시각 자료 추가content-research-brief가 통계를 수집한 후 – 시각화- 비교 콘텐츠를 만들 때 – 기능/가격 비교 차트
- 데이터 또는 통계를 공유할 때 – 통계 하이라이트 카드
- 목록형 콘텐츠를 만들 때 – 시각적 체크리스트 또는 번호 목록
- 브랜드 이미지가 도움이 되는 모든 소셜 미디어 게시물
입력 스키마
content: string # (필수) 시각화할 콘텐츠 – 게시물 텍스트, 데이터 또는 기사
infographic_type: string # (선택 사항, 기본값: 자동 감지)
# "stat_highlight" — 1~3개의 주요 숫자, 크고 굵게
# "comparison" — 제품/기능 나란히 비교
# "process_flow" — 단계별 워크플로 또는 방법
# "checklist" — 체크 표시가 있는 항목 목록
# "timeline" — 시간순 이벤트
# "data_chart" — 막대/원형 차트 표현
# "quote_card" — 출처가 있는 주요 인용
# "feature_grid" — 아이콘이 있는 기능/혜택 그리드
platform: string # (선택 사항, 기본값: "linkedin")
# "linkedin" — 1080×1350 (세로, 최적 참여율)
# "instagram" — 1080×1080 (정사각형)
# "twitter" — 1200×675 (가로)
# "facebook" — 1200×630
# "blog" — 1200×800 (대표 이미지)
brand: object # (선택 사항) 브랜드 사용자 정의
name: string # 회사/개인 브랜드 이름
primary_color: string # 16진수 — "#0066FF"
secondary_color: string # 16진수 — "#1A1A2E"
accent_color: string # 16진수 — "#FF6B35"
font_style: string # "modern" | "classic" | "bold" | "minimal"
logo_text: string # 텍스트 기반 로고 — "Affitor" | "@yourhandle"
output_format: string # (선택 사항, 기본값: "spec")
# "spec" — 구조화된 JSON 사Spec (모든 렌더러용)
# "html" — 렌더링 가능한 HTML/CSS (자체 포함)
# "both" — 사양 + HTML
워크플로
1단계: 콘텐츠 분석 및 유형 선택
입력 콘텐츠를 읽고 최적의 인포그래픽 유형을 감지합니다:
| 콘텐츠 패턴 | 자동 감지 유형 |
|---|---|
| 1~3개의 두드러진 숫자/통계 포함 | stat_highlight |
| "vs", 비교 데이터 포함 | comparison |
| 번호가 매겨진 단계 또는 프로세스 포함 | process_flow |
| 항목 목록(3~10개) 포함 | checklist 또는 feature_grid |
| 날짜 또는 시간순 이벤트 포함 | timeline |
| 주목할 만한 인용 포함 | quote_card |
| 백분율 또는 비율 포함 | data_chart |
infographic_type이 제공되면 해당 유형을 사용합니다. 그렇지 않으면 자동 감지합니다.
2단계: 시각적 데이터 추출
콘텐츠에서 인포그래픽에 표시되어야 할 항목을 정확히 추출합니다:
stat_highlight의 경우:
stats:
- number: "30%" # 큰 숫자
label: "commission" # 측정 대상
context: "recurring" # 추가 컨텍스트
- number: "60"
label: "cookie days"
context: "industry avg: 30"
comparison의 경우:
items:
- name: "HeyGen"
features:
- label: "Commission"
value: "30% recurring"
highlight: true # 이 행의 승자
- label: "Cookie"
value: "60 days"
highlight: true
- name: "Synthesia"
features:
- label: "Commission"
value: "25% one-time"
highlight: false
- label: "Cookie"
value: "30 days"
highlight: false
process_flow의 경우:
steps:
- number: 1
title: "Research"
description: "Find winning programs"
icon: "🔍"
- number: 2
title: "Create"
description: "Write content that converts"
icon: "✍️"
checklist의 경우:
items:
- text: "Recurring commission"
checked: true
- text: "60+ day cookie"
checked: true
- text: "Free trial available"
checked: true
- text: "Dedicated affiliate manager"
checked: false
3단계: 레이아웃 디자인
유형 + 플랫폼에 따라 레이아웃을 정의합니다:
플랫폼 치수:
| 플랫폼 | 너비 | 높이 | 비율 |
|---|---|---|---|
| 1080 | 1350 | 4:5 (세로) | |
| 1080 | 1080 | 1:1 (정사각형) | |
| 1200 | 675 | 16:9 (가로) | |
| 1200 | 630 | ~2:1 | |
| Blog | 1200 | 800 | 3:2 |
레이아웃 구조 (모든 유형):
┌─────────────────────────────┐
│ HEADER │ 10-15% 높이
│ Headline / Title │
├─────────────────────────────┤
│ │
│ BODY │ 70-80% 높이
│ Data / Content │
│ (유형별 레이아웃) │
│ │
├─────────────────────────────┤
│ FOOTER │ 10% 높이
│ Brand / CTA / Source │
└─────────────────────────────┘
4단계: 색상 구성표 생성
브랜드 색상이 제공된 경우: 직접 사용합니다.
브랜드 색상이 없는 경우: 전문적인 팔레트를 생성합니다:
# 기본 전문 팔레트 옵션
palettes:
dark_modern: # 어두운 배경, 밝은 텍스트
bg: "#1A1A2E"
text: "#FFFFFF"
accent: "#0066FF"
secondary: "#16213E"
light_clean: # 밝은 배경, 어두운 텍스트
bg: "#FFFFFF"
text: "#1A1A2E"
accent: "#0066FF"
secondary: "#F0F4F8"
warm_bold: # 따뜻한 톤
bg: "#FFF8F0"
text: "#2D2D2D"
accent: "#FF6B35"
secondary: "#FFE8D6"
dark_gradient: # 그라데이션 어두움
bg: "linear-gradient(135deg, #1A1A2E, #16213E)"
text: "#FFFFFF"
accent: "#00D4AA"
secondary: "#2A2A4A"
플랫폼에 따라 자동 선택:
- LinkedIn →
dark_modern또는light_clean(전문적) - Twitter →
dark_gradient또는warm_bold(시선 끌기) - Instagram → 모두 가능 (가장 시각적 유연성)
5단계: 모든 카피 생성
인포그래픽에 나타나는 모든 텍스트를 작성합니다:
copy:
headline: string # 주요 제목 — 굵고, 짧게 (최대 8단어)
subheadline: string # 선택적 보조 줄
body_items: string[] # 데이터 레이블, 설명 등
cta: string # 행동 유도 텍스트 — "Link in bio" | "See comments for link"
footer: string # 브랜드 이름 또는 @핸들
source: string # "Data: openaffiliate.dev" 또는 출처 표시
카피 규칙:
- 헤드라인: 3~8단어, 대담한 주장 또는 구체적인 숫자
- 모든 텍스트는 모바일 크기에서 읽을 수 있어야 함 (너무 작지 않음)
- 인포그래픽 전체 단어 수 50개 이하 (적을수록 좋음)
- 데이터 > 형용사 (숫자를 표시하고, "놀라운" 또는 "엄청난" 같은 형용사 사용 금지)
6단계: 출력
사양 출력 (기본값):
모든 렌더러가 사용할 수 있는 완전한 구조화된 사양:
infographic_spec:
type: string
platform: string
dimensions:
width: number
height: number
colors:
background: string
text: string
accent: string
secondary: string
layout:
header: object
body: object
footer: object
data: object # 유형별 데이터 (통계, 비교 항목, 단계 등)
copy:
headline: string
subheadline: string
body_items: string[]
cta: string
footer: string
source: string
HTML 출력 (output_format이 "html" 또는 "both"인 경우):
정확한 치수로 인포그래픽을 렌더링하는 인라인 CSS가 포함된 자체 포함 HTML 파일을 생성합니다. 이 파일은 다음과 같이 사용할 수 있습니다:
- 브라우저에서 열고 스크린샷 촬영
- Satori 또는 Puppeteer를 사용하여 서버사이드 렌더링
- 디자인 반복의 시작점으로 사용
<!-- 자체 포함, 외부 종속성 없음 -->
<div style="width: 1080px; height: 1350px; ...">
<!-- 헤더 -->
<!-- 본문 (유형별) -->
<!-- 푸터 -->
</div>
7단계: 자체 검증
출력을 제시하기 전에 다음을 확인합니다:
- 인포그래픽 총 단어 수 ≤ 50단어
- 모든 텍스트를 50% 축소에서 읽을 수 있음 (최소 유효 글꼴 크기)
- 색상 대비가 접근성 기준 충족 (WCAG AA: 4.5:1 비율)
- 데이터 포인트가 정확하고 출처가 표시됨
- 레이아웃이 답답하지 않음 — 여백이 의도적으로 배치됨
- 플랫폼 치수가 정확함
어느 항목이든 실패하면 수정 후 전달합니다.
출력 형식
## 인포그래픽: [헤드라인]
### 사양
- **유형:** [stat_highlight]
- **플랫폼:** [LinkedIn] — 1080×1350
- **색상:** [dark_modern] — bg: #1A1A2E, accent: #0066FF
### 미리보기 (텍스트 표현)
┌─────────────────────────────────┐
│ │
│ HeyGen vs Synthesia │
│ The Real Comparison │
│ │
│ ┌──────────┐ ┌──────────┐ │
│ │ HeyGen │ │Synthesia │ │
│ │ │ │ │ │
│ │ 30% rec. │ │ 25% once │ │
│ │ 60 days │ │ 30 days │ │
│ │ ★ 127 │ │ ★ 84 │ │
│ └──────────┘ └──────────┘ │
│ │
│ 🏆 Winner: HeyGen │
│ │
│ ─────────────────────────── │
│ @yourhandle · openaffiliate.dev │
└─────────────────────────────────┘
### 데이터
[YAML 또는 JSON 형식의 구조화된 사양]
### HTML (요청된 경우)
[자체 포함 HTML/CSS 코드 블록]
### 다음 단계
- `viral-post-writer`의 바이럴 게시물과 함께 [플랫폼]에 게시
- 다른 플랫폼용 변형 생성: `--platform instagram`
- `content-research-brief`의 다른 데이터로 더 많은 인포그래픽 생성
오류 처리
- 콘텐츠에서 추출 가능한 데이터 없음: 대신
quote_card또는checklist유형을 생성합니다. 참고: "수치 데이터를 찾을 수 없습니다. 대신 [유형] 인포그래픽을 생성했습니다." - 하나의 인포그래픽에 데이터가 너무 많음: 가장 영향력 있는 상위 3~5개 데이터 포인트를 선택합니다. 참고: "콘텐츠에 [X]개의 데이터 포인트가 있습니다. 시각적 명확성을 위해 가장 영향력 있는 [Y]개를 선택했습니다. 여러 인포그래픽 생성을 고려하세요."
- 브랜드 색상 없음: 기본 팔레트를 사용합니다. 참고: "브랜드 색상이 지정되지 않았습니다. [팔레트 이름]을 사용합니다. 일관된 브랜딩을 위해 브랜드 색상을 추가하세요."
- HTML 출력이 너무 복잡함: 레이아웃을 단순화합니다. 인포그래픽은 단순해야 합니다. 복잡성은 시각적 임팩트를 떨어뜨립니다.
예시
예시 1: 사용자: "LinkedIn용 HeyGen 대 Synthesia 비교 인포그래픽을 만들어 줘" → 유형: comparison, 플랫폼: linkedin (1080×1350) → 추출: 각각 수수료, 쿠키, 평점, 가격 → 출력: 승자가 강조된 나란히 비교 카드 → 어두운 모던 팔레트, 굵은 숫자
예시 2: 사용자: "연구 브리프에서 HeyGen의 주요 숫자를 보여주는 통계 카드를 만들어 줘" → 유형: stat_highlight, 플랫폼: linkedin → 추출: "$60M raised", "40K businesses", "30% commission" → 출력: 레이블과 컨텍스트가 있는 3개의 큰 숫자
예시 3: 사용자: "제휴 퍼널 단계를 인포그래픽으로 시각화해 줘" → 유형: process_flow, 플랫폼: blog (1200×800) → 단계: Research → Content → Landing → Deploy → Track → Optimize → 출력: 아이콘과 간단한 설명이 있는 가로 흐름
피드백 및 이슈 보고
이 스킬이 예상치 못한, 불완전하거나 잘못된 출력을 생성하는 경우, skill_feedback 블록을 생성합니다 (전체 스키마는 shared/references/feedback-protocol.md 참조).
스킬별 실패 모드:
- 콘텐츠에서 추출 가능한 데이터 없음: 콘텐츠가 순전히 서사적이고 통계/숫자가 없음.
data_quality로 보고. - HTML 출력이 올바르게 렌더링되지 않음: CSS 문제, 잘못된 치수, 텍스트 오버플로. HTML과 함께
wrong_output으로 보고. - 인포그래픽의 단어가 너무 많음: 50단어 초과 시 읽을 수 없음.
wrong_output으로 보고.
자동 감지 트리거:
infographic_spec.data에 데이터 포인트가 2개 미만인 경우- 모든 카피 필드의 총 단어 수가 60개를 초과하는 경우
- 치수가 선언된 플랫폼과 일치하지 않는 경우
이슈 보고: GitHub Issues | Discussions
참고 자료
shared/references/social-data-providers.md— 인포그래픽 콘텐츠용 데이터 소스shared/references/platform-rules.md— 플랫폼별 이미지 요구 사항shared/references/flywheel-connections.md— 마스터 플라이휠 연결 맵shared/references/feedback-protocol.md— 이슈 감지 및 보고 표준
플라이휠 연결
공급 대상
social-media-scheduler(S5) — 게시물과 함께 예약 준비된 인포그래픽landing-page-creator(S4) — 히어로 이미지 또는 섹션 시각 자료로서의 인포그래픽email-drip-sequence(S5) — 이메일 시각 콘텐츠로서의 인포그래픽bio-link-deployer(S5) — 링크 허브의 인포그래픽
공급원
content-research-brief(S2) — 시각화를 위한 주요 통계 및 데이터viral-post-writer(S2) — 동반 시각 자료를 만들 게시물 콘텐츠affiliate-blog-builder(S3) — 대표 이미지 인포그래픽용 블로그 데이터trending-content-scout(S1) — 벤치마크 시각 자료용 참여 데이터traffic-analyzer(S1) — 비교 인포그래픽용 트래픽 데이터comparison-post-writer(S3) — 시각 형식용 비교 데이터commission-calculator(S1) — 통계 하이라이트용 수수료 데이터
피드백 루프
- S6 인포그래픽 포함 게시물 vs 미포함 게시물 →
performance-analyzer(S6) → 인포그래픽 생성 최적화 - 사용자 피드백 (클릭, 공유, 댓글) →
trending-content-scout(S1) → 인포그래픽 유형 개선