cardnews-maker

name	cardnews-maker
description	AI 에이전트 팀(기획/카피/검수) 기반 카드뉴스 자동 제작 스킬. gifgrep으로 GIF를 검색하여 삽입하고, 다크/라이트 두 버전의 HTML 카드뉴스를 생성한다. 사용 시점: (1) "카드뉴스 만들어줘", (2) 주제나 URL을 주고 카드뉴스 요청, (3) "카드뉴스", "카드 뉴스", "card news" 언급 시 활성화. tmux 환경에서는 제작/검수 과정을 스플릿 패인으로 실시간 모니터링 가능.

카드뉴스 제작 스킬

주제 또는 URL → 인스타그램 피드 사이즈(1080×1350, 4:5) 카드뉴스 8장을 자동 제작한다.

사전 조건 확인

which gifgrep  # 없으면: brew install steipete/tap/gifgrep

워크플로

STEP 1: 입력 처리

주제 직접 입력: 그대로 STEP 2로 진행.

URL 입력:

1. WebFetch로 글 내용 추출. prompt에 "전체 내용을 상세하게 추출, 핵심 메시지와 주요 내용을 구조화"를 지정.
2. 추출 실패 시(403, 타임아웃 등): 사용자에게 글 내용을 직접 붙여넣도록 요청.
3. 추출된 내용에서 핵심 메시지, 주요 내용(3~5개), 대상 독자를 정리.

STEP 2: 3인 에이전트 팀 (병렬)

3개의 Agent를 하나의 메시지에서 동시에 호출. model: "sonnet" 지정.

Agent 1 — 기획자 소연:

• 8장 슬라이드 구성표 (장 | 역할 | 내용)
• 핵심 메시지 1문장
• 정보 흐름 설계

프롬프트에 "코드를 작성하지 말고, 텍스트 기획안만 출력" 명시.

Agent 2 — 카피라이터 태양:

• 1장: 스크롤 멈추는 훅 문장
• 26장: 슬라이드당 23줄, 핵심만
• 7장: 핵심 요약 3줄
• 8장: 저장/공유 유도 CTA

프롬프트에 "코드를 작성하지 말고, 카피 텍스트만 출력" 명시.

Agent 3 — 검수자 미래:

• 사실 오류/과장 체크
• 빠진 중요 정보 확인
• 필수 수정 / 권장 수정 분류
• 등급 판정 (A/B/C)

프롬프트에 "코드를 작성하지 말고, 검수 의견만 출력" 명시.

각 에이전트 프롬프트에 주제, 대상 독자, 핵심 내용을 포함한다. 검수의 필수 수정사항은 STEP 4에서 반드시 반영한다.

STEP 3: GIF 수집

gifgrep 설치된 경우:

8개 Bash를 하나의 메시지에서 동시 실행:

gifgrep "{영어 키워드}" --max 1 --format url 2>/dev/null

키워드 선정: references/gif-keywords.md 참고. 결과가 부적합하면 대체 키워드로 재검색.

gifgrep 미설치 시 (이모지 fallback):

STEP 3을 건너뛰고, STEP 4에서 에이전트에게 아래를 추가 지시:

• .gif-area에서 <img> 대신 .gif-area--emoji 클래스 사용
• <span class="emoji-icon">이모지</span>로 대체
• 슬라이드별 적절한 이모지 선정 (예: 1장 😵‍💫, 7장 ✅, 8장 🚀)
• 템플릿 하단의 "gifgrep 미설치 시 이모지 fallback" 주석 참고

STEP 4: HTML 생성 (다크/라이트 병렬)

2개의 Agent를 동시에 호출. 각 에이전트에게 전달:

1. 카피라이터 태양의 텍스트 (검수 필수사항 반영본)
2. 8개 GIF URL (또는 이모지 fallback 지시)
3. 디자인 스펙 — references/design-spec.md 읽기
4. HTML 템플릿 — assets/template-dark.html 또는 assets/template-light.html 읽기

에이전트 지시: "템플릿의 주석 처리된 마크업 구조를 참고하여, 8장 전체 슬라이드를 완성된 HTML로 Write 도구를 사용해 저장하라. {{PLACEHOLDER}}는 모두 실제 콘텐츠로 교체하라."

출력 파일명: cardnews/{슬러그}_dark.html, cardnews/{슬러그}_light.html

STEP 5: 모니터링 + 확인

tmux 환경 감지 시 ($TMUX 변수 존재):

1. 제작/검수 쉘 스크립트 생성 (슬라이드별 진행률 + 검수 결과)
2. tmux split-window -h "bash review.sh" → bash produce.sh &
3. 완료 후 open 명령으로 브라우저에서 두 버전 열기

tmux 아닌 환경: 결과 요약만 텍스트로 출력하고, open으로 브라우저에서 연다.

STEP 6: MP4 변환 (선택)

인스타그램에 GIF 움직임을 살려서 올리려면 MP4로 변환한다.

사전 조건:

• Node.js + puppeteer (npm install puppeteer)
• ffmpeg (brew install ffmpeg)

변환 명령:

node scripts/html2mp4.mjs {슬러그}_dark.html 4 output
node scripts/html2mp4.mjs {슬러그}_light.html 4 output

결과: 슬라이드별 MP4 8개 (1080×1350px, H.264, 인스타 피드 호환)

인스타 업로드: output/ 폴더의 MP4 8개를 AirDrop으로 전송 → 캐러셀로 업로드.

출력 구조

cardnews/
├── {슬러그}_dark.html
├── {슬러그}_light.html
├── produce_{슬러그}.sh     (tmux 환경시)
└── review_{슬러그}.sh      (tmux 환경시)

주의사항

• GIF URL은 Tenor CDN 링크. 장기 보존 시 gifgrep --download로 로컬 저장 권장.
• Google Fonts CDN 의존. 오프라인 시 폰트 미로드.
• 기본 사이즈: 인스타 피드 4:5. 다른 사이즈 필요 시 사용자에게 확인.
• 비용: 카드뉴스 1세트당 약 $2~3 (sonnet 기준).
• HTML 생성 시 @import url()은 반드시 태그 안에 위치해야 함. 밖에 있으면 텍스트로 노출됨.
• body CSS는 flex-direction: column + align-items: center 사용. flex-wrap: wrap 사용 금지 (카드가 나란히 배치됨).