이 사이트의 Claude Motion Skills는 영상으로 변환되는 작은 웹 프로젝트로 이해하면 좋습니다. 코딩 에이전트는 소스 작성과 수정을 돕고 HyperFrames는 렌더링 기반을 담당합니다. 둘은 별개의 일입니다. 연결 지점을 이해하면 문제가 메시지, 애니메이션, 내보낸 파일 중 어디에 있는지 쉽게 판단할 수 있습니다.
1. 요청을 장면 순서로 바꾸기
새 검색 기능을 알리는 12초 영상을 가정해 봅시다. 승인된 문구, 실제 스크린샷, 대상 시청자, 화면 비율을 에이전트에게 주세요. 0~3초에는 문제, 3~9초에는 유용한 변화, 9~12초에는 다음 행동을 보여 주는 세 장면을 계획합니다. 이는 편집 계획의 예이지 필수 템플릿이 아닙니다. 전환 효과를 다듬기 전에 장면 순서를 합의하세요. 핵심이 없는 문단은 해상도를 높여 움직이게 해도 명확해지지 않습니다.
2. 내용과 배치를 편집 가능한 상태로 유지하기
다운로드한 소스 키트에는 애니메이션과 로컬 작업에 필요한 파일이 포함됩니다. HyperFrames 프로젝트에서 HTML은 구성, CSS는 외형, JavaScript는 움직임을 표현할 수 있습니다. 스크린샷, 글꼴, 오디오는 프로젝트와 함께 보관해 사라질 수 있는 외부 자료에 의존하지 않도록 합니다. 장면에는 problem, search-demo, next-step처럼 의미 있는 이름을 붙이세요. 제목이 바뀌면 모든 장면을 다시 쓰지 말고 해당 장면을 조정하고 줄바꿈을 확인하도록 요청하세요.
3. 모든 시점으로 직접 이동 가능하게 만들기
렌더러는 특정 순간의 화면을 바로 요청할 수 있어야 합니다. HyperFrames는 탐색 가능한 구성을 사용하며 브라우저 애니메이션 API에도 Animation.currentTime 같은 시간 제어가 있습니다. 초당 30프레임이면 예제에는 360프레임이 필요하며 0초부터 1/30초 간격으로 샘플링합니다. 실시간 시계에만 의존한 애니메이션은 재생 시 정상이어도 특정 시점으로 이동하면 실패할 수 있습니다. 같은 시점을 두 번 요청해 결과를 비교하세요. 입자, 난수, 비동기 미디어가 있을 때 특히 중요합니다.
4. 오래 걸리는 최종 렌더링 전에 검토하기
브라우저 미리보기는 이야기와 속도를 확인하는 데 유용합니다. 각 장면의 시작과 끝에서 멈추고 3초와 9초 부근의 전환을 살펴보세요. 스크린샷의 중요한 부분이 충분히 큰가요? 제목은 읽어야 할 순간 전에 등장하나요? 자막이 다른 요소에 가려지지 않나요? HyperFrames 문서는 기술 검증용 lint와 check 명령을 안내합니다. 프로젝트에 포함되고 설치 버전에 맞는 명령을 사용하세요. 검사가 성공해도 메시지가 이해하기 쉬운지는 판단할 수 없습니다.
5. 렌더링하고 시청한 뒤 소스 보관하기
이 사이트의 MP4 작업은 다운로드한 키트에서 HyperFrames, Chrome, FFmpeg를 이용해 로컬로 실행합니다. 렌더링은 정해진 프레임을 캡처하고 인코딩하며, 미리보기가 얼마나 부드럽게 재생됐는지를 녹화하지 않습니다. 실제 MP4를 열어 첫 프레임, 마지막 프레임, 전체 내레이션, 크기, 길이를 확인하세요. 납품 영상과 함께 소스 폴더도 보관합니다. 고객이 나중에 단어 하나를 바꾸면 픽셀에서 전체 구성을 다시 만들 필요 없이 프로젝트를 수정해 새 버전을 렌더링할 수 있습니다.
다음 단계
미리보기로 이야기를 판단하고 시간 정보가 있는 소스로 움직임을 제어하며 내보낸 MP4로 납품을 검증하세요. 세 가지를 연결해 관리하세요.
제작 작업 공간 살펴보기출처와 참고 자료
출처는 원본 문서와 제작자 페이지로 연결됩니다. 제공 기능은 바뀔 수 있으므로 구독하거나 설치하기 전에 해당 출처를 확인하세요.
- Claude Motion SkillsClaude Motion Skills
- How a HyperFrames project worksHeyGen
- Animation: currentTime propertyMDN Web Docs
- Finish and share a videoHeyGen