Card News Generator

인스타그램/SNS용 카드뉴스를 자동 생성하는 스킬. 주제를 입력하면 → HTML 디자인 → Playwright 스크린샷 → 업로드용 이미지 생성. 다크 에디토리얼 스타일(사진 커버 + 다크 텍스트 카드) 기본 제공. "카드뉴스", "인스타 콘텐츠", "캐러셀", "card news", "carousel" 키워드에 반응.

주제만 주면 인스타그램 캐러셀 카드뉴스를 자동 생성합니다.

디자인 시스템

기본 스타일: Dark Editorial (검증 완료)

커버: 사진 배경 + 다크 그라데이션 + 큰 텍스트 내부 카드: #0A0A0A 다크 배경 + 텍스트 중심 + 블루 포인트

레퍼런스: highoutputclub, oneononenote 스타일

디자인 토큰

text

배경: #0A0A0A (거의 블랙)
텍스트 메인: #FFFFFF
텍스트 서브: rgba(255,255,255,0.5)
포인트 블루: #60A5FA
포인트 옐로: #FBBF24
포인트 그린: #34D399
폰트: Pretendard (웹폰트)
카드 사이즈: 1080x1350px (4:5 인스타 세로형)
커버 제목: 96-104px, 900 weight
내부 제목: 44px, 900 weight
본문: 27px, 400 weight
프롬프트 블록: 24px

카드 구조

text

커버 (1장)
├── 배경 사진 (Unsplash 무료, opacity 0.45)
├── 다크 그라데이션 오버레이
├── 핸들 @lio_universe_00
├── 대형 제목 (96-104px, 핵심 키워드 블루 강조)
├── 서브타이틀 (34px, 반투명)
└── 페이지 인디케이터 dots

내부 카드 (N장)
├── 상단: 라벨 + 페이지 번호
├── 배경 번호 (140px, 3% opacity)
├── 제목 (44px, 키워드 블루/옐로 강조)
├── 구분선 (48px)
├── 본문 (27px, 강조는 strong/blue)
├── 프롬프트 블록 또는 예시 (어두운 박스)
├── 결과/팁 블록 (블루 좌측 보더)
└── 핸들 워터마크

CTA (1장)
├── 이모지
├── 제목 + 서브
├── 3개 아이템 리스트
├── 팔로우 버튼
└── 핸들

워크플로우

1단계: 콘텐츠 기획

주제를 받으면:

• 커버 후킹 카피 작성 (호기심 유발)
• 5-7장 내부 카드 구성
• CTA 카드
• 캡션 작성 (카드 내용을 상세히 풀어쓴 글 + 해시태그 3-5개)

콘텐츠 품질 기준:

• "이거 다 아는 내용 아니야?" → NO. 논문/데이터/구체적 수치 필수
• 바로 복붙/실행 가능한 실용성
• 저장하고 싶은 정보 밀도

2단계: HTML 생성

템플릿 기반 HTML을 생성합니다.

bash

# 작업 디렉토리 생성
mkdir -p /Users/gyeuun/.openclaw/workspace/rio-interactive/card-news/{프로젝트명}/output

CSS 임포트 (필수):

css

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

배경 사진 (커버용):

• Unsplash에서 무료 다운로드
• 저장: photos/ 폴더
• 또는 기존 사진 활용: ../insta-first/photos-v5/ (ai-code.jpg, laptop-desk.jpg, ai-robot.jpg, ai-abstract.jpg)

잘림/겹침 방지 체크리스트:

• 내부 카드 padding: 상 110px, 좌우 80px, 하 90px
• 본문 텍스트가 프롬프트 블록과 겹치지 않는지
• 결과 블록이 카드 하단을 넘지 않는지
• 핸들 워터마크가 잘리지 않는지

3단계: 스크린샷 생성

javascript

const { chromium } = require('playwright');
const path = require('path');
(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage({
    viewport: { width: 1080, height: 1350 },
    deviceScaleFactor: 2
  });
  await page.goto('file://' + path.resolve('cards.html'), { waitUntil: 'networkidle' });
  const cards = await page.locator('.card').all();
  for (let i = 0; i < cards.length; i++) {
    await cards[i].screenshot({ path: `output/card_${i}.png` });
  }
  await browser.close();
})();

4단계: JPEG 변환 (업로드용)

PNG가 너무 크면 (>1MB) JPEG 변환:

bash

cd output
for f in *.png; do
  sips -s format jpeg -s formatOptions 90 "$f" --out "${f%.png}.jpg"
done

5단계: 업로드

API 업로드 (instagram-content-studio 스킬):

bash

cd /Users/gyeuun/.openclaw/workspace/skills/instagram-content-studio
node scripts/post-image.js \
  --env .env \
  --caption '캡션 텍스트' \
  ./output/cover.jpg ./output/card_1.jpg ...

API 레이트 리밋 걸릴 경우:

• 텔레그램으로 이미지 + 캡션 전송 → 대표님 수동 업로드
• 1시간 후 재시도
• 하루 1개 캐러셀 권장

캡션 작성 가이드

text

[후킹 1줄 - 질문 또는 충격적 사실]

[핵심 요약 2-3줄]

—

[카드별 상세 내용 - 각 번호별로 풀어서]

—

[CTA - 저장/팔로우 유도]

#해시태그1 #해시태그2 #해시태그3 #해시태그4 #해시태그5

• 해시태그: 3-5개만 (많으면 스팸 판정)
• 캡션 자체가 가치 있는 글이어야 함 (카드 요약 X, 추가 정보 O)
• 캡션에 키워드 SEO 중요 (2026 알고리즘)

인스타 운영 정책

• 게시 시간: 평일 오전 7-9시 / 점심 12-13시 / 저녁 19-21시
• 주 3회: 월/수/금 권장
• 저장(Save)이 최고 지표 — 저장하고 싶은 콘텐츠 = 알고리즘 노출 ↑
• 캐러셀 최대 20장 (2024년부터)
• 음악: API 불가, 앱에서 수동 추가
• 핸들: @lio_universe_00

대체 스타일

Toss Clean (밝은 배경)

• 템플릿: card-news/templates/toss-clean-v5.html
• 화이트 배경, #3182F6 블루 포인트, 깔끔한 카드

Toss Frosted (반투명 배경)

• 템플릿: card-news/templates/toss-frosted-v5b.html
• 사진 위 frosted glass 오버레이

사용자가 밝은 스타일 요청 시 위 템플릿 참고. 기본은 Dark Editorial.