애니메이션 비디오 광고은(는) 무엇을 하나요?

제품 비디오의 각 샷을 실제 제품 자료(스크린샷, 비디오 프레임, 내보낸 데이터, 실제 숫자)를 애니메이션으로 보여주는 작은 HTML 페이지로 구축하고, 각 페이지를 깨끗한 MP4로 녹화한 다음, 사용자에게 클립을 어떻게 자르고 무엇을 말해야 하는지 정확히 알려주는 스크립트 문서를 제공합니다. 사용자는 자신의 편집기(Camtasia, Premiere, CapCut...)에서 클립을 이어붙이고 음성 해설을 녹음합니다.

실제 앱을 화면 녹화하는 것보다 이 방식이 더 나은 이유: 모든 샷이 비디오에 맞게 프레임, 페이스, 줌이 조정됩니다. 깜빡임, 로딩, 개인 데이터 노출이 없으며, 텍스트가 모바일에서 충분히 큽니다. 변경 사항("저 줄 더 짧게", "줌 더 느리게")은 다시 촬영하지 않고 편집과 재녹화로 해결됩니다. 픽셀과 숫자가 제품 자체의 것이기 때문에 여전히 정직해 보입니다.

워크플로우

스토리 합의 (한 메시지로, 바로 진행).
제품에서 실제 자료 수집.
assets/에서 각 샷당 하나의 페이지 구축.
스크린샷으로 페이지 확인, 수정, 반복.
scripts/record.cjs로 클립 녹화, 콘택트 시트로 검증.
스크립트 문서 작성 (references/script-doc.md).
오디오 및 러프컷: 음악(ElevenLabs, 생성됨, 또는 사용자 소유; references/music.md), 선택적 ElevenLabs 음성 해설(references/voiceover.md); scripts/roughcut.py로 미리보기.
클립, 문서 및 미리보기 전송, 샷별로 피드백 반영.

모든 것을 사용자가 소유하는 하나의 폴더에 넣습니다(예: video/ 또는 video-scripts/):

<name>-anim/     페이지(각 샷당 하나의 .html), base.css, 로고, frames/ 하위 폴더
<name>-clips/    녹화된 MP4: 01-hook-anim.mp4, 02-setup-anim.mp4 ... + README.md
<name>-music/    배경 WAV, 러프컷 미리보기, cuts.json
<Name>.md        스크립트 문서

1. 스토리

길이(기본 30초; 동일 클립에서 45~60초 컷 제공)와 클릭 유도 문구(CTA)를 선택합니다.

광고가 게재될 위치에 따라 프레임 모양을 선택하고, 해당 크기로 페이지를 구축합니다(나중에 16:9를 자르지 않음; 자르면 텍스트가 손실되고 사용자가 모든 샷의 프레임을 다시 조정해야 함):

게재 위치	크기
Instagram Reels/Stories, TikTok, YouTube Shorts, Facebook Reels	1080×1920 (9:16)
Instagram/Facebook 피드	1080×1350 (4:5)
LinkedIn 또는 X 피드	1080×1080 (1:1) 또는 1080×1350
YouTube, 웹사이트, 랜딩 페이지, 프레젠테이션, 미지정	1920×1080 (16:9)

여러 게재 위치: 주요 위치에 맞게 구축하고 문서에 나머지 위치에 맞게 프레임을 다시 조정하는 방법을 명시합니다. 세로형의 경우, 플랫폼 자체 UI가 그려지는 상단 약 250px과 하단 약 350px 밖에 텍스트를 배치합니다. 그런 다음 6~9개의 샷을 개요로 작성합니다(각 샷 하나의 아이디어, 다음 아크를 따름):

