일하는 ai

46. Hyperframe AI로 따봉 영상 만드는법

16 min read

-

이 영상은 하이퍼프레임으로 프레젠테이션형 영상을 만들면서, AI 협업 루프를 어떻게 설계해야 완성도가 올라가는지 보여 줍니다. 코드팩토리는 플랜 모드, 검증 루프, 문서화를 한 흐름으로 묶어 설명합니다.

flowchart LR
A[하이퍼프레임 영상 제작] --> B[플랜 모드로 구조 설계]
B --> C[프로젝트·문서·씬 구성 정리]
C --> D[검증 루프와 메모리화로 반복 개선]

핵심 요약

  • 코드팩토리는 하이퍼프레임을 영상 에디팅을 HTML로 할 수 있게 해 주는 툴로 소개하고, 얼굴 없이 목소리와 프레젠테이션형 애니메이션이 들어가는 채널 제작에 잘 맞는다고 설명한다
  • 첫 작업은 바로 코딩이 아니라 플랜 모드에서 시작하며, 여러 프로젝트를 동시에 관리할 수 있는 폴더 구조와 기획 문서 템플릿을 AI가 먼저 설계하도록 시킨다
  • 기획 문서에서 특히 중요한 건 씬별 스크립트, 모션 그래픽 요소, 비주얼 연출, 레이아웃, 핵심 요소, 모션 강조를 명시하는 구조라고 짚는다
  • 완성도를 끌어올리는 핵심은 코드를 쓴 뒤 끝내는 게 아니라, 스냅샷 검증, 싱크 확인, 전체 실행, 렌더 직전 베리피케이션까지 포함한 반복 루프를 AI에게 강제하는 것이다
  • 마지막에는 지금까지의 실수와 해결 과정을 문서화해서 다음 영상부터는 같은 실수를 줄이고 더 빨리 높은 완성도로 가게 만드는 것이 중요하다고 정리한다

왜 지금 중요한가

하이퍼프레임 자체보다 더 흥미로운 건, 코드팩토리가 이걸 하나의 에이전트 협업 문제로 다룬다는 점입니다. 영상 편집도 결국 프레임워크를 잘 고르는 문제만이 아니라, AI가 스스로 계획하고 검증하고 다음 반복에 반영하도록 루프를 닫아 주는 문제라는 거죠. 개발팀 실전 관점에서도 이 방식은 영상 작업뿐 아니라 다른 AI 프로젝트에 그대로 옮겨 갈 수 있습니다.

주요 내용

하이퍼프레임은 HTML 기반 영상 편집 도구로 설명된다

영상 초반에 코드팩토리는 오늘 주제가 하이퍼프레임과 AI를 활용한 영상 편집이라고 말합니다. 그런데 단순히 결과물을 만드는 법보다, 본인이 AI를 어떤 방식으로 활용하고 문제가 생겼을 때 어떻게 협업하는지를 보여 주는 계기로 삼고 싶었다고 먼저 선을 긋습니다.

하이퍼프레임은 HTML로 영상 편집을 할 수 있게 해 주는 도구로 설명됩니다. 헤이젠이 오픈소스로 만든 도구라고 소개하고, 비슷한 계열로 리모션도 언급합니다. 유튜브에서 얼굴 없이 목소리만 나오고 화면에는 프레젠테이션형 애니메이션이 들어가는 AI 테크 채널들이 많은데, 그런 채널들이 바로 이런 계열 도구를 쓴다고 설명하죠. 손으로 다 하려면 오래 걸리지만, 이제는 리모션이나 하이퍼프레임으로 자동화할 수 있기 때문에 이런 채널이 빠르게 늘고 있다고 말합니다.

첫 단계는 코딩보다 플랜과 구조 설계다

