인스타그램 캐러셀 스킬 (instagram-carousel) — 카드뉴스 기획과 제작

instagram-carousel는 반복 업무를 더 안정적으로 처리하기 위한 AI 에이전트 스킬입니다.

인스타그램 캐러셀 카드뉴스를 기획하고 단일 HTML 파일로 제작할 때 사용한다. 사용자가 주제만 제시했거나, 카드뉴스/캐러셀/인스타 슬라이드/릴스가 아닌 정적 4:5 슬라이드 묶음을 만들고 싶다고 말할 때 사용한다. BRAND.md를 확인해 브랜드 톤을 맞추고, 질문을 통해 콘텐츠 방향을 정하고 내용을 풍부하게 만든 뒤, 필요 시 웹 리서치, 슬라이드 구성 승인, 각 슬라이드 문안 확정, 배경 이미지 플레이스홀더 지정, 단일 HTML 초안 생성, 사용자가 제공한 이미지로 교체하는 흐름을 수행한다.

사용 방법

Codex나 호환되는 AI 에이전트의 스킬 폴더에 아래 SKILL.md 내용을 저장한 뒤, 설명에 포함된 트리거 문장으로 호출하세요.

사용 예:
instagram-carousel 스킬 사용해줘.
이 작업은 instagram-carousel 기준으로 진행해줘.

원본 위치

.codex/skills/instagram-carousel/SKILL.md

SKILL.md

---
name: instagram-carousel
description: 인스타그램 캐러셀 카드뉴스를 기획하고 단일 HTML 파일로 제작할 때 사용한다. 사용자가 주제만 제시했거나, 카드뉴스/캐러셀/인스타 슬라이드/릴스가 아닌 정적 4:5 슬라이드 묶음을 만들고 싶다고 말할 때 사용한다. BRAND.md를 확인해 브랜드 톤을 맞추고, 질문을 통해 콘텐츠 방향을 정하고 내용을 풍부하게 만든 뒤, 필요 시 웹 리서치, 슬라이드 구성 승인, 각 슬라이드 문안 확정, 배경 이미지 플레이스홀더 지정, 단일 HTML 초안 생성, 사용자가 제공한 이미지로 교체하는 흐름을 수행한다.
---

# Instagram Carousel

## 목표

사용자의 주제 하나를 인스타그램용 4:5 캐러셀로 완성한다. 최종 산출물은 기본적으로 **단일 HTML 파일**이며, 각 슬라이드는 배경 전체 사진 위에 하단 검은색 그라데이션과 블러를 깔고 흰색 제목과 본문을 올린 구조로 만든다.

## 참조 예시

HTML을 제작하기 전, 실제 구현 예시인 `references/carousel-example.html`을 먼저 참고한다. 이 파일은 `references/carousel-example-bg.png`를 배경 이미지로 사용한 1장짜리 캐러셀 예시이며, 하단 검은색 그라데이션, 하단 블러, 안전영역 안의 흰색 제목과 본문 배치를 확인하는 기준이다.

예시를 그대로 복사하기보다, 사용자의 주제와 확정 문안에 맞춰 슬라이드 수, 텍스트, 이미지 설명, 배경 이미지만 바꾼다. 그라데이션과 블러의 레이어 구조, eyebrow 색상, 브랜드 컬러 밑줄 강조 방식은 예시와 같은 방향을 유지한다.

## 절대 규칙