훅 (약 3초): 시청자의 언어로 된 문제. 질문이 효과적입니다("30일 후에도 미지급 인보이스? 이제 어쩌죠?").
설정 (약 4초): 시작하는 데 얼마나 적게 필요한지.
핵심 기능 (2~~3개 샷, 각 4~~5초): 제품이 제 역할을 수행하며 결과가 화면에 나타납니다.
증거 (약 3초): 실제 숫자. 크고, 간단하며, 사실입니다.
워크플로우에 적합 (약 3초): 내보내기, 통합, 공유.
엔드 카드 (약 3초): 로고, 한 줄 약속, CTA 버튼, URL.

긍정적인 점을 부각하세요. 제품이 잘하는 것과 얼마나 쉬운지 보여주세요. 제품의 실패 사례나 해결 방법을 중심으로 샷을 구축하지 마십시오(심지어 교묘한 것도). 도구가 잘못되었을 때 대처하는 방법을 설명하는 광고는 "자주 잘못된다"로 읽힙니다. 사용자의 빠르고 자신 있는 수정("잘못된 카테고리? 클릭하고, 올바른 것을 선택하고, 완료")은 괜찮지만, 에지 케이스 메커니즘에 관한 샷은 좋지 않습니다.

사용자가 말하지 않은 경우, 개요와 가정을 하나의 짧은 메시지로 진술하고 구축을 시작합니다. 추상적으로 논쟁하는 것보다 녹화된 샷을 변경하는 것이 더 저렴합니다.

동일한 메시지에서 오디오에 대해 물어보고(이미 말하지 않은 경우), 사용자가 결정하는 동안 계속 구축합니다. 오디오는 7단계까지 필요하지 않습니다. 질문 도구가 있으면 사용합니다. 먼저 ElevenLabs MCP가 연결되어 있는지 확인합니다(creative_generate_speech, creative_list_voices, music 노드 유형과 같은 도구). 연결되어 있으면 먼저 사용합니다.

음악:

ElevenLabs Music (연결 시 권장): 사용자의 ElevenLabs 계정에서 컷에 맞춰진 악기 배경음을 생성합니다. 연결되지 않은 경우: 프롬프트를 작성하고 사용자가 elevenlabs.io/music에서 생성하여 파일을 다시 보냅니다.
여기서 생성: make_bed.py로 만든 조용하고 라이선스가 필요 없는 배경음, 무료이며 즉시 사용 가능.
자체 트랙 사용: 사용자가 이미 가지고 있거나 라이선스를 취득한 트랙.

음성 해설:

ElevenLabs 음성 (연결 시): 음성을 선택하고 읽기를 생성한 다음 각 라인을 큐에 배치합니다. 사용자는 나중에 자신의 음성을 녹음할 수 있습니다.
직접 녹음: 문서의 깔끔한 읽기를 기반으로 사용자가 직접 녹음(ElevenLabs가 없는 경우 기본값).

ElevenLabs는 사용자 계정의 크레딧을 사용합니다. 먼저 가격을 산정하고(estimate_only) 질문에 비용을 명시합니다. 사용자가 음악을 요청했지만 어떤 종류인지 말하지 않았거나, 7단계에 도달했지만 답변이 없는 경우 무료 배경음을 생성하여 미리보기에 사운드가 있도록 하고, ElevenLabs 프롬프트를 이미 작성한 상태로 최종 메시지에서 질문을 반복합니다.

2. 실제 자료

제품의 저장소, 데이터 폴더, 내보내기, 데이터베이스, 테스트 픽스처 및 녹화에서 찾습니다. 각 샷에 대해 다음을 수집합니다:

사진: 실제 UI의 스크린샷, 또는 실제 비디오에서 추출한 프레임 (ffmpeg -ss T -i in.mp4 -frames:v N frames/f%03d.jpg). 여러 프레임이 움직임을 만듭니다. 웹 UI(로컬 HTML 또는 URL)를 스크린샷하려면 scripts/grab.cjs를 사용합니다. 전체 보기와 3배 확대된 명명된 요소, 각 요소의 상자를 출력하여 프레임을 잡습니다: node <skill>/scripts/grab.cjs app.html <pages>/shots --size 1280x800 goal=.goal logo="header .logo". 로그인 뒤에 있는 경우, 로그인하지 말고 사용자에게 스크린샷을 요청합니다.
숫자: 제품 출력의 실제 값(시간, 개수, 행). 각 값의 출처를 기록합니다. 문서의 "숫자의 출처" 부분에 들어갑니다.
위치: 강조할 항목의 좌표(가능하면 앱 자체 출력의 픽셀 단위(예: 감지 상자), 또는 이미지를 보고 측정).

갭은 정상입니다. 투명하게 처리합니다:

로고 파일 없음: 실제 UI 스크린샷(헤더, 앱 아이콘)에서 잘라내거나 제품 자체의 CSS/SVG에서 정확히 재구축합니다. 문서에 명시하고 실제 파일을 요청합니다.
필요한 화면이 현재 보유한 자료에 없음(예: 설정 양식): 제품 자체 스타일로 그리고, 문서에 스테이징된 샷으로 표시하여 사용자가 실제 화면으로 교체할 수 있도록 합니다.

통계를 절대 조작하지 마십시오. 순간을 연출해야 하는 경우(극화된 훅), 문서에 표시합니다. 제품 자체의 용어 및 주장 규칙을 존중합니다(예: 숫자를 "보장" 또는 "공식"이라고 절대 부르지 말아야 하는 제품). 복사본을 작성하기 전에 프로젝트 문서/메모리에서 이러한 규칙을 확인하십시오.

3. 페이지 구축

assets/base.css, assets/shot.js, assets/shot-template.html 및 assets/end-card.html을 페이지 폴더에 복사합니다. shot.js는 모든 페이지가 사용하는 헬퍼(show/hide, cursorTo, click, typeText, countUp, frameTo, preload)와 자동 재생을 보유합니다. 페이지 자체 스크립트보다 먼저 로드하고 헬퍼를 페이지에 복사하지 마십시오. 각 페이지:

선택한 크기의 고정 스테이지입니다. base.css에서 --w/--h를 설정합니다(예: 1080px/1920px). 템플릿은 16:9로 배치되어 있으므로 다른 모양에 맞게 위치를 다시 배치합니다(9:16의 경우 패널을 세로로 쌓음, 세로형에서는 제목이 템플릿의 96px가 아닌 약 250px 아래에서 시작). 텍스트 크기 ≥ 26px, 제목 80~100px. 휴대폰에서 시청됩니다.
전체 타임라인을 보유하는 하나의 최상위 async function start()를 가집니다(비트 사이에 await sleep(ms) 사용). shot.js가 이를 노출합니다. URL에 #manual이 있으면 대기하고, 정상적으로 열리면 폰트와 이미지가 준비되면 자동 재생되므로 사용자가 더블클릭하여 미리 볼 수 있습니다.
나중에 교체할 모든 이미지를 미리 로드합니다(최상위 수준에서 preload(frames)). 카메라에 갑자기 나타나는 것을 방지합니다. 레코더와 체커가 이를 기다립니다.
완료된 상태를 유지하며 종료(결과 표시, 모든 텍스트 켜짐)하여 편집자가 끝 근처에서 자르고 마지막 프레임을 유지할 수 있습니다.
소스 이미지 크기에 맞춰 <svg viewBox="0 0 W H" preserveAspectRatio="xMidYMid slice">에 표시를 그립니다. 앱 좌표를 변환 없이 그대로 사용할 수 있고, 스테이지 모양이 그림을 자를 때 정렬이 유지됩니다.
제품처럼 보입니다. base.css의 토큰(--accent, --hi, --ok, --ink, 폰트)을 제품 자체 색상과 폰트로 교체합니다. 밝은 테마의 제품의 경우 텍스트 색상, .shade, .panel 및 .bg도 밝은 버전으로 변경합니다. 밝은 앱 주변에 어두운 광고는 다른 사람의 제품처럼 보입니다.
UI 스크린샷을 .world 안에 기본 픽셀 크기로 표시합니다(.world { transform-origin:0 0 } 설정 및 <img>를 자연 CSS 크기로 설정). frameTo(x, y, scale)로 프레임을 잡습니다. 이 함수는 스크린샷 점 (x, y)를 스테이지 중앙에 배치합니다. grab.cjs의 상자가 점을 제공합니다. object-fit:cover를 사용하지 마십시오. 스크린샷의 모양이 스테이지와 일치하지 않을 때 예측할 수 없게 자릅니다.
제품 텍스트를 읽을 수 있게 유지합니다. 스테이지에서 약 22px 미만으로 끝나는 UI 텍스트(확대되지 않은 스크린샷의 14px 레이블)는 휴대폰에서 읽을 수 없습니다. 확대하거나, 해당 부분(카드, 알림)을 제품 자체 스타일로 정확한 텍스트로 읽기 쉬운 크기로 재구축하고, 문서에 재구축된 부분을 명시합니다.

