How to Make a Launch Video With Code (HyperFrames Tutorial)

🖼️ 인포그래픽

🖼️ 4컷 인포그래픽

💡 한 줄 결론

HyperFrames와 Claude Code로 실제 제품 자료를 코드 기반 출시 영상으로 만들고, 검증·변수화·일괄 렌더링을 거쳐 여러 버전과 쇼츠로 확장할 수 있다.

📌 핵심 요점

1. HyperFrames는 HTML로 작성한 장면을 숨겨진 Chrome에서 프레임별로 캡처하고 FFmpeg로 합성한다. 실제 시계 대신 지정된 시점으로 애니메이션을 이동시키므로, 복잡한 프레임은 처리 시간이 늘어나는 방식으로 렌더링된다.
2. 설치보다 중요한 것은 실행 조건이다. 영상에서는 Node 22 이상과 FFmpeg 확인, 텔레메트리 비활성화, 테스트한 버전 고정, 환경 진단, 스킬 보안 검토를 먼저 진행한다.
3. 좋은 프롬프트에는 실제 제품 문구·브랜드 색상·폰트뿐 아니라 각 장면에서 보여줄 구체적인 시각 요소가 필요하다. 헤드라인·강조색·프로모션 코드를 변수로 지정하면 후속 제작이 쉬워진다.
4. 에이전트는 lint, check, snapshot으로 결과를 검사하고 정적인 구간과 선 애니메이션 오류를 수정했다. 시연에서는 30초 영상의 최초 완성까지 8분 35초, 900프레임 렌더링에 1분 15초가 걸렸다.
5. 변수 기반 일괄 렌더링으로 세 가지 버전을 만들 수 있지만, 세로 영상은 별도 프로젝트로 구성했다. 실제 배포 전에는 가상 수치 교체, 음성 청취, 음악 라이선스, 버전별 동작 차이까지 확인해야 한다.

🧩 배경과 문제 정의

제품 출시 영상을 코딩 에이전트에게 맡길 수 있어도, 막연한 요청만으로는 작은 아이콘과 제목 위주의 슬라이드 같은 결과가 나오기 쉽다. 이 영상은 실제 제품 자료를 바탕으로 장면을 설계하고, 설치·권한·검사·수정·변형 제작까지 연결하는 과정을 설명한다.

시연 대상은 습관 추적 서비스 Pulse의 HTML 랜딩 페이지다. 연속 기록, 인사이트, 알림이라는 세 기능과 기존 브랜드 자료를 사용해 30초 가로 영상을 만들고, 이후 여러 헤드라인·색상 버전과 세로 영상, 로컬 음성까지 확장한다. 발표자가 강조하는 문제는 프롬프트 작성만이 아니라 그 주변의 실행 조건과 검증 절차다.

🕒 시간순 섹션별 상세정리

1. 한 번의 프롬프트에서 출시 영상과 변형까지

• 발표자는 편집기나 수동 타임라인 없이 Claude Code와 HyperFrames로 만든 30초 영상을 보여준다. 첫 완성까지 약 8분 반이 걸렸고, 이후 한 명령으로 헤드라인과 색상이 다른 세 버전을 만들었다고 보여준다. [00:14]
• 강의는 설치, 첫 실행, 전체 제작, 맞춤 수정, 주의점으로 구성된다. 목표 결과물은 실제 웹사이트 문구를 사용한 제품 출시 영상과 쇼츠용 세로 버전, 비교 테스트할 변형들이다. [00:51]

2. HTML을 프레임 단위 영상으로 바꾸는 원리

• HyperFrames는 무료 오픈소스 도구로 묶인다. HTML의 텍스트·색상·도형·애니메이션을 숨겨진 Chrome에서 열고, 프레임 번호를 초당 프레임 수로 나눈 정확한 시점마다 캡처한 뒤 FFmpeg로 MP4와 오디오를 합친다. [01:40]
• 실시간으로 재생하지 않으므로 무거운 프레임은 처리 시간이 늘어나는 방식으로 렌더링된다. 대신 실제 시계, 난수, 렌더링 도중의 인터넷 로딩을 피해야 하며, 규칙을 어기면 오류 표시 없이 문제가 생길 수 있다고 보여준다. [02:00]
• 각 클립의 시작·길이·트랙도 HTML에 담긴다. 전용 스킬은 Claude Code에 이러한 작성 규칙을 알려주며, 발표자는 자신의 채널에서도 영상 속 카드 제작에 사용한다고 드러낸다. [02:28]