- 사용자가 단순히 주제만 말했으면 HTML을 바로 만들지 말고, 먼저 내용을 구체화한다.
- `BRAND.md`가 현재 작업 폴더나 상위 폴더에 있으면 반드시 읽고 톤, 금지 표현, 비주얼 방향, 색상 규칙을 반영한다.
- `BRAND.md`가 없거나 템플릿 상태라면, 브랜드 정보가 없다고 짧게 알리고 일반적인 고품질 인스타 카드뉴스 톤으로 진행한다.
- 콘텐츠의 관점, 근거, 예시, 표현을 더 풍부하게 만들기 위해 필요하면 웹 리서치를 수행한다. 자료를 사용했다면 최종 답변에 출처 링크를 함께 남긴다.
- 사용자의 승인을 받기 전에는 슬라이드 수와 흐름을 확정하지 않는다.
- 슬라이드 문안을 확정하기 전에는 HTML을 만들지 않는다.
- 사용자가 이미지를 아직 주지 않았다면 실제 이미지 파일을 임의 생성하지 말고, 각 슬라이드에 들어갈 배경 사진 설명을 플레이스홀더로 남긴다.
- 사용자가 나중에 이미지를 제공하면 원본 파일은 유지하고, 출력 폴더의 `assets/` 하위로 복사한 뒤 HTML의 배경 경로만 교체한다.
- 불필요한 프레임워크, 빌드 도구, 여러 파일 구조를 만들지 않는다. 사용자가 명시하지 않으면 HTML 하나에 CSS와 콘텐츠를 모두 포함한다.

## 기본 진행 흐름

### STEP 1. 주제 접수와 브랜드 확인

1. 사용자의 주제, 목적, 대상 독자, 원하는 분위기를 파악한다.
2. `BRAND.md`를 찾아 읽는다. 예시는 다음 순서로 확인한다.
   - 현재 작업 폴더의 `BRAND.md`
   - 상위 폴더의 `BRAND.md`
   - 사용자가 직접 지정한 브랜드 문서
3. 브랜드 문서에서 최소한 아래 항목을 추출해 작업 기준으로 삼는다.
   - 타겟과 결핍
   - 브랜드 보이스와 금지 표현
   - 안티 스타일
   - 컬러, 타이포그래피, 비주얼 방향
   - 기본 캐러셀 규격

### STEP 2. 질문으로 방향 확정 및 내용 보강

질문은 사용자의 취향을 캐묻기 위한 절차가 아니라, 캐러셀의 내용 방향을 정하고 주제를 더 풍부하게 만들기 위한 도구다.

질문 규칙:

- 맥락이 부족하거나 결과물이 크게 달라질 수 있는 모호함이 있으면 HTML을 만들기 전에 질문한다.
- 사소하거나, `BRAND.md`·사용자 주제·리서치로 판단 가능한 내용은 질문하지 않는다.
- 질문은 한 번에 1~3개만 제시한다.
- 각 질문에는 2~4개의 선택지를 제시하고, 각 선택지에 1~100점과 근거를 붙인다.
- 사용자가 고르기 쉽게 마지막에 `추천 선택지:`를 정리한다.
- 방향이 충분히 명확하면 질문을 억지로 만들지 말고, 추천 방향과 근거를 제시한 뒤 다음 단계로 진행한다.
- 슬라이드 구성과 문안이 확정되기 전에는 HTML을 만들지 않는다.

좋은 질문 예시:

- 이 캐러셀의 목적은 무엇인가?
  - 저장 유도: 실용 정보형에 적합하다.
  - 공감 유도: 팔로우 전환과 브랜드 친밀도에 적합하다.
  - 설득 유도: 제품·서비스·관점 전환에 적합하다.
- 독자가 마지막에 어떤 행동을 하길 원하는가?
  - 저장
  - 댓글
  - 팔로우
  - 상담·구매·문의
- 콘텐츠 각도는 무엇이 좋은가?
  - 오해 깨기
  - 체크리스트
  - 전후 비교
  - 단계별 가이드
  - 실수 모음

웹 리서치는 이 단계에서 논의와 동시에 수행한다. 사용자의 답변을 기다리는 동안, 또는 아이디어를 구체화하는 과정에서 내용이 얕거나 더 좋은 근거·사례·비유·반론·체크리스트가 필요하다고 판단되면 바로 웹 리서치를 수행한다.

