Hyperframe + AI로 따봉 영상 만드는법
📺 원본 영상: Hyperframe + AI로 따봉 영상 만드는법 🎙️ 채널: 코드팩토리 📅 정리 일자: 2026-04-28 ⚠️ Note: 본 리포트는 영상의 음성을 텍스트로 변환(STT)하여 정리한 것입니다. 화면에 표시된 자료(차트, 코드, 슬라이드 등)는 포함되지 않을 수 있습니다.
개요
이 영상은 코드팩토리 채널의 운영자가 Hyperframe이라는 HTML 기반 영상 편집 툴과 AI를 결합하여 모션 그래픽 영상을 자동으로 제작하는 전 과정을 실시간으로 보여준다. 단순한 툴 소개에 그치지 않고, AI와 협업할 때 어떤 철학과 방법론을 가져야 하는지, 특히 Agentic AI와 효과적으로 협업하기 위한 “에이전틱 루프(Agentic Loop)“의 개념과 설계 원칙을 구체적인 사례를 통해 전달한다.
Hyperframe이란 무엇인가
Hyperframe은 영상 편집을 HTML 코드로 처리할 수 있게 해주는 오픈소스 툴이다. AI 아바타 제작으로 유명한 스타트업 Heygen이 오픈소스로 공개했으며, 비슷한 툴로는 Remotion이 있다. 이 툴의 핵심 가치는 프레젠테이션 스타일의 모션 애니메이션 영상을 코드로 자동화할 수 있다는 점이다.
강연자는 유튜브에서 얼굴 없이 목소리만 나오면서 화면에 애니메이션이 등장하는 AI 테크 채널들 대부분이 Hyperframe 또는 Remotion을 사용한다고 설명한다. 손으로 직접 모션 그래픽을 편집하면 엄청난 시간이 소요되지만, 이 툴들을 활용하면 자동화가 가능하기 때문에 그런 채널들이 빠르게 증가하고 있다는 것이다. 코드로 영상을 만든다는 개념이 낯설 수 있지만, 실제 영상 편집 소프트웨어에서도 “Composition(컴포지션)“이라는 개념을 동일하게 사용한다는 점에서 그 연장선상에 있다.
Agentic AI의 이해: 한 번 지시하면 스스로 완성한다
영상은 Agentic AI에 대한 개념 정리로 시작한다. 기존 AI가 한 번 묻고 한 번 답하는 방식이라면, Agentic AI는 스스로 계획을 세우고 도구를 사용하며 결과를 검증한 뒤 목표가 달성될 때까지 반복하는 구조를 가진다. 강연자는 Agentic AI의 4가지 핵심 요소를 다음과 같이 제시한다.
- 목표 분해(Goal Decomposition)
- 도구 사용(Tool Use)
- 자기 검증(Self-Verification)
- 장기 기억(Long-term Memory)
이 4가지는 단순한 분류가 아니라, AI가 단발성 응답자가 아닌 “일하는 동료”로 기능하기 위한 최소 조건이기도 하다. 시장 전망도 함께 제시된다. Gartner는 2028년이면 기업 의사결정의 15%를 AI 에이전트가 자동으로 처리할 것으로 예측했고, 시장 규모는 2030년까지 연평균 45%씩 성장할 것으로 전망된다고 강연자는 인용한다. 이미 고객 응대, 코드 작성, 시장 조사처럼 사람의 하루치 일을 몇 분 만에 끝내는 에이전트들이 실제로 운영 중이며, 강연자는 “AI는 이제 답하는 도구가 아니라 일하는 동료”라고 정의한다.
Plan Mode: AI 협업의 출발점
Hyperframe 프로젝트를 시작하면서 강연자가 가장 먼저 강조하는 것은 플랜 모드(Plan Mode)로 작업을 시작하라는 것이다. AI에게 요청할 때 자신이 확실히 결정한 사항은 명확히 지시하고, AI가 스스로 결정해도 되는 요소는 “네가 결정해”라고 명시적으로 위임하는 것이 협업 효율을 극대화하는 핵심이라고 강조한다. 이 단순한 원칙 하나가 AI 협업에서 상당한 차이를 만들어낸다는 것이다.
이번 프로젝트의 초기 요청은 이렇게 구성되었다. Hyperframe을 사용한 영상 편집 프로젝트를 구성하되, 여러 프로젝트를 동시에 관리할 수 있는 폴더 구조는 AI가 스스로 설계하도록 했다. 또한 MP4 녹음 파일을 제공하면 AI가 직접 스크립트를 작성하고, 얼굴 없이 모션 애니메이션으로 영상을 완성하도록 요청했다. 기획 단계에서는 어떤 씬이 어느 순간에 들어가야 할지, 비주얼 연출과 레이아웃은 어떻게 구성할지를 정확히 명시해달라고 요청했다. AI에게 요청한 내용을 구조화된 형식으로 정리해서 입력하면 플랜이 잘 정돈되어 나오기 때문에 그 방식이 유용하다고 강연자는 덧붙인다.
03:12 - AI가 생성한 프로젝트 폴더 구조 화면 - templates, assets, shared, projects 폴더 구성
04:09 - AI가 생성한 기획 문서 템플릿 - 씬별 스크립트, 비주얼 연출, 레이아웃, 핵심 요소 모션 강조 항목 포함
생성된 플랜에는 공통 Template(템플릿), Asset(에셋), 색상 톤, 공유 폰트, 그리고 각 프로젝트별 독립 Composition(컴포지션) 파일이 포함되었다.
09:20 - Agentic AI 소개 영상 기획 플랜 - 6개 씬, 카운트업 숫자, 막대 그래프, 아이콘 캐러셀, CTA 포함
강연자는 여러 번 플랜을 수정하며 리파이닝(Refining)하는 과정이 당연하다고 강조하며, 시간을 충분히 투자할수록 최종 결과물의 완성도가 높아진다고 반복적으로 말한다. “플랜을 완성하는 데 걸리는 시간은 낭비가 아니라 투자”라는 메시지다.
SRT와 Whisper: AI에게 정확한 컨텍스트 제공하기
프로젝트에서 가장 기술적으로 중요한 부분은 음성 타이밍과 모션 그래픽을 정확히 동기화하는 것이다. 강연자는 녹음된 MP4 파일을 그대로 AI에게 전달하면 AI가 “몇 초에 어떤 이야기를 하고 있는지”를 정확히 파악할 수 없다는 점을 지적한다. 기획서 안에 스크립트가 있어서 어느 순간에 어떤 이야기를 하는지 대략적으로는 알 수 있지만, 실제로 녹음한 사람이 기획과 정확히 같은 타이밍으로 말했다는 보장이 없기 때문이다. 이를 해결하기 위해 SRT(자막 파일) 형식의 타임스탬프 데이터를 함께 제공하는 방식을 채택했다.
SRT 파일을 생성하는 방법으로는 두 가지가 제시된다. 첫 번째는 Hyperframe과 Whisper CLI를 결합하여 완전히 자동화하는 방법이다. Whisper는 OpenAI가 오픈소스로 공개한 음성 인식 모델로, Hyperframe은 Whisper CLI와의 연동이 기본적으로 지원되어 있어 바로 사용 가능하다. 두 번째는 Vrew(브류)라는 툴을 사용하는 방법인데, Vrew는 한 달에 약 1시간 30분 정도 무료로 사용할 수 있으며, 영상을 드래그앤드롭하면 자동으로 SRT를 추출할 수 있다. Vrew 역시 내부적으로 Whisper를 사용하며, Whisper가 음성 인식 정확도가 가장 높기 때문에 그대로 사용하는 것을 권장한다.
Whisper 모델의 경우 Small, Medium, Large 버전이 있는데, 강연자는 Large v3 모델이 가장 성능이 좋다고 권장한다. 모델 파일 크기가 약 3GB 정도로 부담스럽지 않은 수준이므로, 하드웨어 사양이 충분하다면 로컬에서도 충분히 실행 가능하다.
07:01 - Whisper 모델 선택 옵션 화면 - Small, Medium, Large 버전 및 한국어 설정
STT 검증 단계도 중요하게 다뤄진다. 강연자는 Whisper로 변환된 텍스트를 LLM에게 다시 검증시켜 잘못 인식된 표현들을 교정하도록 요청했다. 특히 한국어 음성의 경우 일부 단어가 어색하게 변환될 수 있어, LLM이 맥락을 파악해 올바른 표현으로 수정하도록 하면 완성도를 한 단계 더 끌어올릴 수 있다. 이 검증 과정을 통해 생성된 transcript.json에는 몇 초에 어떤 발화가 있었는지 타임스탬프와 함께 상세하게 기록된다.
12:08 - 생성된 transcript.json 파일 구조 - 타임스탬프별 발화 내용이 매핑된 형태
핵심 교훈 1: AI와 같은 컨텍스트를 공유하라
강연자가 이 영상에서 가장 강조하는 철학적 원칙 중 하나는 “AI와 나는 동일한 컨텍스트 안에 있어야 한다”는 것이다. 단순히 MP4 파일이나 이미지를 전달하는 것만으로는 부족하다. AI는 우리가 보고 듣는 것과 동일한 방식으로 그 파일을 이해할 수 없기 때문이다.
예를 들어, 영상 파일 하나를 AI에게 전달했다고 해서 AI가 “몇 초에 어떤 발화가 있었고, 그 순간에 어떤 모션 그래픽이 필요한지”를 정확히 파악할 수는 없다. 반면 SRT와 transcript.json 같은 구조화된 데이터를 함께 제공하면, AI가 영상의 타임라인을 정확히 이해하고 그에 맞는 작업을 수행할 수 있다. 강연자는 이 원칙을 “첫 번째 레슨”이라고 명시하며, AI에게 충분한 컨텍스트를 어떤 형태로든 제공하는 것이 성공적인 AI 협업의 출발점이라고 말한다.
이 원칙은 영상 프로젝트에만 국한되지 않는다. 웹사이트 개발 시 와이어프레임 화면을 캡처해 AI에게 제공하거나, 이미지 생성 시 결과물을 다시 AI에게 주입해 요소 위치를 파악하게 하는 방식 모두 동일한 원칙에서 출발한다. AI에게 제공할 수 있는 정보의 형태와 품질에 따라 협업의 정확도가 달라지며, 이것이 결국 결과물의 완성도를 결정짓는다. 강연자는 이를 AX(AI Experience)라는 개념으로 확장하는데, AI가 우리의 프롬프트를 이해하고 작업하기 편한 환경을 설계하는 능력이 앞으로의 핵심 기술 역량이 된다는 것이다.
핵심 교훈 2: 코드 수정과 결과물은 다르다 - 검증 루프의 필요성
소프트웨어 개발 배경이 없는 사람들에게는 다소 의아하게 들릴 수 있는 원칙이 하나 있다. 바로 코드를 수정했다고 해서 결과물이 의도한 대로 나온다는 보장이 없다는 것이다. 수정된 코드는 전체 시스템의 일부에 불과하며, 그 수정이 수많은 의존성에 연쇄적으로 영향을 주어 결과물이 예상과 완전히 달라질 수 있다. 강연자는 이것이 AI와 협업할 때만 발생하는 문제가 아니라, 개발자들 사이에서도 언제나 존재하는 현실이라고 말한다.
14:22 - Hyperframe으로 생성된 Agentic AI 소개 영상 첫 번째 프리뷰 결과 - 보이스오버와 타이밍 어긋남 확인
그렇기 때문에 “AI에게 이렇게 수정하라고 했는데 왜 결과물이 다르냐”고 불평하는 것은 잘못된 접근이다. 대신, AI가 스스로 결과물을 확인하고 수정할 수 있는 루프(Loop)를 만들어 주는 것이 인간이 해야 할 역할이다. AI에게 “네가 수정한 게 이렇게 나왔는데, 이게 네가 생각한 게 맞아?”라고 확인하는 루프, 그리고 AI가 직접 서버를 실행하고 결과를 확인하며 자동으로 이터레이션(Iteration)하는 루프가 설계되어 있어야 비로소 효율적인 Agentic 작업이 가능해진다.
이번 Hyperframe 프로젝트에서는 이 검증 루프로 3단계 게이트(Gate)가 설계되었다. 첫 번째는 레이아웃 스냅샷(Layout Snapshot)으로, Hyperframe이 제공하는 프레임별 스크린샷 기능을 활용해 의도한 컴포넌트들이 올바른 위치에 있는지 자동으로 확인한다. 두 번째는 동기화 검증으로, 특정 단어가 발화되는 순간과 해당 모션 그래픽이 화면에 등장하는 타이밍이 맞는지 확인한다. 세 번째는 전체 렌더링 전 검증(Verification)으로, 처음부터 끝까지 전체 영상을 실행한 뒤 렌더링 직전에 최종 확인을 수행한다. 이 루프를 통해 AI는 “코드 수정 → 실행 → 결과 확인 → 재수정”을 스스로 반복하며 완성도를 끌어올린다. 강연자는 이 검증 루프가 Playwright MCP가 등장한 시점부터 자신이 계속 강조해온 개념이라고 언급했다.
💡 [영상 참조] 강연자는 약 [17:19] 시점에서 AI가 추천한 3단계 검증 게이트 내용을 화면에 보여주며 설명합니다. 📺 원본 영상에서 확인하세요.
19:20 - 검증 루프 적용 후 수정된 최종 영상 프리뷰 - 보이스오버와 모션 그래픽 타이밍 개선 결과
AX(AI Experience): 새로운 기술 선택 기준
강연자는 프레임워크 선택 기준이 이제 달라져야 한다고 주장한다. 과거에는 DX(Developer Experience, 개발자 경험)를 중시해 좋은 DX를 제공하는 프레임워크를 선택하라고 강조했다면, 이제는 AX(AI Experience), 즉 AI가 작업하기 편한 환경을 제공하는 프레임워크를 선택해야 한다는 것이다. 여기서 말하는 AX는 일반적으로 알려진 “AI Transformation”과는 다르며, AI가 우리 프롬프트를 이해하고 작업을 수행하기 편한 구체적인 기술 환경을 뜻한다.
이는 단순한 유행어가 아니다. Agentic AI가 실제로 코드를 작성하고, 검증하고, 수정하는 주체가 되는 환경에서, AI가 맥락을 파악하기 어렵거나 검증 루프를 돌리기 힘든 구조의 프레임워크를 사용하면 그 자체가 병목(Bottleneck)이 된다. 강연자는 이 이유로 자신의 기술 스택이 크게 변화했다고 고백하며, Agentic Loop가 동작할 수 없는 프레임워크는 그것이 가능한 대안으로 대체해야 한다고 강조한다. 좋은 툴과 나쁜 툴의 기준이 “인간이 쓰기 편한가”에서 “AI가 작업하기 편한가”로 이동하고 있다는 것이다.
에이전틱 루프의 완성과 문서화
강연자는 첫 번째 영상 제작이 완료된 후, 그 과정에서 겪었던 어려움과 문제들을 AI에게 정리시켜 상세한 가이드 문서로 남길 것을 강력히 권장한다. 어떤 순서로 작업해야 하는지, 어떤 실수를 피해야 하는지, Hyperframe의 어떤 기능을 어떻게 활용해야 하는지를 AI 메모리 파일 또는 룰(Rule) 파일 형태로 저장해두면, 다음 프로젝트부터는 AI가 처음부터 그 인스트럭션(Instruction)을 기반으로 작업을 시작할 수 있기 때문이다.
이것이 바로 에이전틱 루프를 “클로징(Closing)“하는 방법이다. 처음 루프를 닫는 데까지는 상당한 시간과 노력이 필요하지만, 한 번 루프가 완성되고 나면 그 루프가 무한히 반복 가능하도록 만들어낼 수 있다. 두 번째 영상을 만들 때는 첫 번째 프로젝트에서 정리된 인스트럭션이 있으므로, “이런 과정이 있었고 이런 문제들이 생길 수 있으니 이 순서대로 작업해줘”라고 명확히 지시하는 것만으로 처음보다 훨씬 수월하게 진행된다.
강연자는 이 과정을 Junior(주니어) 개발자를 온보딩하는 과정과 같다고 비유한다. AI를 원하는 방향으로 “셰이핑(Shaping)“해 나가는 것, 그리고 Human in the Loop(휴먼인더루프)로서 에이전틱 루프를 직접 설계하고 닫는 것이 소프트웨어 엔지니어링의 일부라는 것이다. 한 번에 되지 않는다고 불평하는 것이 아니라, 반복적으로 개선해나가는 과정 자체를 설계하는 능력이 AI 시대의 핵심 역량이 된다.
마무리 / 핵심 정리
이 영상의 핵심 메시지는 Hyperframe이라는 특정 툴의 사용법을 넘어선다. AI와 협업하는 방식 자체에 대한 철학적 전환을 제안한다는 점에서 더 큰 의미를 가진다. 한 번에 완벽한 결과물이 나오기를 기대하는 것은 잘못된 기대이며, 오히려 한 번에 안 되는 것이 당연하다. 중요한 것은 AI가 스스로 결과를 검증하고 개선할 수 있는 환경, 즉 에이전틱 루프를 인간이 직접 설계해주는 것이다.
AI가 제대로 된 답을 내놓지 못할 때, 문제는 AI의 능력이 아니라 인간이 제공한 컨텍스트의 불충분함이거나 검증 루프의 부재일 가능성이 높다. 강연자가 말하는 Human in the Loop는 AI를 감시하는 것이 아니라, AI가 최고의 결과를 낼 수 있도록 환경을 설계하고 방향을 제시하는 역할이다. 첫 번째 루프를 닫는 데 충분히 투자하고, 그 과정을 문서로 남기며, 다음 루프부터는 그 위에서 시작하는 것, 이것이 이 영상이 전달하는 Agentic AI 협업의 본질이다.
📚 출처 및 참고
| 구분 | 내용 |
|---|---|
| 원본 영상 | Hyperframe + AI로 따봉 영상 만드는법 |
| 채널 | 코드팩토리 |
| 리포트 작성 | 2026-04-28 |
| 작성 방식 | YouTube 영상 STT 변환 후 에디팅 |
💬 본 리포트는 영상 내용을 바탕으로 재구성되었습니다. 정확한 내용은 원본 영상을 참조해 주세요.