효과가 있었던 샷 패턴:

패턴	방법
작동 중인 제품	33~40ms마다 `<img>`에서 프레임 시퀀스 교체, 프레임별로 상자/레이블 그리기, 결과 행이 발생하는 순간 사이드 패널에 나타남.
세부 정보로 줌	`.world`에 세부 정보에 대해 `transform-origin` 설정, `.zoom` 추가(배율 1.5~1.6, 1.2초 ease).
사용자가 단계 수행	`await cursorTo(button)` 후 `await click(button)`: 커서가 요소의 측정된 중앙으로 이동, 물결 효과, 버튼 누름, 결과 표시. `typeText(el, text)`로 입력(문자당 55ms, 입력 문자열을 약 1초 미만으로 유지).
프레임 단계별 이동	리듬에 맞춰 이전/다음 버튼 누름, 프레임 번호 표시, 결정적인 프레임 표시.
두 보기 일치	두 그림 나란히, 동일한 순간이 둘 다 표시됨, 일치를 나타내는 배지.
증거	테이블 행이 슬라이드 인(120ms 간격), 그 다음 2~3개의 통계 카드, `countUp(el, n)`으로 히어로 숫자 카운트 업(약 700ms).
데이터 출력	결과 목록과 파일/통합 패널이 동일한 비트에 채워지고 "실시간" 표시기 표시.
엔드 카드	라인 스위프, 로고, 태그라인, CTA 버튼 팝, URL.

수동으로 입력한 좌표가 아닌 요소에 커서를 지정합니다. cursorTo(el)은 커서가 이동할 때 요소를 측정하므로, 줌, 레이아웃 변경 또는 다른 스테이지 모양이 빈 공간을 클릭하게 만들 수 없습니다. click(el)은 팁이 el 위에 없으면 오류를 기록하고 check.cjs는 실패합니다. 요소가 아닌 점에 대해서만 cursorTo({x, y})를 사용합니다. 각 클릭 순간에 체크 스크린샷을 찍습니다. 잘못된 클릭은 시청자가 가장 먼저 알아차리는 것입니다.

shot.js의 show(el) / hide(el)로 표시 및 숨깁니다. .on은 !important를 사용하므로, 요소를 숨기거나 이동하기 위해 추가된 다른 클래스는 자동으로 적용되지 않습니다. 항상 먼저 .on을 제거합니다(hide가 하는 일). 사용자 정의 종료의 경우 el.classList.replace('on', 'my-exit')를 사용합니다.

타임라인을 간결하게 유지합니다. 비트 사이 0.3~~0.7초, 제목 읽기에 약 1초. 각 클립은 일반적으로 4~~8초이며, 단계별 샷은 편집자가 자르고 속도를 조정할 수 있으므로 15초까지 실행될 수 있습니다.

