motion-graphics-promo은(는) 무엇을 하나요?
After Effects 품질의 모션을 HTML/GSAP 컴포지션으로 작성하고 HyperFrames로 결정론적으로 렌더링합니다. 편집 가능한 소스, 정확한 네이티브 화면 충실도, 재현 가능한 렌더를 제공하며, 이는 수동으로 키프레임을 설정한 After Effects 프로젝트가 에이전트에게 제공할 수 없는 것입니다.
출처 연구: Higgsfield AI, "AI Created Every Motion Graphic in This Video" (YouTube W3-RIZ-Ps64, 11:33, 2026년 9월), 720p에서 콘택트 시트로 검사, 4분 길이의 공식 SaaS 제품 개요의 페이싱. 문법과 페이싱에만 사용하십시오. 절대 픽셀, 음악, 음성, 로고, UI를 재사용하지 마십시오.
1. 모션 전 브리핑 (먼저 스토리를 확정하세요)
튜토리얼은 처음 몇 분을 브리핑을 자산 선택과 스토리보드로 전환하는 데 사용하며, 그 후에야 움직임이 시작됩니다. 다음 다섯 줄로 동일하게 수행하십시오:
- 청중과 순간: 누가, 어떤 플랫폼에서, 소리 켜짐 또는 꺼짐 상태로 시청하는가.
- 하나의 제품, 두 가지 작업, 하나의 다음 단계: 시청자가 정확히 그것만 기억해야 합니다.
- 증거 인벤토리: 실제로 가지고 있는 실제 스크린샷과 화면 녹화, 소스 빌드/날짜 포함. 이 목록에 없는 것은 화면에 나타날 수 없습니다.
- 팔레트와 서체: 브랜드 고유의 아이덴티티. 참조 자료의 대비 수준(채도가 높은 필드 위의 굵은 축약 서체)만 차용하고, 정확한 색상은 차용하지 마십시오.
- 화면비: 세로(1080x1920)를 자체 컴포지션으로 디자인하고, 가로를 자르지 마십시오.
2. 모션 문법
| 비트 | 규칙 | 이유 |
|---|---|---|
| 진입 (0-3초) | 에너제틱: 레이블이 떨어지고, 회전하고, 튀고 한 번 정착하거나, 기기가 무게감 있게 떨어집니다. | 제품을 가리지 않고 스크롤을 멈추게 합니다. |
| 전환 | 작업당 하나의 주요 전환. 전화기가 색상 필드 사이를 밀리거나 기울어지거나, 탐색이 다음 실제 화면으로 넘어갑니다. | 모션은 실제 제품 상태 간의 그룹화 또는 이동을 설명해야 합니다. |
| 정착 | 짧은 스프링(GSAP back.out(1.4) 또는 elastic.out(1, 0.6), 0.4-0.7초). 화면을 읽기 전에 기기가 정착합니다. | 물리적 무게는 프리미엄으로 읽히고, 읽는 동안의 흔들림은 노이즈로 읽힙니다. |
| 증거 유지 | 각 전환 후 최소 2-3초의 안정적이고 읽을 수 있는 화면. | 장식용 레이블보다 화면을 더 오래 읽어야 합니다. |
| 악센트 | 마스킹/클립 공개 타이포그래피, 직사각형 색상 악센트, 콜라주 또는 색상 필드 핸드오프. 아껴서 사용하십시오. | 이것이 "After Effects 룩"입니다. 남용하면 템플릿처럼 보입니다. |
타이밍 기본값: 60fps; 진입 0.5-0.9초; 레이블 간격 60-90ms; 시청자가 읽어야 하는 텍스트를 읽는 동안 절대 애니메이션하지 마십시오.
3. 32초 프로모션 타임라인
| 시간 | 목적 | 증거 규칙 |
|---|---|---|
| 0-4.4초 | 인식 가능한 사용자 문제, 라이선스 B-롤 또는 굵은 색상 필드 위의 간결한 한 줄. | 가상의 사용 후기 또는 고객 신원 없음. |
| 4.4-13.3초 | 첫 번째 작업에 대한 실제 화면 시퀀스, 탐색 연속성 포함. | 실제 지원 경로; 가짜 클릭 또는 합성 UI 없음. |
| 13.3-22.2초 | 녹화가 증명하는 가시적 결과가 있는 두 번째 보완 작업. | 검증된 푸티지에서 선택; 경쟁사의 주장을 가져오지 마십시오. |
| 22.2-26.7초 | 보상 및 제품 아이덴티티로 돌아가기. | 측정되지 않은 시간 또는 수익 절감이 아닌 목적 또는 초대로 표현하십시오. |
| 26.7-32초 | URL과 정확한 제공 상태가 포함된 단일 CTA; 음악 릴리스. | 라이브 대상 및 정확한 릴리스 상태와 일치하십시오. 음악 크레딧을 유지하십시오. |
더 긴 고려 단계 비디오의 경우, 공식 개요 구조를 대신 따르십시오: 먼저 인간 맥락, 그런 다음 챕터당 하나의 워크플로, 도구 사이의 사람들로 돌아가기, 브랜드 마무리.
4. 구축하기 (HyperFrames + GSAP)
- HyperFrames 컴포지션을 스캐폴드합니다(
hyperframes-best-practices스킬에서 CLI, 린트 및 렌더 문제 참조). 프로젝트에서 HyperFrames 버전과 로컬 GSAP 3 빌드를 고정하고, 렌더링 시 CDN에서 애니메이션 런타임을 로드하지 마십시오. - 기기 프레임: 실제 스크린샷 또는 음소거된
<video>화면 녹화를 담는 차원 있는 흑연 쉘(부드러운 상단 조명, 1-2픽셀 베벨 하이라이트, 컨택트 섀도우).translate3d/rotate로 쉘을 애니메이션하고, 화면 콘텐츠는 정착된 후 똑바르고 크기가 조정되지 않도록 유지하십시오. - 키네틱 타입: 헤드라인을 단어로 분할;
overflow: hidden마스크 안에서gsap.from(words, {yPercent: 110, rotate: 4, stagger: 0.07, ease: "back.out(1.6)"}). 비트당 하나의 헤드라인. - 색상 필드 핸드오프: 전체 블리드 사각형이 비트 사이를 지움(
clip-path: inset()트윈); 들어오는 필드는 다음 기기 위치를 전달합니다. - 타임라인: 비트당 레이블(
"problem","job1","job2","payoff","cta")이 있는 하나의 마스터gsap.timeline({paused: true})로, HyperFrames가 모든 프레임을 결정론적으로 찾을 수 있도록 합니다. - 음악: 라이선스 트랙만 사용하세요(예: 크레딧 포함 CC BY).
audio-provenance.json에 소스 URL, 라이선스, 크레딧 및 파일 해시를 기록하고, CTA 비트에서 구성된 끝으로 편집하십시오. - 대상 해상도/fps로 렌더링; 소셜 미디어용 H.264 + 스테레오 AAC.
5. 설명 및 광고 디자인 키트 (프로덕션에서 검증됨)
이 키트는 일련의 제품 설명 및 15초 세로 광고를 제공했습니다. 첫 번째 버전은 어두운 배경을 사용했으며 "너무 검다"고 거부되었습니다. 효과적이었던 것:
- 모든 장면 뒤의 실제 푸티지: 제품의 실제 세계 맥락에 대한 라이선스 스톡 푸티지(예: 스포츠 앱의 매치 푸티지), 브랜드 색상 그라데이션(
linear-gradient(180deg, brand 74% → transparent → ink 50%))으로 그레이딩, 베드에saturate(1.3) brightness(1.12)추가. - 팔레트: 하나의 채도 높은 브랜드 색상 + 하나의 고에너지 악센트(예: 바이올렛
#6c4cff+ 라임#d7ff3c), 하늘/코랄은 스티커로만 사용하고 잉크#16132e는 악센트 위 텍스트용. - 서체: 압축된 디스플레이 대문자(Archivo,
font-stretch75-80%, 굵기 900, 1080 너비 기준 74-96px). 각 헤드라인의 키워드는 -2° 회전된 악센트 마커 박스에 배치됩니다. 언어별 글리프 범위를 확인하십시오: Archivo에는 키릴 문자가 없으므로 ru/uk/bg의 경우 Inter로 전환하십시오. - 기기 프레임: 3D 원근감 스테이지(
perspective: 1800px)가 있는 흰색/은색 전화기 및 브라우저 프레임, 실제 스크린샷 또는 실제 화면 녹화 표시. 모든 화면은 빈 상태가 아닌 실제 콘텐츠(사람, 로고 및 데이터)를 표시해야 합니다. - 떨어지는 스티커: 2-3개의 짧은 대문자 레이블이 떨어지고, 회전하고, 기기 옆에 정착합니다(비트당 하나).
- 전환: 각진 악센트 컬러 와이프 또는 비트 사이의 2프레임 흰색 플래시.
- 음성 해설(TTS 또는 녹음) 음악을 그 아래에 덕킹한 후, 최종 믹스를 -14 LUFS로 정규화(
ffmpeg -af loudnorm=I=-14:TP=-1.5:LRA=11). - 실제 기기 캡처(macOS): iPhone Mirroring 및
screencapture -v -V <secs> -R<x,y,w,h>는 실제 앱을 녹화합니다. 탭을 보내기 전에 미러링 창을 활성화하십시오. 미러링이 연결되려면 전화기가 잠겨 있어야 합니다. - 현지화 변형: 하나의 템플릿에
{{placeholders}}를 유지하고 작은 스크립트로 언어별 복사본을 생성합니다(references/vertical-ad-15s.template.html참조). - 모든 링크에 UTM 캡션 및 바이오:
?utm_source=<platform>&utm_medium=organic&utm_campaign=<video-slug>.
렌더 트랩 (각각 거의 깨진 비디오를 제공할 뻔했습니다)
- HyperFrames는 컴포지션에 많은
<video>클립(베드 6개 이상, 또는 베드 + 전화기 클립)이 있을 때 렌더 중간에 모든 오버레이를 조용히 드롭할 수 있습니다. 미리보기 스냅샷은 여전히 괜찮아 보입니다. 푸티지 베드를 하나의 비디오로 사전 연결하고, 클립 수를 낮게 유지하며, 스케줄링 전에 항상 렌더링된 MP4의 콘택트 시트를 검사하십시오. - GSAP
fromTo에서 from 변수에autoAlpha: 1을 사용하면 작성 시간에 요소가 표시됩니다.tl.set(el, {autoAlpha: 1})을 사용한 다음 그것 없이fromTo를 사용하십시오. - 소셜 스케줄러에 업로드하면 때때로 빈 본문이 반환됩니다. 재시도하고, 스케줄링 전에 호스팅된 파일의 바이트 크기가 일치하는지 확인하십시오.
- 화면에 있는 실제 사람의 얼굴과 이름(플레이어, 고객)은 유료 또는 공개 사용 전에 동의가 필요합니다. 누락된 경우 플래그를 지정하십시오.
6. 미리보기가 아닌 인코딩된 파일을 검증하십시오
- 전달된 MP4에서 프레임을 추출하고(예:
ffmpeg -i out.mp4 -vf fps=2 frames/%03d.png) 읽으십시오: 유지 시간 동안 모든 화면을 읽을 수 있는지, 캡션이 플랫폼 UI 안전 영역과 겹치는지, 읽어야 할 때 텍스트가 애니메이션 중간에 나타나는지 확인하십시오. - 디코드 완료, 지속 시간, fps, 프레임 수, 음량 및 피크를 확인하고, 최종 파일의 SHA-256을 기록하십시오.
- HyperFrames 린트/레이아웃 검사 및 캡션 프레임의 대비 샘플을 실행하십시오.
- 모든 소스 자산(빌드/날짜가 있는 화면, B-롤 라이선스, 음악 라이선스)을 최종 해시에 바인딩하는 매니페스트를 유지하십시오.
7. 경계
- 실제 UI만 사용하십시오. 흐름을 녹화할 수 없는 경우(로그인 중단, 기능 미출시), 잘라내십시오. 절대 모의하지 마십시오.
- 다운로드된 참조 비디오, 콘택트 시트 및 대본은 비공개 분석 자료입니다. 크리에이티브와 함께 업로드하지 마십시오.
- 측정 및 출처가 없는 한 인기, ROI 또는 시간 절약 주장을 하지 마십시오.
- 크리에이티브 승인은 게시가 아닙니다. 스케줄링 및 게시는 별도의 확인된 단계입니다.