3. 실행 환경과 텔레메트리·스킬 점검

• 코딩 에이전트 작업 공간을 소개한 뒤 설치로 넘어간다. 필수 조건은 Node 22 이상과 FFmpeg이며, 첫 명령 전에 추적 방지 설정을 적용하고 텔레메트리를 지속적으로 비활성화하도록 안내한다. [03:29]
• 발표자는 읽고 테스트한 0.9.19를 고정했다. 녹화 중에는 0.9.33이 최신으로 언급되며, 환경 진단의 Node·FFmpeg·Chrome 통과 여부와 첫 렌더링 때 약 200MB의 headless Chrome을 내려받는 점을 보여준다. [04:08]
• 스킬 설치 시 일부 항목이 중간 위험으로 표시된다. 스킬은 에이전트의 권한으로 실행되므로 검사표를 읽고, 네 개의 스킬을 설치한 뒤 Claude Code를 재시작해 불러온다. [04:31]

4. 실제 제품 자료와 장면 중심 프롬프트

• Pulse의 실제 랜딩 페이지에서 연속 기록·인사이트·알림 기능, 프로모션 코드, 색상과 폰트를 가져온다. 존재하지 않는 주장을 만들지 않고 실제 자료를 사용하도록 요청한다. [05:14]
• 30초·1920×1080·다섯 장면을 지정하고, 각 기능이 화면을 채우는 구체적 시각 요소를 갖게 한다. 체크인 달력, 월요일 수치가 내려가는 차트와 고객 인용문, 들어오는 알림을 명시해 슬라이드 같은 결과를 개선한다. [05:56]
• 가격은 넣지 않고 헤드라인·강조색·프로모션 코드를 변수로 노출한다. 버전 고정, 난수·시계 사용 금지, usage·feedback 실행 제외와 함께 lint·check·render를 완료 조건으로 둔다. [06:48]

5. 로그인 정보 접근 제한과 자동 검사

• 발표자 설명에 따르면 usage 명령은 Claude Code 로그인 정보를 읽어 Anthropic에 요금제 사용량을 조회한다. 이를 실행하지 않도록 요청하고 프로젝트 설정의 차단 목록에도 넣었으며, 에이전트는 해당 호출을 생략했다고 보고했다. [07:17]
• 실행 후 에이전트는 제품 파일과 스킬 가이드를 읽고 프로젝트를 초기화한다. 폰트를 복사하고 영상 설계 문서와 훅·연속 기록·인사이트·알림·마무리 카드의 장면 파일을 작성한다. [08:00]
• lint는 오류와 경고 없이 통과했다. check는 인사이트 장면에서 3.63초 동안 변화가 없는 구간을 찾아 수정하게 했고, 텍스트 대비 검사 41개도 모두 통과했다고 보여준다. [08:37]

6. 스냅샷 검토와 첫 결과의 한계

• 에이전트는 주요 프레임 10개와 장면 전환·휴대전화 크기 시트를 확인한다. 선이 점진적으로 그려지지 않고 한꺼번에 나타나는 버그를 고친 뒤, 변수에 시험값을 넣어 모든 장면에 반영되는지 확인하고 기본값으로 되돌린다. [09:05]
• 900프레임 렌더링에는 발표자의 Mac에서 1분 15초, 프롬프트 입력부터 완료 요약까지는 8분 35초가 걸렸다. 결과에는 달력, 연속 기록 카운터, 차트, 알림, 프로모션 코드가 포함된다. [09:41]
• 달력 날짜와 23이라는 기록 수치, 차트 높이는 예시로 만들어졌다. 발표자는 실제 출시 때 실제 수치로 바꿔야 한다고 말하며, 알림 장면 첫 1초의 빈 공간도 약점으로 짚어 본다. [09:59]

7. 후속 수정과 미리보기 변수 조작

• 인사이트 차트를 화면 왼쪽 절반까지 키우고 월요일 막대가 내려가며 빨갛게 변하도록 수정한다. 에이전트는 강조색 변수를 덮어쓰지 않도록 막대 안에 빨간 레이어를 추가하고, 2분 47초 만에 수정본을 렌더링해 이전 버전과 함께 보관한다. [10:48]
• 로컬 미리보기 스튜디오에서 장면과 타임라인을 살펴보고 헤드라인·강조색·프로모션 코드를 바꾼다. 변경은 미리보기에만 적용되며, 강조색을 바꿔도 월요일 막대의 빨간색은 유지된다. [11:26]
• 변수 패널에는 실제로 동작하는 변수도 unused로 표시되는 문제가 있었다. 현재 미리보기의 렌더 명령을 복사할 수 있으며, 에이전트가 백그라운드에 남겨둔 미리보기는 사용 후 종료하도록 안내한다. [11:44]

