제품 출시 동영상 스킬
이 스킬은 Hyperframes를 사용하여 고급 제품 출시 동영상을 제작하는 방법을 안내합니다. 브랜드 발견부터 최종 검증까지의 구조화된 워크플로우를 강조합니다.
공식 Hyperframes 스킬 활용
이 스킬은 비디오 프로젝트의 디렉터 및 아키텍트 역할을 합니다. 최신 프레임워크 패턴의 기술적 정확성과 액세스를 보장하려면 공식 Hyperframes 스킬과 함께 사용해야 합니다.
코드를 작성하기 전에 다음을 수행해야 합니다:
- 공식 /hyperframes 스킬을 호출하여 구성 규칙, data-attribute 의미론, 프레임워크 제약 조건을 검토합니다.
- 공식 /gsap 스킬을 호출하여 자세한 타임라인 참조, 이징 함수, 복잡한 애니메이션 패턴을 확인합니다.
이 스킬의 전략적 지침과 공식 스킬의 기술 문서를 결합하여 프로덕션 수준의 비디오 구성을 만들 수 있습니다.
상태 비저장 프로젝트 생성 (중요)
이 디렉토리(hyperframes-product-launch-video)는 읽기 전용 템플릿 및 스킬 폴더입니다. 절대 여기에 프로젝트별 파일을 작성하지 마십시오.
새 비디오 프로젝트를 만들 때마다:
- 대상 디렉토리: 모든 프로젝트 파일은 사용자의 대상 비디오 프로젝트 폴더(예:
my-new-video/또는my-new-video/assets/)에 생성되어야 합니다. - 프로젝트 DNA: 대상 프로젝트의
assets/또는 루트 폴더 안에brand_dna.json을 생성합니다. - 아트 디렉션: 최종
ART_DIRECTION.md를 대상 프로젝트 폴더 안에 저장합니다. - 부작용 없음: 프로젝트 실행 중에 이 스킬 폴더 내의 어떤 파일도 수정하지 마십시오.
워크플로우
1. 인터뷰 단계 (브랜드 DNA)
시작하기 전에 브랜드를 이해해야 합니다.
- 웹사이트 분석: Playwright를 사용하여 사용자의 웹사이트를 방문합니다. 브랜드 색상, 타이포그래피(글꼴) 및 핵심 가치 제안을 추출합니다.
- 에셋 요청: 사용자에게 로고와 아이콘을 요청합니다. 깨끗하고 투명하며 꼭 맞게 자른 PNG 또는 SVG가 필요함을 명시합니다.
- 동영상 유형 선택: 100% 모션 그래픽 동영상인지 하이브리드(예: 창립자 토크 헤드 + Hyperframes 모션 그래픽)인지 질문합니다.
2. 계획 단계 (아트 디렉션)
계획 없이 HTML을 절대 작성하지 마십시오.
- 아트 디렉션 생성: 아트 디렉션 템플릿을 기반으로
ART_DIRECTION.md문서를 생성합니다. - 장면 분할: 동영상의 모든 초를 정의하고 시각적 동작, 카메라 움직임, 이징 함수, 음향 효과를 지정합니다.
3. 구현 (프리미엄 모션 디자인)
엘리트 모션 디자인 원칙을 적용합니다. 코드 스니펫은 모션 디자인 패턴을 참조하십시오.
- Apple 스타일 카메라: 대규모 매크로 줌과 스냅 줌(
back.out)을 사용합니다. - 지우개 효과: 밀려오는 로고에 의해 '먹히는' 지연된 텍스트 불투명도.
- 충돌/파편화: GSAP scatter를 사용한 물리적 충격 효과.
- 글래스모피즘:
backdrop-filter: blur(40px)를 사용한 프리미엄 UI 요소. - 타자기 물리학: 커서를 밀어내는 튀는 스팬.
4. 사운드 디자인 (SFX)
- 쇼핑 목록: 스토리보드를 기반으로 사용자에게 "사운드 디자인 쇼핑 목록"을 제공합니다.
- 싱크:
<audio data-start="...">태그를 사용하여 GSAP 히트와 완벽하게 일치시킵니다.
5. 검증 및 문제 해결
- 주의 사항: 주요 주의 사항을 검토하여 일반적인 Hyperframes 버그(지속 시간 불일치, 대상 누락 등)를 피합니다.
- FFmpeg: 렌더링이 실패하면 사용자에게 로컬에 FFmpeg를 설치하도록 안내합니다.
모범 사례
- 원자적 장면: 장면을 모듈식으로 유지하고
data-start및data-duration으로 엄격하게 관리합니다. - 가시성 관리: 장면 전환에
autoAlpha를 사용하여 깔끔한 시크를 보장합니다. - 레이아웃 vs 변환: 플렉스박스 간격에는 물리적 치수를 사용하고 시각적 효과에는 변환을 사용합니다.