Bang Motion — 웹 모션 그래픽 (PPT 아님)은(는) 무엇을 하나요?

v1.19.0 · by Bang Tutorial · MIT. 변경 내역은 CHANGELOG.md에; 설치 방법은 README.md에 있습니다.

이 스킬은 모든 AI 코딩 에이전트를 위한 것입니다 (개방형 Agent Skills 형식). 여기에는 실제 비디오처럼 움직이는 모션 그래픽을 위한 법칙과 레시피가 담겨 있으며, 프레젠테이션 스타일이 아닙니다 — 코드를 작성하기 전에 반드시 숙지하세요.

사전 요구사항 — 브라우저만 있으면 됩니다

전달 파일(index.html)은 최신 브라우저와 CDN(GSAP, 폰트) 연결만 있으면 됩니다. Python과 Node는 선택 사항이며, 작업 도구로만 사용됩니다: scripts/serve.py (로컬 모듈 사용 시에만 필요한 노캐시 서버), puppeteer (자동 스냅샷/검증, scripts/export-frames.mjs → MP4). 사용자에게 둘 다 없다면: (1) 단일 파일로 빌드하여 더블 클릭으로 열기; (2) ?debug=1 (스크럽 패널) 및 주요 초 단위 수동 스크린샷을 통한 시각적 검증; (3) 화면 녹화(OBS/브라우저 탭 녹화)를 통한 MP4 생성 — 화면 녹화는 프레임 드롭이 발생할 수 있으며, 프레임 단위 렌더링에는 Node가 필요함을 설명하세요. 절대 npm install이 필요한 전달 파일을 만들지 마십시오.

ffmpeg도 선택 사항입니다. 먼저 확인(ffmpeg -version)하세요; 없을 경우:

요구사항	ffmpeg 사용 시	ffmpeg 미사용 시
VO 싱크 (문장/문단 경계)	`silencedetect`	`scripts/vo-pauses.html` — 브라우저에서 열고, 오디오 선택 후 `SEG`/`PARA` 복사; 결과는 동일 (Web Audio, 설치 불필요)
오디오 길이/포맷	`ffprobe`	vo-pauses.html의 `DUR` 값; 브라우저는 wav/mp3/m4a/ogg를 바로 재생
MP4 내보내기	export-frames.mjs의 PNG 병합	MP4 없음 — 단일 명령 설치 제안(`winget install Gyan.FFmpeg` / `brew install ffmpeg`) 또는 화면 녹화
참조 영상 학습 (프레임 추출)	`fps=` + `tile=`	사용자에게 주요 초의 스크린샷 요청, 또는 브라우저에서 영상을 열고 특정 초에 캡처

ffmpeg가 없어도 설명 영상 워크플로우는 VO 싱크까지 완전히 가능합니다; MP4만 설치가 필요할 뿐입니다.

플레이어 — 없음, 자동 재생, 반복

기본 전달 파일: 화면에 어떤 패널/플레이어도 없이, 열자마자 바로 재생되고, 끝나면 처음부터 반복됩니다(onComplete → play(0); 소리가 있으면 오디오도 함께 반복). 숨겨진 컨트롤: R 키 다시 재생, 스페이스 바 일시 정지. 스크럽 패널/타임코드는 ?debug=1(리뷰 도구)에서만 나타나며, ?clean=1은 내보내기를 위해 자동 재생을 중단합니다. 소리가 있나요? 바로 play()를 시도하세요; 브라우저가 차단하면 프레임 0에서 멈추고, 첫 번째 클릭 시 재생을 시작합니다 — "터치하여 시작" 텍스트는 없습니다. 이것은 두 스타터에 모두 이미 구현되어 있습니다.

구조적 금지 사항 — 기계적으로 검사 가능한 PPT 테스트

다른 모델(그리고 지친 당신)은 아래 법칙을 읽었음에도 이 패턴에 빠질 수 있습니다. 제출 전에, 감정이 아닌 코드를 확인하세요:

grep -c "class=\"scene\"\|<section" index.html — 3개 이상의 장면이 autoAlpha/opacity로 켜고 끄는 <section> 형태라면 → 그것은 슬라이드 데크입니다. 장면은 월드/카메라가 움직이면서 전환되어야 합니다 (카메라 이동, 다른 각도로 휙, 푸시스루, 배경 변경). 섹션이 페이드 아웃되기 때문이 아닙니다. 합법적인 예외: 무대 카툰 (references/kartun-panggung.md)은 무대 간 96px 컷/슬라이드를 사용합니다 — 허용됩니다. 각 무대가 정지 이미지가 페이드되는 것이 아니라 완전히 살아있기 때문입니다(10개 이상의 액션 오브젝트).
지속되는 시각적 연결고리가 있어야 합니다: 하나의 주제(연속적인 액션) 또는 카메라가 따라가는 하나의 콜라주/종이/흰색 월드 (카툰, 사진, 카탈로그, 스케치). 전체 화면 사진이 공통 월드 없이 번갈아 나타나는 경우 → PPT. 장면당 하나의 이미지 + 하나의 문장, 장면마다 바뀌는 경우 → 카메라가 움직여도 여전히 슬라이드쇼입니다: 각 장면은 구절마다 점진적으로 등장하는 3-5개의 요소가 있어야 합니다 (explainer.md "한 장면 = 3-5개 요소").
장면당 텍스트 노드 계산: 아이라이너/키커 + 제목 + 본문/크레딧 = 3단계 → PPT. 최대 2개: 하나의 큰 숫자/문장 + 하나의 월드 레이블. 문서/스탬프/날짜 블록에 3줄 이하의 짧은 텍스트는 오브젝트로 간주되며, 텍스트 단계가 아닙니다.
켄 버스 효과(사진에 scale 1.0→1.05)가 유일한 움직임인 경우 → PPT. 매 초의 움직임은 스타일 브리핑에서 선택한 techniques.md §7c 메뉴의 배경 모션 언어에서 비롯되어야 합니다 (질감이 있는 배경에서 숨쉬는 카메라, 이동하는 그라데이션, 떠다니는 블롭, 살아있는 그레인, 세그먼트별 광선 스윕, 천천히 회전하는 큰 형태, 상승하는 파티클, 숨쉬는 그리드, 이동하는 유령 텍스트, 켄 버스 + 시차…). 측면으로 교차하는 막대/선/조각 ("레인", "범위", "스트릭", 수평 파티클 비)은 이미 이름이 다른 두 개의 연속된 프로젝트에서 사용되었습니다 — 그것은 기본값이 아닙니다; 테마가 실제로 속도/흐름과 관련된 경우에만 사용하고, 두 프로젝트 연속으로 사용하지 마십시오.
모든 컷에서 페이드 + 스케일 범프 + 라이트 릭만 있는 전환 → PPT 템플릿. 다른 각도로 휙, 악기로 컷(지도/속도계/프로필), 푸시스루 방식을 사용하세요.
설명 영상은 해당 스타일의 스타터로 시작해야 합니다: starter-explainer-kartun. -jurnalisme, -katalog, -sketsa (콜라주 모드: 카메라가 정적 자산을 따라 이동), starter-explainer (연속 액션: 월드가 흐름), 또는 starter-explainer-panggung (무대 카툰: 장면당 하나의 무대, 조인트 리깅, 카메라는 무대 내부에서만). 콜라주는 하나의 리그를 사용하고, 무대는 다른 리그를 사용합니다. assets/starter-opener.html (텍스트 오프너)에서 시작하지 말고, 처음부터 시작하지 마십시오.
미니어처는 슬라이드입니다. 카메라 줌이 1.08 미만이어서 집이 엄지손가락 만하고 빈 땅이 화면의 절반을 채우는 경우 → 모든 것이 움직여도 PPT입니다. 월드는 탐험할 하나의 큰 지도가 아니라 프레임 크기의 무대로 분할됩니다. (kartun-panggung.md 법칙 1).
템플릿 프레임워크 (오프너/프로모션). 런다운과 코드를 확인하세요: 첫 번째 장면이 커졌다가 왼쪽으로 사라지는 텍스트; 정렬된 세 개의 타일/기능 카드; 입력/검색창에 타이핑; 훅 → 기능 → 기능 → 약속 → 로고 → CTA 순서. 개념적 요구 없이 이러한 요소 중 두 개 이상이면 → 템플릿입니다. references/opener-konsep.md에서 프레임워크를 다시 선택하세요.

한 가지라도 실패하면 → 사용자에게 보여주기 전에 재구성하세요.