리서치 결과는 캐러셀에 바로 길게 넣지 않는다. 핵심 주장, 근거, 사례, 반론 가능성, 출처만 정리해 슬라이드 흐름과 문안에 반영한다.

### STEP 3. 슬라이드 수와 흐름 승인

HTML 제작 전에 반드시 슬라이드 구성안을 먼저 제시하고 사용자 확인을 받는다.

아래 슬라이드 수와 구성은 예시일 뿐이다. 캐러셀의 주제, 메시지 밀도, 독자 수준, CTA에 따라 장수와 흐름은 달라질 수 있으므로 무작정 따르지 않는다. 사용자와 논의하며 가장 자연스러운 슬라이드 수와 흐름을 정한다.

내용을 구성할 때는 독자가 계속 뒤로 넘겨보고 싶게 만들어야 한다. 각 슬라이드는 단순히 정보를 나열하는 장이 아니라, 다음 장을 볼 이유를 만들어야 한다. 예를 들어 궁금증을 남기거나, 앞 장의 오해를 다음 장에서 풀거나, 문제를 더 구체화하거나, 바로 따라 할 수 있는 다음 행동으로 이어지게 구성한다.

예시 구성:

- 크기: 1080 x 1350 px
- 비율: 4:5
- 장수: 7~10장
- 1장: 스크롤을 멈추는 훅
- 2~3장: 문제 제기 또는 공감
- 4~7장: 핵심 정보, 해결책, 단계, 사례
- 마지막 장: 저장·공유·팔로우·문의 중 하나의 CTA

구성안 형식:

```text
슬라이드 구성안
1. [훅] ...
2. [문제 제기] ...
3. [핵심 전환] ...
4. [근거/설명] ...
5. [실행 방법] ...
6. [예시/체크리스트] ...
7. [CTA] ...

이 흐름으로 확정해도 될까요?
```

사용자가 승인하거나 수정 의견을 주면 반영한다.

### STEP 4. 각 슬라이드 문안 확정

각 슬라이드는 제목과 본문을 분리한다.

- 제목: 짧고 강하게 쓴다.
- 본문: 1~3문장 또는 2~4개의 짧은 줄로 쓴다.
- 한 슬라이드에 너무 많은 정보를 넣지 않는다.
- 모바일에서 한눈에 읽히도록 줄 수와 문장 길이를 줄인다.

문안 확정안 형식:

```text
1장
제목: ...
본문: ...

2장
제목: ...
본문: ...
```

문안 확정 후 사용자에게 “이 문안으로 HTML 제작을 진행해도 될까요?”라고 확인한다.

### STEP 5. 배경 사진 플레이스홀더 지정

HTML 제작 전 또는 제작 중 각 슬라이드에 들어갈 사진 설명을 정한다.

사진 설명은 구체적이어야 한다.

- 좋은 예: “저채도 자연광의 실내 책상, 노트북과 물컵이 보이고 사람은 흐릿하게 배경 처리”
- 나쁜 예: “멋진 사진”, “감성 사진”, “운동 이미지”

각 슬라이드에는 `data-image-brief` 속성이나 HTML 주석으로 배경 이미지 의도를 남긴다. 사용자가 이미지를 제공하면 이 설명과 가장 잘 맞는 이미지로 교체한다.

## HTML 제작 규칙

먼저 `references/carousel-example.html`을 열어 실제 구조와 CSS 레이어를 확인한다. 아래 규칙은 예시를 변형할 때 지켜야 하는 기준이다.

출력 위치와 파일명:

- 작업 결과는 현재 작업 폴더 기준 `outputs/instagram-carousel/YYYY-MM-DD-{project-slug}/`에 만든다.
- `YYYY-MM-DD`는 캐러셀을 생성한 날짜를 사용한다. 예: `2026-07-07`.
- `{project-slug}`는 사용자의 주제를 짧게 요약한 영문 소문자 kebab-case로 만든다. 예: `chest-training`, `morning-routine`, `running-form`.
- HTML 파일명은 항상 `index.html`로 고정한다.
- 이미지와 기타 정적 파일은 같은 프로젝트 폴더 안의 `assets/` 하위에 둔다.
- 최종 구조는 아래를 기준으로 한다.