코드팩토리는 처음 작업할 때는 당연히 플랜 모드로 가는 게 가장 좋다고 말합니다. 여기서 중요한 원칙도 같이 줍니다. 사용자가 직접 결정하고 싶은 것은 정확히 말해 주고, 반대로 AI가 알아서 결정해도 되는 건 그건 네가 결정해라고 명시하는 편이 좋다는 겁니다.

실제 요청도 꽤 구체적입니다. 하이퍼프레임을 사용해 영상을 편집하는 프로젝트를 만들되, 여러 프로젝트를 동시에 관리할 수 있게 폴더 구조를 알아서 정하고, 사용자는 목소리를 MP4로 녹음해 전달하고, 읽을 스크립트는 AI가 만들고, 얼굴 없이 모션 애니메이션으로 영상을 만들어 달라고 지시합니다. 그리고 기획 단계에서 어떤 식으로 편집할지, 어디에 어떤 씬이 들어갈지 정확히 명시해 달라고 요청하죠.

약 5분 뒤 플랜이 나오고, 여기서 코드팩토리가 가장 먼저 보는 건 폴더 구조입니다. 템플릿 폴더에는 여러 프로젝트에 공통으로 들어갈 요소, 예를 들면 톤, 색상, 폰트 같은 것이 들어가고, 프로젝트 폴더 아래에는 제목별로 실제 작업 단위와 컴포지션이 들어가는 형태라고 해석합니다. 여러 프로젝트를 독립적으로 운영할 수 있느냐가 핵심이었는데, 이 요구에 맞게 잘 나왔다고 평가합니다.

기획 문서에서 중요한 건 씬 단위 구조다

보이는 자막 기준으로 중간 구간에서 코드팩토리가 특히 강조하는 건 문서 템플릿입니다. 쉽게 말해 기획서인데, 여기에는 개요와 씬 요약이 들어가고, 더 중요한 것은 씬별로 스크립트와 모션 그래픽 요소를 어떻게 정리할지라는 겁니다.

또 비주얼 연출, 레이아웃, 핵심 요소, 모션 강조 같은 항목이 제대로 들어가 있는지도 확인합니다. 영상 프로젝트에서 중요한 것은 결국 어디까지 정보를 줄 것인지, 어떤 수준으로 AI에게 구조적 제약을 줄 것인지라는 맥락이 여기서 드러납니다. 단순히 영상 만들어 줘가 아니라, 씬 단위로 기획이 풀린 문서가 있어야 이후 반복이 가능하다는 뜻입니다.

완성도를 올리는 핵심은 검증 루프를 닫는 것이다

후반부에서 가장 실전적인 내용은 검증 루프입니다. 코드팩토리는 하이퍼프레임이 프레임별 스냅샷, 즉 스크린샷을 찍는 기능을 제공한다고 말합니다. 이를 이용해 의도한 컴포넌트가 의도한 위치에 있는지 자동으로 확인할 수 있고, 특정 단어가 나오는 순간에 싱크가 맞는지 확인할 수 있으며, 처음부터 끝까지 전부 실행한 뒤 렌더링 직전에 베리피케이션하는 흐름을 추천한다고 설명합니다.

이 부분이 중요합니다. 코드를 썼으니까 다 됐어요. 확인해 주세요가 아니라, AI가 먼저 실행하고 서버에서 다시 확인하고, 잘못된 걸 파악해 수정하고, 원래 플랜에 가까워질 때까지 계속 루프를 돌게 해야 한다는 거죠. AI 입장에서 충분히 확신이 생겼을 때만 사람에게 최종 확인을 요청하도록 만드는 방식입니다.

코드팩토리는 이런 루프를 플레이라이트 MCP가 나왔을 때부터 계속 강조해 왔다고 말합니다. 어떤 프로젝트든 이 검증 루프를 주입해야 AI가 지속적으로 완성도를 끌어올릴 수 있다는 주장입니다. 그리고 만약 지금 쓰는 프레임워크로 이게 불가능하다면, 가능한 프레임워크로 바꾸라고까지 말합니다.

마지막 작업은 메모리화다