이 스킬이 다루는 작업 유형

이 스킬은 웹 모션 그래픽을 일반적으로 다룹니다. 설명 영상은 그중 하나일 뿐입니다. 구조가 다르기 때문에 별도의 문서가 있을 뿐, 주요 작업 유형이 아닙니다.

스타터는 범주에 따라 이름이 지정됩니다: starter-opener.html (오프너, 프로모션, 범퍼, 인트로, 키네틱 타이포그래피); starter-explainer-*.html (설명 영상), 모드/스타일 접미사 포함 (-kartun, -jurnalisme, -katalog, -sketsa = 콜라주; 접미사 없음 = 연속 액션; -panggung = 무대 카툰). 무대 카툰은 설명 영상 모드(스타일 6)이며, 자체 범주가 아닙니다: 목표는 여전히 VO로 설명하는 것이며, 제작 방식만 다릅니다.

유형	일반적인 길이	특징	레시피
오프너 / 제품 프로모션	25–40초	메뉴의 하나의 콘셉트(프레임워크는 제품에서 탄생, 고정 순서 아님), 하나의 특별한 순간, 브랜드 마무리	`references/opener-konsep.md` + 아래 워크플로우 + `references/techniques.md`
범퍼 / 아이덴트 / 로고 스팅	3–8초	로고 빌드온, 하나의 시그니처 동작, 시청자가 인지하기 전에 종료	`techniques.md` (로고 빌드온, 라이트 릭)
인트로 / 아웃트로 (채널)	5–12초	채널명 + 에피소드마다 동일한 시그니처 동작	아래 워크플로우
키네틱 타이포그래피 / 가사	15–60초	텍스트가 주제; 단어/글자별 분할; 리듬이 오디오를 따름	`techniques.md` (방향성 블러, 단어별 3D 팬이 포함된 분할)
타이틀 / 로우더 써드 / 세그먼트 범퍼	2–6초	영상 위의 작은 요소, 깔끔하게 등장 및 퇴장, 투명 배경	`techniques.md`
설명 영상	30–90초	출처가 있는 사실, 엔티티 등장, 시점 변경, 다섯 가지 스타일	`references/explainer.md` + 스타일별 스타터

설명 영상 및 캐릭터: 샷 결정 전에 읽으세요

캐릭터가 있는 플랫 교육용 카툰 설명 영상(여섯 번째 스타일, 무대 카툰)의 경우, 또는 슬라이드쇼/미니어처처럼 느껴지는 수정의 경우, references/kartun-panggung.md를 읽으세요: 장면당 하나의 무대, 줌 1.08–1.95, 무대 내에서는 연속, 무대 간에는 96px 컷/슬라이드, 수동 변환을 사용한 조인트 리깅, 캡션 없음, 밝은 플랫 팔레트. 문장, 시각적 비트, 프레이밍, 무대 전환을 구분하세요. After Effects에서 직접 빌드하려면 references/ae-bridge-higgsfield.md를 읽으세요. 이러한 설명 영상별 지침은 아래 오프너 규칙을 명확히 합니다; 폰트 예시, 장면 수, 효과는 보편적인 레시피가 아닙니다.

법칙 #1 — 이것은 비디오지, 슬라이드가 아닙니다

가장 흔한 문제: 모델이 장면을 슬라이드처럼 구성합니다 — 제목 + 부제목 + 본문 + 뱃지 행. 이것은 바로 "PPT"로 읽히며 거부됩니다.

엄격한 규칙:

