Community이미지github.com

이미지 캐러셀

Fringe Lines 스타일의 이미지 캐러셀(Instagram/LinkedIn, 1080×1350 PNG 슬라이드 + PDF)을 제작합니다. 에피소드나 주제로부터 캐러셀, 슬라이드 게시물, 또는 '스와이프' 게시물을 요청할 때 사용하세요.

이미지 캐러셀란 무엇인가요?

이 스킬은 Fringe Lines 브랜드의 소셜 미디어 캐러셀(Instagram/ LinkedIn, 1080×1350 PNG 슬라이드 + PDF)을 생성하는 전문 도구입니다. 사진 슬라이드(하단이 어두워진 전체 이미지 위에 굵은 대문자 헤드라인), 큰 텍스트 전용 슬라이드, 차트/스크린샷 슬라이드, 설명 그래픽 슬라이드, 그리고 행동 유도(CTA) 슬라이드로 구성된 7~10개의 슬라이드를 계획하고 제작합니다. 핵심 원칙은 호스트나 게스트의 사진을 절대 사용하지 않으며, 텍스트, 자체 제작 그래픽, 비인물 이미지(차트, 스크린샷 등)만 사용한다는 것입니다. Remotion 템플릿(`Carousel.tsx`)과 Python 빌드 스크립트(`build_carousel.py`)를 기반으로 작동하며, 각 캐러셀은 고유한 폴더(`carousels/<slug>/`)에 `carousel.json` 설정 파일과 이미지 하위 폴더를 포함합니다. 사용자는 에피소드 내용을 바탕으로 슬라이드 순서와 유형을 계획하고, `carousel.json`에 각 슬라이드의 유형, 헤드라인, 이미지 경로 등을 JSON 형식으로 작성하면, 스크립트가 자동으로 PNG 슬라이드와 PDF를 생성합니다. 또한 `--youtube` 플래그를 추가하면 YouTube 게시물용 정사각형(1080×1080) 버전도 렌더링할 수 있습니다.

지원 대상✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/qdevery/fringe-lines-video/tree/main/.agents/skills/carousel

Installed? Explore more 이미지 skills: steipete/songsee, affaan-m/frontend-design, mattpocock/improve-codebase-architecture · View all 6 →

즐겨 사용하는 AI에게 물어보기

이 에이전트 스킬이 미리 로드된 새 채팅을 엽니다.

문서

이미지 캐러셀은(는) 무엇을 하나요?

스타일은 참조 캐러셀에서 비롯됩니다:

  • 스피커 없음: 캐러셀은 호스트의 영상이나 사진을 절대 사용하지 않습니다. 텍스트, 당사가 제작한 그래픽, 그리고 차트나 스크린샷과 같은 비인물 이미지만 사용합니다.
  • 사진 슬라이드: 하단이 어두워진 전체 이미지 위에 굵은 압축 대문자 헤드라인이 배치됩니다. 핵심 단어는 강조 색상으로 표시됩니다.
  • 커버: 브랜드 키커가 있는 얇은 라인.
  • 텍스트 전용 슬라이드: 어두운 그라데이션 배경, 강조 색상의 제목, 굵은 흰색 부제목, 일반 본문. 글꼴 크기는 참조보다 의도적으로 더 큽니다(1080 너비 기준 제목 92, 부제목 60, 본문 52px).

구성 요소:

  • 템플릿: pipeline/remotion/src/Carousel.tsx, Remotion Carousel 컴포지션으로, 정지 이미지로 렌더링됩니다.
  • 빌드: pipeline/build_carousel.py.
  • 각 캐러셀은 고유한 폴더 carousels/<slug>/에 carousel.json 파일과 images/ 하위 폴더를 포함합니다.
  • 출력: out/carousels/<slug>/01.png … 및 <slug>.pdf로, LinkedIn 문서 게시물로 바로 업로드할 수 있습니다.

1. 스토리 계획하기 (7–10 슬라이드)

  1. 커버: 약속이나 호기심을 유발하는 내용 (예: "이번 주 대부분의 팀이 놓치고 있는 5가지 AI 신호" 또는 "아무도 이야기하지 않는 전 세계의 좋은 소식"). 8–14 단어로 작성하세요.
  2. 슬라이드당 하나의 아이디어: 사실, 핵심 내용 또는 단계. 헤드라인은 캡션 없이도 이해가 되어야 합니다.
  3. 슬라이드 유형을 섞으세요. 사진 세 개나 텍스트 슬라이드 세 개를 연속으로 배치하지 마세요. 일반적인 패턴: 커버 → 사진 → 사진/차트 → 그래픽 → 텍스트 → 사진 → 텍스트 → CTA.
  4. 마지막은 CTA: "Fringe Lines 팔로우", "다음 기획 회의를 위해 저장하세요".