영상 마지막에 코드팩토리는 지금까지 소통하면서 겪은 문제, 어려웠던 점, 해결한 점을 전부 정리해 문서로 남기라고 말합니다. 하이퍼프레임으로 어떤 식으로 모션 그래픽을 만들어야 하는지, 다음에는 한 번에 수월하게 작업하려면 무엇을 지켜야 하는지 상세하게 정리해 달라고 AI에게 요청하는 흐름이죠.

이렇게 해 두면 첫 번째 영상을 만드는 데는 오래 걸려도, 두 번째 영상부터는 이런 문제가 생길 수 있으니 순서대로 이렇게 작업해라는 명확한 인스트럭션을 줄 수 있게 됩니다. 코드팩토리는 이걸 에이전팅 루프를 클로징하는 일이라고 설명하고, 한 번 제대로 닫아 놓으면 그다음부터는 그 루프가 계속 돌아가도록 만들 수 있다고 말합니다.

마지막 메시지도 분명합니다. AI가 못 한다고 불평할 게 아니라, 원하는 완성도가 나올 때까지 휴먼 인 더 루프로 루프를 닫아 주고, 그 프레임 안에서 다음 프로세스를 돌리게 해야 한다는 겁니다. 그래서 주니어를 다루는 것과 비슷하다고 표현합니다. 결국 원하는 AI를 직접 쉐이핑해 나가는 과정이라는 거죠.

원문 발화 하이라이트

  • [01:21] “영상 에디팅을 우리가 HTML로 할 수 있게 해 주는 툴이라고 생각하시면 될 것 같아요.”
  • [02:11] “우리가 처음 작업을 할 땐 당연히 플랜 모드로 작업을 해 주는게 제일 좋겠죠.”
  • [04:17] “신별로 우리가 어떤 식으로 스크립트와 실제 우리가 모션 그래픽을 넣을 요소들을 정리를 할지가 중요하거든요.”
  • [17:45] “렌더링 직전에 우리가 베리피케이션을 하는 거를 추천을 한다라고 얘기를 하고 있어요.”
  • [18:06] “원래 플랜에 가까워질 수 있도록 계속 무한해서 루프를 돈 다음에”
  • [20:04] “앞으로 우리가 똑같은 실수를 하지 않도록 하고 앞으로는 한 번에 완성도 높은 결과물이 나오도록 하는게 포인트야.”

바로 실행해 보기

  • 하이퍼프레임이나 비슷한 영상 자동화 도구를 쓸 때는 바로 코드부터 쓰지 말고, 먼저 폴더 구조, 공통 템플릿, 프로젝트 단위 컴포지션, 씬별 기획 문서를 AI에게 설계하게 해 보세요. 이 영상의 첫 승부처도 그 구조를 먼저 잡는 데 있었습니다
  • 영상 기획 문서를 만들 때는 씬마다 스크립트, 모션 그래픽 요소, 비주얼 연출, 레이아웃, 핵심 요소, 모션 강조를 나눠 적어 보세요. 막연한 요청보다 이런 구조화가 있어야 나중에 수정 루프가 훨씬 빨라집니다
  • 작업이 끝났다고 바로 검토 요청하지 말고, 프레임 스냅샷 확인, 단어 싱크 확인, 전체 실행, 렌더 직전 베리피케이션까지 AI가 먼저 돌게 해 보세요. 그리고 마지막에는 이번 작업에서 틀렸던 점과 해결법을 룰이나 메모리 파일로 남겨 다음 영상의 기본 프롬프트로 재사용하는 게 좋습니다

참고

영상 메타

수집 품질

  • 자막 세그먼트: 695개
  • 자막 문자수: 12717자
  • 챕터 추출: 0개
  • 콘텐츠 생성: Subagent 기반

AI 생성 도구를 활용해 초안을 구성했고, 원영상 발화와 공개 자료를 교차 확인해 정리했습니다.

그래프 뷰

백링크