Duchamp
Guide
반응이 좋았던 콘텐츠의 구성 순서를 읽고 내 브랜드에 적용하는 법. 캐러셀·훅·전개를 다루는 짧은 글.
한국어
클로드 코드로 9:16 모션그래픽 영상 렌더하기 — HyperFrames 레시피, AI 영상 모델 없이
코딩 에이전트가 레시피 하나로 1080×1920 세로 모션 영상을 만드는 법. React 컴포지션을 HyperFrames(Apache 2.0)가 헤드리스 Chrome 에서 렌더하고 FFmpeg 가 MP4 로 묶는다.
클로드 코드에 랜딩페이지 레퍼런스 주기 — MCP 로 쓰는 UI 레퍼런스 비교
바이브코딩으로 만든 랜딩페이지가 왜 레퍼런스가 필요한지, Duchamp UI·21st.dev·Mobbin·shadcn/ui·Magic UI 가 클로드 코드·Codex 사용자에게 무엇을 주는지 비교했다.
코딩 에이전트로 벡터 로고 키트 만들기 — 이미지 모델 없이 SVG·파비콘·OG 까지
레시피 하나로 실제 폰트 윤곽선을 코드로 그려 로고 키트를 만드는 법. 마크·워드마크·락업 2종·어두운판·단색판·파비콘·앱 아이콘·OG·브랜드 시트가 한 벌로 나온다.
카드뉴스 예시 30개, 훅·전개·CTA 공식으로 분해
카드뉴스 예시는 계정 평소 반응보다 몇 배 잘된 실제 게시물에서 고른다. 공개 카드뉴스 30개를 숫자 훅, 질문 훅, 통념 반전, 오늘성, 스토리 다섯 유형으로 나눠 첫 장이 하는 일과 전개, 닫는 행동, 가져오지 않을 것을 표로 정리했다.
인스타 캡션 아이디어 50개, 카드뉴스 캡션을 목적별로
인스타 캡션 아이디어는 목적부터 정하면 나온다. 저장, 댓글, 프로필 방문, 공유, DM 다섯 목적과 카페부터 SaaS까지 업종 10개를 곱한 첫 줄 아이디어 50개를 가상 브랜드 예시와 반응이 나오는 이유로 정리했다.
인스타 벤치마킹 하는법, 베끼지 않고 공식만 가져오는 5단계
인스타 벤치마킹은 문장과 디자인이 아니라 훅·전개·CTA의 순서를 가져오는 일이다. 레퍼런스 고르기부터 게시 후 7일 비교까지 5단계와 워크시트, 저작권 경계를 정리했다.
미리캔버스 카드뉴스 템플릿 고르기 전에 정할 3가지
미리캔버스·망고보드·캔바의 카드뉴스 템플릿은 어떻게 만들지를 풀어준다. 무엇을 말할지는 템플릿을 열기 전에 정한다. 첫 장 문장, 다음 장을 넘길 이유, 마지막에 시킬 행동 세 가지를 동네 카페 예와 표로 정리했다.
카드뉴스 주제 추천, 업종 10개 × 주제 5개와 어울리는 공식
카드뉴스 주제는 업종 목록이 아니라 브랜드에서 확인된 항목에서 나온다. 카페부터 SaaS까지 업종 10개의 주제 50개를 어떤 항목에서 나왔는지, 어울리는 훅 공식과 목표는 무엇인지 표로 정리했다.
인스타 훅 문구, 저장을 만드는 캐러셀 첫 장 공식 4가지
인스타 저장 많이 받는 캐러셀의 첫 장은 네 가지 공식 중 하나로 시작한다. 구체적 N개, 내 유형 찾기와 오늘성, 궁금증 간극, 통념 반전을 실제 게시물 순서와 실패 변형으로 설명한다.
인스타 알고리즘 2026, 저장·공유가 도달을 만드는 원리
2026년 인스타 알고리즘은 시청 시간, 도달 대비 좋아요, 도달 대비 공유를 가장 크게 본다. Adam Mosseri와 인스타그램 공식 블로그가 밝힌 신호를 출처와 함께 정리하고, 저장·공유·프로필 방문이 왜 도달로 이어지는지 원리로 설명한다.
인스타 캡션 쓰는법, 캐러셀 캡션 3단 공식과 예시 10개
인스타 캡션은 첫 줄, 본문, 마지막 줄 세 단으로 쓴다. 첫 줄은 첫 장과 다른 각도로 멈추게 하고, 본문은 카드에 못 담은 근거를, 마지막 줄은 행동 하나를 맡는다. 잘못된 예와 고친 예, 가상 브랜드 예시 10개를 정리했다.
인스타 카드뉴스 사이즈, 캐러셀 비율·장수·첫 장 규칙
인스타 카드뉴스(캐러셀) 사이즈는 4:5, 1080×1350픽셀이 기본이다. 지원 비율 4가지, 최대 20장, 첫 장이 크롭을 정하는 규칙, 프로필 그리드 미리보기까지 인스타그램 공식 사양 기준으로 정리했다.
인스타 인사이트 보는법, 게시 후 7일에 볼 숫자 4개
인스타 인사이트는 프로페셔널 계정에서 게시물 아래 인사이트 보기로 연다. 게시 후 7일에 도달, 저장, 공유, 프로필 방문 네 숫자를 내 계정 최근 게시물 평균과 비교해 읽는 법과 다음 실험을 표로 정리했다.
In English
Guides for coding-agent users: landing page references over MCP, motion video rendered with code, logo kits without an image model.
Landing page and hero section references your coding agent can use over MCP
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.
Render a 9:16 motion graphic video with Claude Code and HyperFrames, no AI video model
How a coding agent renders a 1080×1920 vertical motion video from a recipe: React composition, HyperFrames (Apache 2.0), headless Chrome, FFmpeg.
A vector logo kit from a coding agent: SVG, PNG, favicon and OG image without an image model
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.