8. 세 가지 버전의 일괄 렌더링과 재현성

• rows.js에 이름·헤드라인·강조색·프로모션 코드가 다른 세 행을 만든다. 보라색 원본, 청록색의 새 헤드라인, 호박색의 새 헤드라인으로 구성하며 추가 문구는 발표자가 직접 작성했다고 구분한다. [12:05]
• 문서의 strict variables 옵션은 0.9.19에서 파일명용 name까지 미선언 변수로 판단해 세 행 모두 실패했다. 발표자는 해당 옵션을 빼고 다시 실행해 4분 만에 30초짜리 세 영상을 얻었다. [12:36]
• 같은 Mac에서 같은 입력으로 만든 보라색 영상은 이전 렌더 결과와 바이트까지 같았다. 발표자는 이를 해당 환경에서의 관찰로 한정하고, 장비 간 재현성을 보장해야 한다면 Docker 렌더링을 검토하라는 도구 측 설명을 전해진다. [12:54]

9. 쇼츠용 세로 영상과 로컬 음성 추가

• 화면 비율은 변수로 바꾸지 않고 별도 프로젝트로 제작한다. 1080×1920 해상도, 동일한 다섯 장면과 변수, 첫 프레임부터 보이는 헤드라인, 하단 UI와 겹치지 않는 텍스트 위치를 요청해 4분 50초 만에 세로 영상을 만든다. [13:31]
• 로컬 TTS는 API 키 없이 컴퓨터에서 실행되지만 Python과 패키지 설치, 첫 실행 시 약 350MB의 모델 다운로드가 필요하다. 실제 제품 문구에서 장면마다 짧은 음성 한 줄을 만들고 음악 없이 배치하도록 요청한다. [14:01]
• 에이전트는 다섯 음성의 레벨과 장면별 타이밍을 맞췄다. 다만 오디오를 측정했을 뿐 들을 수는 없다며 직접 청취를 요청했고, 영상에서 음성 결과 일부를 재생한다. [14:25]

10. 활용 사례와 무료 사용의 조건

• 실제 웹사이트 화면을 활용한 출시 영상, 코드 변경에 내레이션과 자막을 붙인 PR 설명 영상, 채널의 영상 카드 등을 활용 사례로 보여준다. [15:01]
• 도구는 Apache 2.0이며 로컬 렌더링에는 영상당 요금이 없다고 보여준다. 월 25달러의 Pro와 크레딧 기반 클라우드 렌더링도 소개하지만 이번 제작에는 필요하지 않았다고 드러낸다. [15:23]
• 소개된 오프라인 음악 모델은 비상업용 라이선스이므로 수익화 영상에는 권한을 확보한 음악을 사용하라고 안내한다. 고정한 구버전 이후 미리보기 서버 보안 수정도 나왔으므로 자신의 프로젝트만 열고, 사용 후 종료하며, 변경 사항을 읽고 업데이트하도록 권한다. [15:54]

11. 도구 선택 기준과 마지막 제작 체크리스트

• 에이전트가 띄운 미리보기와 check가 남긴 Chrome이 백그라운드에서 계속 실행될 수 있다. 이어 Remotion은 더 오래된 생태계와 풍부한 템플릿을 갖췄고 React 팀에 적합하다고 비교하며, 영상에서 소개한 인원별 라이선스 조건도 보여준다. [16:29]
• 제품·채널·고객을 위해 출시 영상, 프로모션, 카드, 자막을 반복 제작하는 사람에게 적합하다고 정리한다. 촬영 영상의 컷 편집은 일반 편집기가 필요하며 HyperFrames의 강점은 그 위에 얹는 모션 그래픽이라고 보여준다. [16:53]
• 마지막으로 버전 고정, 텔레메트리 해제, 스킬 설치, 실제 문구와 구체적 시각 요소, 자체 검사, 후속 수정·변형·세로 제작 순서를 되짚어 본다. 테스트한 에이전트 키트와 후속 강의를 안내하고, 시청자가 만들 첫 결과물을 묻는 말과 참여 요청으로 끝낸다. [17:39]

