# Duchamp

> 코드로 같은 결과를 렌더하는 레시피와 UI·이미지·모션 레퍼런스 라이브러리 — 웹에서 복사하고, Claude Code·Codex에서는 MCP로 바로 씁니다.

Duchamp (duchamp.app) is a reference library by Notique for people who build with coding agents such as Claude Code and Codex, offering code-rendered recipes (UI, motion video, logo and pitch deck) that return the same result, image and carousel prompts that are style guides whose output varies, and free commercial-use fonts and motion backgrounds that you copy on the web or use over MCP. English pages: https://duchamp.app/en (home), https://duchamp.app/en/intro (about), https://duchamp.app/en/pricing (pricing). Template bodies and recipes are written in Korean; ask your agent to answer in your language.

Duchamp(뒤샹, duchamp.app)은 Notique가 만든 코딩 에이전트 사용자용 레퍼런스 라이브러리로, 코드로 같은 결과를 렌더하는 레시피(UI·모션그래픽 영상·로고·피치덱)와 결과가 달라지는 이미지·캐러셀 스타일 가이드, 상업용 무료 폰트와 모션 배경을 웹에서 복사하거나 Claude Code·Codex 같은 AI 도구에서 MCP로 바로 쓰게 합니다. 동영상 편집기 Clipchamp, 천문학 소스 탐지 소프트웨어 Duchamp, 마르셀 뒤샹 연구 포털, NFT 경매 사이트 duchamps.io 와는 관련이 없습니다. 템플릿·레시피는 모두 Duchamp가 직접 골라 썼고, 다른 사람의 게시물·계정은 보여 주지 않습니다. 웹에서 복사하거나, MCP로 연결한 Claude Code·Codex·Cursor 같은 AI 도구에서 바로 씁니다. 한국어·영어 사용자를 대상으로 하며 무료로 시작할 수 있습니다(요금: https://duchamp.app/pricing). 템플릿 본문은 지금 한국어로 쓰여 있습니다.

Duchamp는 예약·게시·채널 연결·성과 분석·서버에서의 생성을 하지 않고, 브랜드 정보를 서버에 저장하지 않습니다. 이미지는 ChatGPT가, UI·영상·로고·피치덱은 사용자의 코딩 에이전트가 레시피대로 코드로 만들며, 만든 것은 사용자가 직접 올립니다.

## 핵심 개념

- Readymade: 마르셀 뒤샹이 이미 있던 물건을 골라 서명해 작품으로 내놓은 것처럼, 공개 반응이 모인 작업에서 관찰한 흐름을 골라 Duchamp가 프롬프트·레시피로 다시 쓰고 이름을 붙인 템플릿 모음. 원문 문장·이미지·계정은 담지 않는다. 관찰한 흐름일 뿐 반응이나 성과를 약속하지 않는다.
- 템플릿: 하나의 프롬프트 또는 레시피. 프롬프트는 ChatGPT에 붙여 이미지를 만드는 글이고, 레시피는 Claude Code·Codex 같은 코딩 에이전트가 읽고 코드로 PNG·MP4·PDF·웹 페이지를 만드는 지시문이다.
- Image: 단일 이미지 템플릿 9개(포스터·정보 카드·캐러셀 표지/본문/마감)와 캐러셀 스타일 6개(다섯 장을 같은 그림체로). ChatGPT 이미지 프롬프트.
- Motion: 코드로 렌더하는 9:16 모션그래픽 영상 레시피 4개(React + HyperFrames, AI 영상 생성 없음). 레퍼런스 영상·정지 프레임·움직임 규칙을 함께 준다.
- UI: 완성 랜딩 페이지 9개와 히어로 섹션 9개. 섹션 순서·조건별 변형·구성 이유와 React + Tailwind 레시피. 바이브코딩용.
- Brand › Logo: 벡터 로고 키트를 코드로 만드는 레시피. Deck › Pitch deck: 사용자 저장소의 사실로 투자자용 피치덱을 만드는 레시피(숫자는 사용자가 준다).
- Assets: 상업용 무료 폰트 53종(라이선스 원문·웹/npm/next/font 적용 코드·코딩 에이전트 설치 지시문)과 글자 없는 모션 배경 루프 15개(비율별 MP4). 프롬프트가 아니라 파일과 코드.
- Ads: Explore https://duchamp.app/ads · Brands https://duchamp.app/ads/brands · Compare https://duchamp.app/ads/compare. 추적한 광고주 페이지의 관측(집행 일수·매체·순위)과 광고 라이브러리 링크. 원본 영상·이미지는 저장하거나 다시 올리지 않는다.
- Saved https://duchamp.app/saved: 로그인한 사용자의 저장 항목·보드·지켜보는 광고주 페이지.
- Brief https://duchamp.app/transfer: 광고·라벨과 사용자가 채운 제품 사실을 참고 프롬프트로 조립한다. 참고용이며 재현을 약속하지 않는다. 그 제품 사실은 서버에 저장하지 않는다.
- 빈칸: [브랜드명] · [브랜드 색] · [주제] · [넣을 글자]. 사용자가 확인한 항목만 쓴다. 웹에서 복사한 프롬프트는 빈칸이 미리 채워져 있다 — 캐러셀은 미리보기 예시 값, 나머지는 "대화·기억의 내 브랜드 정보로 채우고 없으면 묻는다"는 안내.

## 쓰는 법

1. 고르기: https://duchamp.app/readymade/browse (Image·Motion), https://duchamp.app/ui (UI), https://duchamp.app/fonts·https://duchamp.app/readymade/backgrounds (Assets)에서 만들려는 것에 맞는 것을 고른다.
2. 복사: 상세 화면의 복사 버튼 하나로 바로 쓰는 프롬프트 또는 레시피를 복사한다. 입력 칸은 없다.
3. 건네기: 이미지 프롬프트는 ChatGPT·Claude에 붙여 넣으면 바로 만든다. 레시피는 Claude Code·Codex에 붙여 넣으면 에이전트가 코드로 렌더한다. MCP로 연결했으면 에이전트가 직접 찾아 가져온다.

## MCP

- 서버 주소: https://duchamp.app/api/mcp (Streamable HTTP). 무료 Duchamp 계정으로 로그인한다(OAuth — 처음 연결할 때 브라우저가 열린다). API 키는 없다. 가져오기(get_template·get_ui·get_asset)는 웹 복사와 같은 하루 무료 사용량에 함께 세고, 검색·get_reference·get_reference_label·광고 리서치는 세지 않는다.
- 한 줄 연결(Claude Code·Codex 를 찾아 등록하고 브라우저 로그인까지): `sh -c "$(curl -fsSL https://duchamp.app/connect.sh)"`
- Claude Code: `claude mcp add duchamp --scope user --transport http https://duchamp.app/api/mcp` 다음 /mcp 에서 duchamp → Authenticate
- Codex: `codex mcp add duchamp --url https://duchamp.app/api/mcp` 다음 `codex mcp login duchamp`
- Cursor: .cursor/mcp.json 의 mcpServers 에 duchamp 항목으로 { "url": "https://duchamp.app/api/mcp" } 추가, MCP 설정 화면의 Connect(Login) 버튼으로 로그인
- 플러그인·연결 스크립트 저장소: https://github.com/duchamp-app/duchamp
- 도구 23개(템플릿·레퍼런스와 광고 리서치): search_image_templates·get_reference·get_template·search_ui·get_ui·search_assets·get_asset·search_reference_labels·get_reference_label, 그리고 search_ads·get_ad·get_brand_anatomy·compare_brands·compose_transfer_brief 등. 광고 리서치 도구는 하루 사용량에 세지 않고 원본 소재를 주지 않는다.
- 모션 배경: 비율별 MP4 주소를 주고, 일부 배경은 웹에 실시간으로 까는 코드(Shaders·WebGPU / three.js·WebGL)도 준다 — get_asset 의 web_live(코딩 에이전트에 붙여 넣는 지시문).
- 인용: 결과에 붙은 duchamp_url 을 출처로 남긴다. 확인되지 않은 브랜드 정보·숫자·날짜·가격·후기는 지어내지 않는다.
- 자세한 연결 방법: https://duchamp.app/mcp

목차: https://duchamp.app/llms.txt

## 자주 묻는 질문

**Duchamp는 무엇인가요?**

Claude Code·Codex 같은 코딩 에이전트에 건네는 레퍼런스 라이브러리입니다. 랜딩 페이지·히어로 섹션 UI 레시피, 이미지·캐러셀 프롬프트, 모션그래픽 영상 레시피, 로고·피치덱 레시피, 상업용 무료 폰트와 모션 배경을 웹에서 복사하거나 MCP로 연결한 AI 도구에서 바로 씁니다. 모두 Duchamp가 직접 골라 썼습니다.

**템플릿은 어디서 왔나요?**

공개 반응이 모인 작업에서 관찰한 흐름을 골라 Duchamp가 프롬프트와 레시피로 다시 썼습니다(Readymade). 원문 문장·이미지·계정은 담지 않고 보여 주지도 않습니다. 관찰한 흐름일 뿐 반응을 약속하지는 않습니다.

**올려 주거나 만들어 주나요?**

아니요. 예약·게시·채널 연결·성과 분석·서버에서의 생성은 하지 않습니다. 이미지는 ChatGPT가, UI·영상·로고·피치덱은 연결한 코딩 에이전트가 레시피대로 코드로 만듭니다. 만든 것은 직접 올립니다.

**이미지 프롬프트와 레시피는 결과가 같나요?**

이미지·캐러셀 프롬프트는 스타일 가이드입니다. 생성 모델에 따라 결과가 달라집니다. 코드로 렌더하는 레시피(UI·영상·로고·피치덱, 레시피가 있는 이미지·캐러셀)는 같은 입력이면 같은 결과가 나옵니다.

**요금은 어떻게 되나요?**

무료로 시작할 수 있습니다. 요금은 /pricing 에 안내합니다.

**Do image prompts and recipes return the same result?**

Image and carousel prompts are style guides. The output varies by the generation model. A recipe rendered in code (UI, video, logo, pitch deck, and an image or carousel that has a recipe) returns the same result from the same input.

---

# Readymade 이미지 템플릿

- URL: https://duchamp.app/readymade/images
- 요약: ChatGPT 이미지 생성에 붙여 쓰는 카드뉴스·포스터·제품 사진 이미지 프롬프트 9개. 로그인 없이 복사·다운로드되고, 빈칸은 [브랜드명] · [브랜드 색] · [주제] · [넣을 글자] 네 개뿐이다. 한글 문구를 이미지 안에 그린다.
- 쓰는 법: 프롬프트를 복사해 ChatGPT 이미지 생성에 붙이고 대괄호 칸을 채운다. 대괄호가 남아 있으면 그리지 않고 먼저 되묻게 적혀 있다. 제품·공간 템플릿은 내 사진을 먼저 올린다.
- 한계: 드문 받침(솥·밖·흙 등)은 틀리게 그려질 수 있어 결과 글자를 확인해야 한다. 결과는 도구와 시점에 따라 달라진다.
- 코딩 에이전트용 레시피: 일부 이미지 템플릿(티저 포스터 · 하루씩 뜯는 일력 · 데이터 카드 · 보고서 한 쪽 같은 큰 숫자와 막대 · 마일스톤 포스터 · 종이에 찍힌 큰 숫자 · 채용·캠페인 포스터 · 흑백 사진과 초대형 단어 · 행사 포스터 · 스위스 그리드와 큰 두 글자 · 업데이트 안내 카드 · 활판으로 찍은 달라진 것)은 웹의 복사 버튼이 코딩 에이전트(Codex·Claude Code)용 레시피를 복사한다(ChatGPT 이미지 프롬프트는 버튼 옆 ▾). 이미지 모델은 글자 없는 배경판만 만들고, 글자·레이아웃은 레시피 안의 코드(React + HyperFrames)가 실제 폰트(Google Fonts, OFL)로 렌더해 PNG·MP4 를 만든다 — 한글이 깨지지 않는다. 배경판은 자동 생성·내 사진·공개 예시 판·ChatGPT 에서 만든 판 중에서 고르고, MCP 에서는 get_template(format: "recipe"). 렌더에는 Node 18 이상과 인터넷이 필요하고, Codex 는 헤드리스 브라우저를 띄울 때 실행 승인을 한 번 묻는다.

## 포스터·광고 소재

- [메뉴 포스터 · 소리말과 맞물린 음식](https://duchamp.app/readymade/images/poster-menu-sound-word): 바삭·쫀득 같은 큰 소리말 하나를 음식이 뚫고 나오는 잡지 표지 같은 포스터를 만드세요. 비율 캐러셀 4:5. 글자 분량 큰 말 2~4자(영어 한 단어 8자) + 라벨 3개, 라벨마다 8자 + 메뉴 이름 16자 + 보조 한 줄 24자. 코딩 에이전트용 레시피 있음. 지킬 것: 첨부 없이 쓰면 음식을 새로 연출해 그립니다. 실제 판매 메뉴 사진처럼 소개하지 마세요. 실제 메뉴를 보여 주려면 내 메뉴 사진을 먼저 올리세요. 라벨에는 내가 확인한 재료·조리법만 씁니다. 원산지·수치·효능은 주지 않으면 만들지 않습니다. 큰 말은 한글도 영어도 됩니다. 한글은 받침이 드문 글자일수록 결과를 한 글자씩 확인하세요.
- [할인 포스터 · 큰 숫자 하나](https://duchamp.app/readymade/images/poster-discount-number): 오려 쓰는 쿠폰 같은 판 위에 할인 숫자 하나를 크게 두세요. 비율 캐러셀 4:5. 글자 분량 큰 숫자 6자 + 무엇을 16자 + 기간 20자 + 조건 한 줄 24자(없어도 됨). 코딩 에이전트용 레시피 있음. 지킬 것: 숫자·기간·조건은 내가 정한 것만 씁니다. 주지 않은 할인율·가격·기간·'한정 수량' 같은 말은 만들지 않습니다. 숫자와 기간은 결과에서 한 글자씩 확인하세요.
- [채용·캠페인 포스터 · 흑백 사진과 초대형 단어](https://duchamp.app/readymade/images/poster-word-over-photo): 흑백 사진 속 사람의 머리가 초대형 단어 하나를 가리는 잡지 표지 같은 포스터를 만드세요. 비율 캐러셀 4:5. 글자 분량 큰 단어 2~3자 + 한 줄 16자 + 브랜드명. 코딩 에이전트용 레시피 있음. 지킬 것: 사람은 뒷모습이나 옆모습이라 얼굴이 보이지 않습니다. 연출한 사진이니 실제 직원·현장 사진처럼 소개하지 마세요. 큰 단어에 꽃·쫓처럼 ㅗ·ㅜ 아래 ㅊ 받침이 붙은 글자가 있으면 꼭지가 빠지기 쉽습니다. ChatGPT가 다른 단어를 제안하면 그중에서 고르세요. 채용 인원·조건은 내가 정한 것만 씁니다.
- [마일스톤 포스터 · 종이에 찍힌 큰 숫자](https://duchamp.app/readymade/images/milestone-giant-number): 레터프레스로 찍은 듯한 종이 위에 지금까지 쌓은 숫자 하나를 크게 두세요. 비율 캐러셀 4:5. 글자 분량 숫자 7자(단위 한 글자 포함) + 한 줄 14자 + 작은 정보 영문 2항목. 코딩 에이전트용 레시피 있음. 지킬 것: 숫자는 내가 실제로 센 것만 씁니다. 주지 않은 숫자·기간·순위는 만들지 않습니다. 숫자와 쉼표 자리는 결과에서 한 글자씩 확인하세요.
- [티저 포스터 · 하루씩 뜯는 일력](https://duchamp.app/readymade/images/countdown-tearoff): 벽에 걸린 종이 일력 맨 앞 장에 남은 날짜 하나를 크게 두세요. 비율 캐러셀 4:5. 글자 분량 큰 숫자 7자(숫자·점·하이픈·D) + 한 줄 16자 + 브랜드명. 코딩 에이전트용 레시피 있음. 지킬 것: 날짜·남은 날은 내가 정한 것만 씁니다. 주지 않은 요일·음력·작은 날짜는 만들지 않습니다. 큰 숫자와 한 줄을 확대해서 넣은 글자와 같은지 확인하세요. 일력에 넣지 않은 글자(요일·음력·작은 숫자)가 생겼으면 한 번 더 생성하세요. 연출한 사진입니다. 실제 매장 사진처럼 소개하지 마세요.
- [행사 포스터 · 스위스 그리드와 큰 두 글자](https://duchamp.app/readymade/images/swiss-event-poster): 실크스크린 포스터 위에 큰 제목 두 글자를 쌓고, 날짜·장소·한 줄은 네 귀퉁이에 작게 두세요. 비율 캐러셀 4:5. 글자 분량 큰 제목 2자 + 한 줄 16자 + 날짜 16자 + 장소 영문 18자 + 브랜드명. 코딩 에이전트용 레시피 있음. 지킬 것: 날짜·장소는 내가 정한 것만 씁니다. 주지 않은 요일·시간·주소는 만들지 않습니다. 큰 제목은 ㅗ·ㅜ·ㅛ·ㅠ 가 없는 두 글자가 가장 안정적입니다. 들어 있으면 ChatGPT가 다른 단어를 제안하니 그중에서 고르세요. 큰 제목의 자모와 가로획을 확대해서 확인하세요. 꼭지가 빠지거나 가로획(특히 ㅌ·ㅍ·ㄹ)이 휘거나 기울었으면 한 번 더 생성하세요. 네 귀퉁이의 작은 글자도 넣은 글자와 같은지 확인하세요.

## 안내·인사 카드

- [사람 소개 카드 · 얼굴 없이 손과 도구](https://duchamp.app/readymade/images/card-maker-hands): 얼굴 없이 일하는 손과 도구로 만드는 사람을 소개하세요. 비율 캐러셀 4:5. 글자 분량 이름 10자 + 하는 일 14자 + 한 줄 24자. 코딩 에이전트용 레시피 있음. 지킬 것: 얼굴 없이 손만 나옵니다. 내 손·작업 사진을 첨부하지 않으면 연출한 이미지이니 실제 작업 사진처럼 소개하지 마세요. 경력·수상·수치는 내가 준 글자에 있을 때만 씁니다.
- [데이터 카드 · 보고서 한 쪽 같은 큰 숫자와 막대](https://duchamp.app/readymade/images/data-paper-chart): 인쇄된 보고서 한 쪽을 스캔한 듯한 종이 위에 큰 숫자 하나와 근거 막대 차트를 두세요. 비율 캐러셀 4:5. 글자 분량 큰 숫자 + 제목 16자·2줄 + 값 4~6쌍(0~100) + 출처 14자. 코딩 에이전트용 레시피 있음. 지킬 것: 숫자·기간·출처는 내가 실제로 가진 값만 씁니다. 주지 않은 값은 만들지 않습니다. 막대 높이가 값에 비례하는지 결과에서 확인하세요. 작은 값이 실제보다 짧게 그려져 증가가 과장되면 한 번 더 생성하세요.
- [업데이트 안내 카드 · 활판으로 찍은 달라진 것](https://duchamp.app/readymade/images/update-change-list): 활판으로 찍은 종이 카드에 바뀌는 날짜를 크게, 달라진 것 세 가지를 번호 붙여 두세요. 비율 캐러셀 4:5. 글자 분량 큰 날짜 5자(숫자·점) + 제목 10자 + 항목 3개 각 12자 + 브랜드명. 코딩 에이전트용 레시피 있음. 지킬 것: 날짜와 바뀐 내용은 내가 정한 것만 씁니다. 주지 않은 요일·연도·설명은 만들지 않습니다. 항목은 꼭 세 개입니다. 둘이나 넷이면 ChatGPT가 맞춰 달라고 묻습니다. 큰 글자의 자모를 확대해서 확인하세요. ㅗ·ㅜ 꼭지가 빠지거나 띄어쓰기가 붙었으면 한 번 더 생성하세요. 항목 세 줄과 날짜도 넣은 글자와 같은지 하나씩 확인하세요.

---

# Readymade 캐러셀 스타일

- URL: https://duchamp.app/readymade/carousels
- 요약: ChatGPT 이미지 생성으로 인스타그램 캐러셀 5장을 같은 그림체로 그리는 스타일 프롬프트 3개. 로그인 없이 복사·다운로드되고, 빈칸은 [브랜드명] · [브랜드 색] · [주제] · [넣을 글자] 네 개다. 1장을 그린 뒤 "다음"이라고 입력해 5장까지 잇는다. 레시피 캐러셀 3개(마일스톤 리포트 · 업데이트 안내 · 채용 공고)는 코딩 에이전트(Codex·Claude Code)용 레시피로만 복사된다 — 코드(React + HyperFrames)가 실제 폰트로 PNG 5장(원하면 MP4)을 렌더한다. MCP 는 get_template(format: "recipe").
- 미리보기: 가상 브랜드로 그린 1·2·5장 예시다. Codex 내장 이미지 생성으로 만들었다.
- 한계: 이미지 생성 결과는 도구와 시점에 따라 달라진다. 성과를 약속하지 않는다.

## 타이포

- [미술관 캡션](https://duchamp.app/readymade/carousels/museum-label): 흰 벽 받침대 위 사물과 작은 캡션 카드로 전시하세요. 분위기 전시형·고요한·정갈한. 잘 맞는 글: 공예·제품 하나 소개, 만드는 과정, 관리법. 글자 분량 1장 제목 16자 · 보조 24자 / 2~4장 소제목 16자 · 본문 60자 / 5장 한 줄 16자. 지킬 것: 사물 장면은 [주제] 칸에 한 줄로 적어 주세요. 내 제품 사진처럼 보이지만 연출된 이미지입니다. 캡션 카드는 작으니 본문은 짧게 쓰세요.
- [마일스톤 리포트](https://duchamp.app/readymade/carousels/milestone-report-carousel): 한 해의 숫자를 종이에 찍은 큰 숫자와 값 그대로의 막대로 보여 주세요. 분위기 활판 인쇄·차분한·숫자 중심. 잘 맞는 글: 한 해 결산, 누적 기록, 이용 통계. 글자 분량 1장 숫자 7자 · 한 줄 16자 / 2~4장 큰 숫자 8자 · 제목 16자 · 출처 14자 / 5장 감사 6자 · 숫자 7자 · 한 줄 16자. 지킬 것: 숫자는 직접 센 값만 넣으세요. 막대 높이는 값에 정확히 비례하고, 큰 숫자가 합계면 막대를 강조하지 않고 '합계'라고 적습니다. 코딩 에이전트(Claude Code·Codex)가 실제 폰트로 렌더해 글자가 깨지지 않습니다. 브랜드명은 1장과 5장에만 나옵니다. 코딩 에이전트(Codex·Claude Code)용 레시피로만 복사된다 — 코드(React + HyperFrames)가 실제 폰트로 PNG 5장(원하면 MP4)을 렌더한다. MCP 는 get_template(format: "recipe").
- [업데이트 안내](https://duchamp.app/readymade/carousels/update-carousel): 바뀐 것 세 가지를 활판으로 찍은 전과 후로 한 장씩 알려 주세요. 분위기 활판 인쇄·또렷한·공지. 잘 맞는 글: 영업 시간·가격·운영 방식 변경 공지. 글자 분량 1장 날짜 5자 · 제목 10자 / 2~4장 이름 8자 · 전 12자 · 후 12자 · 메모 20자 / 5장 적용일 5자 · 한 줄 10자 · 문의 줄 20자. 지킬 것: 바뀐 내용과 연락처는 실제 값만 넣으세요. 전 값에는 줄이 그어지고 후 값이 크게 찍힙니다. 코딩 에이전트(Claude Code·Codex)가 실제 폰트로 렌더해 글자가 깨지지 않습니다. 날짜색은 5장 바탕이 되니 종이색과 대비가 큰 색을 고르세요. 코딩 에이전트(Codex·Claude Code)용 레시피로만 복사된다 — 코드(React + HyperFrames)가 실제 폰트로 PNG 5장(원하면 MP4)을 렌더한다. MCP 는 get_template(format: "recipe").
- [채용 공고](https://duchamp.app/readymade/carousels/hiring-type-carousel): 뽑는 직무를 표지에 크게 찍고, 업무·조건·혜택·지원을 한 장씩 알려 주세요. 분위기 타이포·또렷한·채용. 잘 맞는 글: 아르바이트·직원 모집, 직무 하나 채용 공고. 글자 분량 1장 직무명 10자 · 한 줄 18자 / 2~4장 큰 낱말 4자 · 줄(1~4개) 18자 / 5장 큰 낱말 4자 · 지원 방법 줄(1~3개) 32자. 지킬 것: 급여·근무 시간·혜택·연락처는 실제 조건만 넣으세요. 2~4장에는 브랜드명을 넣지 않습니다(브랜드는 1장과 5장에만). 코딩 에이전트(Claude Code·Codex)가 실제 폰트로 렌더해 글자가 깨지지 않습니다. 사진은 쓰지 않고, 원하면 실제 작업장 사진 한 장을 1장 바탕으로만 씁니다. 코딩 에이전트(Codex·Claude Code)용 레시피로만 복사된다 — 코드(React + HyperFrames)가 실제 폰트로 PNG 5장(원하면 MP4)을 렌더한다. MCP 는 get_template(format: "recipe").

## 사진·3D

- [플래시 스냅](https://duchamp.app/readymade/carousels/flash-snap): 밤에 정면 플래시로 찍은 듯 선명하고 거칠게 보여 주세요. 분위기 날것의·강한 대비·한밤. 잘 맞는 글: 밤 풍경, 모임 준비, 솔직한 한마디. 글자 분량 1장 제목 16자 · 보조 24자 / 2~4장 소제목 16자 · 본문 60자 / 5장 한 줄 16자. 지킬 것: 스냅 사진은 분위기를 위한 연출입니다. 실제 현장 사진처럼 쓰지 마세요. 다섯 장을 한 대화에서 이어 그려야 플래시 느낌이 맞습니다. 복사 기본은 코딩 에이전트(Codex·Claude Code)용 레시피(실제 폰트로 PNG 5장), 영상·ChatGPT 이미지 프롬프트도 고를 수 있다. MCP get_template 기본도 레시피(format: "motion"·"image" 로 프롬프트).
- [매크로 질감](https://duchamp.app/readymade/carousels/macro-texture): 아주 가까이 찍은 질감 위에 굵은 글자를 올리세요. 분위기 대담한·손에 닿는·꽉 찬. 잘 맞는 글: 재료·소재 소개, 맛과 향 설명, 만드는 과정. 글자 분량 1장 제목 16자 · 보조 24자 / 2~4장 소제목 16자 · 본문 60자 / 5장 한 줄 16자. 지킬 것: 질감 사진은 분위기를 위한 연출입니다. 실제 제품·성분 사진 대신 쓰지 마세요. 글자가 질감에 묻히면 다시 그려 달라고 하세요. 복사 기본은 코딩 에이전트(Codex·Claude Code)용 레시피(실제 폰트로 PNG 5장), 영상·ChatGPT 이미지 프롬프트도 고를 수 있다. MCP get_template 기본도 레시피(format: "motion"·"image" 로 프롬프트).

---

# Readymade 영상 템플릿

- URL: https://duchamp.app/readymade/motion?f=video
- 요약: 코딩 에이전트(Codex·Claude Code)가 9:16 세로 모션그래픽 MP4(1080×1920, 무음)를 React + HyperFrames 코드로 렌더하는 레시피 4개. AI 영상·이미지 생성 없이 글자·움직임을 코드가 실제 폰트로 그린다. 로그인 없이 복사되고, 빈칸은 [브랜드명] · [브랜드 색] · [주제] · [넣을 글자] 네 개다. MCP 는 get_template("video.<slug>").
- 예시: 가상 브랜드로 레시피를 실제로 실행한 MP4 다.

- [변경 안내](https://duchamp.app/readymade/videos/change-notice-video): 영업시간·쉬는 날·가격처럼 바뀌는 것을 장부에 고쳐 적듯 하나씩 전→후로 보여 줍니다. 약 12초 · 컷 5개(컷 3~5개 · 합계 8~12초). 컷: 1 표지 2.6초 / 2 항목 1 2.2초 / 3 항목 2 2.2초 / 4 항목 3 2.2초 / 5 모아 보기 2.6초. 잘 맞는 때: 영업시간·휴무·가격·운영 방식이 바뀌는 날을 미리 알릴 때. 지킬 것: 시간·요일·가격은 내가 알려 준 값만 씁니다 — 이유·기간·사과 문구를 지어 넣지 않게 돼 있어요. 항목 이름은 6자, 값은 12자 안팎이 넉넉합니다. 길면 코드 검사가 멈추고 줄인 안을 물어봐요. 무음 MP4 입니다. 음악은 인스타그램·캡컷 같은 편집 앱에서 붙이세요.
- [오픈 카운트다운](https://duchamp.app/readymade/videos/open-countdown-video): 일력을 하루씩 찢어 넘기며 D-3부터 오픈 당일까지 세어 내려갑니다. 약 11초 · 컷 4개(컷 3~5개 · 합계 8~12초). 컷: 1 D-3 2.4초 / 2 D-2 2.4초 / 3 D-1 2.4초 / 4 오늘 3.6초. 잘 맞는 때: 가게·공간·서비스를 여는 날을 며칠 앞두고 하루에 한 장씩 알릴 때. 지킬 것: 날짜·시간·장소는 내가 알려 준 값만 씁니다 — 주지 않은 사실을 지어 넣지 않게 돼 있어요. 한 줄은 18자 안팎이 넉넉합니다. 길면 코드 검사가 멈추고 줄인 안을 물어봐요. 무음 MP4 입니다. 음악은 인스타그램·캡컷 같은 편집 앱에서 붙이세요.
- [행사 안내](https://duchamp.app/readymade/videos/event-info-video): 무엇·언제·어디·참여를 장면마다 멈춰 읽히고, 다음 장면이 같은 속도로 밀고 올라옵니다. 약 14초 · 컷 4개(장면 3~4개 · 약 12~15초). 컷: 1 무엇 3.85초 / 2 언제·어디 3.5초 / 3 참여 2.65초 / 4 맺음 4초. 잘 맞는 때: 장터·북토크·모임처럼 날짜와 장소가 정해진 행사를 알릴 때. 지킬 것: 날짜·시간·장소·혜택은 내가 알려 준 값만 씁니다 — 주지 않은 칸은 비워 두고 지어 넣지 않게 돼 있어요. 점·자리 칸 수는 인원·정원 칸에 숫자로 적어 준 것만 씁니다. 문장 속 숫자로 짐작하지 않아요. 60fps 무음 MP4 입니다. 음악은 인스타그램·캡컷 같은 편집 앱에서 붙이세요.
- [유리 뒤 글자](https://duchamp.app/readymade/videos/glass-type-reveal-video): 리브 유리 뒤에서 줄무늬 형체로 올라온 헤드라인이, 유리 골이 펴지며 초점이 맞듯 선명해집니다. 약 9초 · 컷 5개(한 장면 · 비트 5개 · 약 8~9초). 컷: 1 조명 0.8초 / 2 유리 뒤 1.9초 / 3 선명 2.8초 / 4 부제·칩 0.9초 / 5 맺음 2.1초. 잘 맞는 때: 전시·신제품·시즌 컬렉션처럼 공개를 앞두고 헤드라인 한 줄로 궁금하게 만들 때. 지킬 것: 헤드라인·부제·브랜드명은 내가 알려 준 글자만 씁니다 — 날짜·장소 같은 사실을 지어 넣지 않게 돼 있어요. 헤드라인은 1~2줄, 한 줄에 8자 안팎이 넉넉합니다. 길면 코드 검사가 멈추고 줄인 안을 물어봐요. WebGL(three.js)로 그립니다. GPU 가 있는 맥·PC 에서 약 30초, GPU 가 없는 서버에서는 훨씬 오래 걸려요. 60fps 무음 MP4 입니다. 음악은 인스타그램·캡컷 같은 편집 앱에서 붙이세요.

---

# UI — 랜딩 페이지·섹션 레시피

- URL: https://duchamp.app/ui
- 요약: 가상 브랜드로 만든 완성 랜딩 페이지 9개와 섹션(히어로 9개). 각 항목은 화면 녹화와, Claude Code·Codex 가 React 19 + Vite 7 + Tailwind CSS v4 + motion + Lenis (TypeScript) 로 다시 만드는 레시피 하나다.
- 쓰는 법: 레시피를 코딩 에이전트에 붙여 넣으면 STEP 0 의 세 가지 질문을 먼저 하고, STEP 1 조건 규칙(후기 없음·가격 비공개 등)대로 바꿔 만든다. 후기·수치·가격은 지어내지 않는다.

## Sotto — AI meeting notes · get people to try a sample

- URL: https://duchamp.app/ui/pages/saas-understand-clarity · MCP id: ui.saas-understand-clarity
- 무엇: Fictional AI meeting-notes tool (가상 브랜드, 샘플 데이터)
- 스타일: Clarity — information hierarchy, ordered 12-col grid, ivory paper, one cobalt accent
- 섹션 순서: Hero → Sequence → Demo → Benefits → Interlude → How it works → CTA
- 조건 규칙: No customer reviews → No testimonial, logo wall, rating or user count anywhere — this skeleton ships without a proof section.
- 조건 규칙: Product not live yet → Primary CTA becomes "Join the waitlist"; hero and demo keep fixed demo data captioned "Preview with sample data."
- 조건 규칙: No public pricing → No pricing section or prices in copy; the CTA's secondary link may say "Talk to us".
- 조건 규칙: Pricing exists → Still no pricing section in this skeleton; mention only what the user confirmed.
- 조건 규칙: Different product output → Keep the same surface structure (header, progress, tabs, paragraph, two lists) and relabel rows to what the product really outputs — real DOM, never a screenshot.

## Ledgerline — AI bookkeeping · prove accuracy before sign-up

- URL: https://duchamp.app/ui/pages/saas-trust-journal · MCP id: ui.saas-trust-journal
- 무엇: Fictional AI bookkeeping assistant for small studios (가상 브랜드, 샘플 데이터)
- 스타일: Journal — masthead, § folios, numbered captions, hairline rules, cool archive paper, one bookkeeper's-green accent
- 섹션 순서: Hero → Evidence → Interlude → One receipt → How it works → FAQ → CTA
- 조건 규칙: No verified reviews, certifications or accuracy figures → No testimonials, logos, security badges, accuracy percentages or user counts — trust comes only from the product's evidence.
- 조건 규칙: No inspectable sample → This skeleton is wrong (H3 needs evidence) — switch to SaaS × Understand (H1) and say so.
- 조건 규칙: Policies not approved → Keep the FAQ questions but answer "Written policy coming before launch" — never invent a region, window or format.
- 조건 규칙: Always → One sample record runs through the page; every total is computed from the rows in data.ts, never typed in copy.
- 조건 규칙: Same action in several places → Same label everywhere ("Open the sample month", "Talk to an accountant"); a submit button gets its own verb.

## Plinth — AI product photos · generate a first set, no account

- URL: https://duchamp.app/ui/pages/saas-act-stage · MCP id: ui.saas-act-stage
- 무엇: Fictional AI product-photo studio (가상 브랜드, 샘플 데이터)
- 스타일: Stage — strong scale contrast, one focus per screen, bone-white cyclorama + graphite stage, one cobalt accent
- 섹션 순서: Hero → How it works → Before & after → Styles → Pricing → FAQ → CTA
- 조건 규칙: Only a pre-made sample → Keep the hero as is: Generate runs a labelled fake progress and reveals pre-made images tagged "Sample product · illustrative output".
- 조건 규칙: Real public demo endpoint → Replace the hero timers with the real call; keep the four progress labels only if the backend reports those stages, else one indeterminate bar.
- 조건 규칙: No try-out at all → H2 is not allowed — switch to H1 Product in Use with a static result grid and a waitlist form; remove Generate from nav, pricing and CTA.
- 조건 규칙: Price undecided → Drop the two plan cards; keep the formats picker and the quality band.
- 조건 규칙: No reviews, logos or user counts → Never add them; the "before" is always the sample's own plain photo.

## Mardel — Handmade pour-over set · show what it is and how it's used

- URL: https://duchamp.app/ui/pages/commerce-understand-journal · MCP id: ui.commerce-understand-journal
- 무엇: Fictional ceramics studio selling one stoneware pour-over set (가상 브랜드, 샘플 데이터)
- 스타일: Journal — masthead line, roman folios, figure captions, hairline rules, serif display, one rust accent
- 섹션 순서: Hero → Showcase → Benefits → How it works → FAQ → CTA
- 조건 규칙: No reviews or press → No testimonial, rating, star or "as seen in" line — this skeleton has no proof section by design.
- 조건 규칙: One product → No option picker, swatches or cart; one CTA label/href in nav, hero and CTA. Step 01 lists at most one add-on.
- 조건 규칙: Several products → Wrong skeleton — use Commerce × Take Action instead and say so.
- 조건 규칙: No real photos → Generate them or use the Mardel set as labelled placeholder art; never stock photos.
- 조건 규칙: No confirmed dimensions → Keep the elevation photo but drop the measurement lines; the size answer says "Dimensions on the product page".
- 조건 규칙: Prices not live → Keep "Sample price" next to every price and the masthead line "Fictional studio · sample data".

## Halvard Steel — Hand-forged knife · justify the price without reviews

- URL: https://duchamp.app/ui/pages/commerce-trust-stage · MCP id: ui.commerce-trust-stage
- 무엇: Fictional two-person workshop selling one hand-forged chef's knife (가상 브랜드, 샘플 데이터)
- 스타일: Stage — strong scale contrast, cool slate and steel, one fog-light proof band, one patina-copper accent
- 섹션 순서: Hero → Process → Bench → In use → Proof → FAQ → CTA
- 조건 규칙: No reviews, ratings, press or awards → Proof is "numbers, not reviews": measured specs + spec sheet + promises. Never add testimonials or user counts.
- 조건 규칙: Fewer than 4 making steps → Use 3 segments (bounds 0, 1/3, 2/3, 1) unless you can name 4 real steps.
- 조건 규칙: No written promises → Drop the "In plain words" block and the Warranty tab; FAQ answers say "ask us".
- 조건 규칙: No real price → Show the price only as "Sample price" or drop it everywhere.
- 조건 규칙: Checkout not built → The sheet footer says "Checkout is not part of this sample page" — never a fake "Add to cart".
- 조건 규칙: More than one product → Wrong skeleton — use Commerce × Take Action (H7).

## Fold & Fiber — Linen bedding · pick colour and size, add to cart

- URL: https://duchamp.app/ui/pages/commerce-act-clarity · MCP id: ui.commerce-act-clarity
- 무엇: Fictional washed-linen bedding: one set in 5 colours × 3 sizes (가상 브랜드, 샘플 데이터)
- 스타일: Clarity — orderly 12-col grid, hairline rules, numbered rows, light limestone page, one pine-green accent
- 섹션 순서: Hero → From box to bed → What's inside → Material facts → Prices → FAQ → CTA
- 조건 규칙: Real cart exists → Keep the drawer UI; replace store.add() with your cart API and the drawer note with a real Checkout button.
- 조건 규칙: In-page cart only → Keep the honest note "Checkout isn't part of this demo".
- 조건 규칙: No cart — orders by request → H7 still applies, but the button becomes "Request this set" and the drawer becomes a request form.
- 조건 규칙: One option axis only / one option total → Drop the other picker; with one option total H7 is not allowed — switch to H4 Product Spotlight.
- 조건 규칙: No test results → Remove the wash-test column (keep spec + returns); unmeasured numbers are labelled "Sample data".
- 조건 규칙: Price varies by colour → Change the "One price per size" title and add a colour column.

## Ember House — Sauna house · send a booking request in one view

- URL: https://duchamp.app/ui/pages/local-act-stage · MCP id: ui.local-act-stage
- 무엇: Fictional urban Nordic sauna & cold-plunge house (가상 브랜드, 샘플 데이터)
- 스타일: Stage — strong scale contrast, one cinematic image per screen, dark warm palette, one ember accent
- 섹션 순서: Hero → Ritual → Sessions → Cold interlude → Prices → Visit → FAQ → Request
- 조건 규칙: No live availability integration → The hero is a booking REQUEST: no "available", seat counts, confirmed slots or countdown; time is chosen as time of day.
- 조건 규칙: Live availability exists → Still ship this recipe as a request flow — real slots belong to a different recipe.
- 조건 규칙: Phone / walk-in only → Replace the form submit with a tel: link under the same label; keep the pickers as a "plan your visit" summary.
- 조건 규칙: No reviews → No proof section, rating, guest count or "loved by" line.
- 조건 규칙: No public prices → Drop the price column, pricing table and totals; keep "Always included" and say "Price on request".
- 조건 규칙: One option only → Remove the session picker and the sticky offers stage; keep one offer block.
- 조건 규칙: Options with restricted days → Disable (not hide) the other days in the day picker and say which days beside the label.

## Northlight Framing — Framing workshop · what's possible, how it works, what it costs

- URL: https://duchamp.app/ui/pages/local-understand-clarity · MCP id: ui.local-understand-clarity
- 무엇: Fictional one-room custom picture-framing workshop (가상 브랜드, 샘플 데이터)
- 스타일: Clarity — 12-column grid, hairline rules, numbered rows, gallery white, ink buttons, one vermilion accent
- 섹션 순서: Hero → Services → How it works → Try the options → Finished frames → Visit → FAQ → CTA
- 조건 규칙: No public prices → Drop the from-price cell, row prices and the live price; say "Quoted at the bench" and keep the option explorer.
- 조건 규칙: No photo layers to composite → Replace the scroll-scrubbed sequence with three still step photos; never fake a sequence by crossfading different shots.
- 조건 규칙: Several locations → Turn Visit into a location list with each place's hours; the hero names the nearest or main location only.
- 조건 규칙: Appointment only → Rename the secondary action to "Book a consultation" and replace the day planner with the booking request.
- 조건 규칙: No reviews → No proof section, rating or "loved by" line — finished frames with specs carry the evidence.
- 조건 규칙: Few option choices → Keep the explorer with the choices you really offer; do not pad it with options you don't stock.

## Fernwood Joinery — Furniture repair · trust from one worked case, never testimonials

- URL: https://duchamp.app/ui/pages/local-trust-journal · MCP id: ui.local-trust-journal
- 무엇: Fictional two-person furniture repair and restoration workshop (가상 브랜드, 샘플 데이터)
- 스타일: Journal — workshop case file: § folios, numbered Pl./Fig. captions, hairline rules, warm paper, one oxblood accent
- 섹션 순서: Hero → Case file → How it works → In writing → Visit → Request
- 조건 규칙: No finished case you can show in full → Do not invent one — use the How it works and In writing sections only, and drop the hero's case numbers for the written range alone.
- 조건 규칙: No photo layers for a repair sequence → Replace the scroll-scrubbed repair with five dated still plates; never crossfade unrelated shots as one sequence.
- 조건 규칙: No public prices → Keep the estimate document but show line items without figures and say "Written estimate before any work".
- 조건 규칙: No guarantee → Remove the guarantee block entirely — never soften it into a vague promise.
- 조건 규칙: No reviews → This recipe already has none: no testimonials, ratings, logos or certifications.
- 조건 규칙: Drop-off only, no visits → Turn Visit into drop-off and collection details; keep the photo request as the main action.

## Sotto hero — H1 Product in Use

- URL: https://duchamp.app/ui/sections/hero/saas-understand-clarity · MCP id: ui.hero-saas-understand-clarity · 출처 페이지 https://duchamp.app/ui/pages/saas-understand-clarity
- 보여 주는 것: Headline over a live product surface (title, status chip, progress strip, tabs, two lists) in real DOM.
- 이유: H1 Product in Use: a first-time visitor understands the tool by seeing its output, not by reading claims.

## Ledgerline hero — H3 Evidence First

- URL: https://duchamp.app/ui/sections/hero/saas-trust-journal · MCP id: ui.hero-saas-trust-journal · 출처 페이지 https://duchamp.app/ui/pages/saas-trust-journal
- 보여 주는 것: A real DOM excerpt of one sample line: source receipt, bank match, confidence and human-review mark.
- 이유: H3 Evidence First: a hesitant visitor sees checkable evidence before any promise.

## Plinth hero — H2 Try It Now

- URL: https://duchamp.app/ui/sections/hero/saas-act-stage · MCP id: ui.hero-saas-act-stage · 출처 페이지 https://duchamp.app/ui/pages/saas-act-stage
- 보여 주는 것: Sample product loaded, scene-style picker and Generate button in real DOM; labelled fake progress, then a 2×2 result grid.
- 이유: H2 Try It Now: the visitor takes the first action inside the hero, with no account.

## Mardel hero — H4 Product Spotlight

- URL: https://duchamp.app/ui/sections/hero/commerce-understand-journal · MCP id: ui.hero-commerce-understand-journal · 출처 페이지 https://duchamp.app/ui/pages/commerce-understand-journal
- 보여 주는 것: The set as the object, with callouts for each piece and the sample price.
- 이유: H4 Product Spotlight: the visitor first learns exactly what is in the box.

## Halvard Steel hero — H6 Origin & Craft

- URL: https://duchamp.app/ui/sections/hero/commerce-trust-stage · MCP id: ui.hero-commerce-trust-stage · 출처 페이지 https://duchamp.app/ui/pages/commerce-trust-stage
- 보여 주는 것: The knife as the hero object with the one-line reason to trust (forged once, sharpened for life).
- 이유: H6 Origin & Craft: trust starts from how the product is made and the promise behind it.

## Fold & Fiber hero — H7 Offer & Choice

- URL: https://duchamp.app/ui/sections/hero/commerce-act-clarity · MCP id: ui.hero-commerce-act-clarity · 출처 페이지 https://duchamp.app/ui/pages/commerce-act-clarity
- 보여 주는 것: Colour + size + add-on pickers with a live price and Add to cart in real DOM; photo changes per colour.
- 이유: H7 Offer & Choice: a visitor who already wants it chooses and adds to cart in the first view.

## Ember House hero — H8 Availability & Booking

- URL: https://duchamp.app/ui/sections/hero/local-act-stage · MCP id: ui.hero-local-act-stage · 출처 페이지 https://duchamp.app/ui/pages/local-act-stage
- 보여 주는 것: Session, day, time of day and guests pickers in real DOM, with the honest response time next to the button.
- 이유: H8 Availability & Booking: a visitor who already knows the place starts the request in the first view.

## Northlight Framing hero — H5 Place & Service

- URL: https://duchamp.app/ui/sections/hero/local-understand-clarity · MCP id: ui.hero-local-understand-clarity · 출처 페이지 https://duchamp.app/ui/pages/local-understand-clarity
- 보여 주는 것: Workshop photo beside a four-cell summary: from-price, lead time, today's hours and last consultation.
- 이유: H5 Place & Service: what this place does, where, and when it is open in the first view.

## Fernwood Joinery hero — H3 Evidence First

- URL: https://duchamp.app/ui/sections/hero/local-trust-journal · MCP id: ui.hero-local-trust-journal · 출처 페이지 https://duchamp.app/ui/pages/local-trust-journal
- 보여 주는 것: One worked case beside the chair as it arrived: faults found, written range, final bill, working days and the two makers.
- 이유: H3 Evidence First: a hesitant owner sees a real job's numbers before any promise.

---

# 클로드 코드로 9:16 모션그래픽 영상 렌더하기 — HyperFrames 레시피, AI 영상 모델 없이

- URL: https://duchamp.app/guide/claude-code-hyperframes-motion-video-ko
- 게시: 2026-10-10
- 요약: 코딩 에이전트가 레시피 하나로 1080×1920 세로 모션 영상을 만드는 법. React 컴포지션을 HyperFrames(Apache 2.0)가 헤드리스 Chrome 에서 렌더하고 FFmpeg 가 MP4 로 묶는다.
- 키워드: 클로드 코드 영상, 클로드 코드, HyperFrames, 모션그래픽 코드, 세로 영상 만들기, 바이브코딩, 클로드 코드 mcp

글자가 이끄는 안내 영상에는 Sora·Veo 같은 영상 모델이 필요 없다. 클로드 코드나 Codex 에 레시피를 주면 에이전트가 작은 React 컴포지션을 쓰고, HyperFrames 가 헤드리스 Chrome 에서 프레임을 하나씩 렌더하고, FFmpeg 가 1080×1920 MP4 로 묶고, 코드가 결과를 검사한 뒤 내게 넘긴다. Duchamp 은 그런 레시피 3개를 공개하고 있다.

## HyperFrames 가 무엇인가?

[HyperFrames](https://github.com/heygen-com/hyperframes) 는 "Write HTML. Render video. Built for agents." 를 내건 오픈소스 프레임워크다. 라이선스는 Apache 2.0. 컴포지션은 평범한 HTML 파일이다. 타이밍과 트랙은 `data-start`·`data-duration`·`data-track-index` 같은 `data-*` 속성으로 적고, 클립에는 `class="clip"` 을 붙이고, 움직임은 GSAP·CSS·Lottie·Three.js·Anime.js·Web Animations API 어댑터로 seek 할 수 있는 런타임이 만든다. 렌더러는 헤드리스 Chrome 에서 프레임마다 seek 하고, 프로젝트 설명 그대로 "FFmpeg 로 인코딩"한다. CLI 는 `init`·`preview`·`render`·`add`·`skills` 를 갖고 있다.

Duchamp 레시피는 그 위에 한 층을 얹는다. 에이전트가 TypeScript 로 React 컴포지션을 쓰면 작은 도우미가 esbuild 로 `index.html` 하나에 묶고, HyperFrames CLI 가 그 파일을 렌더한다. HyperFrames 는 HTML 만 본다. 영상에 필요한 런타임이 브라우저 하나인 이유다.

Duchamp 은 2026년 10월 6일 레시피 렌더러를 HyperFrames 로 바꿨다. 결정적 이유는 라이선스였다. 레시피는 사용자의 컴퓨터에서 돌아가니 렌더러가 요구하는 것이 곧 사용자에게 요구되는 것이고, Apache 2.0 은 실행하는 사람에게 의무를 얹지 않는다. 우리 실측에서는 같은 컴포지션이 이전 렌더러보다 눈에 띄게 빠르고 메모리도 훨씬 적게 썼다.

| 같은 5.4초 컴포지션, 30fps, 같은 기계 | 이전 렌더러 | HyperFrames |
|---|---|---|
| 렌더 시간(데운 상태) | 41.4초 | 10.1초 |
| 최대 메모리(브라우저·node·ffmpeg 합) | 약 5.5GB | 약 1.8~2.2GB |

## Duchamp 영상 레시피는 무엇이 있나?

글 쓰는 시점에 3개다. 전부 9:16·1080×1920·무음 MP4 이고, 예시는 가상 브랜드로 그 레시피를 실제로 실행한 결과다.

| 레시피 | 하는 일 | 길이 | 컷 | 프레임률 | 이럴 때 |
|---|---|---|---|---|---|
| [변경 안내](/readymade/videos/change-notice-video) | 장부에 고쳐 적듯 바뀌는 것을 하나씩 전→후로. 옛 값에 펜 줄이 그어지고 화살표가 그려지고 새 값이 올라오고 형광 띠가 깔린다 | 약 12초 | 3~5개 | 30fps | 영업시간·휴무·가격이 바뀌는 날 |
| [오픈 카운트다운](/readymade/videos/open-countdown-video) | 화면을 꽉 채운 일력. 컷 하나가 하루고, 앞 장이 말려 올라가며 찢겨 다음 장이 드러난다. D-3 부터 오픈 당일까지 | 약 11초 | 3~5개 | 30fps | 가게·공간·서비스 오픈을 며칠 앞두고 |
| [행사 안내](/readymade/videos/event-info-video) | 무엇·언제·어디·참여·맺음. 장면마다 글자가 빨리 들어와 완전히 멈춰 읽히고, 가속해 빠지는 순간 다음 장면이 같은 속도로 밀고 올라온다 | 약 14초 | 장면 3~4개 | 60fps | 장터·북토크·모임처럼 날짜와 장소가 정해진 행사 |

MCP id 는 `video.change-notice-video`·`video.open-countdown-video`·`video.event-info-video` 다.

## 흐름은 어떻게 되나?

1. 레시피를 복사한다. 웹에서는 레시피 페이지의 복사 버튼, MCP 에서는 `search_image_templates` 에 `use: video` 를 주고 `get_template` 으로 받는다.
2. 클로드 코드나 Codex 에 붙여 넣고 맨 위 빈칸을 채운다. 브랜드명, HEX 색 3개(종이·먹·포인트), 주제, 장면별 글자. 빈칸이 `[ ]` 그대로면 에이전트는 지어 넣지 않고 멈춰서 묻도록 되어 있다.
3. 에이전트는 코드 파일을 그대로 저장하고 `props.json` 하나만 내 답으로 쓴다. 내가 주지 않은 사실은 `null` 로 남는다. 날짜·가격·인원을 짐작해 채우는 것은 금지다.
4. `npm install` 이 HyperFrames·esbuild·React·정적 FFmpeg 를 그 폴더 안에만 받는다. 첫 실행 때 HyperFrames 가 헤드리스 Chrome(약 190MB)을 프로젝트의 `.render/home` 에 받는다.
5. `node render.mjs mp4` 가 장면별 정지 화면, 컨택트 시트, 비트맵, MP4 를 만들고 아래 검사를 돈다. 행사 안내 레시피는 30초~1분 정도라고 적혀 있다.
6. 에이전트는 정지 화면을 직접 열어 체크리스트와 대조하고, 경로·움직임 프로파일과 함께 한 줄을 보고한다. 이 영상은 무음이니 음악은 편집 앱에서 붙이라고.

## 어떤 타이밍 규칙이 슬라이드쇼가 아닌 모션 디자인을 만드나?

행사 안내 레시피는 실제 행사 예고 영상을 프레임 단위로 뜯어 재서 만들었다. 거기서 뽑은 규칙은 멈춤 + 빠른 움직임이다. 글자가 빨리 들어와 읽을 수 있게 완전히 멈추고, 가속하며 빠지는 동안 다음 장면이 같은 속도로 밀고 들어온다. 페이드 없음, 카메라 흐름 없음, 흔들림 없음.

| 요소 | 코드의 규칙 |
|---|---|
| 들어옴 | 지수 감속. 30fps 한 프레임마다 남은 거리의 85% 를 좁힘(τ 0.205초), 648~675px 아래에서 시작, 오버슈트 없음 |
| 투명도 | 줄마다 0.2~0.23초 간격의 계단. 묶음은 한 번에 오르고 투명도만 차례로 |
| 정지 | 장면마다 1.3~2초 완전 정지. 0.8초 + 글자당 0.03초로 계산 |
| 나감 | 지수 가속. 프레임마다 ×1.23(τ 0.161초). 라벨은 0.07초 먼저, 1.3배 빠르게 |
| 전환 | 밀기 한 번. 다음 장면이 0.6초 뒤 같은 방향·나감 끝 속도로 들어오고, 약 5프레임 겹침 |
| 맺음 | 포인트색 면이 0.3초에 채우고 띠로 정리되고 세 줄로 갈라져 0.75초 동안 추상 마크로 휜다 |
| 움직임 프로파일 | 레퍼런스 실측 멈춤 53%·느린 흐름 15%·큰 움직임 32%. 코드는 56~61 / 16~24 / 15~26 에 들어온다 |

행사 안내 레시피는 60fps 로 렌더하면서 프레임마다 1/240초씩 비켜 그린 서브프레임 4장을 평균한다. 움직이는 글자는 카메라처럼 번지고, 멈추는 순간 칼같이 선명해진다. 30fps 인 두 레시피는 움직임 자체를 그림에 구워 넣는다. 말려 올라가는 종이, 그어지는 펜 줄.

## 코드는 파일을 넘기기 전에 무엇을 검사하나?

장면마다 정지 화면에서 검사한다. 화면의 글자를 이으면 입력과 한 글자도 다르지 않은지, 위 12%·아래 35%·좌우 64px 안전 영역을 침범하지 않는지, 대비가 나오는지, 큰 글자가 하한 위에 있는지, 글자가 서로나 그래픽과 겹치지 않는지. 그 다음 MP4 를 잰다. 전체 길이의 40~65% 가 멈춤, 느린 흐름 30% 이하, 장면당 정지 1.0~2.2초, 튀는 프레임 0, 규격과 프레임률, 오디오 트랙 없음.

검사가 실패하면 이유 이름과 함께 멈춘다. 글자가 너무 길거나 포인트색이 바탕과 너무 가까운 입력 문제는 질문으로 돌아온다. 코드 문제는 그대로 보고되고, 에이전트는 렌더러를 고치지 말라고 되어 있다.

## 이 방법이 맞지 않는 경우는?

영상에 실사 푸티지·사람·생성 장면이 필요할 때. 음악을 영상 안에 구워 넣어야 할 때. 10~15초 안내가 아니라 1분짜리 콘텐츠를 원할 때. 이 레시피는 화면의 모든 글자가 내가 준 사실인 세로 안내 영상을 위한 것이고, 그 밖의 것에는 의도적으로 손대지 않는다.

## 자주 묻는 질문

**React 를 알아야 영상 레시피를 쓸 수 있나?**

아니다. 레시피에 컴포지션 코드가 전부 들어 있고 에이전트는 그걸 한 글자도 바꾸지 않고 저장한다. 에이전트가 쓰는 파일은 props.json 하나다. 브랜드명·색 3개·장면별 글자가 들어가고, 크기·줄바꿈·타이밍은 코드가 계산한다.

**Codex 샌드박스 안에서도 렌더되나?**

설치는 네트워크가, 렌더는 헤드리스 Chrome 실행이 필요하다. macOS 샌드박스는 Chrome 을 막는데, 레시피는 우회하지 말고 사용자에게 권한 상승 실행을 요청하라고 적어 두었다. 샌드박스 없는 클로드 코드는 바로 렌더한다.

**왜 MP4 가 무음인가?**

레시피는 음악·효과음·음성을 넣지 않는다. 묶어 넣은 음원은 내가 고르지 않은 저작권을 따라오기 때문이다. 음악은 인스타그램이나 편집 앱에서 나중에 붙인다. 에이전트는 보고에 이 한 줄을 쓰도록 되어 있다.

**타이밍을 바꾸거나 더 빠르게 할 수 있나?**

손으로는 못 한다. 정지 길이·이징·전환 속도는 코드에 고정돼 있고 렌더 뒤에 검사까지 한다. 레퍼런스 품질이 거기서 나오기 때문이다. 다양함은 글자·색·선택 질감 판·맺음 마크에서 나오고, 타이밍을 고치는 데서 나오지 않는다.

---

# 클로드 코드에 랜딩페이지 레퍼런스 주기 — MCP 로 쓰는 UI 레퍼런스 비교

- URL: https://duchamp.app/guide/landing-page-reference-mcp-claude-code-ko
- 게시: 2026-10-10
- 요약: 바이브코딩으로 만든 랜딩페이지가 왜 레퍼런스가 필요한지, Duchamp UI·21st.dev·Mobbin·shadcn/ui·Magic UI 가 클로드 코드·Codex 사용자에게 무엇을 주는지 비교했다.
- 키워드: 랜딩페이지 레퍼런스, 클로드 코드, 바이브코딩, mcp 추천, 클로드 코드 mcp, 히어로 섹션 예시, 랜딩페이지 예시

코딩 에이전트는 브리핑보다 빨리 랜딩페이지를 짜지만, 레퍼런스가 없으면 늘 같은 히어로·기능 카드 세 장·가격표로 돌아간다. 에이전트가 MCP 로 받아 볼 수 있는 레퍼런스가 이걸 고친다. 코드를 한 줄 쓰기 전에 검수된 완성 페이지와 섹션 순서, 각 섹션이 거기 있는 이유를 에이전트 손에 쥐여 준다.

## 코딩 에이전트에 왜 랜딩페이지 레퍼런스가 필요한가?

클로드 코드와 Codex 는 돌아가는 페이지를 잘 만든다. 약한 것은 내 제품의 페이지가 어떤 모습이어야 하는지 정하는 일이다. 프롬프트에 그 말이 거의 없기 때문이다. "AI 회의록 도구 랜딩페이지 만들어 줘"에는 위계·리듬·활자·모션에 대한 정보가 하나도 없으니, 모델은 웹의 평균을 낸다. 가운데 정렬 헤드라인, 그라데이션 덩어리, 아이콘 격자.

바이브코더가 디자인을 말로 설명해서 고치기도 어렵다. 통하는 방법은 사람 디자이너에게 주는 것과 같다. 구체적인 예시 하나. 같은 일을 이미 해결한 페이지를 섹션 순서와 그 이유까지 보여 주고, 내 내용으로 그 구성을 재현하라고 하면 된다. 예시가 브리핑을 대신한다.

"랜딩페이지 레퍼런스"와 "히어로 섹션 예시"가 "클로드 코드 MCP" 와 같은 검색에 자꾸 같이 나오는 이유가 이것이다. 사람들은 캡처해서 붙이는 갤러리가 아니라, 에이전트가 읽을 수 있는 레퍼런스 라이브러리를 찾고 있다.

## 선택지는 무엇이 있나?

아래 표는 2026년 10월 10일 각 서비스의 공식 사이트가 스스로 밝힌 내용만 적었다. 빈칸은 공개 페이지에 그 내용이 없었다는 뜻이다.

| 서비스 | 무엇인가 | 받는 단위 | 코딩 에이전트 접근 | 사이트가 밝힌 무료 범위 |
|---|---|---|---|---|
| [Duchamp UI](/ui) | 가상 브랜드로 만든 완성 랜딩페이지·히어로 섹션, 데스크톱·모바일 화면 녹화 | 페이지 하나 또는 히어로 하나 + 섹션 순서·조건별 변형·React·Vite·Tailwind CSS v4·motion·Lenis 로 다시 만드는 레시피 | 원격 MCP(`search_ui` → `get_ui`)로 클로드 코드·Codex 등, 웹 복사도 가능 | 검색·미리보기 무료, 레시피 받기는 하루 무료 한도(2회, 웹 복사와 공유)에 센다 |
| [21st.dev](https://21st.dev) | "디자인 엔지니어가 만든 UI 커뮤니티 카탈로그" — React 컴포넌트·전체 템플릿·shadcn 테마·셰이더·그라데이션 | React·TypeScript·Tailwind CSS 컴포넌트와 템플릿, shadcn CLI 로 설치하거나 프롬프트를 AI 코딩 도구에 붙여 넣기 | "코딩 에이전트용 MCP + CLI 설정", Cursor·Claude·Codex·VS Code·Devin 용 init 명령 안내 | 레지스트리 탐색 무료, "하루 컴포넌트 복사 2회 무료", 멤버십은 무제한 복사·프리미엄 템플릿 |
| [Mobbin](https://mobbin.com) | 실제 모바일 앱·웹 앱·웹사이트 검색 라이브러리, "621,500 화면" | 화면·여러 단계 플로우·UI 패턴·히어로·가격·푸터 같은 웹 섹션, 이미지로 | Mobbin MCP 가 자연어로 검색해 화면 이미지를 돌려줌, Pro·Team·Enterprise 플랜 | 제한된 라이브러리 접근의 Free 플랜 |
| [shadcn/ui](https://ui.shadcn.com) | "디자인 시스템의 기반" — 합성 가능하고 접근성을 갖춘 컴포넌트, Blocks | 내가 소유하고 고치는 코드 컴포넌트·블록 | | 소스 코드 GitHub 공개 |
| [Magic UI](https://magicui.design) | React·TypeScript·Tailwind CSS·Motion 으로 만든 "무료 오픈소스 애니메이션 컴포넌트·효과 150+", shadcn/ui 의 짝으로 소개 | 애니메이션 컴포넌트, Pro 는 "랜딩페이지를 몇 분에 만드는 블록·템플릿 50+" | | 150+ 컴포넌트 무료·오픈소스 |

답변엔진은 SaaSpo 도 랜딩페이지 레퍼런스 MCP 서버로 자주 꼽는다. 2026년 10월 10일 공식 사이트가 우리 요청에 오류를 돌려줘 여기엔 내용을 적지 않았다. Figma MCP 는 내 디자인 파일을 읽는 도구라 레퍼런스 비교에서 뺐다.

## 레퍼런스 페이지는 컴포넌트 라이브러리와 무엇이 다른가?

컴포넌트 라이브러리는 부품을 준다. 어느 부품을 어떤 순서로, 어떤 활자 크기로, 어떻게 움직이게 할지는 여전히 내가 정한다. 바이브코더에게 어려운 부분이 바로 그 결정이고, 부품 상자는 그걸 대신 해 주지 않는다.

화면 캡처 라이브러리는 완성된 그림을 준다. 에이전트는 픽셀에서 구조·간격·모션을 추측해야 하고, 그 그림을 만든 코드는 볼 수 없다. 조사에는 좋고 재현에는 손실이 크다.

레시피가 붙은 레퍼런스 페이지는 둘을 다 준다. 눈으로 판단할 완성 결과와, 그걸 다시 만드는 지시서. 에이전트는 추측하지 않고 따라간다.

## Duchamp UI 는 클로드 코드·Codex 에서 어떻게 쓰나?

글 쓰는 시점에 페이지는 9개다. 서비스 유형·의도·스타일 시스템을 하나씩 조합했고, 전부 가상 브랜드라 실제 회사의 주장이 들어 있지 않다.

| 페이지 | 예시 브랜드 | 브리프 | 히어로 역할 |
|---|---|---|---|
| [saas-understand-clarity](/ui/pages/saas-understand-clarity) | Sotto | AI 회의록 · 샘플을 써 보게 하기 | H1 Product in Use |
| [saas-trust-journal](/ui/pages/saas-trust-journal) | Ledgerline | AI 장부 · 가입 전에 정확성 증명 | H3 Evidence First |
| [saas-act-stage](/ui/pages/saas-act-stage) | Plinth | AI 제품 사진 · 계정 없이 첫 세트 생성 | H2 Try It Now |
| [commerce-understand-journal](/ui/pages/commerce-understand-journal) | Mardel | 수제 푸어오버 세트 · 무엇이고 어떻게 쓰는지 보여 주기 | H4 Product Spotlight |
| [commerce-trust-stage](/ui/pages/commerce-trust-stage) | Halvard Steel | 손으로 단조한 칼 · 후기 없이 가격 설득 | H6 Origin & Craft |
| [commerce-act-clarity](/ui/pages/commerce-act-clarity) | Fold & Fiber | 린넨 침구 · 색·사이즈 고르고 장바구니 | H7 Offer & Choice |
| [local-act-stage](/ui/pages/local-act-stage) | Ember House | 사우나 하우스 · 첫 화면에서 예약 요청 | H8 Availability & Booking |
| [local-understand-clarity](/ui/pages/local-understand-clarity) | Northlight Framing | 액자 공방 · 무엇이 가능하고 어떻게 되고 얼마인지 | H5 Place & Service |
| [local-trust-journal](/ui/pages/local-trust-journal) | Fernwood Joinery | 가구 수리 · 후기 대신 작업 사례 하나로 신뢰 | H3 Evidence First |

서비스 유형은 AI 도구·SaaS, 커머스, 지역 사업. 의도는 이해·신뢰·행동. 스타일 시스템은 명료(정돈된 격자, 포인트색 하나), 저널(마스트헤드·폴리오·헤어라인), 스테이지(강한 크기 대비, 화면마다 초점 하나). 취향이 아니라 내 상황으로 고른다.

페이지마다 데스크톱·모바일 화면 녹화, 섹션별로 무엇을 보여 주고 왜 그 자리인지 적은 구성 탭, 그리고 조건별 변형이 있다. 후기가 없을 때, 공개 가격이 없을 때, 제품이 아직 안 나왔을 때, 제품이 하나뿐일 때 무엇을 바꾸는지. 각 페이지의 히어로는 자체 레시피를 가진 별도 항목으로도 잘라 두었다. 첫 화면만 필요할 때 쓰는 히어로 섹션 9개다.

레시피는 STEP 0 으로 시작한다. 에이전트가 한 메시지로 묻고 답을 기다려야 하는 질문 3개다.

1. 서비스가 무엇인가, 한 문장으로. 제품 이름도.
2. 방문자가 해야 할 행동 하나는 무엇인가. 버튼 글자와 URL.
3. 지금 실제로 있는 자산은 무엇인가. 사용 허락받은 고객 인용, 공개 가격, 작동하는 제품이나 실제 화면, 내 이미지.

STEP 1 은 그 답에 조건 규칙을 적용한다. 제품이 아직 안 나왔으면 주 버튼이 "대기 명단 등록"이 되고 데모 데이터에 샘플 표시가 붙는다. 제품이 하나면 옵션 선택 UI 가 빠진다. 그 뒤에야 코드를 쓰는데, 구성·활자·색·간격·모션은 그대로 재현하고 바꾸는 것은 내용 객체와 브랜드 마크만이라고 못 박아 둔다.

## MCP 로는 어떻게 연결하나?

터미널 한 줄이 클로드 코드와 Codex 에 Duchamp 를 등록하고 브라우저 로그인을 띄운다. 무료 계정으로 충분하고 복사할 API 키는 없다.

```
sh -c "$(curl -fsSL https://duchamp.app/connect.sh)"
```

에이전트 쪽 흐름은 `search_ui` → `get_ui` 다. 검색은 단위(`page` 또는 `hero`)·서비스·의도·스타일과 자유로운 문장 질의를 받아 브리프·히어로 역할·섹션 순서·미리보기 URL 을 돌려준다. 받기는 id 하나로 구조·변형과 기본적으로 레시피 전문을 돌려준다. 완성 소스·토큰·이미지 URL 을 포함해 9만~13만 자 안팎이다. 검색은 세지 않고, 받기 한 번이 웹 복사와 같은 하루 무료 한도에서 1회로 센다.

다른 클라이언트와 자세한 안내는 [MCP 페이지](/mcp)에 있다.

## 기대하지 말아야 할 것은?

라이브러리는 의도적으로 작다. 페이지 9개·히어로 9개가 서비스 3·의도 3·스타일 3을 덮고, 새 페이지는 크라우드소싱이 아니라 정해진 일정에 추가된다. 브랜드가 가상이라 레시피는 후기·평점·사용자 수·가격·치수를 지어 넣는 것을 금지한다. 스택은 검증한 것으로 고정이다. 그리고 레시피는 에이전트에게 디자인을 "개선"하거나 폰트를 바꾸거나 섹션을 더하지 말라고 한다. 그게 요점이다. 레퍼런스를 받으러 왔지, 에이전트의 취향을 받으러 온 게 아니다.

## 자주 묻는 질문

**Duchamp UI 는 템플릿 마켓인가?**

아니다. 글 쓰는 시점에 페이지 9개·히어로 섹션 9개인 작은 검수 라이브러리다. 전부 가상 브랜드로 만들어 화면 녹화했고, 가져가는 것은 파일 묶음이 아니라 그 구성과 그 구성을 다시 만드는 레시피다.

**MCP 없이도 쓸 수 있나?**

있다. duchamp.app/ui 에 페이지·히어로마다 데스크톱·모바일 녹화, 섹션 순서, 레시피 복사 버튼이 있다. MCP 는 붙여 넣는 단계를 줄여 주는 것뿐이다. 클로드 코드나 Codex 가 같은 레시피를 직접 검색하고 받아 온다.

**클로드 코드뿐 아니라 Codex 에서도 되나?**

레시피는 어느 코딩 에이전트든 읽을 수 있는 글이다. 본문에 Codex 와 Claude Code 를 같이 적고, 검증한 스택(React 19·Vite 7·Tailwind CSS v4·motion·Lenis)을 버전까지 고정하며, 코드를 쓰기 전에 에이전트가 사용자에게 물어야 하는 질문 3개로 시작한다.

**예시의 가상 브랜드는 내 사이트에서 어떻게 되나?**

프로젝트마다 바뀌는 것은 내용 객체와 브랜드 마크뿐이다. 레시피는 구성·타이포·색·간격·모션을 그대로 재현하라고 하고, 내 이미지가 없을 때만 예시 이미지 묶음을 자리 표시용으로 쓰라고 한다.

---

# Landing page and hero section references your coding agent can use over MCP

- URL: https://duchamp.app/guide/landing-page-references-mcp-claude-code
- 게시: 2026-10-10
- 요약: Why a vibe-coded landing page needs a reference, and how Duchamp UI, 21st.dev, Mobbin, shadcn/ui and Magic UI compare for Claude Code and Codex users.
- 키워드: landing page examples, hero section examples, claude code mcp servers, best mcp servers, landing page reference mcp, vibe coding landing page

A coding agent writes a landing page faster than you can brief it, but without a reference it falls back to the same hero, three feature cards and a pricing table. A reference the agent can fetch over MCP fixes that: it hands the agent a finished, reviewed page, the order of its sections and the reason each section is there, before a single component is written.

## Why does a coding agent need a landing page reference?

Claude Code and Codex are good at producing a page that works. They are weak at deciding what a page for your product should look like, because the prompt rarely says. "Make a landing page for my AI meeting-notes tool" gives the model nothing about hierarchy, rhythm, type or motion, so it averages the web: a centered headline, a gradient blob, a grid of icons.

A vibe coder usually cannot fix this by describing the design in words either. What works is the same thing a human designer would ask for: a concrete example. Show the agent one page that already solved the same job, with its sections in order and the reasoning behind them, and ask it to reproduce that composition with your content. The example does the briefing.

This is why "landing page references" and "hero section examples" keep coming up in the same searches as "Claude Code MCP servers". People want a reference library the agent can read, not a gallery they screenshot and paste.

## What are the options?

The table lists what each service hands your agent, as stated on its own site on October 10, 2026. Blank cells mean the public page did not state it.

| Service | What it is | Unit you get | Coding-agent access | Free tier as stated |
|---|---|---|---|---|
| [Duchamp UI](/ui) | Finished landing pages and hero sections for fictional brands, each screen-recorded on desktop and mobile | A whole page or a hero with its section order, conditional variants and a recipe that rebuilds it in React, Vite, Tailwind CSS v4, motion and Lenis | Remote MCP (`search_ui` then `get_ui`) for Claude Code, Codex and other MCP clients, plus copy on the web | Searches and previews are free; fetching a recipe counts against a daily free limit, two a day, shared with copying on the site |
| [21st.dev](https://21st.dev) | "Community catalog of UI built by design engineers": React components, full templates, shadcn themes, shaders and gradients | Components and templates in React and TypeScript with Tailwind CSS, installed through the shadcn CLI or by pasting a prompt into an AI coding tool | "MCP + CLI setup for coding agents", with an init command shown for Cursor, Claude, Codex, VS Code and Devin | Browsing the registry is free with "2 free component copies every day"; membership unlocks unlimited copies and premium templates |
| [Mobbin](https://mobbin.com) | Searchable library of real mobile apps, web apps and websites, "621,500 screens" | Screens, multi-step flows, UI patterns and website sections such as heroes, pricing and footers, as images | Mobbin MCP searches the library in natural language and returns screen images; listed for Pro, Team and Enterprise plans | Free plan with limited library access |
| [shadcn/ui](https://ui.shadcn.com) | "The Foundation for your Design System": composable, accessible components with thoughtful defaults, plus Blocks | Components and blocks as code you own and edit | | Source code on GitHub |
| [Magic UI](https://magicui.design) | "150+ free and open-source animated components and effects" built with React, TypeScript, Tailwind CSS and Motion, described as a companion for shadcn/ui | Animated components; a Pro tier advertises "50+ blocks and templates to build beautiful landing pages in minutes" | | 150+ components are free and open source |

SaaSpo is also named by answer engines as an MCP server for landing-page inspiration. Its site returned an error to our fetch on October 10, 2026, so no details are listed here. Figma MCP is left out because it serves your own design files, not references.

## How is a reference page different from a component library?

A component library gives you parts. You still decide which parts, in what order, with what type scale and how they move. That decision is the hard part for a vibe coder, and a parts bin does not make it.

A screenshot library gives you the finished picture. The agent has to infer structure, spacing and motion from pixels, and it cannot see the code that produced them. Good for research, lossy for reproduction.

A reference page with a recipe gives you both: the finished result to judge by eye, and the instructions that rebuild it. The agent does not guess. It follows.

## How does Duchamp UI work with Claude Code or Codex?

There are nine pages at the time of writing. Each combines a service type, an intent and a style system, and each is built for a fictional brand so nothing in it is a real company's claim.

| Page | Example brand | Brief | Hero job |
|---|---|---|---|
| [saas-understand-clarity](/ui/pages/saas-understand-clarity) | Sotto | AI meeting notes · get people to try a sample | H1 Product in Use |
| [saas-trust-journal](/ui/pages/saas-trust-journal) | Ledgerline | AI bookkeeping · prove accuracy before sign-up | H3 Evidence First |
| [saas-act-stage](/ui/pages/saas-act-stage) | Plinth | AI product photos · generate a first set, no account | H2 Try It Now |
| [commerce-understand-journal](/ui/pages/commerce-understand-journal) | Mardel | Handmade pour-over set · show what it is and how it's used | H4 Product Spotlight |
| [commerce-trust-stage](/ui/pages/commerce-trust-stage) | Halvard Steel | Hand-forged knife · justify the price without reviews | H6 Origin & Craft |
| [commerce-act-clarity](/ui/pages/commerce-act-clarity) | Fold & Fiber | Linen bedding · pick colour and size, add to cart | H7 Offer & Choice |
| [local-act-stage](/ui/pages/local-act-stage) | Ember House | Sauna house · send a booking request in one view | H8 Availability & Booking |
| [local-understand-clarity](/ui/pages/local-understand-clarity) | Northlight Framing | Framing workshop · what's possible, how it works, what it costs | H5 Place & Service |
| [local-trust-journal](/ui/pages/local-trust-journal) | Fernwood Joinery | Furniture repair · trust from one worked case, never testimonials | H3 Evidence First |

Service types are AI tools & SaaS, Commerce and Local business. Intents are Understand, Build confidence and Take action. Style systems are Clarity (ordered grid, one accent), Journal (masthead, folios, hairline rules) and Stage (strong scale contrast, one focus per screen). Pick by your situation, not by taste.

Each page shows a desktop and a mobile screen recording, a structure tab listing every section with what it shows and why it sits there, and conditional variants: what changes when you have no reviews, no public pricing, no live product or only one product. The hero of each page is also cut out as its own item with a self-contained recipe, nine hero sections in total, for when you only need the first viewport.

The recipe itself opens with STEP 0, three questions the agent must ask you in one message and then wait:

1. What is the service, in one sentence, and what is the product name?
2. What is the one action a visitor should take? Give the label and the URL.
3. Which real assets exist today? Customer quotes you have permission to use, public pricing, a working product or real screenshots, your own images.

STEP 1 then applies conditional rules to your answers. A product that is not live turns the primary button into "Join the waitlist" and labels demo data as sample data. A single product removes the option picker. Only after that does the agent write code, and it is told to reproduce composition, type, color, spacing and motion exactly, changing only the content object and the brand mark.

## How do I connect it over MCP?

One line in a terminal registers Duchamp with Claude Code and Codex and opens a browser login. A free account is enough and there is no API key to copy.

```
sh -c "$(curl -fsSL https://duchamp.app/connect.sh)"
```

From the agent, the flow is `search_ui` then `get_ui`. Search takes a level (`page` or `hero`), a service, an intent, a style and an optional plain-language query, and returns the brief, the hero job, the section order and preview URLs. Fetch takes one id and returns the structure, the variants and, by default, the full recipe text, roughly 90 to 130 thousand characters of complete source, tokens and image URLs. Searches are not counted. Each fetch counts as one use against the same daily free limit as copying on the site.

Details and other clients are on the [MCP page](/mcp).

## What should I not expect?

The library is small by design. Nine pages and nine heroes cover three services, three intents and three styles, and new pages are added on a schedule rather than crowdsourced. The brands are fictional, so the recipe forbids inventing reviews, ratings, user counts, prices or measurements. The stack is fixed to what was verified. And the recipe tells the agent not to "improve" the design, swap fonts or add sections, which is the point: you came for the reference, not for the agent's taste.

## 자주 묻는 질문

**Is Duchamp UI a template marketplace?**

No. It is a small reviewed library, nine pages and nine hero sections at the time of writing, each built for a fictional brand and screen-recorded. What you take away is the composition and a recipe that rebuilds it, not a zip of files to upload.

**Can I use the references without MCP?**

Yes. Every page and hero is on duchamp.app/ui with its desktop and mobile recording, its section order and a copy button for the recipe. MCP only saves the paste step by letting Claude Code or Codex search and fetch the same recipe directly.

**Does the recipe work in Codex as well as Claude Code?**

The recipe is plain text written for any coding agent. It names Codex and Claude Code, pins the stack it was verified with (React 19, Vite 7, Tailwind CSS v4, motion, Lenis) and opens with three questions the agent must ask you before writing code.

**What happens to the fictional brand in the example?**

Only the content object and the brand mark change per project. The recipe tells the agent to reproduce composition, type, color, spacing and motion exactly, and to use the example image kit as placeholder art only when you have no images of your own.

---

# Render a 9:16 motion graphic video with Claude Code and HyperFrames, no AI video model

- URL: https://duchamp.app/guide/render-9-16-motion-video-claude-code-hyperframes
- 게시: 2026-10-10
- 요약: How a coding agent renders a 1080×1920 vertical motion video from a recipe: React composition, HyperFrames (Apache 2.0), headless Chrome, FFmpeg.
- 키워드: claude code video, hyperframes, motion graphics with code, 9:16 video claude code, render video headless chrome, claude code mcp servers

You do not need Sora, Veo or any video model for a text-led announcement video. Give Claude Code or Codex a recipe: the agent writes a small React composition, HyperFrames renders every frame in headless Chrome, FFmpeg encodes a 1080×1920 MP4, and code checks the result before you see it. Duchamp publishes three such recipes.

## What is HyperFrames?

[HyperFrames](https://github.com/heygen-com/hyperframes) is an open-source framework whose tagline is "Write HTML. Render video. Built for agents." It is licensed under Apache 2.0. A composition is a plain HTML file. Timing and tracks are declared with `data-*` attributes such as `data-start`, `data-duration` and `data-track-index`, clips carry `class="clip"`, and animation comes from a seekable runtime through adapters for GSAP, CSS, Lottie, Three.js, Anime.js or the Web Animations API. The renderer seeks to each frame in headless Chrome and, in the project's own words, "encodes the result with FFmpeg". The CLI covers `init`, `preview`, `render`, `add` and `skills`.

Duchamp's recipes use it one layer up. The agent writes a React composition in TypeScript; a small helper bundles it with esbuild into a single `index.html`, and the HyperFrames CLI renders that file. HyperFrames only ever sees HTML, which is why the browser is the only runtime the video needs.

Duchamp moved its recipes to HyperFrames on October 6, 2026. The deciding reason was the license. The recipe is run on your machine, so whatever the renderer requires is required of you. Apache 2.0 puts no obligation on the person running it. In our own test the same composition also rendered noticeably faster and with far less memory than the previous renderer.

| Same 5.4 s composition, 30 fps, one machine | Previous renderer | HyperFrames |
|---|---|---|
| Render time, warm | 41.4 s | 10.1 s |
| Peak memory (browser, node, ffmpeg) | about 5.5 GB | about 1.8 to 2.2 GB |

## Which recipes does Duchamp publish?

Three at the time of writing, all 9:16, 1080×1920, silent MP4, each with an example rendered from the recipe for a fictional brand.

| Recipe | What it does | Length | Scenes | Frame rate | Best for |
|---|---|---|---|---|---|
| [Change notice](/readymade/videos/change-notice-video) | Shows each change as a before-to-after line in a ledger: a pen strikes the old value, an arrow is drawn, the new value rises, a highlighter band settles under it | about 12 s | 3 to 5 cuts | 30 fps | New opening hours, a closed day, a price change |
| [Opening countdown](/readymade/videos/open-countdown-video) | A full-screen tear-off calendar; each cut is a day, the page curls and tears upward to reveal the next, from D-3 to opening day | about 11 s | 3 to 5 cuts | 30 fps | Counting down to a shop, space or service opening |
| [Event announcement](/readymade/videos/event-info-video) | What, when and where, how to join, and a closing mark; each scene enters fast, holds completely still to be read, then accelerates out as the next scene pushes up at the same speed | about 14 s | 3 to 4 scenes | 60 fps | Markets, book talks, meetups with a fixed date and place |

Names are Duchamp's. The MCP ids are `video.change-notice-video`, `video.open-countdown-video` and `video.event-info-video`.

## How does the flow work?

1. Copy the recipe. On the web it is the copy button on the recipe page; over MCP it is `search_image_templates` with `use: video`, then `get_template` with the id.
2. Paste it into Claude Code or Codex and fill the blanks at the top: brand name, three HEX colors (paper, ink, accent), the topic and the text for each scene. If a blank is left as `[ ]`, the agent is told to stop and ask rather than invent.
3. The agent saves the code files exactly as given and writes one file, `props.json`, from your answers. Facts you did not give stay `null`. The recipe forbids filling a date, price or headcount from a guess.
4. `npm install` pulls HyperFrames, esbuild, React and a static FFmpeg into that folder only. On first run HyperFrames downloads headless Chrome, about 190 MB, into the project's `.render/home`.
5. `node render.mjs mp4` renders stills for every scene, a contact sheet, a beat map and the MP4, then runs the checks below. The event recipe reports about 30 seconds to a minute.
6. The agent opens the stills, compares them against a checklist and reports paths, the motion profile and one line: this video is silent, add music in your editing app.

## What timing rules make it motion design rather than a slideshow?

The event recipe was built by taking a real event teaser apart frame by frame and measuring. The rule it extracted is hold plus fast move: text enters quickly, stops completely so it can be read, then leaves with acceleration while the next scene pushes in at the same speed. No fades, no camera drift, no shake.

| Element | Rule in the code |
|---|---|
| Entrance | Exponential deceleration, each 30 fps frame closes 85% of the remaining distance (τ 0.205 s), starting 648 to 675 px below, no overshoot |
| Opacity | A stair per line, 0.2 to 0.23 s apart; the group rises as one, only opacity is staggered |
| Hold | Fully still for 1.3 to 2 s per scene, computed as 0.8 s plus 0.03 s per character |
| Exit | Exponential acceleration, ×1.23 per frame (τ 0.161 s); labels leave 0.07 s earlier and 1.3× faster |
| Transition | One push: the next scene starts 0.6 s later in the same direction at the exit speed, about five frames of overlap |
| Closing | A color plate fills in 0.3 s, settles into a band, splits into three lines, bends into an abstract mark over 0.75 s |
| Motion profile | Reference teaser measured 53% hold, 15% slow drift, 32% large movement; the code lands at 56 to 61, 16 to 24, 15 to 26 |

The event recipe renders at 60 fps with four sub-frames per frame, spaced 1/240 s apart and averaged. Moving text blurs the way a camera would; the moment it stops it is pin sharp. The two 30 fps recipes bake their own motion into the drawing instead: a torn page curling, a pen stroke being laid down.

## What does the code check before handing you the file?

Each scene is checked at its still frames: the on-screen text joins back into exactly the input, nothing sits in the unsafe zones (top 12%, bottom 35%, 64 px at the sides), contrast clears, large type stays above its floor, letters do not collide with each other or with graphics. The MP4 is then measured: hold between 40% and 65% of the runtime, slow drift under 30%, each scene still for 1.0 to 2.2 s, zero popping frames, correct size and frame rate, no audio track.

A failed check stops with a named reason. Input problems such as text too long or an accent too close to the background go back to you as a question. Code problems are reported verbatim; the agent is told not to patch the renderer.

## When is this the wrong tool?

When the video needs footage, people or generated scenes. When the music has to be baked in. When you want a minute of content rather than ten to fifteen seconds of announcement. The recipes are for text-led vertical announcements where every word on screen is a fact you supplied, and they are deliberately silent about everything else.

## 자주 묻는 질문

**Do I need to know React to use a video recipe?**

No. The recipe contains the composition code in full and tells the agent to save it byte for byte. The only file the agent writes is props.json with your brand name, three colors and the text for each scene. Sizes, line breaks and timing are computed by the code.

**Does rendering work inside the Codex sandbox?**

Installing needs the network and rendering needs to launch headless Chrome. On macOS the sandbox blocks Chrome, and the recipe tells the agent to ask you for an elevated run instead of working around it. Claude Code without a sandbox renders directly.

**Why is the MP4 silent?**

The recipes never add music, sound effects or voice, because a bundled track would carry licensing you did not choose. Add music in Instagram or a video editor afterwards. The agent is told to say this in its report.

**Can I change the timing or make it faster?**

Not by hand. Hold lengths, easing and transition speed are fixed in the code and checked after the render, because that is where the reference quality lives. Variation comes from your text, colors, the optional texture plate and the closing mark, not from retiming.

---

# 코딩 에이전트로 벡터 로고 키트 만들기 — 이미지 모델 없이 SVG·파비콘·OG 까지

- URL: https://duchamp.app/guide/vector-logo-kit-coding-agent-ko
- 게시: 2026-10-10
- 요약: 레시피 하나로 실제 폰트 윤곽선을 코드로 그려 로고 키트를 만드는 법. 마크·워드마크·락업 2종·어두운판·단색판·파비콘·앱 아이콘·OG·브랜드 시트가 한 벌로 나온다.
- 키워드: 로고 만들기 코드, 클로드 코드 로고, 벡터 로고 svg, 파비콘 만들기, 바이브코딩 로고, 클로드 코드, 코딩 에이전트 레시피

이미지 모델은 로고 그림 한 장을 준다. 코딩 에이전트는 로고 체계를 줄 수 있다. 라이선스가 확인된 폰트의 윤곽선을 읽어 이니셜을 원이나 스쿼클에서 도려내고, 결과를 SVG 패스로 쓰고, 필요한 모든 크기로 래스터한다. 16px 과 1024px 에서 같은 기하다.

## 왜 이미지 모델에 로고를 맡기지 않나?

로고는 이미지 한 장이 아니기 때문이다. 16px 파비콘과 1024px 앱 아이콘을 다 견디는 마크, 실제 서체로 짠 워드마크, 락업 2종, 어두운판, 단색판이 있어야 하고 전부 서로 맞아야 한다. 이미지 모델은 한 크기의 래스터를 내고, 글자를 매번 조금씩 다르게 그리고, 타이포그래피를 흉내 내고, 벡터를 내지 못한다. 그러면 오후 내내 따라 그리게 된다.

레시피 방식은 기하에서 시작한다. 에이전트가 작은 Node 프로그램을 돌리면 opentype.js 가 폰트 글리프 윤곽선을 읽어 패스로 바꾸고, 도형과 음각은 다각형 불리언으로 만들고, SVG 를 직접 쓰고, resvg 가 PNG 를 만든다. 브라우저도, 이미지 모델도, 유료 API 도 없다. 레시피에는 1초 안팎이면 끝난다고 적혀 있다.

## 키트에 무엇이 들어 있나?

모든 파일이 같은 기하에서 나오니 브랜드명이나 색을 바꾸면 한 벌이 통째로 일관되게 다시 나온다.

| 묶음 | 파일 |
|---|---|
| 벡터 | `mark.svg`·`wordmark.svg`·`lockup-horizontal.svg`·`lockup-stacked.svg` 와 각각의 `-dark` 판, 그리고 `mark-mono.svg` |
| 파비콘 | `favicon-16.png`·`favicon-32.png`·`favicon-48.png`·`favicon.ico` |
| 앱 아이콘 | `apple-touch-icon-180.png`·`app-icon-1024.png` |
| 소셜 | 주제 한 줄을 활자로 넣은 `og-1200x630.png` |
| 확인용 | 모든 조각을 실제 크기로 놓은 1600×1000 `brand-sheet.png`, 측정값이 든 `check.json` |

레시피 끝에는 사이트에 넣는 세 줄이 있다. `.ico` 와 180px 터치 아이콘은 루트에, OG 이미지는 페이지 머리에.

## 기하 모노그램 레시피는 마크를 어떻게 그리나?

첫 공개 레시피는 기하 모노그램이고 Duchamp 이름은 "로고 키트 · 기하 모노그램"이다. 마크는 원 또는 스쿼클 하나에서 이니셜을 음각으로 도려낸 것이다. 글자에 끝이 열린 세로 줄기가 있으면 그 줄기를 도형 가장자리까지 뻗어 도형을 면으로 나눈다. N 은 왼쪽 아래·오른쪽 위로 뻗어 두 면, H 는 네 끝이 모두 뻗어 네 면. 글자 크기는 글자와 가장자리 사이 벽이 줄기 굵기의 1.15배가 되도록 코드가 잰다. 워드마크는 Geist 600, 자간 −2.2%. 레시피가 적은 참고 감각은 Linear·Vercel·Raycast 의 절제다.

채우는 빈칸은 다섯이다. 브랜드명 20자 이내, 적은 그대로 워드마크에 들어간다. 주 색·바탕 색 HEX 2개, 비우면 먹색에 가까운 검정과 따뜻한 흰색. OG 이미지의 한 줄이 되는 주제 90자 이내. 마크에 쓸 글자 1자, 비우면 브랜드명 첫 글자. 변형은 A 원, B 스쿼클, C 글자가 아래 가장자리를 뚫고 나가는 스쿼클 크롭, 또는 둥근 글자에 스쿼클을 고르는 자동. 한글 이름은 선택이고 기본 키트 밖에 `wordmark-ko.svg` 를 더한다.

그 다음 에이전트는 코드 파일 네 개를 한 글자도 바꾸지 않고 저장하고, 빈칸으로 `props.json` 을 쓰고, `npm install` 과 `node logo-render.mjs` 를 돌린다.

## 코드는 무엇을 검사하고, 에이전트는 무엇을 직접 봐야 하나?

`check.json` 이 `ok: true` 로 돌아와야 하고, 아니면 0 이 아닌 종료 코드로 끝난다. 검사 항목은 이렇다.

- 어느 SVG 에도 `<text>`·`<image>`·외부 참조가 없다. 글자가 전부 패스라 폰트가 없는 PC 에서도 똑같이 보인다.
- `thin32`: 마크와 32px 파비콘을 32px 기하로 줄여 8배 해상도로 래스터한 뒤 거리 변환으로 잰다. 가장 가는 획과 가장 좁은 틈이 모두 1.5px 이상이어야 한다.
- `ink16`: 16px 마크·파비콘의 잉크 비율이 15~75%. 꽉 찬 사각으로 뭉개지거나 빈 칸으로 사라지지 않게.
- 주 색과 바탕 색의 대비. 3:1 미만이면 흑백 단색 키트로 바뀌고 경고가 남고, 에이전트가 색을 바꿀지 물어본다.
- 모든 출력 파일이 있고, PNG 크기가 정확하고, 워드마크 글자가 브랜드명과 같다.

코드 검사는 Apple·Nike·Airbnb·Vercel 삼각형·Linear·Mastercard·Target 과 닮은 마크나, 전구·로켓·스우시 같은 클리셰를 잡지 못한다. 그래서 레시피는 에이전트에게 브랜드 시트와 PNG 를 직접 열어 보고, 닮은 대상이 있으면 이름을 적어 보고하라고 요구한다. 검사가 실패해도 코드를 고치지 말라고 되어 있다. 변형만 바꿔 다시 돌릴 수는 있다.

## 예시는 어떻게 나왔나?

가상 브랜드 둘을 레시피에 통과시켰고, 키트 전체가 레시피 페이지에 있다.

| 브랜드 | 주 색 / 바탕 색 | 주제 한 줄 |
|---|---|---|
| Northline | #1E3A8A / #F5F3EE | Weather data for small farms |
| Halden | #A63D24 / #FBF7F2 | Booking software for independent clinics |

## 어디서 찾나?

레시피는 Readymade 의 Brand › Logo 에 [로고 키트 · 기하 모노그램](/readymade/logos/logo-monogram-geometric)으로 있다. 2026년 10월 12일 월요일 10:00 드롭에 공개 예정이고, 그 전에는 페이지에 들어갈 수는 있지만 목록에 뜨지 않는다. MCP 에서는 `search_image_templates` 에 `use: logo` 를 주어 찾고 `get_template` 으로 받는다. 받기는 하루 무료 한도에 세고 검색은 세지 않는다.

## 한계는?

글자만으로 그리는 로고다. 면 분할에는 줄기가 필요하고, 마크가 그림이어야 하는 브랜드는 범위 밖이다. 주 색이 바탕과 너무 가까우면 단색 키트로 내려간다. 폰트는 고정이다. 그리고 기하 모노그램은 기존 상표 옆에 떨어질 수 있어, 레시피는 내놓기 전 상표 검색을 사용자의 일로 둔다.

## 자주 묻는 질문

**내 폰트를 쓸 수 있나?**

이 버전에서는 안 된다. 에이전트는 코드를 그대로 저장하고 props.json 만 바꾸도록 되어 있다. 폰트는 기하를 맞춰 둔 오픈 라이선스 서체로 고정이다. 마크·워드마크는 Geist, 시트 이름표는 IBM Plex Mono, 한글 이름을 넣을 때만 IBM Plex Sans KR.

**결과물을 상업적으로 쓸 수 있나?**

폰트는 전부 SIL Open Font License 1.1 이고 파일에는 윤곽선을 패스로 바꾼 것만 들어가니 키트 자체에 폰트 라이선스가 따라오지 않는다. 다만 글자만으로 그린 마크는 기존 상표와 닮을 수 있어, 레시피는 쓰기 전에 상표 검색을 하라고 적어 두었다.

**인터넷이 필요한가?**

npm install 때만. 폰트도 npm 패키지로 받기 때문이다. 렌더는 오프라인이고 브라우저도 필요 없다. 레시피에는 Node 18 이상에서 1초 안팎이면 끝난다고 적혀 있다.

**이니셜이 O 나 S 처럼 둥근 글자면?**

면 분할은 끝이 열린 세로 줄기에서 나온다. N·H·K·T 같은 글자는 도형을 면으로 나누고, O·S·E·B·D·A·C·G 는 가운데 음각만 된다. 레시피는 이것을 정상이라고 부르고, 자동 변형은 둥근 글자에 스쿼클을 고른다.

---

# A vector logo kit from a coding agent: SVG, PNG, favicon and OG image without an image model

- URL: https://duchamp.app/guide/vector-logo-kit-from-a-coding-agent
- 게시: 2026-10-10
- 요약: How a recipe turns real font outlines into a logo kit by code: mark, wordmark, lockups, dark and mono versions, favicons, app icons and OG image.
- 키워드: logo kit coding agent, svg logo claude code, favicon generator code, vector logo without ai image, claude code logo, codex logo recipe

An image model gives you a picture of a logo. A coding agent can give you a logo system: it reads the outlines of a licensed font, cuts your initial out of a circle or squircle, writes the result as SVG paths and rasterizes every size you need, so the mark is the same geometry at 16 px and at 1024 px.

## Why not ask an image model for a logo?

Because a logo is not one image. It is a mark that has to survive a 16 px favicon and a 1024 px app icon, a wordmark set in a real typeface, two lockups, a dark version and a single-color version, and they all have to agree. An image model produces a raster at one size, redraws the letter slightly differently each time, fakes the typography and cannot output a vector. You then spend the afternoon tracing it.

The recipe approach starts from geometry instead. The agent runs a small Node program that reads a font's glyph outlines with opentype.js and converts them to paths, builds the shape and the cut-outs with polygon booleans, writes SVG directly and rasterizes PNGs with resvg. No browser, no image model, no paid API. The recipe states a run takes about a second.

## What is in the kit?

Every file comes from the same geometry, so a change to the brand name or the colors regenerates the whole set consistently.

| Group | Files |
|---|---|
| Vector | `mark.svg`, `wordmark.svg`, `lockup-horizontal.svg`, `lockup-stacked.svg`, each with a `-dark` counterpart, plus `mark-mono.svg` |
| Favicons | `favicon-16.png`, `favicon-32.png`, `favicon-48.png`, `favicon.ico` |
| App icons | `apple-touch-icon-180.png`, `app-icon-1024.png` |
| Social | `og-1200x630.png` with your one-line topic set in type |
| Review | `brand-sheet.png` at 1600×1000 with every piece at actual size, and `check.json` with the measurements |

The recipe closes with the three lines to add to a site: the `.ico` and the 180 px touch icon at the root, and the OG image in the page head.

## How does the geometric monogram recipe draw the mark?

The first published recipe is the geometric monogram, Duchamp's name for it is "Geometric monogram logo kit". The mark is one circle or squircle with the initial cut out as a negative. Where the letter has a vertical stem with an open end, that stem is extended to the edge of the shape so it divides the shape into fields: an N extends bottom-left and top-right and makes two fields, an H extends all four ends and makes four. The letter is sized by code so the wall between glyph and edge is 1.15 times the stem weight. The wordmark is Geist at weight 600 with letter-spacing of −2.2%. The stated reference feeling is the restraint of Linear, Vercel and Raycast.

You fill five blanks. Brand name up to 20 characters, used in the wordmark exactly as typed. Two HEX colors, primary and background, defaulting to near-black on warm white. A topic line up to 90 characters that becomes the OG image's single line. One letter for the mark, defaulting to the first letter of the name. A variant: A for circle, B for squircle, C for a cropped squircle where the letter breaks through the bottom edge, or automatic, which picks the squircle for round letters. A Korean brand name is optional and adds a `wordmark-ko.svg` outside the default kit.

The agent then saves four code files without changing a character, writes `props.json` from your blanks, runs `npm install` and `node logo-render.mjs`.

## What does the code check, and what does the agent still have to look at?

`check.json` must come back with `ok: true` or the run exits with a non-zero code. The checks are:

- No `<text>`, `<image>` or external reference in any SVG. Letters are paths, so the file looks identical on a machine without the font.
- `thin32`: the mark and the 32 px favicon are scaled to 32 px geometry, rasterized at 8× and measured by distance transform; the thinnest stroke and the narrowest gap must both be at least 1.5 px.
- `ink16`: the 16 px mark and favicon must have 15% to 75% ink, so they neither fill into a block nor fade to nothing.
- Contrast between primary and background. Below 3:1 the kit switches to a monochrome black-and-white set, records a warning and the agent asks whether to change the colors.
- Every output file exists, every PNG has its exact size, and the wordmark text equals the brand name.

Code checks do not catch a mark that resembles Apple, Nike, Airbnb, the Vercel triangle, Linear, Mastercard or Target, nor clichés like a light bulb, a rocket or a swoosh. So the recipe requires the agent to open the brand sheet and the PNGs and look, and to name any resemblance it sees in its report. It is also told not to patch the code if a check fails. It may switch the variant and run again.

## What do the examples look like?

Two fictional brands were run through the recipe and their full kits are shown on the recipe page.

| Brand | Primary on background | Topic line |
|---|---|---|
| Northline | #1E3A8A on #F5F3EE | Weather data for small farms |
| Halden | #A63D24 on #FBF7F2 | Booking software for independent clinics |

## Where do I find it?

The recipe lives in Readymade under Brand › Logo as [Geometric monogram logo kit](/readymade/logos/logo-monogram-geometric). It is scheduled for the Monday drop on October 12, 2026 at 10:00 KST; until then the page is reachable but not listed. Over MCP it is found with `search_image_templates` using `use: logo` and fetched with `get_template`. Fetching a recipe counts against the daily free limit, searching does not.

## What are the limits?

It is a letter-only logo. The field division needs a stem, and a brand whose mark must be a pictogram is out of scope. A primary color too close to the background drops the kit to monochrome. The fonts are fixed. And a geometric monogram can land near an existing trademark, so the recipe makes a trademark search your job before you ship it.

## 자주 묻는 질문

**Can I use my own font in the recipe?**

Not in this version. The agent is told to save the code exactly as given and to change only props.json. The fonts are fixed to open-licensed families the geometry was tuned for. Geist for the mark and wordmark, IBM Plex Mono for sheet labels, IBM Plex Sans KR when a Korean name is added.

**Can I use the output commercially?**

The fonts are SIL Open Font License 1.1 and only their outlines, converted to paths, end up in the files, so the kit itself carries no font license. A letter-only mark can still resemble an existing trademark, which is why the recipe tells you to run a trademark search before using it.

**Does it need an internet connection?**

Only for npm install, because the fonts arrive as npm packages. Rendering is offline and needs no browser. The recipe says a run takes about a second on Node 18 or newer.

**What if my initial is a round letter like O or S?**

The field division comes from open vertical stems, so letters like N, H, K or T split the shape into fields while O, S, E, B, D, A, C or G get only the centered cut-out. The recipe calls this normal, and the automatic variant picks a squircle for round letters.

---

# 카드뉴스 예시 30개, 훅·전개·CTA 공식으로 분해

- URL: https://duchamp.app/guide/card-news-examples-30
- 게시: 2026-09-11
- 요약: 카드뉴스 예시는 계정 평소 반응보다 몇 배 잘된 실제 게시물에서 고른다. 공개 카드뉴스 30개를 숫자 훅, 질문 훅, 통념 반전, 오늘성, 스토리 다섯 유형으로 나눠 첫 장이 하는 일과 전개, 닫는 행동, 가져오지 않을 것을 표로 정리했다.
- 키워드: 카드뉴스 예시, 깔끔한 카드뉴스 예시, 인스타 카드뉴스 예시, 카드뉴스 레퍼런스, 카드뉴스 구성

카드뉴스 예시는 계정 평소 반응의 몇 배로 잘된 실제 게시물에서 고르고, 문장이 아니라 첫 장·전개·마지막 행동의 순서를 본다.

템플릿이란 터진 콘텐츠에서 문장·인물·디자인을 걷어내고 남는 훅·전개·CTA의 순서와, 그 순서가 반응을 만든 이유다. 아래 30개는 그 순서를 읽는 연습용이다. 원문 문장과 이미지는 싣지 않고 순서와 출처만 적는다.

## 카드뉴스 예시는 어디서 고르나?

좋아요가 많은 게시물이 아니라 그 계정에서 평소보다 잘된 게시물을 고른다. 같은 계정 최근 게시물의 반응 중앙값을 적고, 후보 게시물이 그 몇 배인지 본다. 팔로워가 많은 계정의 3천 반응은 평범할 수 있고, 작은 계정의 900 반응은 그 계정의 사건이다.

이 글의 30개는 Duchamp이 매일 확인하는 공개 계정 풀에서 인스타그램 카드뉴스(캐러셀) 가운데 계정 중앙값의 2배를 넘긴 게시물을 배수 순으로 훑어 골랐다. 한 계정에서 최대 3개, 광고 대행 계정과 정치인 계정은 뺐다. 수집일은 2026-09-11이다.

아래 다섯 표의 반응은 2026-09-11 수집 시점 공개 API 값이고, 평소는 그 계정 최근 게시물의 중앙값이다. 성과 증명이 아니라 그 계정 안에서 눈에 띄었다는 표시일 뿐이니 수치로 계정끼리 비교하지는 않는다.

## 숫자·목록 훅 예시는 어떤 순서인가?

첫 장이 개수나 목록을 약속하고 안쪽 장이 하나씩 채우는 순서다. 다시 볼 이유가 붙으면 저장으로 이어진다.

| 계정 | 장수 | 반응 / 평소 (배수) | 순서 | 왜 반응했나 | 가져오지 않을 것 | 출처 |
|---|---:|---|---|---|---|---|
| @what_is_your_gomin | 미확인 | 24,287 / 831 (29배) | 인간관계 소재 예고 → 옛말 나열 → 책 링크와 반응 요청 | 짧은 항목이 쌓이며 저장 가치가 생긴다 | 선별한 옛말과 책 유통 구조 | [게시물](https://www.instagram.com/p/Db74vvGoGQV/) |
| 대학내일 | 11 | 6,959 / 376 (19배) | 세대 추억 소환 → 커플별 장면과 해설 반복 → 최애 댓글 | 같은 시절을 지난 사람끼리의 기억을 건드린다 | 드라마 장면과 대사 인용 | [게시물](https://www.instagram.com/p/Dce4AHkE_wy/) |
| 커리어노마드 | 3 | 1,775 / 208 (8.5배) | 문제 해결의 최고 수준 정의 → 뻔히 보이는 위험 사례 나열 → 회피를 지혜로 재해석 | 통념을 뒤집는 결론이 저장을 만든다 | 작성자 특유의 문체와 인생 조언 프레임 | [게시물](https://www.instagram.com/p/DcydHe0E4E_/) |
| 오늘의집 | 9 | 745 / 223 (3.3배) | 계절 감성 훅 → 올가을 색 트렌드 → 실제 공간 6곳 → 행동 유도 | 색 하나로 묶은 실물 사례가 저장 가치를 만든다 | 사용자 공간 사진과 커뮤니티 크레딧 | [게시물](https://www.instagram.com/p/Dc2XyAPk4WX/) |
| 뉴닉 | 8 | 552 / 138 (4.0배) | 이번 주 놓친 이슈 목차 → 항목별 요약 반복 → 다음 주 재방문 | 목차 자체가 저장 이유고 주기가 습관을 만든다 | 그 주의 실제 뉴스 항목 | [게시물](https://www.instagram.com/p/Dc9jzEKj9nr/) |
| 사주행성 | 15 | 894 / 238 (3.8배) | 이달의 근거 → 띠별 반복 → 사랑·재물·업무 순 정리 | 내 띠를 찾게 하고 시기가 재방문을 만든다 | 사주 계산 방식과 계정의 등급 체계 | [게시물](https://www.instagram.com/p/DcsT0sMk_47/) |

## 질문·선택 훅 예시는 어떤 순서인가?

첫 장이 질문을 던지거나 고르게 하고 답은 안쪽 장이나 댓글에 둔다. 참여가 반응을 만들지만 답이 없으면 낚시가 된다.

| 계정 | 장수 | 반응 / 평소 (배수) | 순서 | 왜 반응했나 | 가져오지 않을 것 | 출처 |
|---|---:|---|---|---|---|---|
| @lady_life_info | 3 | 5,036 / 41 (124배) | 힘든 사람만 고른다는 프레임 → 색 선택 → 팔로우·댓글·DM | 소속감과 위로가 댓글을 만든다 | 우울과 힘듦을 소재로 쓰는 방식 | [게시물](https://www.instagram.com/p/Dc0Ql1hAcH7/) |
| @unni_secret_note | 미확인 | 5,169 / 1,296 (4.0배) | 정확하다는 훅 → 그림 고르기 → 댓글 번호와 DM 결과 | 자기 라벨을 확인하려는 욕구가 댓글로 나온다 | 심리 라벨 이름과 그림 원본 | [게시물](https://www.instagram.com/p/DaPtQSyE_lo/) |
| @honey.tip_ | 미확인 | 936 / 448 (2.1배) | 특정인을 떠올리게 하는 질문 → 카드 4장 선택 → 댓글 유도 | 관계 속 한 사람을 소환하면 참여가 늘어난다 | 타로 카드 구성과 DM 결과 제공 방식 | [게시물](https://www.instagram.com/p/Dc0Y99hk1Hi/) |
| 포스텔러 | 5 | 1,724 / 261 (6.6배) | 퀴즈형 질문 → 서비스 소개 → 취향별 결과 미리보기 → 댓글 | 미래를 미리 본다는 간극이 참여로 전환된다 | 서비스 고유 캐릭터와 결과 화면 | [게시물](https://www.instagram.com/p/DcsVzkqmvGL/) |
| 서울시 | 6 | 2,696 / 568 (4.8배) | 퇴근 후 갈 곳 질문 → 야간 개방 소식 → 이용 방법 → 야경 장면 | 무료와 무예약이 진입 장벽을 없앤다 | 특정 장소와 공식 계정의 신뢰 | [게시물](https://www.instagram.com/p/DcyBu07mFUj/) |
| 뉴닉 | 6 | 319 / 138 (2.3배) | 왜 오래 걸렸나 질문 → 판결 요약 → 소송 경과 → 결론과 의미 | 질문 하나가 딱딱한 판결을 이야기로 바꾼다 | 특정 소송과 판결 내용 | [게시물](https://www.instagram.com/p/Dc2RtPnD2r1/) |

## 통념 반전 예시는 어떤 순서인가?

첫 장이 믿던 상식과 다른 사실을 놓고 안쪽 장이 근거를 댄다. 근거 없는 반전은 신뢰를 잃는다.

| 계정 | 장수 | 반응 / 평소 (배수) | 순서 | 왜 반응했나 | 가져오지 않을 것 | 출처 |
|---|---:|---|---|---|---|---|
| @itsjustoroji | 미확인 | 1,873 / 37 (51배) | 타이밍 기다림은 핑계라는 반전 → 천재 사례 → 좌절과 반복 → 교훈과 책 | 천재 대 노력 구도가 읽는 사람을 편들게 한다 | 만화 캐릭터 서사와 광고 도서 | [게시물](https://www.instagram.com/p/DcQciq1EvbY/) |
| @cultureart4u | 19 | 5,402 / 281 (19배) | 연필로 이걸 그렸다는 반전 → 대작 공개 → 가까이 볼수록 디테일 → 재료 지식 | 믿기 어려운 첫 장을 안쪽이 하나씩 증명한다 | 작가의 작품 이미지와 개인 서사 | [게시물](https://www.instagram.com/p/DbIUURPgcXV/) |
| 커리어노마드 | 6 | 499 / 208 (2.4배) | 대부분이 착각한다는 훅 → 한국식 네트워킹 묘사 → 영국식 대비 → 정의 재정립 | 내가 틀렸을 수 있다는 첫 장이 기준을 다시 보게 한다 | 영국 12년 경력이라는 필자 이력 | [게시물](https://www.instagram.com/p/DbsInVwk33v/) |
| @hi_na.love | 2 | 675 / 188 (3.6배) | 수익 없는 큰 투자라는 반전 → 26년 무료 행사 → 철학으로 마무리 | 금액과 무료의 대비가 신뢰를 쌓는다 | 특정 기업인의 서사와 행사 이름 | [게시물](https://www.instagram.com/p/Dc6BH9ZEq0S/) |
| 무역킹 | 미확인 | 1,228 / 53 (23배) | 같은 편이 같은 편을 고발했다는 반전 → 인물 설명 → 논란 → 채널 시청 | 예상과 어긋난 사건이 궁금증을 만든다 | 실제 시사 사건과 채널 분석 포지션 | [게시물](https://www.instagram.com/p/DaFn204lI1l/) |
| 롱블랙 | 9 | 299 / 63 (4.8배) | 커리어 고민 훅 → 내 선택이 내 것인지 반전 정의 → 해보는 방법 → 노트 링크 | 자기결정이라는 질문이 몰입을 만든다 | 특정 사상가 인용과 협업 이벤트 | [게시물](https://www.instagram.com/p/DcZ8If5D_Ak/) |

## 오늘성·속보 예시는 어떤 순서인가?

지금 벌어진 일이나 이번 주만 유효한 정보를 첫 장에 둔다. 사건이 반응을 만드는 경우가 많아 소재는 가져오지 않고 시기를 붙이는 방식만 배운다.

| 계정 | 장수 | 반응 / 평소 (배수) | 순서 | 왜 반응했나 | 가져오지 않을 것 | 출처 |
|---|---:|---|---|---|---|---|
| @it_sue_zip | 미확인 | 903 / 9 (100배) | 속보 헤드라인 → 기관·일정별 인용 카드 순차 전개 | 속보 프레임과 인용 카드가 신뢰를 준다 | 정부 발표와 뉴스 원문 인용 | [게시물](https://www.instagram.com/p/DczvA_LD8ty/) |
| 뉴닉 | 8 | 371 / 138 (2.7배) | 진행 중 논란 요약 → 제도 배경 → 관례와의 충돌 → 일정 안내 | 흩어진 논란을 한 번에 정리해 공유 가치를 만든다 | 특정 인사와 개각 사건 | [게시물](https://www.instagram.com/p/DcyCUesj8Lj/) |
| 무역킹 | 미확인 | 737 / 53 (14배) | 충격 헤드라인 → 법안 내용 → 양측 주장 대비 → 중요성 | 양쪽 주장을 나란히 두면 공유가 늘어난다 | 특정 법안과 원본 영상 | [게시물](https://www.instagram.com/p/DZ1_D3eGTsk/) |
| 캐릿 | 9 | 2,607 / 121 (22배) | 낯선 신조어 훅 → 정의 → 실물 사례 반복 → 매력 요약 | 모르는 말이 간극을 열고 사례가 채운다 | 독점 취재물과 작가 인터뷰 | [게시물](https://www.instagram.com/p/DcSj7qsEmH7/) |
| 캐릿 | 2 | 579 / 121 (4.8배) | 나도 해당되나 체크리스트 → 현상 정의 → 신조어 명명 → 검색 유도 | 자기 진단 욕구가 검색으로 이어진다 | 계정이 만든 트렌드 이름 | [게시물](https://www.instagram.com/p/DcaehPBEiKs/) |
| 서울시 | 10 | 1,405 / 568 (2.5배) | 지난달 참여 실적 → 수요 증거 → 확대 운영 안내 → 예약 유도 | 숫자로 인기를 증명하고 다음 회차로 연결한다 | 행정 데이터와 독점 행사 | [게시물](https://www.instagram.com/p/Dcx-c4rGAbD/) |

## 스토리 예시는 어떤 순서인가?

첫 장이 사건이나 사람을 던지고 안쪽 장이 시간 순으로 따라간다. 실화가 반응을 만들었으니 사연은 가져오지 않고 배치만 배운다.

| 계정 | 장수 | 반응 / 평소 (배수) | 순서 | 왜 반응했나 | 가져오지 않을 것 | 출처 |
|---|---:|---|---|---|---|---|
| @hi_na.love | 8 | 13,293 / 188 (71배) | 실화 예고 → 사건 제시 → 한 사람의 행동 → 주변의 연대 → 지연의 재해석 | 선한 행동을 시간 순으로 보여 몰입시킨다 | 실제 목격 사건과 목격자 서사 | [게시물](https://www.instagram.com/p/DcGp_uiEgKH/) |
| @hi_na.love | 10 | 2,671 / 188 (14배) | 부고 훅 → 인물 소개 → 호칭의 사연 → 진단 → 유언 | 보편 정서를 한 사람의 이야기로 좁힌다 | 실존 인물의 부고와 작품 | [게시물](https://www.instagram.com/p/Dc9m6pGEu9N/) |
| 커리어노마드 | 9 | 3,801 / 208 (18배) | 다른 플랫폼 조회수 검증 훅 → 12년 이방인 서사 → 예상 반전 → 시각 확장 | 검증 숫자가 읽을 이유를 주고 반전이 붙든다 | 유학 경험과 조회수 프리미엄 | [게시물](https://www.instagram.com/p/DbIfOhvE8np/) |
| 대학내일 | 14 | 4,259 / 376 (11배) | 시대 훅 → 인터뷰 문답으로 팬 경험 순차 회상 | 우리만의 추억을 집단으로 소환한다 | 특정 아이돌 세대와 실명 인터뷰 | [게시물](https://www.instagram.com/p/DcTLiD8E6td/) |
| 대학내일 | 10 | 986 / 376 (2.6배) | 메신저 캡처 훅 → 당사자 3인 사연 → 생존법 → 댓글 공유 | 보편 갈등을 당사자 목소리로 이어 붙인다 | 리포터 사연과 캡처 증거물 | [게시물](https://www.instagram.com/p/Dc2DKTBEzMh/) |
| @cultureart4u | 10 | 2,495 / 281 (8.9배) | 특정 취향 소환 훅 → 전시 개요 → 체험 장면 묘사 → 제작 신뢰 → 관람 유도 | 나를 부르는 첫 장이 체험 상상으로 이어진다 | 특정 전시와 제작팀 배경 | [게시물](https://www.instagram.com/p/DbegJsBAarE/) |

## 예시를 내 카드뉴스로 옮기려면?

표에서 내 목표와 같은 목표의 행을 하나 고른다. 도달이면 숫자·목록이나 오늘성, 신뢰면 통념 반전이나 스토리, 참여면 질문·선택이 먼저 맞는다. 순서 칸을 그대로 적고 가져오지 않을 것 칸을 옆에 둔다.

순서의 빈자리는 브랜드에서 확인된 항목으로만 채운다. 고사성어 목록은 동네 카페에서 단골이 두 번째로 많이 시키는 메뉴 3가지가 되고, 색 고르기는 스킨케어 브랜드에서 환절기 피부 유형 4가지가 된다. 문장은 새로 나오고 순서는 남는다. 단계별 절차는 [인스타 벤치마킹 5단계](/guide/benchmark-without-copying)에, 첫 장 문장을 고르는 기준은 [카드뉴스 첫 장 훅 4가지](/guide/carousel-hooks-that-get-saves)에 있다.

## 템플릿이란 무엇이고 예시 30개와 어떻게 연결되나?

30개의 표는 템플릿 카드 30장이다. 순서 칸이 훅·전개·CTA의 순서고, 왜 반응했나 칸이 그 순서가 반응을 만든 이유고, 가져오지 않을 것 칸이 표면이다. 이 셋을 한 장에 적어 두면 레퍼런스가 바뀌어도 같은 순서로 반복할 수 있다.

예시가 아무리 많아도 내 브랜드에 없는 사실로 채우면 그 순간 낚시가 된다. 표에서 고른 순서에 넣을 확인된 항목이 없다면 그 예시는 아직 내 것이 아니다. 항목이 있는 순서부터 시작한다.

[이 순서를 내 브랜드에 적용](/readymade?utm_source=guide&utm_medium=cta&utm_campaign=card-news-examples-30)

## 자주 묻는 질문

**카드뉴스 예시는 어디서 찾나?**

인스타그램에서 내 목표와 같은 목표로 잘된 계정을 열고 최근 게시물 20개의 반응 중앙값을 적는다. 그 값의 두 배를 넘는 게시물이 그 계정에서 잘된 카드뉴스다. 팔로워가 많은 계정의 평범한 게시물은 숫자만 커 보이니 배수로 본다.

**깔끔한 카드뉴스 예시를 그대로 따라 만들어도 되나?**

디자인과 문장을 옮기면 저작권 문제가 생길 수 있고 반응도 재현되지 않는다. 첫 장이 무엇으로 멈춰 세웠는지, 정보가 어떤 순서로 펼쳐졌는지, 마지막에 무엇을 시켰는지만 가져오고 문장은 내 브랜드의 확인된 항목으로 새로 쓴다.

**카드뉴스는 몇 장이 적당한가?**

이 글의 30개는 2장부터 19장까지 있고 장수와 반응 사이에 뚜렷한 관계는 없다. 훅, 전개, CTA에 각각 역할이 있는 장만 남기면 된다. 역할이 없는 장은 넘김을 끊는다.

**반응 수치가 큰 예시가 더 좋은 예시인가?**

아니다. 표의 수치는 수집 시점의 공개 값이고 광고 집행이나 시기 효과가 섞여 있다. 계정 평소 대비 배수가 크더라도 사건 자체가 반응을 만든 시사 카드뉴스는 순서만 배우고 소재는 가져오지 않는다.

---

# 인스타 캡션 아이디어 50개, 카드뉴스 캡션을 목적별로

- URL: https://duchamp.app/guide/instagram-caption-ideas-50
- 게시: 2026-09-11
- 요약: 인스타 캡션 아이디어는 목적부터 정하면 나온다. 저장, 댓글, 프로필 방문, 공유, DM 다섯 목적과 카페부터 SaaS까지 업종 10개를 곱한 첫 줄 아이디어 50개를 가상 브랜드 예시와 반응이 나오는 이유로 정리했다.
- 키워드: 인스타 캡션 아이디어, 인스타 캡션, 카드뉴스 문구, 인스타 캡션 예시, 카드뉴스 캡션

인스타 캡션 아이디어는 목적부터 정하면 나온다. 저장, 댓글, 프로필 방문, 공유, DM 다섯 목적에 업종 10개를 곱한 첫 줄 50개를 아래에 정리했다.

템플릿이란 터진 콘텐츠에서 문장·인물·디자인을 걷어내고 남는 훅·전개·CTA의 순서와, 그 순서가 반응을 만든 이유다. 캡션 첫 줄은 그 순서에서 CTA를 예고하는 자리다. 쓰는 법은 [인스타 캡션 3단 구성](/guide/instagram-caption-formula)에 있고, 이 글은 그 첫 줄의 아이디어 목록이다.

## 캡션 아이디어는 왜 목적부터 정하나?

같은 카드뉴스라도 받고 싶은 행동에 따라 첫 줄이 달라진다. 저장을 받으려면 다시 볼 정보가 어디 있는지 말하고, 댓글을 받으려면 답하기 쉬운 질문을 하고, 프로필 방문을 받으려면 카드에 없는 것이 링크 너머에 있다고 말한다. 공유는 떠오르는 사람이 있게 하고, DM은 보낼 것이 한 가지면 된다고 말한다.

아래 표의 예시는 모두 가상 브랜드다. 문장이 아니라 순서를 보여 주는 것이라 숫자, 메뉴, 유형은 내 브랜드에서 확인된 항목으로 바꿔 쓴다. 업종 10개는 [업종별 카드뉴스 주제](/guide/card-news-topics-by-industry)와 같다.

## 저장을 만드는 캡션 첫 줄은?

다시 볼 정보가 있고 그 위치를 말하면 저장된다. 시간표, 순서, 체크리스트, 특정 날에 필요한 것이 그 정보다.

| 업종 | 가상 브랜드 예시 첫 줄 | 왜 반응하나 |
|---|---|---|
| 카페 | 이 메뉴는 오후 3시 넘으면 없습니다. 시간표를 마지막 장에 넣었습니다. | 시간이 붙은 정보는 다시 보게 된다 |
| 뷰티 | 환절기 피부 4유형 중 내 유형은 2주 뒤에 바뀔 수 있습니다. | 시기가 바뀌면 다시 열어 본다 |
| 필라테스 | 허리 아픈 날 집에서 할 동작 3개, 순서가 중요합니다. | 순서가 있는 정보는 외우기보다 저장한다 |
| 교육 | 3주차에 막히는 지점 3가지, 지금 2주차면 미리 저장해 두세요. | 미래의 나에게 필요한 정보라고 말한다 |
| 병원 | 예약 전 준비물 4가지, 두 번째는 전날 밤에 챙겨야 합니다. | 시점이 붙은 준비 목록이 저장 이유가 된다 |
| 인테리어 | 견적서 받으면 이 항목부터 찾아보세요. 열 건 중 일곱 건에 없었습니다. | 나중에 견적 받을 때 꺼낼 체크리스트 |
| 쇼핑몰 | 사이즈 고민되면 이 표만 보면 됩니다. 교환 절반이 한 체형에서 나옵니다. | 구매 직전에 다시 볼 표 |
| 코칭 | 면접 전날 볼 질문 5개, 세 번째는 답을 미리 써 두는 게 좋습니다. | 특정 날에 다시 꺼낼 정보 |
| 사주·관계 | 이달 띠별 요약은 카드에, 개인차는 여기 적었습니다. | 내 띠를 다시 찾으러 온다 |
| SaaS | 첫 주에 그만두는 이유 3가지와 각각의 설정 위치를 적었습니다. | 설정 위치는 필요할 때 다시 본다 |

## 댓글을 만드는 캡션 첫 줄은?

답이 번호 하나나 한 단어면 댓글이 달린다. 정답 맞히기, 내 유형 번호, 경험 하나를 묻고 답이 어디에 쓰이는지 말하면 더 늘어난다.

| 업종 | 가상 브랜드 예시 첫 줄 | 왜 반응하나 |
|---|---|---|
| 카페 | 단골이 두 번째로 많이 시키는 메뉴, 1위는 저희도 못 맞혔습니다. 몇 번일지 댓글에 적어 주세요. | 정답 맞히기는 답이 짧다 |
| 뷰티 | 넷 중 내 피부는 몇 번인지 댓글에 남기면 순서를 알려 드립니다. | 번호 하나에 답글이 따라온다 |
| 필라테스 | 3주 만에 안 나오게 된 이유, 내 이유는 몇 번이었나요. | 자기 고백형 질문은 공감 댓글을 부른다 |
| 교육 | 3주차에 막힌 지점이 셋 중 어디였는지 궁금합니다. | 경험을 묻는 질문에 답이 쌓인다 |
| 병원 | 대기 시간이 가장 길었던 요일을 알려 주시면 다음 달 예약표에 반영합니다. | 답이 실제 변화로 이어진다 |
| 인테리어 | 견적서에서 빠졌던 항목이 있었다면 어떤 항목이었는지 남겨 주세요. | 손해 본 경험은 말하고 싶어진다 |
| 쇼핑몰 | 네 체형 중 내 체형 번호를 남기면 사이즈를 답글로 드립니다. | 답글이 보상이 된다 |
| 코칭 | 열심히 하는데 안 되는 유형 넷 중 내 유형은 몇 번인지. | 자기 유형 확인은 댓글이 가장 빠르다 |
| 사주·관계 | 이달 순위에 내 띠가 없어서 서운했다면 알려 주세요. 다음 편에 넣겠습니다. | 빠진 사람이 말을 걸게 한다 |
| SaaS | 첫 주에 막힌 화면이 셋 중 어디였는지 알려 주시면 가이드를 고칩니다. | 답이 제품에 반영된다고 말한다 |

## 프로필 방문을 만드는 캡션 첫 줄은?

카드에 없는 것이 링크 너머에 있다고 말하면 프로필로 간다. 무료와 유료의 경계, 시간표, 비교표, 개인화된 결과가 그 너머에 있을 때 작동한다.

| 업종 | 가상 브랜드 예시 첫 줄 | 왜 반응하나 |
|---|---|---|
| 카페 | 이번 주 원두 3종의 시음 시간표는 프로필 링크에 있습니다. | 카드에 없는 정보가 링크 너머에 있다 |
| 뷰티 | 내 피부 유형이 넷 중 어디인지 3분 무료 진단은 프로필에서. | 무료 진단이 방문 이유가 된다 |
| 필라테스 | 체험 수업 50분에 실제로 하는 것을 프로필 링크에 적어 뒀습니다. | 무료 범위를 확인하러 온다 |
| 교육 | 무료 강의에서 끝까지 알려주는 범위는 프로필의 커리큘럼 표에 있습니다. | 범위를 알아야 결제를 결정한다 |
| 병원 | 진료 예약과 준비물 안내는 프로필 링크 한 곳에 모아 뒀습니다. | 행동이 한 곳에 있어 헤매지 않는다 |
| 인테리어 | 무료 실측에서 하는 것과 설계비가 붙는 시점, 프로필 링크의 표를 보세요. | 비용 경계는 누구나 궁금하다 |
| 쇼핑몰 | 이번 주 재입고 3개는 프로필 링크 첫 화면에 있습니다. | 놓친 사람이 바로 간다 |
| 코칭 | 무료 상담 30분에서 정리되는 것 세 가지, 신청은 프로필에서. | 무료 범위가 분명하면 신청이 쉽다 |
| 사주·관계 | 내 띠 상세 풀이는 프로필 링크에서 생년월일만 넣으면 됩니다. | 개인화된 결과는 링크 너머에서만 얻는다 |
| SaaS | 무료 플랜에서 끝까지 되는 것 목록은 프로필 링크의 비교표에. | 비교표는 결정 직전에 본다 |

## 공유를 만드는 캡션 첫 줄은?

읽는 순간 떠오르는 사람이 있으면 공유된다. 상대를 지목하고, 그 사람이 지금 처한 상황을 말한다.

| 업종 | 가상 브랜드 예시 첫 줄 | 왜 반응하나 |
|---|---|---|
| 카페 | 노트북 손님을 막지 않기로 한 이유, 같이 일할 분께 보내 주세요. | 특정 상대를 지목한다 |
| 뷰티 | 이중 세안이 안 맞는 피부가 있습니다. 매일 두 번 씻는 친구가 있다면. | 떠오르는 사람이 생긴다 |
| 필라테스 | 주 1회로 충분한 사람과 주 3회가 필요한 사람, 같이 등록한 친구와 비교해 보세요. | 둘이 함께 보는 콘텐츠가 된다 |
| 교육 | 하루 30분이 주말 2시간보다 오래 가는 이유, 스터디 단톡에 올려도 됩니다. | 공유할 장소를 정해 준다 |
| 병원 | 물을 많이 마시면 무조건 좋다는 말이 안 맞는 경우, 부모님께 보내 드리세요. | 걱정되는 사람에게 보내게 한다 |
| 인테리어 | 흰색만 쓰면 좁아 보이는 이유, 곧 이사할 분께. | 상황이 맞는 사람이 바로 떠오른다 |
| 쇼핑몰 | 세일 때 사는 게 이득이 아닌 품목, 같이 장바구니 채우는 분과. | 함께 구매하는 사람에게 보낸다 |
| 코칭 | 목표를 크게 잡을수록 실패하는 이유, 새해 계획 세우는 팀원에게. | 시기와 대상을 같이 말한다 |
| 사주·관계 | 사주가 나쁘면 인생이 정해진다는 말에 대한 답, 그 말 들은 분께. | 반박 근거를 대신 전해 준다 |
| SaaS | 기능이 많을수록 좋은 도구라는 통념, 도구 고르는 중인 동료에게. | 결정 중인 사람에게 보내게 한다 |

## DM을 만드는 캡션 첫 줄은?

보낼 것이 한 가지고 답이 무엇인지 알면 DM을 보낸다. 사진 한 장, 한 줄, 번호 하나로 시작하게 하고 답하는 시점이나 범위를 정한다.

| 업종 | 가상 브랜드 예시 첫 줄 | 왜 반응하나 |
|---|---|---|
| 카페 | 단체 예약 가능한 시간은 DM으로 물어보시면 당일 답합니다. | 답하는 시점을 약속한다 |
| 뷰티 | 성분표 사진을 보내 주시면 먼저 볼 항목 5개에 표시해 드립니다. | 사진 한 장이면 시작된다 |
| 필라테스 | 허리 통증 부위를 알려 주시면 첫 수업 강도를 맞춥니다. | 내게 맞춘다는 약속이 있다 |
| 교육 | 지금 내 수준이 어디인지 모르겠다면 최근 공부한 것 한 줄만 보내 주세요. | 진입 장벽이 한 줄이다 |
| 병원 | 검사 전날 준비물이 헷갈리면 DM 주세요. 진료 내용은 진료실에서만 답합니다. | 범위를 정해 주면 안심하고 보낸다 |
| 인테리어 | 평면도 사진 한 장 보내 주시면 빠지기 쉬운 항목을 표시해 드립니다. | 받을 결과물이 구체적이다 |
| 쇼핑몰 | 키와 평소 사이즈만 보내면 네 체형 중 어디인지 답합니다. | 정보 두 개면 충분하다 |
| 코칭 | 첫 세션 전에 고민 한 줄을 보내면 어떤 유형인지 먼저 답합니다. | 결제 전에 답을 먼저 받는다 |
| 사주·관계 | 결과가 나와 안 맞는다면 알려 주세요. 개인차를 설명드립니다. | 이견을 받는 창구가 있다 |
| SaaS | 설정 화면 캡처를 보내면 첫 주에 막히는 지점 셋 중 어디인지 짚어 드립니다. | 캡처 한 장으로 문제가 풀린다 |

## 50개 중 무엇을 고르나?

게시물의 목표가 행을 정한다. 다시 볼 정보면 저장, 유형을 나눴으면 댓글, 무료와 유료의 경계가 있으면 프로필 방문, 떠오르는 사람이 있는 주장이면 공유, 개인별로 답이 다르면 DM이다. 카드뉴스 마지막 장의 행동과 같은 목적을 고른다.

업종 칸은 참고일 뿐이다. 카페의 시간표 순서는 병원의 진료 시간표에도 들어가고, 쇼핑몰의 체형 번호 순서는 교육의 수준 번호에도 들어간다. 내 브랜드에서 확인된 항목에 맞는 순서를 업종과 상관없이 고른다.

## 템플릿이란 무엇이고 캡션 아이디어와 어떻게 연결되나?

50개의 첫 줄은 모두 카드뉴스의 CTA를 캡션에서 한 번 더 예고하는 문장이다. 훅은 첫 장이 맡고, 전개는 중간 장이 맡고, 캡션 첫 줄은 마지막 장의 행동으로 가는 길을 미리 알려 준다. 그래서 첫 줄 아이디어는 캡션만 따로 떠올리는 것이 아니라 템플릿 카드의 CTA 칸에서 나온다.

CTA 칸에 저장이라고 적혀 있으면 저장 표의 열 줄 중 내 항목이 있는 순서를 고르고, 댓글이면 댓글 표에서 고른다. 문장은 내 브랜드의 숫자와 유형으로 새로 쓰고 순서만 남긴다.

[이 순서를 내 브랜드에 적용](/readymade?utm_source=guide&utm_medium=cta&utm_campaign=instagram-caption-ideas-50)

## 자주 묻는 질문

**인스타 캡션 아이디어가 안 떠오를 때 무엇부터 정하나?**

이 게시물에서 받을 행동 하나를 먼저 정한다. 저장, 댓글, 프로필 방문, 공유, DM 중 하나다. 목적이 정해지면 첫 줄이 할 일이 정해지고, 브랜드에서 확인된 항목 중 그 일에 맞는 것을 고르면 첫 줄이 나온다.

**카드뉴스 캡션 첫 줄에 첫 장 문장을 그대로 써도 되나?**

안 된다. 첫 장 문장은 이미 이미지에서 읽혔다. 캡션 첫 줄은 첫 장과 다른 각도로 멈추게 하거나 카드에 없는 정보가 어디 있는지 알려 주는 자리다. 이 글의 50개는 모두 첫 장을 반복하지 않는 첫 줄이다.

**캡션 하나에 저장과 댓글을 같이 요청해도 되나?**

하나만 요청한다. 둘을 나란히 쓰면 둘 다 일어나지 않는다. 카드뉴스 마지막 장의 행동과 캡션의 행동을 같은 것으로 맞추는 편이 반응이 분명하다.

**가상 브랜드 예시 문장을 그대로 써도 되나?**

문장은 가상의 브랜드에 맞춘 것이라 그대로 쓰면 내 브랜드에 없는 사실을 말하게 된다. 순서만 가져오고 숫자, 메뉴, 유형은 브랜드에서 확인된 항목으로 바꾼다.

---

# 인스타 벤치마킹 하는법, 베끼지 않고 공식만 가져오는 5단계

- URL: https://duchamp.app/guide/benchmark-without-copying
- 게시: 2026-09-02 · 갱신: 2026-09-11
- 요약: 인스타 벤치마킹은 문장과 디자인이 아니라 훅·전개·CTA의 순서를 가져오는 일이다. 레퍼런스 고르기부터 게시 후 7일 비교까지 5단계와 워크시트, 저작권 경계를 정리했다.
- 키워드: 인스타 벤치마킹, 인스타 벤치마킹 방법, 카드뉴스 벤치마킹, 벤치마킹 하는법, 레퍼런스 분석

인스타 벤치마킹은 잘된 게시물에서 문장과 디자인이 아니라 훅·전개·CTA의 순서를 가져오고, 빈자리를 내 브랜드에서 확인된 항목으로 채우는 일이다.

인스타 벤치마킹이란 나와 같은 목표로 평소보다 잘된 콘텐츠를 골라 그 순서를 내 브랜드로 옮기는 일이다. 문장을 바꿔 쓰는 것은 벤치마킹이 아니라 복제다.

## 왜 문장을 바꿔 쓰면 실패하나?

잘된 게시물의 문장은 그 계정의 고객, 말투, 그날의 소재에 맞춰 나온 결과다. 문장만 옮기면 그 조건이 따라오지 않아 반응이 재현되지 않는다. 브랜드 이름을 경쟁사로 바꿔도 그대로 성립하는 글이 나오면 복제에 가깝다고 보면 된다.

## 5단계는 무엇인가?

### 1. 레퍼런스를 고르는 기준

내 목표와 같은 목표로 잘된 게시물만 고른다. 목표는 도달, 신뢰, 전환, 재방문 넷 중 하나다. 신뢰를 만들려는 브랜드가 도달용 순위 콘텐츠를 가져오면 순서가 맞지 않는다.

잘됐는지는 좋아요 절대값이 아니라 그 계정의 평균 대비 몇 배인지로 본다. 같은 계정의 최근 게시물 20개를 열어 좋아요와 댓글을 더한 값의 중앙값을 적고, 후보 게시물이 그 몇 배인지 계산한다. 아래는 2026-09-01에 공개 수치로 확인한 예다.

| 계정 | 최근 20개 중앙값 | 후보 게시물 | 배수 | 판정 |
|---|---:|---:|---:|---|
| 포스텔러 | 440 | 일간별 호구력 순위 900 | 2.0배 | 상위 10% 안 |
| 서울시 | 666 | 퇴근 후 서울광장 운동 2,011 | 3.0배 | 상위 10% 문턱 2,415 미달 |

서울시 게시물처럼 반응이 2천을 넘어도 그 계정에서는 평범할 수 있다. 포스텔러 게시물은 4월에 올라온 것이라 최근 게시물보다 반응이 쌓인 기간이 길다. 오래된 게시물은 그만큼 과대평가되니 게시 후 같은 기간끼리 비교하는 것이 정확하다.

### 2. 표면과 순서를 분리한다

문장, 인물과 사연, 색과 서체, 사진은 표면이다. 첫 장이 무엇으로 멈춰 세웠는지, 정보가 어떤 순서로 펼쳐졌는지, 마지막에 무엇을 하게 했는지가 순서다. 순서를 적을 때는 왜 반응했는지를 두 문장으로 같이 적는다.

### 3. 가져오지 않을 것 목록을 먼저 쓴다

순서를 옮기기 전에 가져오지 않을 것부터 적는다. 원문 문장, 등장인물, 디자인, 그 브랜드만의 숫자와 고유명사가 기본으로 들어간다. 여기에 내 브랜드가 하지 않기로 한 주장, 예를 들어 사람을 규정하거나 결과를 단정하는 표현을 더한다.

### 4. 확인된 항목으로만 채운다

순서의 빈자리는 브랜드에서 확인된 항목으로 채운다. 누구를 돕는지, 고객이 반복해서 겪는 문제, 실제로 제공하는 기능, 무료와 유료의 경계, 허용하지 않는 말투가 그 항목이다. 확인되지 않은 것은 그럴듯하게 상상하지 말고 빈칸으로 남긴다.

### 5. 게시 후 7일 숫자를 내 계정 평균과 비교한다

게시하고 7일이 지난 시점에 도달, 저장과 공유, 프로필 방문을 적는다. 내 계정 최근 게시물의 같은 시점 평균과 나란히 놓고 위인지 아래인지 본다. 도달 1,000당 저장과 공유 합계를 함께 보면 도달만 늘고 행동이 없는 경우를 걸러낼 수 있다.

## 워크시트는 어떻게 쓰나?

레퍼런스 하나마다 아래 표를 한 장 채운다. 예 칸은 가상의 동네 필라테스 스튜디오를 기준으로 적었다.

| 단계 | 질문 | 예 |
|---|---|---|
| 1. 고르기 | 내 목표와 같은가, 계정 평균의 몇 배인가 | 목표는 도달. 후보는 계정 중앙값의 2배 |
| 2. 분리 | 첫 장, 정보 순서, 마지막 행동은 무엇이었나 | 누구나 겪는 손실 → 유형별 순위 → 내 유형 확인 |
| 3. 제외 | 가져오지 않을 것은 무엇인가 | 원문 문장, 순위 카드 디자인, 사람을 규정하는 표현 |
| 4. 채우기 | 확인된 항목 중 이 순서에 들어갈 것은 | 등록 후 3주 안에 그만두는 이유 3가지, 체험 수업 1회 무료 |
| 5. 비교 | 7일 뒤 도달·저장·공유는 평균 대비 어떤가 | 도달 1.4배, 도달 1,000당 저장 12건 |

## 순서만 가져오면 어떻게 되나?

포스텔러의 [일간별 호구력 순위](https://www.instagram.com/forceteller_official/p/DXG6IcrkZkx/) 게시물은 3장짜리 캐러셀이다. 순서는 누구나 겪는 손실을 첫 장에서 건드리고, 유형별 순위를 보여준 뒤, 댓글에서 자기 유형을 말하게 하고, 개인 진단으로 이어진다. 반응이 나온 이유는 내 유형이 어디 있는지 찾게 만든 데 있다.

가져오지 않을 것은 사람을 호구로 규정하는 표현, 재물 결과를 운명처럼 단정하는 말, 원문 문장과 순위 카드 디자인이다. 필라테스 스튜디오로 옮기면 첫 장은 등록해 놓고 3주 만에 안 가게 되는 일이 되고, 순위는 그만두는 이유 유형이 되고, 마지막은 무료 체험 상담이 된다. 사주와 운동은 소재가 전혀 다르지만 순서는 그대로 작동한다.

## 어디까지가 참고이고 어디부터 표절인가?

문장, 이미지, 디자인을 옮기면 저작권 침해가 될 수 있다. 정보를 배열하는 순서나 접근 방식 같은 아이디어는 일반적으로 보호 대상이 아니라고 알려져 있지만, 사건과 해석은 개별 사안마다 다르다. 이 글은 법률 자문이 아니며, 경계가 애매하면 문장을 처음부터 새로 쓰는 쪽이 안전하다.

## 템플릿이란 무엇이고 5단계와 어떻게 연결되나?

템플릿이란 터진 콘텐츠에서 문장·인물·디자인을 걷어내고 남는 훅·전개·CTA의 순서와, 그 순서가 반응을 만든 이유다. 위 5단계 중 2단계와 3단계를 한 장에 적으면 그것이 템플릿 카드가 된다. 왜 반응했는지 두 문장, 훅·전개·CTA, 가져오지 않을 것이 들어간다.

템플릿 카드가 있으면 4단계는 브랜드에서 확인된 항목을 빈칸에 넣는 일로 줄어든다. 레퍼런스가 바뀌어도 같은 순서로 반복할 수 있다.

[이 순서를 내 브랜드에 적용](/readymade?utm_source=guide&utm_medium=cta&utm_campaign=benchmark-without-copying)

## 자주 묻는 질문

**인스타 벤치마킹은 어디까지 해도 되나?**

훅·전개·CTA의 순서와 반응이 나온 이유까지는 참고해도 된다. 원문 문장, 인물과 사연, 디자인은 그 게시물의 표면이라 가져오지 않는다. 가져오지 않을 것 목록을 먼저 적어두면 경계가 흐려지지 않는다.

**레퍼런스는 좋아요가 많은 게시물을 고르면 되나?**

좋아요 절대값보다 그 계정 평균 대비 몇 배인지를 본다. 팔로워가 많은 계정은 평범한 게시물도 반응이 크게 보인다. 내 목표와 같은 목표로 평소보다 잘된 게시물을 고른다.

**카드뉴스 레퍼런스의 순서를 그대로 써도 표절이 아닌가?**

정보의 순서와 접근 방식은 일반적으로 저작권 보호 대상이 아니지만, 문장과 이미지를 옮기면 침해가 될 수 있다. 이 글은 법률 자문이 아니다. 경계가 애매하면 문장을 처음부터 새로 쓰는 쪽을 택한다.

**벤치마킹한 게시물이 잘됐는지 언제 판단하나?**

게시 후 7일 시점의 도달, 저장과 공유, 프로필 방문을 내 계정의 최근 게시물 평균과 비교한다. 하루 이틀 숫자로는 판단하지 않는다. 같은 시점끼리 비교해야 게시물 간 차이가 보인다.

---

# 미리캔버스 카드뉴스 템플릿 고르기 전에 정할 3가지

- URL: https://duchamp.app/guide/before-miricanvas-template
- 게시: 2026-09-02
- 요약: 미리캔버스·망고보드·캔바의 카드뉴스 템플릿은 어떻게 만들지를 풀어준다. 무엇을 말할지는 템플릿을 열기 전에 정한다. 첫 장 문장, 다음 장을 넘길 이유, 마지막에 시킬 행동 세 가지를 동네 카페 예와 표로 정리했다.
- 키워드: 미리캔버스 카드뉴스, 카드뉴스 템플릿, 카드뉴스 만들기, 망고보드 카드뉴스, 캔바 카드뉴스

템플릿을 열기 전에 첫 장 문장, 다음 장을 넘길 이유, 마지막에 시킬 행동을 먼저 정하면 된다. 이 셋은 템플릿이 정해 주지 않는다.

카드뉴스 템플릿이란 장수, 글자 자리, 색과 서체가 미리 짜인 디자인 틀이다. 어떻게 만들지는 다 들어 있고 무엇을 말할지는 비어 있다.

## 템플릿은 무엇을 풀어주나?

미리캔버스는 [카드뉴스 템플릿](https://www.miricanvas.com/ko/template/card_news)을 무료로 제공하고, 디자인은 두고 문구와 이미지만 바꾸는 방식을 [헬프 센터](https://help.miricanvas.com/hc/ko/articles/360040936411)에서 안내한다. 망고보드는 인스타그램 피드에 맞춘 [1:1 카드뉴스 템플릿](https://www.mangoboard.net/templates/card-news-1-1)을 두고 크기가 다른 이미지도 맞춰 넣게 한다. 캔바는 [카드뉴스 템플릿](https://www.canva.com/ko_kr/card-news/templates/)에서 여러 페이지의 색과 글꼴을 한 번에 맞추고 모바일 앱에서 바로 올리게 한다.

세 도구 모두 만드는 시간을 줄여 준다. 서체를 고르고, 여백을 맞추고, 장마다 같은 색을 쓰는 일은 템플릿이 대신한다. 요금과 세부 기능은 바뀌니 각 링크에서 확인한다.

템플릿이 대신하지 못하는 일이 세 가지 남는다. 첫 장에 무슨 문장을 쓸지, 왜 다음 장을 넘길지, 마지막에 무엇을 하게 할지다. 이 셋은 브랜드마다 다르고 템플릿에는 빈칸으로 있다.

## 왜 예쁜 템플릿도 넘겨지지 않나?

피드에서 사람들은 첫 장만 본다. 첫 장의 비율과 그리드 규칙은 [카드뉴스 사이즈 글](/guide/instagram-carousel-size-rules)에 정리했다. 두 번째 장은 첫 장이 넘길 이유를 만들었을 때만 열린다.

템플릿의 첫 장에는 대개 제목 자리가 있다. 거기에 신메뉴 소개나 9월 이벤트 같은 주제어를 넣으면 무엇에 관한 글인지는 알려 주지만 왜 지금 멈춰야 하는지는 말하지 않는다. 디자인이 아무리 정돈돼도 그 문장으로는 손가락이 멈추지 않는다.

넘김이 멈추면 저장과 공유도 없다. 저장과 공유가 도달을 만드는 원리는 [인스타 알고리즘 글](/guide/instagram-algorithm-saves-shares)에 적었다.

## 템플릿을 열기 전에 정할 3가지는 무엇인가?

### 1. 첫 장 문장

첫 장 문장은 넘길지 말지를 정하는 한 문장이다. 읽는 사람이 자기 일이라고 느끼거나, 답이 다음 장에 있다고 짐작하게 해야 한다. 브랜드 이름을 다른 가게로 바꿔도 그대로 성립하는 문장은 첫 장 문장이 아니다.

저장을 만드는 첫 장 훅 네 가지는 [훅 문구 글](/guide/carousel-hooks-that-get-saves)에 있다. 구체적 개수, 내 유형 찾기, 다음 장에서 완성되는 질문, 통념 반전 중 하나를 고른다.

### 2. 다음 장을 넘길 이유

중간 장은 첫 장이 한 약속을 순서대로 지키는 자리다. 장마다 역할이 하나여야 하고, 앞 장을 보면 다음 장에 무엇이 올지 짐작돼야 한다. 순서가 없으면 어느 장에서든 이탈한다.

뉴닉의 [늦여름 야장 맛집 6곳](https://www.instagram.com/newneek.official/p/DckPS0AD7bt/)은 8장이다. 첫 장에서 계절이 바뀌는 시점을 건드리고, 지역별 목록을 한 장에 하나씩 펼친다. 여섯 곳을 약속했으니 여섯 장을 넘길 이유가 생긴다.

### 3. 마지막에 시킬 행동

마지막 장은 보고 나서 무엇을 하면 되는지 말하는 자리다. 저장, 특정한 사람에게 보내기, 댓글에 내 유형 적기, 프로필에서 확인하기 중 하나로 좁힌다. 팔로우와 좋아요와 저장을 한 장에 다 적으면 아무것도 하지 않는다.

행동은 첫 장과 이어져야 한다. 포스텔러의 [일간별 호구력 순위](https://www.instagram.com/forceteller_official/p/DXG6IcrkZkx/)는 3장 안에서 손실 경험을 묻고, 순위를 보여주고, 내 유형을 댓글에 적게 한다. 첫 장의 질문이 마지막 장의 행동으로 닫힌다.

## 동네 카페라면 어떻게 채우나?

아래는 가상의 동네 카페를 기준으로 적은 예다. 실제 가게가 아니며 숫자도 예시다.

| 정할 것 | 질문 | 잘못된 예 | 고친 예 |
|---|---|---|---|
| 첫 장 문장 | 읽는 사람이 왜 멈추나 | 9월 신메뉴 출시 | 오후 3시에 졸린 사람을 위한 커피 3잔 |
| 다음 장을 넘길 이유 | 앞 장이 다음 장을 예고하나 | 신메뉴 사진 4장 나열 | 졸림 유형 3가지에 한 잔씩, 장마다 유형 하나 |
| 마지막에 시킬 행동 | 보고 나서 무엇을 하나 | 많은 관심 부탁드립니다 | 오후에 같이 졸던 동료에게 보내기 |

잘못된 예는 셋 다 카페 이름을 바꿔도 성립한다. 고친 예는 이 카페가 오후 손님을 안다는 사실에서 나온다. 그 사실은 템플릿이 아니라 브랜드에서 확인된 항목에서 온다.

## 정한 다음에 템플릿을 고르면 무엇이 달라지나?

고르는 기준이 생긴다. 첫 장에 문장 하나가 크게 들어가는지, 중간 장이 같은 짜임으로 반복되는지, 마지막 장에 행동을 적을 자리가 있는지를 본다. 세 자리가 있으면 색과 서체는 어느 것을 골라도 된다.

장수도 정해진다. 훅에 한 장, 전개에 유형 수만큼, CTA에 한 장을 주면 위 카페 예는 5장이다. 템플릿이 8장이면 세 장을 빼고, 4장이면 한 장을 더한다.

## 세 가지는 곧 훅·전개·CTA다

Duchamp의 템플릿은 터진 콘텐츠에서 문장·인물·디자인을 걷어내고 남는 훅·전개·CTA의 순서를 AI에게 건넬 프롬프트로 다시 쓴 것이다. 디자인 템플릿을 열기 전에 정할 세 가지는 이 훅·전개·CTA와 같은 것이다. 뉴닉의 야장 맛집 카드는 계절 훅, 지역별 목록 전개, 저장 CTA 순서로 짜였고, 위 카페 예는 시간대 훅, 유형별 한 잔 전개, 동료에게 보내기 CTA 순서로 짜였다.

잘된 게시물의 순서를 템플릿 카드 한 장에 적고, 가져오지 않을 것을 그 아래 적는다. 원문 문장, 장소와 사진, 디자인이 기본으로 들어간다. 빈자리를 브랜드에서 확인된 항목으로 채우면 세 가지가 정해지고, 그때 디자인 템플릿을 연다.

[이 순서를 내 브랜드에 적용](/readymade?utm_source=guide&utm_medium=cta&utm_campaign=before-miricanvas-template)

## 자주 묻는 질문

**미리캔버스 카드뉴스 템플릿은 어떤 기준으로 고르나?**

첫 장 문장, 다음 장을 넘길 이유, 마지막에 시킬 행동을 먼저 정하고 그 셋이 들어갈 자리가 있는 템플릿을 고른다. 첫 장에 문장 하나가 크게 들어가고 마지막 장에 행동을 적을 자리가 있으면 된다. 색과 서체는 그다음이다.

**템플릿을 그대로 써도 되나?**

디자인은 그대로 써도 된다. 문제는 템플릿의 제목 자리에 주제어만 넣고 끝내는 경우다. 주제어는 무엇에 관한 글인지만 알려 주고 왜 멈춰야 하는지는 말하지 않아서 넘겨지지 않는다.

**망고보드, 캔바, 미리캔버스 중 무엇이 카드뉴스에 좋나?**

셋 다 카드뉴스 템플릿을 제공하고 문구와 이미지만 바꿔 쓰는 방식이 같다. 도구 차이보다 첫 장 문장이 있느냐가 결과를 더 크게 가른다. 이미 쓰고 있는 도구를 그대로 쓰면 된다.

**카드뉴스는 몇 장으로 만들어야 하나?**

장수는 정보량이 아니라 역할로 정한다. 첫 장의 훅, 중간 장의 전개, 마지막 장의 CTA에 각각 한 장 이상을 주고 남는 장은 뺀다. 인스타그램 상한은 20장이지만 역할이 없는 장은 넘김을 끊는다.

---

# 카드뉴스 주제 추천, 업종 10개 × 주제 5개와 어울리는 공식

- URL: https://duchamp.app/guide/card-news-topics-by-industry
- 게시: 2026-09-02
- 요약: 카드뉴스 주제는 업종 목록이 아니라 브랜드에서 확인된 항목에서 나온다. 카페부터 SaaS까지 업종 10개의 주제 50개를 어떤 항목에서 나왔는지, 어울리는 훅 공식과 목표는 무엇인지 표로 정리했다.
- 키워드: 카드뉴스 주제 추천, 카드뉴스 주제, 인스타 콘텐츠 아이디어, 카드뉴스 아이디어, 업종별 카드뉴스

카드뉴스 주제는 업종 목록이 아니라 브랜드에서 확인된 항목에서 나온다. 아래 업종 10개, 주제 50개는 그 항목을 찾는 방법을 보여주는 예시다.

카드뉴스 주제란 브랜드에서 확인된 항목 하나를 고객이 멈춰 설 질문으로 바꾼 것이다. 업종이 같아도 항목이 다르면 주제는 달라진다.

## 주제는 어디에서 나오나?

브랜드에서 확인된 항목은 다섯 가지다. 누구를 돕는지, 고객이 반복해서 겪는 문제, 실제로 제공하는 기능, 무료와 유료의 경계, 허용하지 않는 말투다. 주제 하나는 이 다섯 중 하나에서 나오고, 어느 항목에서도 나오지 않은 주제는 상상이라 쓰지 않는다.

아래 표의 첫 장 훅 칸은 [캐러셀 첫 장 훅 4가지](/guide/carousel-hooks-that-get-saves)를 줄여 적었다. 구체적 N개는 구체적 N개 + 다시 볼 이유, 내 유형 찾기는 내 유형 찾기 + 오늘성, 궁금증 간극은 궁금증 간극 + 다음 장에서 완성, 통념 반전은 그대로다. 목표는 도달, 신뢰, 전환, 재방문 넷 중 하나다.

## 업종 10개의 주제 50개는 무엇인가?

### 1. 카페·F&B

| 주제 | 나온 항목 | 첫 장 훅 | 목표 |
|---|---|---|---|
| 단골이 아메리카노 다음으로 많이 시키는 메뉴 3가지 | 실제 기능 | 구체적 N개 | 도달 |
| 원두를 바꾸고 맛이 달라졌다는 손님에게 답한 이유 | 반복 문제 | 궁금증 간극 | 신뢰 |
| 디저트가 오후 3시면 없는 이유 | 실제 기능 | 궁금증 간극 | 재방문 |
| 노트북 손님을 막지 않기로 정한 기준 | 허용하지 않는 말투 | 통념 반전 | 신뢰 |
| 비 오는 9월 첫 주, 이 날씨엔 이 메뉴 | 실제 기능 | 내 유형 찾기 | 재방문 |

### 2. 뷰티·스킨케어

| 주제 | 나온 항목 | 첫 장 훅 | 목표 |
|---|---|---|---|
| 환절기에 갑자기 당기는 피부 4가지와 먼저 바꿀 한 단계 | 반복 문제 | 내 유형 찾기 | 재방문 |
| 이중 세안이 오히려 안 맞는 피부 | 반복 문제 | 통념 반전 | 신뢰 |
| 이 세럼이 3주째부터 달라지는 이유 | 실제 기능 | 궁금증 간극 | 전환 |
| 무료 피부 진단에서 알려주는 것과 알려주지 않는 것 | 무료·유료 경계 | 구체적 N개 | 전환 |
| 성분표에서 먼저 볼 항목 5개 | 실제 기능 | 구체적 N개 | 도달 |

### 3. 필라테스·운동

| 주제 | 나온 항목 | 첫 장 훅 | 목표 |
|---|---|---|---|
| 등록하고 3주 만에 안 가게 되는 이유 3가지 | 반복 문제 | 구체적 N개 | 도달 |
| 주 1회로 충분한 사람과 주 3회가 필요한 사람 | 누구를 돕는지 | 내 유형 찾기 | 재방문 |
| 허리가 아플 때 복근 운동이 먼저가 아닌 이유 | 반복 문제 | 통념 반전 | 신뢰 |
| 체험 수업 50분에 실제로 하는 것 | 무료·유료 경계 | 궁금증 간극 | 전환 |
| 첫 달에 변화가 안 보여도 계속 나오는 사람들의 이유 | 반복 문제 | 궁금증 간극 | 신뢰 |

### 4. 교육·강의

| 주제 | 나온 항목 | 첫 장 훅 | 목표 |
|---|---|---|---|
| 수강생이 3주차에 가장 많이 막히는 지점 3가지 | 반복 문제 | 구체적 N개 | 신뢰 |
| 무료 강의에서 끝까지 알려주는 것과 유료에서만 다루는 것 | 무료·유료 경계 | 구체적 N개 | 전환 |
| 하루 30분이 주말 2시간보다 오래 가는 이유 | 반복 문제 | 통념 반전 | 도달 |
| 지금 내 수준은 어디인지 진도표로 찾는 4단계 | 누구를 돕는지 | 내 유형 찾기 | 재방문 |
| 수업 다음 날 복습을 못 하는 이유와 대신 할 5분 | 반복 문제 | 궁금증 간극 | 재방문 |

### 5. 병원·의원

치료 효과를 보장하거나 다른 병원과 비교하는 표현은 의료법의 의료광고 규정에 걸릴 수 있으니, 아래처럼 절차와 준비 안내 수준에서 주제를 잡고 게시 전에 심의 대상인지 확인한다.

| 주제 | 나온 항목 | 첫 장 훅 | 목표 |
|---|---|---|---|
| 진료 예약 전에 준비하면 대기가 줄어드는 것 4가지 | 실제 기능 | 구체적 N개 | 신뢰 |
| 아침에 심한 통증과 저녁에 심한 통증은 원인이 다르다 | 반복 문제 | 내 유형 찾기 | 도달 |
| 검사 결과지에서 환자가 가장 많이 묻는 항목 3가지 | 반복 문제 | 구체적 N개 | 신뢰 |
| 물을 많이 마시면 무조건 좋다는 말이 안 맞는 경우 | 허용하지 않는 말투 | 통념 반전 | 신뢰 |
| 첫 진료 상담료에 포함되는 것과 아닌 것 | 무료·유료 경계 | 궁금증 간극 | 전환 |

### 6. 부동산·인테리어

| 주제 | 나온 항목 | 첫 장 훅 | 목표 |
|---|---|---|---|
| 집 보러 가서 10분 안에 확인할 항목 5가지 | 반복 문제 | 구체적 N개 | 도달 |
| 전세와 월세 중 지금 내 상황에 맞는 쪽, 4가지 경우 | 누구를 돕는지 | 내 유형 찾기 | 재방문 |
| 넓어 보이려고 흰색만 쓰면 오히려 좁아 보이는 이유 | 반복 문제 | 통념 반전 | 신뢰 |
| 견적서에서 시공사가 빼놓기 쉬운 항목 | 반복 문제 | 궁금증 간극 | 신뢰 |
| 무료 현장 실측에서 하는 것과 설계비가 붙는 시점 | 무료·유료 경계 | 궁금증 간극 | 전환 |

### 7. 온라인 쇼핑몰

| 주제 | 나온 항목 | 첫 장 훅 | 목표 |
|---|---|---|---|
| 이 제품 리뷰에서 가장 많이 나온 질문 3가지와 답 | 반복 문제 | 구체적 N개 | 신뢰 |
| 사이즈에 실패하는 체형 4가지와 각각 고르는 법 | 반복 문제 | 내 유형 찾기 | 전환 |
| 세일 때 사는 게 항상 이득은 아닌 품목 | 실제 기능 | 통념 반전 | 신뢰 |
| 교환이 무료인 경우와 배송비가 붙는 경우 | 무료·유료 경계 | 궁금증 간극 | 신뢰 |
| 이번 주 재입고 3개, 지난번에 놓친 분께 | 실제 기능 | 구체적 N개 | 재방문 |

### 8. 1인 지식창업·코칭

| 주제 | 나온 항목 | 첫 장 훅 | 목표 |
|---|---|---|---|
| 첫 세션에서 고객이 가장 자주 하는 말 3가지 | 반복 문제 | 구체적 N개 | 신뢰 |
| 열심히 하는데 안 되는 사람의 유형 4가지 | 누구를 돕는지 | 내 유형 찾기 | 도달 |
| 목표를 크게 잡을수록 실패하는 이유 | 반복 문제 | 통념 반전 | 신뢰 |
| 무료 상담 30분에서 실제로 정리되는 것 | 무료·유료 경계 | 궁금증 간극 | 전환 |
| 고객이 3개월 뒤 보내온 변화와 그 사이에 한 일 | 실제 기능 | 궁금증 간극 | 전환 |

### 9. 사주·운세·심리

| 주제 | 나온 항목 | 첫 장 훅 | 목표 |
|---|---|---|---|
| 9월 띠별 운세, 이달에 먼저 볼 것 | 실제 기능 | 내 유형 찾기 | 재방문 |
| 일간별로 다른 돈 새는 습관 순위 | 누구를 돕는지 | 내 유형 찾기 | 도달 |
| 오늘 날짜의 띠별 한 줄 | 실제 기능 | 내 유형 찾기 | 재방문 |
| 사주가 나쁘면 인생이 정해진다는 통념 | 허용하지 않는 말투 | 통념 반전 | 신뢰 |
| 무료 풀이에서 보여주는 것과 유료 상담에서 다루는 것 | 무료·유료 경계 | 궁금증 간극 | 전환 |

이 업종은 실제 게시물로 확인할 수 있다. 사주행성의 [9월 띠별 종합 운세](https://www.instagram.com/saju_planet/p/DcsT0sMk_47/)는 15장으로, 이달의 근거를 먼저 설명하고 띠별 요약을 펼친 뒤 개인차 고지와 저장할 이유로 닫는다. 포스텔러의 [일간별 호구력 순위](https://www.instagram.com/forceteller_official/p/DXG6IcrkZkx/)는 3장으로, 누구나 겪는 손실에서 유형 순위와 내 유형 확인으로 이어진다.

해명사주의 [8월 31일 오늘의 운세](https://www.instagram.com/haemyeong_saju/p/DcqtAfJAdSR/)는 7장으로 날짜를 첫 장에 두고 띠별 한 줄을 잇는다. 세 게시물 모두 터졌다고 검증된 것은 아니며, 원문 문장과 디자인은 가져오지 않는다. 사람을 호구로 규정하는 표현과 행운을 대가로 댓글을 요구하는 방식도 가져오지 않을 것에 든다.

### 10. SaaS·앱

| 주제 | 나온 항목 | 첫 장 훅 | 목표 |
|---|---|---|---|
| 가입하고 첫 주에 그만두는 이유 3가지 | 반복 문제 | 구체적 N개 | 신뢰 |
| 이 기능을 쓰는 팀과 안 쓰는 팀의 차이 | 실제 기능 | 궁금증 간극 | 전환 |
| 무료 플랜에서 끝까지 되는 것과 유료로 넘어가는 지점 | 무료·유료 경계 | 구체적 N개 | 전환 |
| 기능이 많을수록 좋은 도구라는 통념 | 허용하지 않는 말투 | 통념 반전 | 신뢰 |
| 내 팀 규모에 맞는 시작 설정 4가지 | 누구를 돕는지 | 내 유형 찾기 | 재방문 |

## 주제는 업종이 아니라 확인된 항목에서 나온다

위 50개를 그대로 쓰면 안 된다. 카페 표의 첫 줄은 단골이 실제로 두 번째로 많이 시키는 메뉴가 있어야 성립하고, 필라테스 표의 첫 줄은 3주 만에 그만두는 회원이 실제로 있어야 성립한다. 항목이 확인되지 않았으면 주제도 없다.

템플릿이란 터진 콘텐츠에서 문장·인물·디자인을 걷어내고 남는 훅·전개·CTA의 순서와, 그 순서가 반응을 만든 이유다. 주제는 그 훅 자리에 들어갈 사실을 고르는 일이고, 템플릿은 그 사실을 어떤 순서로 펼칠지 정하는 일이다. 레퍼런스의 훅·전개·CTA와 가져오지 않을 것을 템플릿 카드 한 장에 적고, 브랜드에서 확인된 항목을 그 자리에 넣으면 주제와 순서가 한 번에 정해진다.

[이 순서를 내 브랜드에 적용](/readymade?utm_source=guide&utm_medium=cta&utm_campaign=card-news-topics-by-industry)

## 자주 묻는 질문

**카드뉴스 주제가 떠오르지 않을 때 어디서 찾나?**

업종 목록이 아니라 브랜드에서 확인된 항목에서 찾는다. 고객이 반복해서 겪는 문제, 실제로 제공하는 기능, 무료와 유료의 경계, 누구를 돕는지, 허용하지 않는 말투 다섯 항목 각각이 주제 하나씩을 낸다.

**같은 업종이면 같은 주제를 써도 되나?**

같은 업종이라도 확인된 항목이 다르면 주제가 달라진다. 이 글의 표는 어떤 항목에서 주제가 나오는지 보여주는 예시다. 내 브랜드에 없는 사실로 만든 주제는 그 순간 낚시가 된다.

**주제마다 어떤 첫 장 훅을 골라야 하나?**

목록으로 만들 사실이 있으면 구체적 N개, 고객을 나눌 유형이 있으면 내 유형 찾기, 답을 미룰 수 있는 질문이 있으면 궁금증 간극, 뒤집을 근거가 있으면 통념 반전이다. 주제가 정해지면 훅은 거의 따라온다.

**병원이나 의원도 카드뉴스 주제를 이렇게 잡아도 되나?**

예약 절차, 검사 전 준비처럼 안내 수준의 주제는 가능하다. 치료 효과를 보장하거나 다른 병원과 비교하는 표현은 의료법의 의료광고 규정에 걸릴 수 있어 게시 전에 심의 대상인지 확인한다. 이 글은 법률 자문이 아니다.

---

# 인스타 훅 문구, 저장을 만드는 캐러셀 첫 장 공식 4가지

- URL: https://duchamp.app/guide/carousel-hooks-that-get-saves
- 게시: 2026-09-02
- 요약: 인스타 저장 많이 받는 캐러셀의 첫 장은 네 가지 공식 중 하나로 시작한다. 구체적 N개, 내 유형 찾기와 오늘성, 궁금증 간극, 통념 반전을 실제 게시물 순서와 실패 변형으로 설명한다.
- 키워드: 인스타 훅 문구, 후킹 멘트, 인스타 저장 많이 받는 법, 캐러셀 첫 장, 카드뉴스 첫 장

저장되는 캐러셀의 첫 장은 구체적 N개, 내 유형 찾기와 오늘성, 다음 장에서 완성되는 질문, 통념 반전 중 하나로 시작한다.

훅이란 캐러셀 첫 장에서 넘길지 말지를 정하는 한 문장이다. 좋은 훅은 넘기게 하는 데서 끝나지 않고 다시 볼 이유까지 심는다.

## 왜 저장이 도달을 만드나?

저장과 공유는 인스타그램이 게시물을 더 많은 사람에게 보여줄지 정할 때 보는 신호에 든다. 인스타그램이 밝힌 신호 목록과 출처는 [인스타 알고리즘 글](/guide/instagram-algorithm-saves-shares)에 정리했다. 좋아요는 그 자리에서 끝나지만 저장은 나중에 다시 열린다는 뜻이고, 공유는 다른 사람의 피드로 옮겨 간다. 그래서 첫 장은 넘기게 하는 문장이 아니라 저장할 이유가 보이는 문장이어야 한다.

아래 예시는 사주·관계·미디어 계정 30개의 캐러셀에서 순서를 배우기 좋은 것으로 고른 게시물이다. 터졌다고 검증된 게시물은 아니며, 원문 문장과 디자인은 싣지 않고 순서만 적는다.

## 첫 장 훅 4가지는 무엇인가?

### 1. 구체적 N개 + 다시 볼 이유

지금 상황에 맞는 항목을 정확한 개수로 약속하고, 마지막 장에서 왜 다시 봐야 하는지를 말하는 방식이다. 개수가 정해지면 사람은 끝까지 볼 양을 가늠하고, 다시 볼 이유가 붙으면 저장한다.

뉴닉의 [늦여름 야장 맛집 6곳](https://www.instagram.com/newneek.official/p/DckPS0AD7bt/)은 8장짜리다. 첫 장에서 계절이 바뀌는 시점을 건드리고, 지역별 목록을 펼친 뒤, 마지막에 저장할 이유를 붙인다. 서울시의 [불꽃축제 가기 전 체크](https://www.instagram.com/seoul_official/p/DcvZWuimONY/)도 같은 뼈대로 다가오는 행사와 미리 확인할 항목을 묶는다.

실패하는 변형은 개수만 큰 경우다. 스무 가지를 약속하고 안쪽에 세 개만 있으면 넘김은 생겨도 저장은 생기지 않는다.

### 2. 내 유형 찾기 + 오늘성

읽는 사람이 자기 유형을 찾게 하고, 날짜나 시기를 붙여 지금 봐야 할 이유를 만드는 방식이다. 자기 항목만 다시 찾아보려고 저장하고, 시기가 바뀌면 다시 돌아온다.

사주행성의 [9월 띠별 종합 운세](https://www.instagram.com/saju_planet/p/DcsT0sMk_47/)는 15장이다. 이달의 근거를 먼저 설명하고 띠별 요약을 펼친 뒤, 개인차가 있다는 고지와 저장할 이유로 닫는다. 해명사주의 [8월 31일 오늘의 운세](https://www.instagram.com/haemyeong_saju/p/DcqtAfJAdSR/)는 7장으로, 날짜를 첫 장에 두고 띠별 한 줄을 이어간다.

실패하는 변형은 대상이 모두인 경우와 날짜만 바꾼 경우다. 어제와 같은 내용에 날짜만 붙이면 재방문이 끊긴다. 행운을 대가로 댓글을 요구하는 방식도 반응은 만들지만 신뢰를 깎는다.

### 3. 궁금증 간극 + 다음 장에서 완성

첫 장을 질문으로 열고 답을 안쪽 장에 두되, 마지막에 마감이나 따라 할 행동을 붙이는 방식이다. 질문이 궁금증을 만들고 행동이 저장할 이유를 만든다.

뉴닉의 [주민등록 사실조사, 왜 하는 거야?](https://www.instagram.com/newneek.official/p/Dcpd-dUDyTe/)는 2장으로 짧다. 지금 필요한 질문에서 이유와 기한, 참여 방법으로 이어진다. 같은 계정의 [양자컴퓨터가 발전하면 비트코인도 위험할까?](https://www.instagram.com/newneek.official/p/Dcj6vC5j_qU/)는 12장으로, 어려운 질문을 단계별로 풀고 지금 가능한 대응으로 닫는다.

실패하는 변형이 낚시다. 답이 없거나 첫 장 질문과 무관한 내용이 나오면 넘김은 생겨도 저장은 생기지 않는다. 충격이나 소름 같은 단어는 질문을 대신하지 못한다.

### 4. 통념 반전

읽는 사람이 믿던 상식과 다른 사실을 첫 장에 놓고, 구체적 사례로 근거를 대고, 지켜야 할 기준으로 닫는 방식이다. 내 기준이 틀렸다는 첫 장은 기준을 다시 보게 하고, 새 기준은 저장된다.

롱블랙의 [빠른 시대에 일부러 다른 길을 택한 브랜드](https://www.instagram.com/longblack.co/p/Dcr9wI3jODG/)는 9장이다. 시대 관찰로 통념을 뒤집고, 한 브랜드 사례를 펼친 뒤, 더 깊이 볼 콘텐츠와 참여로 이어진다. 레드버스백맨의 [AI는 최악의 호텔을 티끌 하나 없다고 요약했다](https://www.instagram.com/redbusbagman/p/Daupk3Sk72j/)는 7장으로, 잘못된 요약 사례에서 빠진 정보와 원인을 거쳐 원칙으로 닫는다.

실패하는 변형은 근거 없는 반전이다. 전부 틀렸다는 식의 과장은 첫 장을 넘기게 해도 안쪽에서 사례가 나오지 않으면 신뢰를 잃는다.

## 어떤 목표와 업종에 맞나?

| 첫 장 훅 | 어울리는 목표 | 안 맞는 업종 |
|---|---|---|
| 구체적 N개 + 다시 볼 이유 | 도달, 재방문 | 목록으로 만들 사실이 셋도 안 되는 단일 상품 브랜드 |
| 내 유형 찾기 + 오늘성 | 재방문, 도달 | 고객을 유형으로 나눌 근거가 없거나 시기를 붙일 이유가 없는 B2B |
| 궁금증 간극 + 다음 장에서 완성 | 도달, 전환 | 답을 미루면 오해가 생기는 의료, 금융 |
| 통념 반전 | 신뢰 | 뒤집을 근거가 아직 없는 신생 브랜드, 공포로 흐르기 쉬운 건강·재무 |

## 훅은 확인된 항목에서 나온다

템플릿이란 터진 콘텐츠에서 문장·인물·디자인을 걷어내고 남는 훅·전개·CTA의 순서와, 그 순서가 반응을 만든 이유다. 네 훅은 첫 장의 순서를 정해 줄 뿐 문장을 주지는 않는다. 문장은 브랜드에서 확인된 항목에서 나온다.

목록으로 만들 사실이 있는지, 고객을 나눌 유형이 있는지, 답을 미룰 수 있는 질문이 있는지, 뒤집을 근거가 있는지를 내 브랜드에서 먼저 확인한다. 확인되지 않은 항목으로 훅을 쓰면 그 순간 낚시가 된다. 레퍼런스의 훅·전개·CTA와 가져오지 않을 것을 템플릿 카드 한 장에 적어 두면, 어느 훅이 내 브랜드에 맞는지가 바로 보인다.

[이 순서를 내 브랜드에 적용](/readymade?utm_source=guide&utm_medium=cta&utm_campaign=carousel-hooks-that-get-saves)

## 자주 묻는 질문

**인스타 저장을 많이 받는 훅 문구는 어떻게 쓰나?**

첫 장에 다시 볼 이유를 넣는다. 구체적 개수, 내 유형을 찾게 하는 대상 지정, 다음 장에서 완성되는 질문, 통념을 뒤집는 문장 중 하나가 그 이유가 된다. 과장된 단어보다 무엇을 얻는지가 분명해야 저장된다.

**후킹 멘트와 낚시는 무엇이 다른가?**

훅은 첫 장의 약속을 안쪽 장에서 지킨다. 낚시는 약속만 크고 안쪽에 답이 없거나 첫 장과 무관한 내용이 나온다. 낚시는 넘김은 만들지만 저장과 공유는 만들지 못한다.

**캐러셀 첫 장에 숫자를 넣으면 무조건 좋은가?**

숫자는 다시 볼 이유가 붙을 때만 작동한다. 개수만 크고 안쪽이 빈약하면 저장은 늘지 않는다. 내 브랜드가 실제로 목록으로 만들 수 있는 사실이 있을 때만 쓴다.

**네 훅 중 무엇을 골라야 하나?**

브랜드에서 확인된 항목이 정한다. 목록으로 만들 사실이 있으면 구체적 N개, 고객을 나눌 유형이 있으면 내 유형 찾기, 답을 미룰 수 있는 질문이 있으면 궁금증 간극, 뒤집을 근거가 있으면 통념 반전이다.

---

# 인스타 알고리즘 2026, 저장·공유가 도달을 만드는 원리

- URL: https://duchamp.app/guide/instagram-algorithm-saves-shares
- 게시: 2026-09-02
- 요약: 2026년 인스타 알고리즘은 시청 시간, 도달 대비 좋아요, 도달 대비 공유를 가장 크게 본다. Adam Mosseri와 인스타그램 공식 블로그가 밝힌 신호를 출처와 함께 정리하고, 저장·공유·프로필 방문이 왜 도달로 이어지는지 원리로 설명한다.
- 키워드: 인스타 알고리즘, 인스타 알고리즘 2026, 인스타 저장 많이 받는 법, 인스타 공유 늘리기, 인스타 도달, 인스타 랭킹 신호

2026년 인스타 알고리즘은 시청 시간, 도달 대비 좋아요, 도달 대비 공유를 가장 크게 본다. 인스타그램 대표 Adam Mosseri가 직접 밝힌 순서이고, 저장은 탐색 탭 추천의 핵심 신호다.

인스타 알고리즘이란 피드, 스토리, 릴스, 탐색 탭마다 따로 돌아가는 랭킹 시스템의 묶음이다. 하나의 규칙이 아니라 화면마다 다른 행동을 예측하는 여러 모델이다.

## 인스타그램이 직접 공개한 신호는 무엇인가?

Mosseri는 2025년 1월 22일 [영상](https://www.instagram.com/p/DFFyRp-pINJ/)에서 랭킹에 가장 큰 무게를 가진 신호 세 가지로 시청 시간, 좋아요, 전송을 꼽았다. 창작자가 봐야 할 지표로는 평균 시청 시간, 도달 대비 좋아요, 도달 대비 전송을 말했다. 여기서 전송은 게시물을 DM으로 보내는 행동이다.

그보다 앞서 인스타그램은 2023년 5월 31일 공식 블로그 [Instagram Ranking Explained](https://about.instagram.com/blog/announcements/instagram-ranking-explained)에서 화면별 신호를 설명했다. 피드에서 가장 눈여겨보는 다섯 가지 행동은 게시물에 몇 초 머무는지, 댓글, 좋아요, 공유, 프로필 사진 탭이다. 탐색 탭에서는 좋아요, 저장, 공유를 가장 중요한 예측으로 꼽았다.

| 신호 | 인스타그램이 읽는 의미 | 카드뉴스에서 만드는 방법 | 출처 |
|---|---|---|---|
| 시청 시간 | 멈춰서 끝까지 봤다 | 첫 장에서 질문을 열고 마지막 장에서 닫는다. 장마다 역할 하나 | Mosseri 2025-01 |
| 도달 대비 좋아요 | 팔로워가 좋아한다 | 브랜드와 맞는 말투와 소재 | Mosseri 2025-01 |
| 도달 대비 공유(전송) | 남에게 보내고 싶다 | 특정한 누군가를 떠올리게 하는 유형·관계로 나누는 전개 | Mosseri 2025-01 |
| 저장 | 다시 볼 가치가 있다 | 목록, 순위, 체크리스트처럼 나중에 꺼낼 정보 | 공식 블로그 2023-05, 탐색 탭 |
| 프로필 사진 탭 | 누가 말하는지 궁금하다 | 첫 장에 관점을 드러내고 계정과 일관되게 | 공식 블로그 2023-05, 피드 |
| 댓글 | 대화가 생겼다 | 내 유형을 적게 하는 질문 | 공식 블로그 2023-05, 피드 |

세 신호 모두 도달 대비 비율이다. 도달이 늘어도 좋아요와 전송이 따라 늘지 않으면 비율은 떨어진다.

### 팔로워용과 새 사람용은 무게가 다르다

같은 영상에서 Mosseri는 팔로워에게 보이는 콘텐츠에는 좋아요가, 팔로우하지 않은 사람에게 추천되는 콘텐츠에는 전송이 조금 더 중요하다고 말했다. 새 사람에게 닿고 싶다면 전송이 나올 순서를 먼저 본다.

## 왜 저장이 도달을 만드나?

저장은 한 사람이 "나중에 다시 보겠다"고 정한 행동이다. 인스타그램은 이 행동을 탐색 탭 추천의 핵심 예측에 넣는다. 저장이 많은 게시물은 비슷한 관심을 가진 새 사람에게 추천될 근거가 된다.

저장은 시청 시간과도 겹친다. 저장할 만한 게시물은 끝까지 넘겨 보는 경우가 많아서 두 신호가 함께 오른다.

[사주행성의 9월 띠별 운세](https://www.instagram.com/saju_planet/p/DcsT0sMk_47/)는 15장 안에 시기 근거, 띠별 요약, 개인차 안내, 저장할 이유를 순서대로 놓았다. 12개 유형을 한 번에 다 읽기 어려우니 저장이 자연스럽다. 저장을 부탁해서가 아니라 저장해야 다 볼 수 있는 순서라서 저장이 나온다.

## 왜 공유가 팔로워 밖으로 나가게 하나?

전송은 보는 사람이 특정한 누군가를 떠올렸다는 증거다. 인스타그램 입장에서는 팔로우 관계가 없는 두 사람 사이에 게시물이 움직인 것이라, 새 사람에게 추천할 때 가장 믿을 만한 신호가 된다. Mosseri가 새 사람 도달에 전송이 더 중요하다고 말한 이유가 여기 있다.

[포스텔러의 일간별 호구력 순위](https://www.instagram.com/forceteller_official/p/DXG6IcrkZkx/)는 모두가 겪는 손실을 첫 장에서 묻고, 유형 순위를 보여준 뒤, 내 유형과 진단으로 닫는다. 순위 안에서 친구를 찾게 되니 보내기 좋다.

유형 순위, 체크리스트, 두 사람 비교는 모두 받는 사람을 지정하게 만든다. 공유는 부탁해서 나오는 게 아니라 받는 사람이 정해질 때 나온다.

## 프로필 방문은 무엇을 뜻하나?

피드의 다섯 가지 핵심 행동 중 하나가 프로필 사진 탭이다. 게시물을 보고 "누가 이 말을 하지"라고 궁금해졌다는 뜻이다. 인스타그램은 이 행동을 계정과 관계가 생길 가능성으로 읽는다.

프로필 방문은 첫 장에서 관점이 드러날 때 생긴다. 브랜드와 맞는 시각이 보이는 카드는 계정을 확인하게 만들고, 게시물과 프로필이 같은 말을 해야 방문이 팔로우로 이어진다.

## 알고리즘 꼼수는 왜 오래 못 가나?

자극적인 첫 장으로 도달만 끌어올리면 그 도달에서 좋아요와 전송이 나오지 않아 비율이 떨어지고, 다음 게시물의 추천이 줄어든다. 댓글에 행운을 거는 유도도 댓글만 늘 뿐 저장과 전송은 늘지 않는다.

## 저장을 만드는 건 알고리즘이 아니라 순서다

저장, 전송, 프로필 방문은 모두 게시물의 순서가 만든다. 첫 장의 훅이 멈추게 하고, 중간 장의 전개가 끝까지 넘기게 하고, 마지막 장의 CTA가 저장하거나 보내게 한다. 알고리즘은 그 결과를 읽을 뿐이다.

템플릿이란 터진 콘텐츠에서 문장·인물·디자인을 걷어내고 남는 훅·전개·CTA의 순서와, 그 순서가 반응을 만든 이유다. 어떤 질문으로 멈추게 했는지, 어떤 순서로 펼쳤는지, 마지막에 무엇을 하게 했는지를 템플릿 카드 한 장으로 적으면 다른 브랜드로 옮길 수 있다. 내 브랜드에서 확인된 사실을 같은 훅·전개·CTA 자리에 넣으면 문장은 새로 나오고 순서는 남는다.

[이 순서를 내 브랜드에 적용](/readymade?utm_source=guide&utm_medium=cta&utm_campaign=instagram-algorithm-saves-shares)

## 자주 묻는 질문

**2026년 인스타 알고리즘에서 가장 중요한 신호는 무엇인가요?**

인스타그램 대표 Adam Mosseri가 2025년 1월에 밝힌 순서로 시청 시간, 도달 대비 좋아요, 도달 대비 공유(DM 전송)다. 세 신호 모두 절대 수가 아니라 도달한 사람 수 대비 비율로 본다.

**인스타 저장은 알고리즘에 영향을 주나요?**

준다. 인스타그램 공식 블로그는 탐색 탭에서 예측하는 가장 중요한 행동으로 좋아요, 저장, 공유를 꼽았다. 저장은 다시 볼 가치가 있다는 신호라서 카드뉴스처럼 정보를 담는 형식에서 특히 잘 나온다.

**인스타 공유를 늘리려면 어떻게 해야 하나요?**

보는 사람이 특정한 누군가를 떠올리게 만드는 순서가 필요하다. 유형 순위, 관계 체크리스트처럼 "너 얘기다"라고 보내기 좋은 내용이 공유로 이어진다. 공유는 팔로워가 아닌 사람에게 닿을 때 가장 큰 무게를 가진다.

**팔로워에게 보이는 것과 새 사람에게 추천되는 것은 다른 기준인가요?**

다르다. Mosseri는 팔로워에게 보이는 콘텐츠에는 좋아요가, 팔로우하지 않은 사람에게 추천되는 콘텐츠에는 공유가 조금 더 중요하다고 말했다. 새 사람에게 닿고 싶다면 공유가 나올 순서를 먼저 본다.

**인스타 알고리즘 꼼수는 통하나요?**

오래 가지 않는다. 신호가 도달 대비 비율이라서 낚시로 도달만 늘리면 비율이 떨어진다. 저장과 공유는 내용이 그만한 가치를 줄 때만 나오기 때문에 순서를 고치는 편이 빠르다.

---

# 인스타 캡션 쓰는법, 캐러셀 캡션 3단 공식과 예시 10개

- URL: https://duchamp.app/guide/instagram-caption-formula
- 게시: 2026-09-02
- 요약: 인스타 캡션은 첫 줄, 본문, 마지막 줄 세 단으로 쓴다. 첫 줄은 첫 장과 다른 각도로 멈추게 하고, 본문은 카드에 못 담은 근거를, 마지막 줄은 행동 하나를 맡는다. 잘못된 예와 고친 예, 가상 브랜드 예시 10개를 정리했다.
- 키워드: 인스타 캡션, 인스타 캡션 예시, 인스타 캡션 쓰는법, 인스타 글쓰기, 캐러셀 캡션

인스타 캡션은 첫 줄, 본문, 마지막 줄 세 단으로 쓴다. 첫 줄은 첫 장과 다른 각도로 멈추게 하고, 본문은 카드에 못 담은 근거를, 마지막 줄은 행동 하나를 맡는다.

캡션이란 캐러셀 아래에 붙는 글로, 첫 장의 훅을 반복하지 않고 보충과 검색과 행동을 맡는 자리다. 카드가 하지 못한 일을 하는 글이지 카드를 다시 설명하는 글이 아니다.

## 캡션은 캐러셀에서 무슨 일을 하나?

캐러셀에서 멈춰 세우는 일은 첫 장이 하고, 넘기게 하는 일은 중간 장이 하고, 행동하게 하는 일은 마지막 장이 한다. 캡션은 이 셋을 반복하는 대신 세 가지를 맡는다. 카드에 넣기엔 긴 근거를 보충하고, 검색창에 걸릴 말을 담고, 마지막 장의 행동을 한 번 더 짚는다.

첫 장 문장을 캡션에 그대로 옮기는 게시물이 많다. 사람은 이미 이미지에서 그 문장을 읽었으니 캡션 첫 줄은 버려진다. 캡션 첫 줄이 다른 각도를 열어야 더보기를 누른다.

## 3단 구성은 무엇인가?

### 1. 첫 줄: 더보기 전에 보이는 한 줄

피드에서 더보기 전에 보이는 분량은 약 두 줄이다. 흔히 125자라고 알려져 있지만 인스타그램이 공식으로 밝힌 수치는 아니고 기기와 언어에 따라 다르다. 한글은 같은 폭에 영문보다 적게 들어가니 첫 줄은 한 줄 안에서 끝낸다.

첫 줄의 역할은 첫 장과 다른 각도에서 한 번 더 멈추게 하는 것이다. 첫 장이 개수를 약속했으면 첫 줄은 그중 하나가 의외였다고 말하고, 첫 장이 질문이었으면 첫 줄은 그 질문이 나온 장면을 말한다. 같은 문장을 되풀이하지만 않으면 된다.

### 2. 본문: 캐러셀이 못 담은 근거와 맥락

본문은 카드에 넣기엔 길었던 근거를 맡는다. 왜 그 순서였는지, 어떤 손님이 그 질문을 했는지, 예외는 무엇인지가 들어간다. 내용은 브랜드에서 확인된 항목에서만 가져온다.

확인되지 않은 사실을 본문에서 보태면 캐러셀 전체가 낚시가 된다. 그럴듯한 통계, 없는 손님, 남의 사례는 넣지 않는다. 문단은 두세 문장으로 끊고 줄바꿈으로 숨을 준다.

### 3. 마지막 줄: 행동 하나

마지막 줄은 행동 하나만 요청한다. 저장, 댓글에 내 유형 적기, 프로필 링크 중 하나다. 캐러셀 마지막 장의 CTA와 같은 행동을 반복하는 것이 원칙이고, 셋을 나란히 쓰면 아무것도 일어나지 않는다.

행동은 게시물 목표에 따라 정해진다. 다시 볼 정보면 저장, 유형을 나눴으면 댓글, 전환이 목표면 프로필 링크다. 행운이나 혜택을 대가로 댓글을 요구하는 방식은 반응은 만들지만 신뢰를 깎는다.

## 잘못된 캡션과 고친 캡션은 어떻게 다른가?

가상의 동네 필라테스 스튜디오가 "등록하고 3주 만에 안 가게 되는 이유 3가지" 캐러셀을 올렸다고 하자. 첫 장에 그 문장이 크게 있고, 마지막 장은 무료 체험 상담이다.

| 단 | 역할 | 잘못된 예 | 고친 예 |
|---|---|---|---|
| 첫 줄 | 첫 장과 다른 각도로 멈추게 한다 | 등록하고 3주 만에 안 가게 되는 이유 3가지! | 세 가지 중 두 번째는 저희도 올해 알았습니다. |
| 본문 | 카드에 못 담은 근거와 맥락 | 꾸준함이 답입니다. 건강한 습관을 만들어 보세요. | 지난겨울 등록 회원 중 3주 안에 발길이 끊긴 분들께 여쭤봤습니다. 시간대가 안 맞았다는 답이 가장 많았고, 두 번째가 첫 수업이 너무 힘들었다는 답이었습니다. 그래서 첫 수업 강도를 낮췄습니다. |
| 마지막 줄 | 행동 하나 | 저장하고 친구 태그하고 프로필 링크로 오세요! | 세 가지 중 내 이유는 몇 번인지 댓글에 남겨 주세요. |

잘못된 예는 첫 장을 반복하고, 본문이 브랜드에 없는 격언으로 채워지고, 마지막에 행동 셋을 한꺼번에 요청한다. 고친 예는 첫 줄이 새 각도를 열고, 본문이 확인된 항목에서 나온 근거를 대고, 마지막에 하나만 시킨다.

## 예시 10개는 어떤 순서인가?

아래는 모두 가상의 브랜드다. 첫 장 문장을 먼저 두고, 캡션의 첫 줄, 본문 요약, 마지막 줄을 3단으로 적었다.

| 가상 브랜드 · 첫 장 | 첫 줄 | 본문 요약 | 마지막 줄 |
|---|---|---|---|
| 동네 카페 · 단골이 두 번째로 많이 시키는 메뉴 3가지 | 1위는 저희도 예상 못 했습니다. | 지난달 주문 기록에서 셋을 골랐고, 오후 3시 이후 주문이 많은 이유를 적는다 | 다음에 뭐 시킬지 정했으면 저장 |
| 스킨케어 · 환절기에 갑자기 당기는 피부 4가지 | 넷 중 셋은 보습제 문제가 아닙니다. | 상담에서 반복된 네 유형과 각각 먼저 바꿀 한 단계, 이 제품이 맞는 유형과 아닌 유형을 적는다 | 내 피부는 몇 번인지 댓글 |
| 필라테스 · 등록하고 3주 만에 안 가게 되는 이유 3가지 | 두 번째 이유는 저희 잘못이었습니다. | 회원 인터뷰에서 나온 세 이유와 첫 수업 강도를 바꾼 사연 | 내 이유는 몇 번인지 댓글 |
| 영어 강의 · 수강생이 3주차에 막히는 지점 3가지 | 3주차를 넘긴 분들의 공통점이 있었습니다. | 세 지점과 각각 무료 강의에서 다루는 범위, 유료에서만 다루는 범위 | 3주차 앞이면 저장 |
| 치과 · 예약 전에 준비하면 대기가 줄어드는 것 4가지 | 넷 중 하나는 전화 한 통이면 됩니다. | 네 항목과 각각 왜 대기를 줄이는지, 준비 없이 와도 되는 경우 | 예약 전에 다시 볼 수 있게 저장 |
| 인테리어 · 견적서에서 빠지기 쉬운 항목 | 빠진 항목은 대개 마지막 주에 나타납니다. | 최근 견적 열 건에서 빠졌던 항목, 무료 실측과 설계비가 붙는 시점 | 견적 받기 전에 저장 |
| 의류 쇼핑몰 · 사이즈에 실패하는 체형 4가지 | 교환 요청의 절반이 한 체형에서 나옵니다. | 네 체형과 각각 고르는 기준, 교환이 무료인 경우와 배송비가 붙는 경우 | 내 체형은 몇 번인지 댓글 |
| 커리어 코칭 · 열심히 하는데 안 되는 사람의 유형 4가지 | 네 유형 중 둘은 열심히가 문제입니다. | 첫 세션에서 반복해 들은 말로 나눈 유형과 무료 상담 30분에서 정리되는 것 | 내 유형 확인은 프로필 링크 |
| 사주 앱 · 9월 띠별로 먼저 볼 것 | 이달은 띠보다 먼저 볼 게 있습니다. | 이달 기운의 근거, 띠별 요약은 카드에, 개인차가 있다는 고지 | 내 띠 다시 보려면 저장 |
| 협업 앱 · 가입하고 첫 주에 그만두는 이유 3가지 | 셋 다 기능 문제가 아니었습니다. | 첫 주 이탈 사용자 인터뷰에서 나온 세 이유와 무료 플랜에서 끝까지 되는 것 | 시작 설정은 프로필 링크 |

열 개 모두 첫 줄이 첫 장을 반복하지 않고, 본문이 그 브랜드가 확인한 정보에서 나오고, 마지막 줄이 하나만 시킨다. 사주 앱 예시의 순서는 [사주행성의 9월 띠별 운세](https://www.instagram.com/saju_planet/p/DcsT0sMk_47/) 캐러셀에서 배운 것으로, 시기 근거와 유형별 요약과 개인차 고지를 순서대로 놓는 짜임이다. 원문 캡션 문장은 옮기지 않았다.

## 해시태그는 어떻게 붙이나?

해시태그는 캡션 맨 아래에 한 문단으로 붙인다. 개수를 채울 이유는 없고, 사람들이 실제로 검색창에 치는 말로 3~5개면 된다. 필라테스 스튜디오라면 동네 이름과 필라테스, 체험 수업처럼 검색어형으로 고르고, 게시물과 무관한 인기 해시태그는 도달을 늘려도 저장과 공유로 이어지지 않는다.

## 캡션도 템플릿 카드에서 나온다

템플릿이란 터진 콘텐츠에서 문장·인물·디자인을 걷어내고 남는 훅·전개·CTA의 순서와, 그 순서가 반응을 만든 이유다. 캡션의 3단은 이 순서를 한 번 더 따라간다. 첫 줄은 훅의 다른 각도이고, 본문은 전개의 근거이고, 마지막 줄은 CTA의 반복이다.

그래서 캡션은 캐러셀을 다 만든 뒤에 따로 떠올리는 글이 아니다. 템플릿 카드에 적어 둔 훅·전개·CTA와 가져오지 않을 것이 있으면, 캡션 세 단은 브랜드에서 확인된 항목을 그 자리에 넣는 일로 줄어든다. 문장은 새로 나오고 순서는 남는다.

[이 순서를 내 브랜드에 적용](/readymade?utm_source=guide&utm_medium=cta&utm_campaign=instagram-caption-formula)

## 자주 묻는 질문

**인스타 캡션 첫 줄은 몇 글자까지 보이나?**

피드에서는 더보기 전에 약 두 줄이 보인다. 흔히 125자라고 알려져 있지만 인스타그램이 공식으로 밝힌 수치는 아니고 기기와 언어에 따라 다르다. 한글은 영문보다 적게 들어가니 첫 줄은 한 줄 안에서 끝내는 편이 안전하다.

**캡션에 첫 장 문장을 그대로 쓰면 안 되나?**

안 된다. 첫 장의 훅은 이미 이미지에서 읽혔으니 캡션이 반복하면 자리를 낭비한다. 캡션 첫 줄은 첫 장과 다른 각도에서 멈추게 하고, 본문은 카드에 못 담은 근거를 맡는다.

**인스타 캡션에 해시태그는 몇 개가 좋나?**

개수보다 검색어형인지가 중요하다. 사람들이 실제로 검색창에 치는 말로 3~5개면 충분하다. 관련 없는 인기 해시태그를 채우면 도달은 늘어도 저장과 공유로 이어지지 않는다.

**캡션 마지막 줄에는 무엇을 쓰나?**

행동 하나만 쓴다. 저장, 댓글에 내 유형 적기, 프로필 링크 중 하나다. 셋을 다 쓰면 아무것도 하지 않는다. 캐러셀 마지막 장의 CTA와 같은 행동을 반복하는 것이 원칙이다.

---

# 인스타 카드뉴스 사이즈, 캐러셀 비율·장수·첫 장 규칙

- URL: https://duchamp.app/guide/instagram-carousel-size-rules
- 게시: 2026-09-02
- 요약: 인스타 카드뉴스(캐러셀) 사이즈는 4:5, 1080×1350픽셀이 기본이다. 지원 비율 4가지, 최대 20장, 첫 장이 크롭을 정하는 규칙, 프로필 그리드 미리보기까지 인스타그램 공식 사양 기준으로 정리했다.
- 키워드: 인스타 카드뉴스 사이즈, 인스타 캐러셀, 카드뉴스 사이즈, 카드뉴스 크기, 인스타 카드뉴스, 캐러셀 장수

인스타 카드뉴스는 4:5 비율, 1080×1350픽셀로 만들면 된다. 한 게시물에 최대 20장까지 넣을 수 있고, 첫 장의 비율이 나머지 장의 크롭을 정한다.

인스타 캐러셀이란 사진이나 영상 여러 장을 한 게시물에 묶어 옆으로 넘겨 보게 하는 피드 형식이다. 한국에서 흔히 부르는 카드뉴스는 이 캐러셀에 글자를 얹은 것이다.

## 어떤 비율을 써야 하나?

인스타그램 피드는 세로 4:5부터 가로 1.91:1 사이의 비율을 받는다. 가로폭은 1080픽셀에 맞춘다. 이 범위 안에서 자주 쓰는 비율과 픽셀은 아래와 같다.

| 비율 | 픽셀 | 용도 | 비고 |
|---|---|---|---|
| 4:5 | 1080×1350 | 카드뉴스 기본. 피드에서 가장 크게 보인다 | 예약 도구 대부분이 지원 |
| 1:1 | 1080×1080 | 제품 사진, 로고 중심 카드 | 그리드에서 상하 여백이 생긴다 |
| 3:4 | 1080×1440 | 폰 카메라 원본 사진 | 2025년 5월 추가. 외부 예약 도구는 미지원인 곳이 있다 |
| 1.91:1 | 1080×566 | 가로 배너, 링크 미리보기 | 피드에서 가장 작게 보인다 |

가로 320~1080픽셀 사이의 사진은 원본 해상도 그대로 올라간다. 그보다 크면 1080으로 줄이고, 작으면 320으로 늘린다. 출처는 인스타그램 도움말 센터의 [사진 해상도 안내](https://help.instagram.com/1631821640426723/)다.

3:4 지원은 인스타그램 대표 Adam Mosseri가 2025년 5월 29일 [Threads](https://www.threads.com/@mosseri/post/DKOIbJkRNIb)에서 알렸다. 폰 카메라 기본 비율을 자르지 않고 올리게 한 변경이다. 단일 사진과 캐러셀 모두 해당한다.

## 몇 장까지 올릴 수 있나?

한 게시물에 사진과 영상을 합쳐 20장까지 넣을 수 있다. 2024년 8월에 10장에서 20장으로 늘었다. 출처는 도움말 센터의 [여러 장 게시 안내](https://help.instagram.com/269314186824048/)다.

상한이 20장이라고 20장을 채울 이유는 없다. 실제 게시물의 장수는 정보량이 아니라 역할로 정해진다. [포스텔러의 일간별 순위 카드](https://www.instagram.com/forceteller_official/p/DXG6IcrkZkx/)는 3장이다. 문제 제기, 순위 공개, 내 유형 확인이라는 세 역할에 한 장씩 배정했다.

[사주행성의 9월 띠별 운세](https://www.instagram.com/saju_planet/p/DcsT0sMk_47/)는 15장이다. 띠 12개에 한 장씩 주고 앞뒤에 설명과 저장 이유를 붙였다. 장이 많아도 각 장의 역할이 하나면 읽힌다.

## 첫 장은 왜 다르게 다뤄야 하나?

첫 장은 두 가지 일을 한다. 캐러셀 전체의 크롭 기준이 되고, 피드에서 유일하게 보이는 장이 된다.

첫 장을 4:5로 올리면 뒤에 정사각형 이미지를 섞어도 4:5로 잘린다. 그래서 장마다 비율을 달리 만들지 않는다. 처음부터 모든 장을 같은 캔버스에서 만드는 편이 안전하다.

피드에서 사람들은 첫 장만 보고 넘길지 말지 정한다. 두 번째 장부터는 첫 장이 만든 기대를 채우는 자리다. 첫 장에 글자를 많이 넣기보다 문장 하나를 크게 두는 카드가 많은 이유다.

## 프로필 그리드에서는 어떻게 잘리나?

2025년 1월부터 프로필 그리드 미리보기가 정사각형에서 세로형 직사각형으로 바뀌었다. Mosseri는 [Threads](https://www.threads.com/@mosseri/post/DFBmvEmSdeb)에서 올라오는 사진과 영상 대부분이 세로형이라 그리드를 세로로 바꿨다고 밝혔다.

그리드 미리보기는 3:4에 가까워서 4:5 이미지는 좌우가 조금 잘리고, 1:1 이미지는 상하에 여백이 생긴다. 앱에서 미리보기 위치를 손으로 조정할 수는 있다. 글자와 로고를 가장자리에서 안쪽으로 들여 놓으면 어느 화면에서든 잘리지 않는다.

## 사이즈보다 먼저 정할 것: 첫 장 문장

사이즈와 장수는 한 번 정하면 끝나는 규칙이다. 매번 다시 정해야 하는 것은 첫 장에 쓸 문장이다. 그 문장이 없으면 어떤 픽셀로 만들어도 넘겨지지 않는다.

잘 읽히는 캐러셀은 세 부분으로 나뉜다. 첫 장의 훅, 중간 장의 전개, 마지막 장의 CTA다. 훅은 왜 멈춰야 하는지, 전개는 왜 다음 장을 넘겨야 하는지, CTA는 보고 나서 무엇을 하면 되는지 답한다.

[뉴닉의 늦여름 야장 맛집 카드](https://www.instagram.com/newneek.official/p/DckPS0AD7bt/)를 예로 들면, 계절이 바뀐다는 훅, 지역별 목록이라는 전개, 저장해 두라는 CTA로 8장을 짰다. 이 세 단계가 그 게시물의 순서다.

템플릿이란 터진 콘텐츠에서 문장·인물·디자인을 걷어내고 남는 훅·전개·CTA의 순서와, 그 순서가 반응을 만든 이유다. 순서라서 다른 브랜드로 옮길 수 있다. 내 브랜드에서 확인된 사실을 같은 훅·전개·CTA 자리에 넣으면 문장은 새로 나오고 순서는 남는다. 사이즈를 고르기 전에 이 세 자리부터 채운다.

[이 순서를 내 브랜드에 적용](/readymade?utm_source=guide&utm_medium=cta&utm_campaign=instagram-carousel-size-rules)

## 자주 묻는 질문

**인스타 카드뉴스 사이즈는 몇 픽셀로 만들어야 하나요?**

4:5 비율의 1080×1350픽셀이 기본이다. 인스타그램은 가로 320~1080픽셀 사이의 사진을 원본 해상도로 유지하고, 그보다 크면 1080으로 줄인다. 정사각형이면 1080×1080이다.

**인스타 캐러셀은 몇 장까지 올릴 수 있나요?**

사진과 영상을 합쳐 한 게시물에 최대 20장이다. 2024년 8월에 10장에서 20장으로 늘었다. 장수 상한보다 다음 장을 넘길 이유가 있느냐가 더 중요하다.

**캐러셀의 장마다 비율이 달라도 되나요?**

첫 장의 비율이 나머지 장의 크롭 기준이 된다. 첫 장을 4:5로 올리면 뒤의 정사각형 이미지도 4:5로 잘린다. 모든 장을 같은 비율로 만드는 편이 안전하다.

**프로필 그리드에서 카드뉴스가 잘리는 이유는 뭔가요?**

2025년 1월부터 프로필 그리드 미리보기가 정사각형에서 세로형 직사각형으로 바뀌었다. 4:5 이미지는 좌우가 조금, 1:1 이미지는 상하 여백이 생긴다. 글자와 로고를 가장자리에서 떨어뜨리면 된다.

**3:4 비율로 올려도 되나요?**

2025년 5월부터 인스타그램 앱에서 3:4(1080×1440) 사진을 자르지 않고 올릴 수 있다. 다만 외부 예약 도구 중에는 아직 4:5까지만 받는 곳이 있어, 예약 게시를 쓴다면 4:5가 무난하다.

---

# 인스타 인사이트 보는법, 게시 후 7일에 볼 숫자 4개

- URL: https://duchamp.app/guide/read-instagram-insights-7-days
- 게시: 2026-09-02
- 요약: 인스타 인사이트는 프로페셔널 계정에서 게시물 아래 인사이트 보기로 연다. 게시 후 7일에 도달, 저장, 공유, 프로필 방문 네 숫자를 내 계정 최근 게시물 평균과 비교해 읽는 법과 다음 실험을 표로 정리했다.
- 키워드: 인스타 인사이트 보는법, 인스타 인사이트, 인스타 도달, 인스타 저장 확인, 인스타 프로필 방문

프로페셔널 계정으로 바꾸고 게시물 아래 인사이트 보기를 누르면 된다. 볼 숫자는 도달, 저장, 공유, 프로필 방문 넷이고, 게시 후 7일에 본다.

인스타 인사이트란 프로페셔널 계정에서 게시물과 계정의 반응을 숫자로 보여주는 인스타그램 안의 기능이다. 광고 도구가 아니라 내 게시물이 어디까지 닿았고 사람들이 무엇을 했는지 보는 화면이다.

## 인사이트는 어떻게 여나?

개인 계정에는 인사이트가 없다. 설정에서 프로페셔널 계정으로 전환해야 하고, 비즈니스와 크리에이터 중 어느 쪽을 골라도 인사이트는 같이 열린다. 전환 절차는 도움말 센터의 [프로페셔널 계정 설정](https://help.instagram.com/502981923235522) 문서에 있다.

게시물 하나의 숫자는 피드에서 그 게시물 아래에 있는 인사이트 보기를 누르면 나온다. 계정 전체 숫자는 프로필에서 프로페셔널 대시보드를 열어 본다. 도움말 센터의 [게시물 인사이트 보기](https://help.instagram.com/553860108359435/) 문서가 기준이며, 이 글의 메뉴 이름은 2026-09-02 기준이라 앱 버전에 따라 조금 다를 수 있다.

지표 이름은 2025년 4월에 한 번 바뀌어, 노출과 재생이 조회로 합쳐졌고 도달은 그대로 남았다. 변경 내용은 [Metricool의 정리](https://help.metricool.com/en/article/instagram-replaces-impressions-with-views-what-you-need-to-know-ustr2f/)에 있다. 이 글에서 조회 대신 도달을 보는 이유는 아래에 있다.

## 볼 숫자 4개는 무엇인가?

### 도달

도달은 게시물을 한 번이라도 본 계정 수다. 조회와 달리 한 사람은 한 번만 센다. 팔로워 수보다 도달이 크면 팔로워 밖으로 나갔다는 뜻이다.

### 저장

저장은 나중에 다시 보려고 게시물을 남긴 수다. 인스타그램은 탐색 탭 추천을 정할 때 저장을 핵심 신호로 본다. 근거는 [인스타 알고리즘 글](/guide/instagram-algorithm-saves-shares)에 출처와 함께 정리했다.

### 공유

공유는 게시물을 다른 사람에게 보낸 수다. 보는 사람이 특정한 누군가를 떠올렸다는 증거라서 팔로우하지 않은 사람에게 추천될 때 가장 무게가 크다.

### 프로필 방문

프로필 방문은 게시물을 보고 계정을 눌러 본 수다. 누가 이 말을 하는지 궁금해졌다는 뜻이고, 게시물과 프로필이 같은 말을 할 때 팔로우로 이어진다.

## 왜 7일인가?

게시 직후 숫자는 팔로워 반응만 담긴다. 탐색 탭과 추천으로 새 사람에게 닿는 도달은 저장과 공유가 쌓인 뒤에 며칠에 걸쳐 따라온다. 하루 이틀 숫자로 판단하면 팔로워가 많이 본 게시물이 잘된 게시물로 보인다.

반대로 한 달 뒤 숫자는 오래 노출된 만큼 유리하다. 지난주 게시물과 지난달 게시물을 오늘 숫자로 비교하면 오래된 쪽이 과대평가된다. 게시 시점이 다른 게시물끼리는 같은 시점의 숫자로만 비교가 되어서 7일로 고정한다.

## 절대값 대신 무엇과 비교하나?

내 계정 최근 게시물의 7일 시점 평균이 기준이다. 같은 형식끼리 비교하고, 캐러셀은 캐러셀과 릴스는 릴스와 놓는다. 최근 게시물 10개에서 20개면 평균이 잡힌다.

절대값이 큰데 계정 안에서는 평범한 경우가 흔하다. 2026-09-01에 공개 수치로 확인한 예로, 서울시의 [퇴근 후 서울광장 운동](https://www.instagram.com/seoul_official/p/Dcs4ENbiF_Q/) 게시물은 좋아요와 댓글을 더한 값이 2,011이다. 같은 계정 최근 캐러셀 20개의 중앙값은 666이라 3배지만, 상위 10% 문턱인 2,415에는 못 미친다.

이 예는 공개 수치라 도달과 저장은 보이지 않는다. 내 계정에서는 같은 비교를 인사이트의 도달과 저장으로 한다.

작은 계정은 반대다. 도달 800이 평균의 두 배면 그 게시물은 잘된 것이다. 남의 계정 숫자와 나란히 놓을 이유가 없다.

## 도달 1,000당 저장·공유는 어떻게 계산하나?

저장과 공유를 더해 도달로 나누고 1,000을 곱한다. 도달 4,000에 저장 32, 공유 16이면 1,000당 12건이다. 이 비율을 게시물마다 적어 두면 도달 크기가 달라도 비교된다.

도달은 늘었는데 비율이 떨어지면 첫 장이 넘김만 만들고 안쪽이 약속을 지키지 못한 것이다. 인스타그램이 보는 신호가 도달 대비 비율이라서 이런 게시물은 다음 추천이 줄어든다.

## 숫자가 평균과 다르면 무엇을 바꾸나?

| 숫자 | 뜻 | 평균보다 높을 때 | 평균보다 낮을 때 |
|---|---|---|---|
| 도달 | 팔로워 밖으로 나갔나 | 같은 첫 장 훅을 다음 소재에 한 번 더 쓴다 | 첫 장 문장을 바꾸고 나머지는 그대로 둔다 |
| 저장 | 다시 볼 가치가 있나 | 목록이나 유형으로 나누는 전개를 늘려 본다 | 마지막 장에 다시 볼 이유를 넣는다 |
| 공유 | 보낼 사람이 떠올랐나 | 받는 사람을 지정하는 CTA를 유지한다 | 유형이나 관계로 나누는 전개를 시도한다 |
| 프로필 방문 | 누가 말하는지 궁금했나 | 프로필 첫 줄을 게시물 관점과 맞춘다 | 첫 장에 브랜드의 관점을 드러낸다 |

한 번에 한 자리만 바꾼다. 첫 장과 마지막 장을 같이 바꾸면 무엇이 효과를 냈는지 알 수 없다.

## 숫자는 다음 템플릿을 고르는 재료다

템플릿이란 터진 콘텐츠에서 문장·인물·디자인을 걷어내고 남는 훅·전개·CTA의 순서와, 그 순서가 반응을 만든 이유다. 네 숫자는 그 순서의 어느 자리가 작동했는지 알려 준다. 도달은 훅, 저장과 공유는 전개와 CTA, 프로필 방문은 브랜드 관점이 드러났는지에 대응한다.

게시물마다 어떤 템플릿을 썼는지 템플릿 카드에 적고, 7일 뒤 네 숫자를 평균 대비로 옆에 적는다. 그러면 다음 레퍼런스를 고를 때 어느 자리가 약했는지가 보이고, 그 자리를 채울 브랜드에서 확인된 항목이 무엇인지도 보인다. 잘된 게시물을 고르는 기준은 [벤치마킹 글](/guide/benchmark-without-copying)에 있다.

[이 순서를 내 브랜드에 적용](/readymade?utm_source=guide&utm_medium=cta&utm_campaign=read-instagram-insights-7-days)

## 자주 묻는 질문

**인스타 인사이트는 어떻게 보나?**

프로페셔널 계정으로 바꾼 뒤 게시물 아래 인사이트 보기를 누르면 그 게시물의 숫자가 나온다. 계정 전체 숫자는 프로필의 프로페셔널 대시보드에서 본다. 개인 계정에는 인사이트 버튼이 없다.

**인스타 저장 수는 어디서 확인하나?**

게시물 인사이트 화면에 저장이 따로 표시된다. 저장 수 자체보다 도달 대비 비율로 읽어야 게시물끼리 비교된다. 도달 1,000당 저장 몇 건인지를 적어 두면 다음 게시물과 바로 비교된다.

**왜 게시 후 7일에 보나?**

게시 직후 숫자는 팔로워 반응만 담긴다. 탐색 탭과 추천으로 새 사람에게 닿는 도달은 며칠에 걸쳐 쌓인다. 게시 시점이 다른 게시물끼리는 같은 시점의 숫자로만 비교할 수 있어서 7일로 고정한다.

**도달이 얼마면 잘된 것인가?**

절대값으로는 판단하지 않는다. 내 계정 최근 게시물의 7일 시점 평균과 비교해 위인지 아래인지 본다. 팔로워가 많은 계정은 평범한 게시물도 도달이 커 보이고, 작은 계정은 잘된 게시물도 작아 보인다.

**조회와 도달은 무엇이 다른가?**

조회는 게시물이 보인 횟수라서 같은 사람이 여러 번 봐도 늘어난다. 도달은 게시물을 본 계정 수라서 한 사람은 한 번만 센다. 2025년 4월부터 노출이 조회로 바뀌었고 도달은 그대로 남았다.