강조: 헤드라인당 1–4 단어를 *…*로 감싸고, 보통 주제나 숫자를 강조합니다. 슬라이드당 최대 두 개의 강조 그룹을 사용하세요.

2. 시각 자료: 절대 스피커 없음

캐러셀은 호스트나 게스트를 절대 보여주지 않습니다. 즉, 카메라 프레임, 헤드샷, "말하는 사람의 사진"(심지어 흐리게 처리된 것도)이 없습니다. 모든 슬라이드는 텍스트, 당사가 제작한 그래픽, 비인물 이미지로 구성됩니다.

이미지는 carousels/<slug>/images/에 배치됩니다. 출처는 선호도 순서대로:

  • 당사가 제작한 그래픽:
    • graphic 슬라이드(Graphics.tsx의 stat / people / lines / quote / headline / list 유형);
    • 이미지가 필요 없는 타이포그래피 cover;
    • graphic 카드가 있는 cover;
    • image 슬라이드로 드롭된 완성된 인포그래픽 PNG(인포그래픽 스킬 참조).
  • 에피소드 화면 공유: 차트, 슬라이드, 제품 화면. 카메라는 절대 포함하지 않음.
    • ffmpeg -ss <sec> -i "<raw>/Quinn's screen-3.mp4" -frames:v 1 -vf "crop=iw:ih*0.895:0:ih*0.105" images/chart.png로 캡처; 크롭은 브라우저 크롬을 제거합니다.
    • 관련 부분을 자르고, fit: "contain"으로 표시하며, 차트의 원본 게시자를 표시합니다.
    • 상업적 게시물의 경우, 타사 차트를 기본 숫자에서 자체 lines 또는 stat 그래픽으로 다시 그리는 것을 고려하세요.
  • 사용자의 비인물 이미지: 제품 스크린샷, 로고, 장소 또는 사물 사진.
  • AI 생성 또는 스톡 이미지: 사용자가 요청하는 경우에만.
    • 실제 인물(호스트 포함)이나 실제 이벤트의 가짜 "사진" 없음.
    • 스톡 사진 출처를 표시하고 라이선스가 있는 것만 사용하세요.

인용문은 텍스트(quote 그래픽, 이름으로 출처 표시)로 사용해도 괜찮습니다. 단, 화자의 이미지와 함께 쌍으로 사용하지 마세요.

3. carousels/<slug>/carousel.json 작성

{
  "brand": "Fringe Lines",
  "accent": "#FF5A1F",
  "slides": [
    {"type": "cover", "kicker": "Fringe Lines · Oct 30",
     "headline": "이번 주 대부분의 팀이 놓치고 있는 *5가지 AI 신호*"},
    {"type": "cover", "kicker": "Fringe Lines", "headline": "매출은 증가. *인원은 동결.*",
     "graphic": {"type": "lines", "series": [{"label": "매출", "shape": "up"}, {"label": "인원", "shape": "flat"}]}},
    {"type": "photo", "image": "images/horses.jpg", "focus": [0.4, 0.4], "credit": "Photo: …",
     "headline": "*프르제발스키 말*이 수십 년 만에 야생으로 돌아왔습니다. *보존 노력* 덕분에"},
    {"type": "photo", "image": "images/chart.png", "fit": "contain", "credit": "Chart: …",
     "headline": "마이크로소프트의 *매출은 계속 상승*했지만 인원은 동결되었습니다"},
    {"type": "graphic", "headline": "앤트로픽의 S-1, *한 숫자로*",
     "graphic": {"type": "stat", "kicker": "순 매출 유지율", "value": 900, "suffix": "%", "label": "…"}},
    {"type": "text", "number": "04", "title": "사후 검토 실행하기",
     "subtitle": "미 육군은 모든 훈련을 다음 네 가지 질문으로 마무리합니다:",
     "body": "무슨 일이 일어나야 했는가, 실제로 무슨 일이 일어났는가, 왜 그런가, 다음에 무엇을 바꿀 것인가."},
    {"type": "cta", "headline": "*Fringe Lines* 팔로우", "sub": "매주 새로운 에피소드"}
  ]
}
typefieldsnotes
coverheadline, kicker?, graphic?, image?, focus?Kicker는 두 개의 규칙 사이에 위치하며, 오른쪽 하단에 "SWIPE →"가 표시됩니다. image가 없으면: 어두운 강조광 커버(더 큰 헤드라인의 텍스트 전용)이거나 헤드라인 위에 graphic 카드가 있는 커버입니다. image는 비인물 사진에만 사용합니다
photoimage, focus?, fit?, headline, credit?사람 없음. focus = 0–1 사이의 [x, y]로, 유지할 이미지 부분입니다. 차트와 스크린샷에는 fit: "contain"을 사용하세요(전체 이미지를 흐리게 복사한 위에 표시).
texttitle, subtitle?, body?, number?큰 활자. 본문 텍스트는 20–45 단어가 적당하며, 긴 텍스트는 약간 작아지므로 여러 슬라이드로 나누는 것이 좋습니다
graphicgraphic, headline?, credit?모든 Graphics.tsx 유형, 완전히 애니메이션되어 나타납니다. 세리프 헤드라인. 실제 숫자에는 bars를 사용하세요: {"type":"bars","kicker","signed":true,"suffix":"%","rows":[{"label","value","from?","note?","hi?"}]} (음수는 파란색으로 왼쪽으로 증가하며 hi 행은 강조 색상). 스크린샷보다는 bars로 타사 차트를 다시 그리는 것을 선호합니다
ctaheadline, sub?잉크 배경, 브랜드 워드마크
imageimage완성된 4:5 이미지(예: 인포그래픽 PNG)를 있는 그대로 표시합니다
  • 강조 색상: accent의 기본값은 Fringe Lines 주황색입니다. "#E2A85A"는 참조의 금색 느낌을 줍니다.
  • 슬라이드 번호: 사진 및 텍스트 슬라이드는 오른쪽 상단에 n/전체가 자동으로 표시됩니다.

