캐러셀 결과물
만든과정 및 삽질
Phase 1. 시스템을 만들기 전에 반드시 정리해야 하는 것들
“인스타그램 캐러셀 콘텐츠를 자동화하고 싶다”는 막연한 출발점에서, Claude Code에게 “이 시스템을 만들려면 내가 뭘 정리해야 해?” 라고 질문하는 것부터 시작했습니다.
자동화 시스템이 제대로 작동하려면, AI가 추측하지 않도록 내 브랜드의 규칙을 명확하게 문서화해야 합니다. 아래 6가지가 없으면 자동화를 해도 매번 결과물이 다르고, 결국 수작업으로 돌아가게 됩니다.
정리해야 할 6가지
| # | 항목 | 왜 필요한가 | 정리 안하면 벌어지는 일 |
|---|---|---|---|
| 1 | 브랜드 디자인 시스템 | 색상, 폰트, 레이아웃 규칙이 있어야 일관된 결과물이 나옴 | 매번 다른 느낌의 캐러셀 → 브랜드 인식 불가 |
| 2 | 콘텐츠 유형별 슬라이드 구조 | 유형마다 최적의 장수와 흐름이 다름 | AI가 매번 다른 구조로 만들어서 퀄리티 들쭉날쭉 |
| 3 | 카피 톤앤매너 가이드 | 브랜드 고유의 말투와 금지 표현이 있어야 통일감 유지 | AI가 일반적인 톤으로 작성 → “우리 콘텐츠 같지 않음” |
| 4 | 입력 소스와 데이터 흐름 | 어떤 형태의 입력(URL, 텍스트, 키워드)을 받아서 어떻게 처리할지 | 매번 입력 방식이 달라서 워크플로우 안 잡힘 |
| 5 | 출력 형식과 편집 가능 범위 | 최종 결과물이 어떤 형태로 나오고, 어디까지 수정 가능한지 | ”수정이 안 돼서 결국 피그마 열었음” |
| 6 | 캡션과 해시태그 전략 | 캐러셀만 만들면 반쪽 — 캡션까지 있어야 바로 업로드 | 캐러셀은 자동인데 캡션은 수동 → 시간 절약 효과 반감 |
Phase 2. 실제 캐러셀 템플릿을 기반으로 기획서 작성
기존에 만들어 쓰고 있던 캐러셀 이미지를 Claude Code에 첨부하고, “이걸 기준으로 위 6가지를 정리해줘”라고 요청했습니다.
내가 만든 실제 콘텐츠가 레퍼런스이자 곧 기획서의 기준이 됩니다. 추상적인 가이드가 아니라, 실물 기반으로 규칙을 추출하는 게 핵심입니다.
진행 방식
[기존 캐러셀 이미지 첨부]
↓
Claude Code가 분석
↓
디자인 시스템 / 슬라이드 구조 / 톤앤매너 등 6가지 자동 추출
↓
내가 확인 + 수정 요청
↓
최종 기획서 완성Phase 2.5. 기술 선택 — 왜 이 방식인가
기획이 끝난 후, 실제로 어떤 기술로 만들지 결정해야 했습니다. 비개발자가 유지보수 없이 계속 쓸 수 있는 구조를 기준으로 선택했습니다.
왜 React 단일 HTML 파일인가
캐러셀 에디터를 만드는 방법은 여러 가지가 있었습니다.
| 선택지 | 장점 | 단점 | 판단 |
|---|---|---|---|
| 피그마 플러그인 | 디자이너에게 익숙 | 무료 버전 제한, 매번 피그마 열어야 함, 자동화 어려움 | ❌ |
| Canva 템플릿 | 비개발자 접근 쉬움 | 브랜드 디자인 시스템 정밀 반영 불가, API 연동 불가 | ❌ |
| Next.js/Vite 프로젝트 | 확장성 좋음 | npm, 빌드, 배포 파이프라인 필요 → 유지보수 부담 | ❌ |
| Python 스크립트 | 이미지 생성 가능 | 폰트/레이아웃 정밀 제어 어려움, 실시간 편집 불가 | ❌ |
| React + Babel CDN (HTML 1개) | 빌드 없음, 서버 없음, 파일 하나로 완결 | 대규모 앱에는 부적합 | ✅ 선택 |
최종 선택 이유:
- 파일 하나 = 유지보수 제로 —
index.html하나만 있으면 됨. npm install, webpack, 빌드 스크립트 없음 - Vercel에 그대로 올리면 끝 — 정적 파일이니까 배포도 단순. URL 하나로 어디서든 접속
- React의 컴포넌트 구조 — 슬라이드별 데이터를 JSON으로 관리하고, 디자인 시스템을 인라인 스타일로 정확히 구현 가능
- 실시간 편집 — 텍스트 더블클릭 → 바로 수정 → 바로 다운로드. 피그마 왕복 없음
- html2canvas로 PNG 내보내기 — 보이는 그대로 2x 고해상도 PNG로 변환. 별도 이미지 처리 라이브러리 불필요
핵심: 코딩을 모르는 팀원도 URL 접속 → 텍스트 수정 → 다운로드만 하면 됨
개발자가 아닌 마케터가 매일 쓸 도구이므로, 복잡한 개발 환경 자체가 리스크캐릭터 생성 과정 (실제 흐름)
[에디터에서 "✨ 캐릭터 새로 생성" 클릭]
↓
[Gemini API 호출]
- 모델: gemini-2.5-flash-image
- 프롬프트: 캐릭터 스타일 가이드 + 주제 키워드
- 출력: 1024x1024 이미지 (base64)
↓
[커버 슬라이드에 자동 삽입]
- 전체 배경으로 배치 (1080x1350 영역)
- 하단 55% 그라데이션 딤 오버레이
- 딤 위에 제목 텍스트 배치
↓
[마음에 안 들면? → 다시 클릭 → 새 캐릭터]캐릭터 스타일 일관성을 유지하는 방법
Gemini API는 매번 다른 이미지를 생성하므로, 스타일이 흔들릴 수 있습니다. 이걸 프롬프트로 잡았습니다.
프롬프트에 고정하는 것:
- 몸체: 오렌지/코랄색(#E8825A) 직육면체 블록
- 얼굴: 검정 네모 눈 2개 + 작은 미소 (픽셀 도트)
- 스타일: 레트로 픽셀아트, 아이소메트릭 3D 각도
- 배경: 순수 검정(#000000)
- 크기: 프레임의 60-70% 차지
프롬프트에서 바꾸는 것:
- 소품: 주제에 맞는 아이템 (노트북, 마법봉, 확성기 등)
- 이펙트: 반짝이 파티클, 주제 관련 아이콘레퍼런스 이미지 4장을 assets/characters/ 폴더에 보관하고 있어서, 프롬프트에 “이 스타일과 동일하게”라는 기준점이 됩니다. Gemini API가 만족스럽지 않을 때는 레퍼런스 이미지를 직접 사용할 수도 있습니다.
실제 삽질 로그
| 시도 | 결과 | 해결 |
|---|---|---|
gemini-2.0-flash-exp 모델 사용 | 404 에러 (모델 없음) | API로 모델 목록 조회 → gemini-2.5-flash-image 발견 |
| 첫 번째 API 키 | ”API key expired” 에러 | Google AI Studio에서 새 키 발급 |
| 이미지가 안 보임 | 캐시된 이전 페이지 표시 | 브라우저 새로고침으로 해결 |
| 캐릭터가 너무 작음 | 프레임의 30% 정도만 차지 | 프롬프트에 “60-70% of the frame” 명시 |
Phase 3. 세부 기획 — 6가지 항목별 상세 내용
3-1. 브랜드 디자인 시스템
기존 캐러셀에서 사용하던 색상, 폰트, 레이아웃 규칙을 추출하여 코드가 이해할 수 있는 형태로 정리했습니다.
색상 체계
| 용도 | 색상 코드 | 사용처 |
|---|---|---|
| 배경 | #000000 | 전체 슬라이드 배경 |
| 보조 배경 | #1A1A1A | 코드 블록, 다이어그램 내부 |
| 강조 | #E9ED12 | 하이라이트 박스 (형광 노랑) |
| 본문 | #FFFFFF | 제목, 본문 텍스트 |
| 보조 텍스트 | #B0B0B0 | 부가 설명, 캡션 |
| 다이어그램 | #2A2A2A / #4A4A4A | 박스 배경 / 테두리 |
폰트 체계 (Pretendard)
| 용도 | 굵기 | 크기 | 줄간격 |
|---|---|---|---|
| 메인 제목 | ExtraBold 800 | 56-72px | 130% |
| 서브 제목 | Bold 700 | 40-48px | 130% |
| 본문 | Medium 500 | 32-36px | 160% |
| 보조 텍스트 | Regular 400 | 28-32px | 160% |
| 워터마크 | Regular 400 | 24px | — |
하이라이트 박스 규칙
- 배경
#E9ED12+ 텍스트#000000(Bold) - 모서리: 0px (직각) — 둥글지 않음
- 슬라이드당 최대 1개
- 2줄 이상 금지
- 배경 전체를 노란색으로 쓰는 것은 금지
레이아웃 규격
캔버스: 1080 x 1350px (4:5 세로형)
내보내기: 2x (2160 x 2700px)
패딩: 좌우 80px, 상단 80px, 하단 100px
콘텐츠 영역: 920 x 1190px
요소 간 간격: 32-48px
정렬: 좌측 기본, CTA 슬라이드만 중앙워터마크 (모든 슬라이드 고정)
"AX 비즈니스 마케팅 디렉터"
"@zemma.selfishclub"
우측 하단, 하단 40px, 우측 40px
#FFFFFF opacity 55%, 20px, 우측 정렬브랜드 캐릭터
- 오렌지/코랄색(#E8825A) 직육면체 블록 픽셀아트
- 검정 네모 눈 + 미소, 아이소메트릭 3D 각도
- 주제에 맞는 소품(헤드셋, 노트북, 마법봉 등)
- Gemini API(
gemini-2.5-flash-image)로 매번 새로 생성 - 커버 슬라이드에서 전체 배경으로 사용 + 하단 그라데이션 딤(55%)
3-2. 콘텐츠 유형별 슬라이드 구조
우리 계정에서 만드는 콘텐츠를 5가지 유형으로 분류하고, 각각의 최적 슬라이드 구조를 정의했습니다.
A. AI 도구 가이드 (6-8장)
1장 [커버] — 캐릭터 전체배경 + 딤 + 후킹 제목
2장 [맥락] — 왜 이 도구가 필요한가
3장 [정의] — 도구가 뭔지 한 줄 요약
4장 [핵심기능] — 주요 기능 3가지 (이모지 포인트)
5장 [활용법] — 실전 사용 사례
6장 [비교/결과] — Before/After 또는 비교
7장 [적용] — 실제 적용 방법/프로세스
8장 [CTA] — 댓글 유도 + 자료 공유 안내B. 프로그램 홍보 (5-7장)
1장 [커버] — 프로그램명 + 핵심 혜택
2장 [문제제기] — 타겟의 고민/니즈
3장 [솔루션] — 프로그램이 해결하는 것
4장 [상세내용] — 커리큘럼/일정/구성
5장 [사회적증거] — 후기/수치/결과
6장 [혜택] — 특전/얼리버드/보너스
7장 [CTA] — 신청 유도C. 인사이트/칼럼 (5-7장)
1장 [커버] — 자극적 질문 또는 반전 제목
2장 [공감] — 다들 이렇게 생각하지만
3장 [반전] — 사실은 이렇습니다
4장 [근거] — 데이터/사례/경험
5장 [인사이트] — 핵심 교훈
6장 [적용] — "오늘부터 이렇게 해보세요"
7장 [CTA] — 의견 공유 유도D. 케이스 스터디 (6-8장) — 현재 Polysona 예시
1장 [커버] — 프로젝트명 + 후킹 제목
2장 [배경] — 어떤 맥락에서 나왔나
3장 [정의] — 이 프로젝트가 뭔데?
4장 [핵심전제] — 기존 방식의 문제점
5장 [활용법] — 어떻게 쓰는가
6장 [결과] — 시뮬레이션/비교 결과
7장 [적용] — 실전에 어떻게 적용했나
8장 [CTA] — 자료 공유 + 댓글 유도E. 커뮤니티 비하인드 (3-5장)
1장 [커버] — 행사/모임 제목
2장 [현장] — 사진 중심 + 짧은 코멘트
3장 [하이라이트] — 핵심 순간 2-3개
4장 [참여자반응] — 후기/소감
5장 [CTA] — 다음 행사 안내3-3. 카피 톤앤매너 가이드
기존 콘텐츠에서 우리 브랜드의 말투 패턴을 추출했습니다.
기본 톤
- 존댓말 (합쇼체/해요체 혼합): “~입니다”, “~해보세요”
- 짧고 임팩트 있는 정보 전달
- 자신감 있게 단정하는 톤
브랜드 키워드 (자연스럽게 활용)
| 키워드 | 용도 |
|---|---|
| 냅-다 | 강조/행동 유도 (“냅-다 공유합니다”) |
| 이기적(으로) | 멤버십 연결 (“이기적으로 성장하세요”) |
| 까발리기 | 인사이트 공유 (“노하우 까발리기”) |
| 젬마땡큐 | 댓글 키워드 (“댓글에 ‘젬마땡큐’”) |
카피 작성 규칙
✅ DO:
- 1줄당 15자 내외 (모바일 가독성)
- 프로세스는 화살표(→) 연결
- 번호는 2자리: 01, 02, 03
- 강조 우선순위: 하이라이트 박스 > 볼드 > 이모지
- 마지막 장은 반드시 댓글 유도 CTA
❌ DON'T:
- "~할 수 있을지도" → "~할 수 있습니다"
- "어려울 수 있지만" → "간단합니다"
- "아마도", "혹시", "어쩌면" 등 불확실 표현 금지
- 슬라이드당 이모지 5개 초과 금지제목(커버) 작성법
- 항상 3개 옵션 제시 → 선택
- 후킹 공식: [숫자/대비/질문] + [핵심 키워드]
- 예시:
- “90팀 중 1등한 이 시스템, 뭔데?”
- “AI가 쓴 티, 이제 끝내는 법”
- “피그마 없이 캐러셀 만드는 방법”
3-4. 입력 소스와 데이터 흐름
캐러셀을 만들기 위해 어떤 입력을 받고, 어떻게 처리되는지 정의했습니다.
입력 유형
| 입력 형태 | 예시 | 처리 방식 |
|---|---|---|
| 주제 키워드 | ”클로드코드 플러그인” | Claude Code가 콘텐츠 구조 생성 |
| URL | 블로그/아티클 링크 | WebFetch로 내용 추출 → 요약 → 슬라이드화 |
| 텍스트 원고 | 전체 원고 복붙 | 핵심 추출 → 슬라이드 분배 |
| 레퍼런스 이미지 | 참고할 디자인 캡처 | 레이아웃/구성 분석 → 반영 |
데이터 흐름
[입력: 주제/URL/텍스트]
↓
[유형 판별] — 5가지 중 자동 분류
↓
[커버 캐릭터 생성] — Gemini API로 주제 맞춤 캐릭터
↓
[슬라이드 카피 생성] — 유형별 구조 + 톤앤매너 적용
↓
[React 에디터 렌더링] — 디자인 시스템 적용된 캐러셀
↓
[캡션 + 해시태그 생성] — 5블록 구조
↓
[매니챗 템플릿 생성] — 팔로우 확인 + DM 메시지
↓
[편집 → PNG 다운로드 → 인스타 업로드]3-5. 출력 형식과 편집 가능 범위
자동화 결과물이 어떤 형태로 나오고, 어디까지 직접 수정할 수 있는지 정의했습니다.
출력물
| 출력 | 형식 | 용도 |
|---|---|---|
| 캐러셀 슬라이드 | PNG (2160x2700, 2x) | 인스타 업로드 |
| 캡션 + 해시태그 | 텍스트 (복사) | 인스타 캡션 |
| 매니챗 템플릿 | 텍스트 (복사) | ManyChat 자동 DM 셋팅 |
에디터에서 편집 가능한 것
| 항목 | 편집 방법 |
|---|---|
| 모든 텍스트 | 더블클릭 → 인라인 편집 |
| 커버 캐릭터 | ”캐릭터 새로 생성” 버튼 (Gemini AI) |
| 커버 이미지 | 클릭 → 파일 업로드 (이미지/영상) |
| 슬라이드 내 미디어 | + 영역 클릭 → 이미지/영상 업로드 |
| 슬라이드 이동 | ← → 방향키 또는 하단 썸네일 클릭 |
피그마 없이 완결되는 이유
기존에는 Claude Code로 텍스트를 생성한 후 피그마에서 수동 배치했지만, 이 시스템에서는 React 에디터 자체가 피그마를 대체합니다.
기존: 텍스트 생성 → 피그마 열기 → 수동 배치 → PNG 내보내기 (30분~1시간)
현재: 텍스트 생성 + 디자인 렌더링 → 수정 → PNG 다운로드 (5분)3-6. 캡션과 해시태그 전략
캐러셀만 만들면 반쪽입니다. 캡션까지 세트로 나와야 바로 올릴 수 있습니다.
캡션 5블록 구조
[블록1: 리드 CTA]
🎁 댓글에 '젬마땡큐' 남겨주시면 핵심 정리본 공유드립니다!
(⚠️ 팔로우 후 댓글 남겨주세요! 오류로 전달 안될 수 있어요)
← "더 보기" 전에 보이는 영역. 가장 강한 혜택 문장.
[블록2: 후킹]
요즘 핫한 클로드 코드,
스킬만 쓰고 계신 거 아닌가요?
← 1-2줄, 궁금증/공감 유발
[블록3: 본문]
캐러셀 핵심 내용 요약 3-6줄
✔️ 이모지로 포인트 강조
← 줄바꿈으로 가독성 확보, 3줄 이상 연속 시 빈 줄 추가
[블록4: 아웃트로 CTA]
지금 바로 댓글 + 스토리 공유까지 해서
정보 받아보세요! 💛
← 구체적 행동 지시
[블록5: 해시태그]
#셀피쉬클럽 #젬마 #AX마케팅 + 주제별 5-7개 + 도달 확장 3-5개
← 총 10-15개, 브랜드 태그 맨 앞블록 사이 규칙: 반드시 빈 줄 2개로 구분 (인스타에서 실제로 줄바꿈이 보이려면 필수)
해시태그 전략
| 카테고리 | 해시태그 | 고정/변동 |
|---|---|---|
| 브랜드 고정 | #셀피쉬클럽 #젬마 #AX마케팅 | 항상 고정 |
| 주제별 | #클로드코드 #AI자동화 #Polysona | 콘텐츠마다 변경 |
| 도달 확장 | #AI활용법 #마케팅자동화 #생산성 | 트렌드에 따라 변경 |
매니챗 연동 템플릿
캐러셀 업로드 시 매니챗 자동 DM도 같이 셋팅해야 하므로, 문구를 함께 생성합니다.
[팔로우 확인 메시지]
감사합니다:)
해당 자료는 팔로워 분들께만 제공됩니다.
버튼을 눌러 팔로우 여부 확인해주세요✅
[DM 메시지]
{콘텐츠 제목} + 정리본 공유드립니다!
레퍼런스 기반 실무 워크플로우로 누구나 활용할 수 있게 정리본 공유드립니다!
꼭 활용해보세요!
아래 링크에서 확인해보세요 💛
[링크 버튼]
🔗 정리본 바로 확인하기인스타그램 캐러셀 사이즈 규격 (2026년 기준)
이미지 규격
| 비율 | 해상도 | 용도 |
|---|---|---|
| 4:5 세로형 (권장) | 1080 x 1350px | 피드에서 가장 넓은 면적 차지 |
| 1:1 정사각형 | 1080 x 1080px | 범용 |
| 1.91:1 가로형 | 1080 x 566px | 가로 이미지 (비권장) |
최종 워크플로우 요약
주제/URL 입력 (Claude Code)
↓
유형 판별 + 제목 3개 제시
↓
캐러셀 자동 생성 (슬라이드 + 캐릭터 + 캡션 + 매니챗)
↓
에디터에서 편집 (<https://zemma-carousel.vercel.app>)
↓
PNG 다운로드 + 캡션 복사 + 매니챗 문구 복사
↓
인스타 업로드 + 매니챗 셋팅| 기존 | 현재 |
|---|---|
| 주제 정리 (10분) | Claude Code에 주제 전달 (1분) |
| 피그마에서 디자인 (30분) | 자동 생성 + 에디터 수정 (5분) |
| 캡션 작성 (15분) | 자동 생성 + 복사 (1분) |
| 매니챗 문구 작성 (10분) | 자동 생성 + 복사 (1분) |
| 총 65분 | 총 8분 |
인사이트
ascii-diagram - 키보드 글자로 그리는 설계도는 스킬의 이름과 컨셉입니다. ASCII(아스키) 아트처럼 텍스트 문자(|, -, +, →, ┌, └ 등)만으로 다이어그램을 그리는 걸 말합니다.
LLM이 텍스트로 다이어그램 만들어주는 것”이 핵심 기능입니다. 이미지 렌더링 없이 순수 텍스트만으로 플로우차트, 시스템 구조도, 프로세스 맵 같은 걸 그려주는 것
이 스킬이 유용한 이유는, ASCII 다이어그램은 마크다운 코드블록 안에 그대로 들어가기 때문에 Slack, 노션, 깃허브 README, 터미널 등 어디서든 깨지지 않고 보인다는 점입니다. 이미지 파일을 만들 필요 없이 빠르게 구조를 시각화할 수 있고요.
예를 들면 이런 식입니다:
┌──────────┐ ┌──────────┐ ┌──────────┐ │ 사용자 │────→│ Claude │────→│ 결과물 │ └──────────┘ └──────────┘ └──────────┘ │ ▼ ┌──────────┐ │ 스킬 호출 │ └──────────┘
init → md 파일 무조건 읽고”는 스킬이 트리거되면 먼저 SKILL.md 파일을 읽고 시작하라는 실행 규칙입니다.
다시 한다면?
- 캡컷