Website to HyperFrames은(는) 무엇을 하나요?
웹사이트를 캡처하여 전문적인 비디오를 제작합니다.
사용자는 다음과 같이 요청할 수 있습니다:
- "https://... 를 캡처해서 25초 제품 출시 비디오를 만들어 줘"
- "이 웹사이트를 15초 Instagram 소셜 광고로 변환해 줘"
- "https://... 에서 30초 제품 투어를 만들어 줘"
워크플로우는 7단계로 구성됩니다. 각 단계는 산출물을 생성하며, 이는 다음 단계의 게이트 역할을 합니다.
1단계: 캡처 및 이해
참고: references/step-1-capture.md
캡처를 실행하고, 추출된 데이터를 읽은 후, 기록 후 잊기(write-down-and-forget) 방법을 사용하여 작업 요약을 작성합니다.
게이트: 사이트 요약(이름, 주요 색상, 글꼴, 핵심 에셋, 한 줄 분위기)을 출력합니다.
2단계: DESIGN.md 작성
참고: references/step-2-design.md
캡처된 웹사이트에 대한 간단한 브랜드 참조 문서를 작성합니다. 6개 섹션, 약 90줄입니다. 이는 치트 시트이며, 크리에이티브 계획(4단계에서 수립)이 아닙니다.
게이트: 프로젝트 디렉토리에 DESIGN.md 파일이 존재해야 합니다.
3단계: SCRIPT 작성
참고: references/step-3-script.md
내레이션 스크립트를 작성합니다. 이야기의 뼈대입니다. 장면 길이는 추측이 아닌 내레이션에서 결정됩니다.
게이트: 프로젝트 디렉토리에 SCRIPT.md 파일이 존재해야 합니다.
4단계: STORYBOARD 작성
참고: references/step-4-storyboard.md
비트별 크리에이티브 방향(분위기, 카메라, 애니메이션, 전환, 에셋, 깊이 레이어, SFX)을 작성합니다. 이는 크리에이티브의 나침반으로, 엔지니어가 각 컴포지션을 제작하기 위해 따르는 문서입니다.
게이트: 비트별 방향과 에셋 감사 테이블이 포함된 STORYBOARD.md 파일이 존재해야 합니다.
5단계: VO 생성 및 타이밍 매핑
TTS 오디오를 생성하고, 단어 수준 타임스탬프를 위해 전사하며, 타임스탬프를 비트에 매핑합니다. 실제 길이로 STORYBOARD.md를 업데이트합니다.
게이트: narration.wav (또는 .mp3)와 transcript.json 파일이 존재해야 합니다. STORYBOARD.md의 비트 타이밍이 업데이트되어야 합니다.
6단계: 컴포지션 제작
참고: hyperframes 스킬 (로드하세요 — 모든 규칙이 중요합니다)
참고: references/step-6-build.md
스토리보드에 따라 각 컴포지션을 제작합니다. 각 컴포지션 후: 레이아웃, 에셋 배치, 애니메이션 품질을 자체 검토합니다.
게이트: 모든 컴포지션이 자체 검토되었습니다. 요소 겹침, 잘못 배치된 에셋, 움직임이 없는 정적 이미지가 없어야 합니다.
7단계: 검증 및 전달
참고: references/step-7-validate.md
린트, 검증, 스냅샷, 미리보기를 수행합니다. 로컬호스트 Studio 프로젝트 URL
(http://localhost:<port>/#project/<project-name>)을 사용자에게 먼저 제공하고, 명시적인 요청이 있을 때만 MP4로 렌더링합니다. index.html을 프로젝트 전달 링크로 취급하지 마십시오. 이는 소스 코드 컨텍스트일 뿐입니다.
게이트: npx hyperframes lint 및 npx hyperframes validate 명령어가 오류 없이 통과되어야 하며, 최종 응답에 활성 Studio 프로젝트 URL이 포함되어야 합니다.
빠른 참조
비디오 유형
| 유형 | 길이 | 비트 수 | 내레이션 |
|---|---|---|---|
| 소셜 광고 (IG/TikTok) | 10-15초 | 3-4 | 선택적 후크 문장 |
| 제품 데모 | 30-60초 | 5-8 | 전체 내레이션 |
| 기능 발표 | 15-30초 | 3-5 | 전체 내레이션 |
| 브랜드 릴 | 20-45초 | 4-6 | 선택적, 음악 중심 |
| 출시 티저 | 10-20초 | 2-4 | 최소, 고에너지 |
포맷
- 가로: 1920x1080 (기본값)
- 세로: 1080x1920 (Instagram 스토리, TikTok)
- 정사각형: 1080x1080 (Instagram 피드)
참고 파일
| 파일 | 읽어야 할 시점 |
|---|---|
| step-1-capture.md | 1단계 — 캡처된 데이터 읽기 |
| step-2-design.md | 2단계 — DESIGN.md 작성 |
| step-3-script.md | 3단계 — 내레이션 스크립트 작성 |
| step-4-storyboard.md | 4단계 — 비트별 크리에이티브 방향 |
| step-5-vo.md | 5단계 — TTS, 전사, 타이밍 |
| step-6-build.md | 6단계 — 자체 검토와 함께 컴포지션 제작 |
| step-7-validate.md | 7단계 — 린트, 검증, 스냅샷, 미리보기 |
| techniques.md | 4단계 및 6단계 — 10가지 시각적 기법과 코드 패턴 (SVG 드로잉, Canvas 2D, 3D, 타이포그래피, Lottie, 비디오, 타이핑, 가변 폰트, MotionPath, 전환) |