오프너의 경우: 장면당 하나의 짧은 문장 + 최대 하나의 주요 오브젝트. 키커 없음 ("01 — 기능"), 부제목, 설명 단락, 기능 칩/뱃지, 기술 메타데이터 (패키지 이름, 긴 URL). 사용 중인 제품 UI의 일부인 칩, 버튼, 레이블은 제외됩니다.
새로운 정보 = 새로운 시각적 반응. 설명 영상에서는, 여전히 관련이 있다면 동일한 월드의 상태/액션을 변경하세요; 문장 변경이 반드시 샷 변경을 의미하지는 않습니다.
포인트 목록은 시각적으로 대체되며, 자동으로 세 개의 타일이 되지 않습니다. references/opener-konsep.md의 기능 메뉴에서 방식을 선택하세요 (한 가지 기능 시연, 단어 변경, 오브젝트 변형, 카드 셔플, 그리드 타일…); 두 개의 연속된 오프너는 동일한 방식을 사용하지 마십시오.
장면은 살아있어야 합니다. 오브젝트가 액션을 전달하는 동안 카메라는 정지해도 됩니다. 무언가를 따르거나 드러내기 위해 카메라를 움직이세요; 정적 배경 위에 텍스트 페이드/슬라이드에 의존하거나, 모든 세그먼트에서 팬/줌을 반복하지 마십시오.
"줌 인-아웃" = 샷 크기이지, 카메라의 숨쉬기가 아닙니다. 비디오가 정적으로 느껴지거나 사용자가 줌을 요청하면, 이야기를 전달하는 요소에 카메라가 가까이 다가간다음(미디엄 클로즈업 / 클로즈업) 콘텐츠의 비트에 따라 와이드로 물러납니다; 몇 퍼센트의 숨쉬기는 거의 눈에 띄지 않습니다(techniques.md §3b).

장면을 디자인하기 전에 references/anti-ppt.md를 읽으세요 — 실제 위반 사례와 수정 사항 목록이 있습니다.

법칙 #2 — 결정론적이거나 죽거나

시스템 시간을 읽는 코드는 단 한 줄도 없습니다. 모든 시각 요소는 tl.time()(GSAP 타임라인 시간)의 순수 함수입니다: 스펙트럼, 실행 카운터, 파티클, 카메라 흔들림(고주파 사인파, Math.random() 아님), "흐르는" 오브젝트 위치(프레임당 속도 누적이 아닌 거리 트윈). 결과: After Effects 타임라인처럼 정확한 스크러빙이 가능하며, 프레임별 MP4 렌더링은 매번 동일한 이미지를 생성합니다.

법칙 #3 — 스타일은 테마에서 탄생하며, 스타터나 참고 자료에서 오지 않습니다

일반적인 실패: 다른 제품의 오프너가 이전 제품의 오프너와 완전히 동일한 스타일로 나오는 경우 — 어둡고, 파란색 악센트, 글로우, 성운, 동일한 폰트 — 모델이 스타터에서 스타일을 가져오기 때문입니다. 애니메이션이 훌륭해도 여전히 실패입니다: 오프너는 제품의 얼굴이며, 두 제품이 같은 얼굴을 가질 수 없습니다.