표시되어서는 안 되는 소스에 박힌 것(카메라 날짜/시간, 상태 표시줄, 개인 이름)은 .world를 반대쪽 가장자리에서 약간 확대하여 자릅니다(예: 하단에서 scale(1.08)). backdrop-filter에 의존하여 숨기지 마십시오. 화면 캐스트에서 렌더링되지 않습니다.

4. 녹화 전 확인

node <skill>/scripts/check.cjs <pages-dir> <chk-dir> hook:400:1500:3200 live:800:3000:6000

start() 후 해당 ms에서 스크린샷을 찍고(의도적으로 start()를 기다리지 않음, 기다리면 종료 상태만 표시됨) 페이지 오류를 출력합니다. 스크린샷을 읽습니다. 특히 다음을 확인합니다:

표시가 올바른 것 위에 있는지(올바른 사람의 상자, 선행 모서리의 선, 뒤처진 발이나 구경꾼이 아님; 감지기 추적은 시퀀스 중간에 다른 사람으로 전환될 수 있으므로 상자를 연결하거나 수동으로 수정);
가장자리에서 잘리는 것이 없고, 텍스트가 주제와 겹치지 않는지;
화면의 모든 숫자가 소스와 일치하는지.

5. 녹화

node <skill>/scripts/record.cjs <pages-dir> <clips-dir> hook=01-hook-anim=4200,setup=02-setup-anim=5000

page=outName=ms: ms 동안 녹화(애니메이션 길이 + 약 1초 종료 유지). 각 클립은 페이지 크기(--w×--h), 30fps, H.264 CRF 16, 무음으로 출력됩니다. check.cjs 및 roughcut.py는 동일한 크기를 따르므로 세로나 정사각형에 대해 스크립트 편집이 필요하지 않습니다. Chrome(또는 Playwright의 Chromium)과 Playwright가 필요합니다(npm i -g playwright를 한 번 실행, pw.cjs가 찾을 수 없는 경우). ffmpeg도 필요합니다.

클립은 요청된 ms에 약 0.3초를 더하여 실행됩니다. 첫 번째 프레임은 start()의 첫 번째 비트 이전 페이지이므로 In 포인트는 일반적으로 0.1~0.3초에서 시작합니다. 콘택트 시트에서 읽으십시오.

클립을 시청하지 않고 확인:

bash <skill>/scripts/sheet.sh <clips-dir>/03-live-anim.mp4 sheet.jpg 2

콘택트 시트를 읽습니다. 각 비트의 타이밍, 짜부라지거나 잘린 부분 없음, 마지막 프레임 완료. 각 클립의 유용한 부분의 in/out 초를 기록합니다. 컷 테이블에 사용됩니다.

클립 이름을 스토리 순서대로 NN-name-anim.mp4로 지정하고(대안은 04b, 04c), 클립 폴더에 짧은 README.md를 작성하여 나열합니다.

6. 스크립트 문서

references/script-doc.md를 따릅니다. 컷 테이블(시간, 클립, in-out, 속도, 보이는 내용, VO 시작, 대사)이 핵심입니다. 나머지는 사용자가 당신 없이 완료하는 데 필요한 내용입니다. 음성 해설: 초당 약 2.5단어, 대화체, 샷당 한 줄, CTA는 큰 소리로 말합니다("무료로 체험해보세요. 링크를 클릭하거나 example.com을 방문하세요.").

대부분의 소셜 비디오는 음소거로 시청됩니다(Reels 및 TikTok 포함). 항상 컷 테이블에 "화면" 열을 추가하고 화면 텍스트가 자체적으로 스토리를 전달하도록 만듭니다. 음성 해설이 있는 경우(Reels, TikTok, Shorts), 편집기 단계에서 세로형 안전 영역에 배치되고 제목이 이미 있는 샷에 드롭되는 화면 내 자막도 추가합니다.

애니메이션 비디오 광고