```text
outputs/
  instagram-carousel/
    YYYY-MM-DD-{project-slug}/
      index.html
      assets/
        slide-01.png
        slide-02.jpg
```

단일 HTML 파일을 만든다. CSS는 `index.html`의 `<style>` 안에 포함하고, HTML이 참조하는 이미지만 `assets/`에 둔다.

필수 구조:

- `<!doctype html>`을 포함한다.
- CSS는 `<style>` 안에 포함한다.
- 각 슬라이드는 독립된 `.slide` 요소로 만든다.
- 전체 슬라이드 크기는 1080 x 1350 px 기준으로 잡되, 브라우저에서 보기 좋게 반응형 축소도 가능하게 한다.
- 중요한 텍스트는 가장자리에서 최소 96px 이상 안쪽에 배치한다.
- 슬라이드 하단 1/3 영역에 검은색 그라데이션과 블러를 둔다.
- 이미지 최하단은 검은 오버레이가 거의 100% 불투명하게 보이도록 한다.
- 이미지 하단 1/3 지점으로 갈수록 검은 오버레이와 블러가 0에 가깝게 사라지도록 한다.
- 텍스트는 흰색을 기본으로 하고, 이미지에 묻히지 않게 그림자나 은은한 대비 보정을 사용한다.
- `eyebrow`는 예시의 `rgba(255, 255, 255, 0.78)` 계열로 고정한다. 브랜드 메인 컬러로 바꾸지 않는다.
- 제목은 과하게 크게 만들지 않는다. 1080 x 1350 기준으로 예시처럼 68px 안팎을 기본값으로 삼고, 문장이 길면 더 줄인다.
- 제목 행간은 여유 있게 1.3 안팎을 기본값으로 삼는다.
- 본문 텍스트는 제목보다 오른쪽 여백을 조금 더 줄여 넓게 쓸 수 있다.
- 본문은 제목보다 충분히 가볍게 보이도록 480 안팎의 굵기를 기본값으로 삼는다.
- 본문은 너무 짧은 장식 문구로 끝내지 말고, 독자가 바로 이해할 수 있도록 2문장 안팎으로 구체화한다.
- 본문 안에서 중요한 단어나 핵심 구절만 `strong`으로 볼드 처리한다. 본문 전체를 굵게 만들지 않는다.
- 강조할 핵심 단어는 제목 또는 본문 중 한 곳에만 넣는다. 한 슬라이드에서 제목과 본문 양쪽에 동시에 밑줄 강조를 넣지 않는다.
- 강조 밑줄은 `BRAND.md`의 메인 컬러를 사용한다. 
- 강조 밑줄은 사각형처럼 딱 끊기지 않게 `border-radius: 999px`를 적용한 둥근 라인 형태로 만든다.
- 강조 밑줄은 텍스트 색을 바꾸는 방식보다 우선한다. 기본 텍스트는 흰색으로 유지하고, 둥근 밑줄 색만 브랜드 메인 컬러를 사용한다.

권장 CSS 패턴:

```css
.slide {
  position: relative;
  width: 1080px;
  height: 1350px;
  overflow: hidden;
  background-image: var(--bg);
  background-size: cover;
  background-position: center;
  color: #fff;
}

.slide::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 38%;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0.78) 34%,
    rgba(0, 0, 0, 0.34) 68%,
    rgba(0, 0, 0, 0) 100%
  );
  pointer-events: none;
}

.slide::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 38%;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0.65) 42%, transparent 100%);
  -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0.65) 42%, transparent 100%);
  pointer-events: none;
}

.copy {
  position: absolute;
  left: 96px;
  right: 96px;
  bottom: 96px;
  z-index: 1;
}

.eyebrow {
  color: rgba(255, 255, 255, 0.78);
}

.brand-underline {
  position: relative;
  display: inline-block;
  z-index: 0;
  text-decoration: none;
}

.brand-underline::after {
  content: "";
  position: absolute;
  left: -0.04em;
  right: -0.04em;
  bottom: 0.03em;
  height: 0.16em;
  z-index: -1;
  border-radius: 999px;
  background: var(--brand-main);
}

.body strong {
  font-weight: 600;
  color: #fff;
}
```