코드보다 먼저 스타일 브리핑을 작성하세요. 스타터를 건드리기 전에, 다음 여섯 줄을 작성하여 사용자에게 장면 런다운과 함께 보여주세요:
- 테마/제품 + 남기고 싶은 세 가지 느낌 형용사;
- 콘셉트 및 구조적 지문 (오프너/프로모션): references/opener-konsep.md의 세 가지 콘셉트 후보, 제품을 이유로 하나 선택, 콘셉트 · 장면 수 · 각 장면의 주요 오브젝트 · 오프닝 · 클로징;
- 팔레트: 브랜드/테마의 하나의 주요 색상 (로고, 앱 아이콘, 웹사이트, 패키징), 하나의 배경색, 하나의 악센트 — 각 색상의 HEX 코드와 출처를 명시; 브랜드 출처가 아닌 색상은 "파생: 이유"로 표기;
- 해당 느낌에 맞는 개성 있는 디스플레이 폰트 (Poppins/Inter/Roboto/Montserrat/Arial 아님) + 보조 폰트; 예외: 클레임 → 방식 → 결과 콘셉트는 제품 자체 UI 폰트 사용 (references/opener-konsep.md);
- 텍스트 강조: 단어 하이라이트 없음, 또는 한 가지 형태의 하이라이트 (명시) — 단어 하이라이트는 선택 사항이며, 모든 오프너의 기본값이 아님;
- 세그먼트별 배경 언어: 모든 세그먼트에 대해 "스타일 방향" 표의 한 방향, 또는 전환 계획 (어떤 세그먼트, 무엇으로, 이유, 트리거);
- 모션 시그니처: 정체성으로 반복되는 한 가지 유형의 움직임 (오브젝트 와이프, 단어별 3D 롤, 날아다니는 종이, 그리는 선, 색상 블록이 가장자리에 부딪힘…);
- 배경 모션: techniques.md §7c 메뉴의 한 가지 언어 — 모션 시그니처와 동일하지 않으며, 자동으로 "물체가 교차"하는 것이 아님;
- 배경 표면: §7d 메뉴에서 선택 (그라디언트/빛/텍스처/그래이니 그라디언트, 2개 이상의 레이어) — 단색 아님;
- 오브젝트 렌더링 스타일: techniques.md §7e 메뉴의 한 패밀리 (플랫, 클레이, 글로시, 유리, 등각, 사실적, 네온 선…);
- 사진 자산 (콘셉트가 사람/장소/제품 사진을 사용하는 경우): 출처 — 사용자 사진, Higgsfield MCP를 통한 생성, 또는 라이선스가 있는 스톡 — 사용자에게 질문하고, 액트별 샷 목록 포함 (references/opener-konsep.md "오프너 속 사진");
- 전환: 효과가 필요한 경계와 단순 컷으로 충분한 경계를 결정; 문맥에 따라 §4c 메뉴에서 선택, 반드시 두 가지 유형 또는 반드시 3D일 필요는 없음;
- 하나의 특별한 순간 (가장 비싼 효과가 한 번 사용되는 곳).
스타터는 건축일 뿐, 스타일이 아닙니다. assets/starter-opener.html의 회색, 시스템 폰트, WebGL 배경은 플레이스홀더입니다. 이 중 하나라도 최종 결과에 남아 있다면, 스타일이 아직 적용되지 않은 것입니다. WebGL 배경(성운, 먼지, 그리드, 블룸)은 8가지 배경 언어 중 하나일 뿐입니다; 스타일 방향이 다르면 비활성화하세요.
참고 자료 = 리듬이지, 껍데기가 아닙니다. 참고 비디오에서 가져와야 할 것: 샷당 길이, 전환 유형, 주의 계층, 에너지, 모션 언어. 가져오지 말아야 할 것: 팔레트, 폰트, 텍스처, 레이아웃, 장식 형태, 문장, 장면 순서, 독특한 순간 (특징적인 오프닝/클로징, 일회성 기믹). "이렇게 만들어 주세요"라는 요청은 "이 정도의 에너지로 만들어 주세요"를 의미합니다. references/techniques.md). 정체성을 잃어서는 안되며, 모션 언어는 정체성에서 비롯되어야 합니다.

법칙 #4 — 어셈블리 라인 없음: 오프너의 콘셉트는 제품에서 탄생합니다

표준 "기능 "라인업"" 오프너 (요구 → 솔루션 → 기능 A → 기능 B → 기능 C → 약속 → CTA)는 템플릿입니다. 제품의 성격에 대해 논리적인 질문을 하여 프레임워크를 선택하세요. references/opener-konsep.md의 콘셉트 메뉴에서 선택해야 하며, 고정된 순서를 사용하지 마십시오. 각 오프너는 고유한 프레임워크를 가져야 하며, 같은 프레임워크가 두 번 사용되지 않아야 합니다. 완전히 다른 제품이라면 논리적으로 동일한 구조를 공유할 수도 있지만, 먼저 메뉴를 확인하여 이전 구조의 유사성을 확인하세요.

워크플로우 — 수락 기준

사용자가 모션 그래픽을 요청하면 에이전트의 정신적 워크플로우는 다음과 같아야 합니다:

1. 범주 식별

사용자의 요청을 작업 유형 표에 매핑합니다. 설명 영상인가요? references/explainer.md를 읽으세요. 아니라면 아래 단계를 계속 진행합니다.

2. 스타일 브리핑 추출 (자동)

사용자와의 대화에서 직접 정보를 수집하세요. 사용자가 명시적으로 언급하지 않은 경우, 제품/테마에 대해 분석하세요. 사용자가 제품을 설명할 때, 해당 섹션에서 사용한 용어는 스타일 방향에 대한 힌트를 제공합니다. 적절한 질문을 통해 누락된 정보를 채우세요.

추출된 정보를 요약하여 사용자에게 보여주세요. 사용자의 수정 후, 최종 버전을 스타일 브리핑에 저장하세요.

3. 장면 런다운 생성

사용자에게 장면별 계획을 제시하세요. 각 장면에 대한 주요 오브젝트, 시각적 동작, 예상 시간을 포함하세요. 이것은 개요일 뿐이며 코드를 생성하기 전에 사용자의 승인을 받아야 합니다.