정직성:

  • 사실과 숫자는 에피소드나 명명할 수 있는 출처에서 가져와야 합니다. credit에 출처를 명시하세요.
  • 호스트가 출처를 밝히지 않은 경우 "쇼에서 인용됨"이라고 작성하세요.
  • 통계를 조작하지 마세요. 숫자를 확인해야 한다면 사용자에게 알리세요.

4. 렌더링

~/.shorts-skill/bin/python pipeline/build_carousel.py carousels/<slug>

8–10개 슬라이드의 경우 약 30–60초가 소요되며 out/carousels/<slug>/에 PNG와 PDF를 작성합니다.

YouTube 게시물: --youtube를 추가하여 1080×1080 정사각형을 out/carousels/<slug>-youtube/에 렌더링합니다. YouTube는 게시물 이미지를 정사각형으로 표시하므로 4:5 슬라이드는 잘립니다. 동일한 carousel.json이 작동합니다. v1 템플릿은 정사각형에 맞게 레이아웃을 조정합니다. "template": "v2"에서는 아직 지원되지 않습니다.

5. 품질 관리

연락처 시트를 만들고 확인하세요:

ffmpeg -v error -y -pattern_type glob -i "out/carousels/<slug>/*.png" -vf "scale=360:-1,tile=4x3" -frames:v 1 /tmp/sheet.png

다음을 확인하세요:

  • 어떤 슬라이드에도 호스트, 게스트 또는 실제 인물이 표시되지 않습니다.
  • 헤드라인이 5줄을 초과하거나 크레딧과 겹치지 않습니다.
  • 얼굴과 주제가 잘리지 않았습니다. 필요한 경우 focus를 조정하세요.
  • 차트를 읽을 수 있습니다. fit: "contain"을 사용하고 필요한 경우 스크린샷을 더 좁게 자르세요.
  • 강조는 색상으로 표시되며, 문자 그대로의 *가 아닙니다.
  • 텍스트 슬라이드의 마지막 줄에 외톨이 단어가 없습니다. 있으면 단어를 바꾸거나 슬라이드를 나누세요.

사용자에게 보고할 내용:

  • 슬라이드 목록;
  • 각 이미지의 출처(화면 공유, 제공, 또는 자체 제작);
  • 확인이 필요한 숫자.

Individual skills in this repo

This repo contains 4 individual skills — each has its own dedicated page.

editorial-short

Make a Fringe Lines vertical short in the "editorial" style (paper background, speaker that morphs between full-bleed / card / round PiP, explainer graphics, word-by-word serif captions, hook + end card, SFX). Use when asked to make, restyle or fix a short from an episode.

engaging-monologue

Make a 16:9 FringeLines "engaging monologue" video from a solo talking-head take — jump cuts with punch-ins, the speaker shrinking into a portrait picture-in-picture while serif kinetic text, diagrams (pyramid stack, compare, roadmap, steps, big stat) and b-roll cards build on a paper canvas, plus callout cards, lower thirds, chips, a CTA pill and a green end card, all synced word by word to the speech. Use for YouTube explainers, solo commentary, newsletter-to-video and "one idea, told well" pieces.

infographic

Make a single-image editorial infographic (1080x1350) that explains one idea at a glance — two-tone headline, one-sentence dek, a hero visual with 2–4 numbered callouts and leader lines, an optional side note, a three-column "why it matters" row with icons, byline and sources. Use for "explain X in one graphic" posts about a company move, a framework, an architecture or a trend; the PNG can also be a carousel slide.

podcast-intro

Build the cold open for a long-form Fringe Lines episode — a 35–60 s highlight reel of the episode's best lines with explainer-graphic cutaways, keyword captions, whip transitions + SFX, ending on a title card with the topic list. Use when making or revising the intro of a full episode.

관련 스킬