플레이스홀더 이미지는 실제 외부 이미지를 임의로 가져오지 말고, CSS 그라데이션 또는 로컬 교체용 주석으로 표현한다. 예시는 다음처럼 둔다.

```html
<section
  class="slide"
  style="--bg: linear-gradient(135deg, #2b2b2b, #777);"
  data-image-brief="저채도 자연광의 실내 책상, 노트북과 물컵, 사람은 흐릿하게 배경 처리"
>
```

사용자가 이미지 경로를 제공한 뒤에는 원본을 이동하지 말고 출력 폴더의 `assets/` 하위로 복사한다. 파일명은 슬라이드 번호에 맞춰 `slide-01.ext`, `slide-02.ext`처럼 정규화한다. 확장자는 원본 확장자를 유지한다.

예:

```text
사용자 제공 원본: /Users/name/Desktop/photo.png
복사 위치: outputs/instagram-carousel/YYYY-MM-DD-{project-slug}/assets/slide-01.png
```

HTML에서는 다음처럼 상대 경로로 참조한다.

```html
style="--bg: url('./assets/slide-01.png');"
```

## 품질 점검

HTML을 만든 뒤 다음을 확인한다.

- 모든 슬라이드가 4:5 비율을 유지하는가?
- HTML이 `outputs/instagram-carousel/YYYY-MM-DD-{project-slug}/index.html`에 생성되었는가?
- 제목과 본문이 안전영역 안에 있는가?
- 텍스트가 하단 그라데이션과 블러 위에서 충분히 읽히는가?
- 슬라이드별 정보량이 과하지 않은가?
- 첫 장이 스크롤을 멈출 만큼 선명한가?
- 마지막 장 CTA가 하나의 행동만 요구하는가?
- `BRAND.md`의 말투, 금지 표현, 안티 스타일을 어기지 않았는가?
- 출처가 필요한 주장에 출처가 붙었는가?
- 사용자가 이미지를 제공했다면 원본은 그대로 두고 `assets/slide-XX.ext`로 복사했는가?
- HTML의 이미지 경로가 `./assets/slide-XX.ext` 상대 경로로 실제 존재하는 파일을 가리키는가?

가능하면 브라우저나 스크린샷 도구로 렌더링을 확인하고, 텍스트 겹침이나 잘림이 있으면 수정한다.

## 최종 보고

작업을 마치면 완료 보고와 함께, 사용자가 어떤 이미지를 넣으면 되는지 슬라이드별로 정리한다.

- 생성한 HTML 파일 경로
- 슬라이드 수
- 이미지가 플레이스홀더인지, `assets/`에 복사된 실제 이미지인지
- 리서치를 사용했다면 출처 링크
- 사용자가 다음에 제공하거나 AI 이미지 생성 모델에 넣으면 좋은 슬라이드별 이미지 프롬프트

보고 형식 예시:

```text
완료했습니다.

HTML 파일: outputs/instagram-carousel/2026-07-07-squat-practical-tips/index.html
슬라이드 수: 7장
이미지 상태: 현재는 플레이스홀더입니다.

이미지를 넣으실 때는 아래 프롬프트 수준으로 준비하시면 됩니다.
1장: [훅] 4:5 세로 이미지. 깔끔한 피트니스 스튜디오에서 스쿼트 자세를 취한 사람이 주 피사체로 크게 보이는 장면. 인물은 화면 중앙보다 약간 위에 배치하고, 조명은 고급스러운 소프트박스 느낌으로 자연스럽게 들어오게 한다. 배경은 어두운 회색 계열의 정돈된 스튜디오 분위기로 구성한다. 이미지 안에는 글자, 로고, 워터마크가 없어야 한다.
2장: [문제 제기] 4:5 세로 이미지. 스쿼트할 때 무릎이 안쪽으로 말리거나 허리가 무너지는 등 초보자가 자주 겪는 불안정한 자세를 보여주는 장면. 인물의 표정과 자세에서 “어딘가 불편하다”는 느낌이 드러나야 한다. 배경은 실제 헬스장처럼 보이되 기구가 너무 복잡하게 보이지 않게 흐리게 처리한다. 이미지 안에는 글자, 로고, 워터마크를 넣지 않는다.
3장: [핵심 전환] 4:5 세로 이미지. 같은 사람이 더 안정적인 스쿼트 자세를 취하고 있는 장면. 발바닥이 단단히 바닥을 누르고, 무릎과 발끝 방향이 자연스럽게 맞으며, 상체가 안정적으로 세워진 느낌이 보여야 한다. 이전 장보다 구도와 배경이 더 정돈되어야 하고, 조명은 차분하고 선명하게 피사체를 강조한다.
4장: [근거/설명] 4:5 세로 이미지. 스쿼트에서 중요한 발, 무릎, 골반 정렬이 잘 보이는 중간 거리 장면. 인물의 하체가 선명하게 보이고, 발의 지지와 무릎 방향을 이해할 수 있는 구도여야 한다. 교육용 이미지처럼 명확하지만 과한 다이어그램 느낌은 피하고, 실제 운동 사진처럼 자연스럽게 표현한다. 배경은 어둡고 단순하게 처리하며 이미지 안에는 텍스트를 넣지 않는다.
5장: [실행 방법] 4:5 세로 이미지. 스쿼트를 시작하기 전 발 너비를 잡고 복부에 힘을 주는 준비 자세. 발 위치, 무릎 방향, 상체 각도가 잘 보이도록 전신 또는 무릎 위까지 보이는 구도로 촬영한 느낌. 실용적인 튜토리얼 이미지처럼 동작이 명확해야 하며, 조명은 부드럽고 피사체의 윤곽이 잘 살아야 한다.
6장: [예시/체크리스트] 4:5 세로 이미지. 왼쪽에는 불안정한 스쿼트 자세, 오른쪽에는 안정적인 스쿼트 자세가 비교되는 장면. 두 자세의 차이가 한눈에 보여야 하며, 화면이 너무 복잡하지 않도록 배경은 동일한 어두운 스튜디오 톤으로 정리한다. 이미지 안에는 글자, 아이콘, 로고, 워터마크가 없어야 한다.
7장: [CTA] 4:5 세로 이미지. 운동을 마친 사람이 차분하고 자신감 있는 표정으로 서 있거나, 정돈된 스튜디오에서 안정적인 스쿼트 자세를 마무리하는 장면. 전체 분위기는 성취감이 있지만 과장되지 않게 담백해야 한다. 배경은 미니멀하고 어두운 톤으로 정리한다. 이미지 안에는 글자, 로고, 워터마크를 넣지 않는다.
```

이미지 설명은 실제 슬라이드 문안과 배경 의도에 맞춰 구체적으로 바꾼다. “좋은 이미지”처럼 추상적으로 쓰지 말고, 매우 구체적으로 작성한다. AI 이미지 생성 모델에 그대로 넣어도 퀄리티 높은 이미지가 나올 만큼 장면, 스타일, 피사체, 구도, 조명, 배경, 금지 요소를 포함한다. 이미지 프롬프트에는 하단 텍스트 영역을 비우거나 어둡게 만들라는 지시를 넣지 않는다.