각 장면에 대해 다음을 설명하세요:

주요 오브젝트
모션 (오브젝트 및 카메라)
전환 (다음 장면으로의 연결)
참고 (특정 techniques.md 기술 참조가 있는 경우)

4. 런다운 검증

런다운이 법칙 1(슬라이드 금지)을 충족하는지 확인하세요:

장면당 하나의 짧은 문장 + 하나의 주요 오브젝트
각 장면은 3-5개의 요소로 구성됩니까? 그렇지 않으면 슬라이드입니다.
각 장면은 지속적입니까? 해당 요소로 돌아오나요? 그렇지 않으면 단절된 장면 목록입니다.
전환은 다양합니까? 모두 페이드/스케일이 아닙니까? 그렇지 않으면 PPT 템플릿입니다.
월드가 의미 있게 움직입니까? 모든 장면에 켄 버스 효과만 있는 것은 아닙니까?

실패 시: 구조를 재고하고 다시 제시하세요.

5. 코드 생성

더 복잡한 구조(구성 요소, 파일 분할)가 필요한지 결정하세요. 단일 파일 index.html이 항상 선호되며, 충분히 복잡할 때만 분할하세요.

단일 파일 코드 구조:

<head>: CDN 링크, Google Fonts, <style> (필요한 최소 CSS만 — 레이아웃과 모션은 JS에서 처리)
<body>-div#scene: 모든 요소
<script>: GSAP tl 변수 선언, 모든 애니메이션은 tl.time()을 사용하여 절대 시간 기준으로 트윈 연결
?debug=1 핸들러 (GSAP ScrollTrigger 사용 또는 사용자 정의)

6. 검증

제공된 지침을 사용하여 최종 코드를 검증하고 조정하세요.

구문: `?debug=1` 및 타임라인 구조

디버그 모드는 GSAP 타임라인의 진행 상황을 시각화하고 스크러빙 기능을 제공합니다. 이것은 뷰어가 아닌 개발자 도구입니다.

구현 개요:

?debug=1이 감지되면 타임라인 제어 패널을 표시합니다.
패널에는 재생/일시 정지, 스크러버, 타임코드가 포함되어야 합니다.
tl.time()에 바인딩하여 GSAP 타임라인과 동기화합니다.

타임라인 구조:

마스터 타임라인 tl을 생성합니다.
각 장면에 대해 마스터 타임라인에 중첩된 GSAP 타임라인을 생성합니다.
각 장면 타임라인 내의 모든 애니메이션은 tl.time() 기준으로 절대 시간을 사용합니다.
레이블을 사용하여 주요 순간을 표시합니다 (예: tl.addLabel('scene1End', 5)).
tl.eventCallback('onUpdate')를 사용하여 디버그 패널을 업데이트합니다.

브리핑 예시 (가상 제품)

요청: "클라우드 협업 도구 'TeamSync'의 오프너"

1. 스타일 브리핑:
   - 테마: TeamSync, 클라우드 협업. 감정: 연결됨, 생산적, 깔끔함.
   - 콘셉트: "문제 → 해결" (메뉴 #3). 구조: 혼란 상태 → TeamSync 사용 시작 → 질서 정연함 → 로고.
   - 팔레트: 주요 #4A90E2 (로고), 배경 #F8F9FA (깔끔한 흰색), 악센트 #50E3C2 (급증 및 강조).
   - 폰트: 'Inter' (깔끔한 UI 느낌) 및 'Poppins'
   - 모션 시그니처: 오브젝트 "자석"으로 붙음
   - 배경 모션: 부드러운 그라디언트 이동
   - 각 장면: 1) 문서가 흩어짐; 2) 문서가 TeamSync "으로 끌어당겨짐; 3) 문서가 매끄럽게 구성됨; 4) 로고 나타남.

이 스킬은 AI 에이전트가 모션 그래픽을 프레젠테이션이 아닌 비디오로 만들도록 안내하는 완전한 시스템입니다. 항상 references/ 디렉토리의 문서를 참조하여 설명 영상, 안티-PPT 규칙, 미적 선택에 대한 자세한 내용을 확인하세요.

Bang Motion — 웹 모션 그래픽 (PPT 아님)