🧾 결론

• 핵심은 한 번의 생성보다 실제 자료 입력, 자동 검사, 수정, 변형 제작으로 이어지는 반복 가능한 작업 흐름이다.
• 출시 영상·프로모션·타이틀 카드·자막처럼 모션 그래픽 중심의 작업에 적합하며, 촬영 영상의 컷 편집에는 일반 편집기가 여전히 필요하다.
• 로컬 도구 자체는 무료로 소개되지만, 실행 환경과 에이전트 이용 조건, 검수 작업까지 포함한 총비용은 별도로 판단해야 한다.
• 에이전트가 검사 결과와 한계를 보고하더라도 실제 제품 정보와 최종 시청 경험의 확인은 사람이 맡아야 한다.

📈 투자·시사 포인트

• 반복적으로 출시 영상이나 고객용 프로모션을 제작하는 팀은 변수와 일괄 렌더링을 활용해 버전별 제작 시간을 줄일 여지가 있다. 영상은 생산성 시연이며 실제 전환율 개선을 입증하지는 않는다.
• 무료 로컬 렌더링과 유료 데스크톱·클라우드 옵션이 함께 제시된다. 도입 시 영상당 요금뿐 아니라 로컬 처리 시간, 운영 편의성, 사용량에 따른 비용을 비교필요가 있다.
• 에이전트가 다룰 수 있는 HTML과 검사 도구의 결합은 문구·색상·장면 수정까지 자동화할 수 있음을 보여준다. 실제 경쟁력은 첫 생성의 속도뿐 아니라 수정과 검증의 안정성에서도 갈릴 수 있다.
• 도구 선택에는 팀의 기존 기술도 영향을 준다. 발표자는 일반 HTML로 시작할 때 HyperFrames를, React 경험과 풍부한 템플릿을 중시할 때 Remotion을 비교 대상으로 제시한다.

⚠️ 불확실하거나 확인이 필요한 부분

• 제작 시간과 파일의 바이트 단위 일치는 발표자의 특정 Mac과 실행 조건에서 관찰된 결과다. 다른 장비·버전에서도 같은 속도와 결과가 나온다는 보장은 제시되지 않았다.
• 시연에 고정한 버전은 0.9.19이며, 녹화 중 최신 버전으로 0.9.33이 언급된다. 문서와 설치 버전의 차이로 일괄 렌더링이 실패했고 이후 보안 수정도 소개되므로, 현재 동작과 옵션은 재확인이 필요하다.
• 달력 날짜, 연속 기록 23일, 차트 높이는 생성된 예시 수치다. 추가 변형에 사용한 두 헤드라인도 발표자가 작성했으며 제품 원문에서 가져온 문구가 아니다.
• 자막 기반 정리: 타임스탬프가 있는 자막을 기준으로 정리했으며, 고유명사·수치·인용은 원문 확인 필요 시 별도 검증한다.
• 영상 속 주장: 발표자의 해석·전망·비교는 확인된 외부 사실이 아니라 영상 속 주장으로 분리해 읽는다.
• 검증 필요: 수치, 기업 실적, 정책·시장 전망은 발행 전 최신 자료로 별도 검증이 필요하다.

✅ 액션 아이템

• Node 22 이상과 FFmpeg를 확인하고 환경 진단에서 Node·FFmpeg·Chrome이 정상인지 점검한다.
• 첫 실행 전 텔레메트리 설정과 사용할 버전을 정하고, 릴리스 변경 사항 및 스킬 보안 검사 결과를 읽는다.
• 홈페이지·가격 페이지·README에서 사용할 실제 문구와 브랜드 자료를 모으고, 각 장면에서 보여줄 시각 요소를 구체적으로 적는다.
• 헤드라인·강조색·프로모션 코드를 변수로 지정하고 lint·check·snapshot을 거쳐 렌더링하도록 요청한다.

❓ 열린 질문

• 자신의 제품 자료로 제작해도 첫 결과와 수정본이 시연 수준의 시간과 품질로 완성되는가?
• 헤드라인과 색상을 바꾼 세 가지 버전 중 실제 시청 유지율이나 전환 성과가 좋은 조합은 무엇인가?
• 다른 장비에서도 동일한 결과가 필요한 경우 Docker 기반 렌더링을 어떻게 검증할 것인가?