편집 프로그램 없이 HTML로 영상 만드는 노션 AI 스킬 - HyperFrames

오픈소스 프레임워크 HyperFrames를 노션 AI 환경에 맞게 재구성한 에이전트 스킬입니다. HTML 코드로 타이틀 카드·자막·오디오 반응 영상을 만들고 MP4로 렌더링합니다. 복제 링크 포함.

Jul 6, 2026
편집 프로그램 없이 HTML로 영상 만드는 노션 AI 스킬 - HyperFrames
📌
영상 하나 만들려고 편집 프로그램부터 설치하고 계신가요?
타이틀 카드, 자막, 소개 영상까지 노션 페이지에 써둔 내용 그대로 노션 AI가 영상으로 만들어 MP4 파일로 건네줍니다. 프리미어도 애프터이펙트도 필요 없고, 스킬 페이지 하나 복제하면 세팅은 5분이면 끝나요.

이 글에서 배울 내용 ⏳ 읽기 4분
  • 노션 페이지 내용으로 영상 만드는 프롬프트 예시
  • 원하는 폰트를 영상에 적용하는 방법
  • 복제 링크와 세팅 방법

몇십 초짜리 영상, 만들려면 일이 커집니다

수업 인트로, 행사 오프닝, 유튜브 타이틀 카드. 필요한 건 고작 10초, 20초짜리인데 만드는 과정은 만만치 않아요. 편집 프로그램은 무겁고 구독료도 나가죠.
저도 인트로 영상 하나 만들다가 반나절을 날린 적이 있습니다. 그러다 만난 게 "HTML을 쓰면 그게 곧 영상"이라는 발상의 오픈소스 프레임워크, HyperFrames예요. 이걸 노션 AI 에이전트 환경에 맞게 재구성해서 스킬로 쓰고 있습니다. 결과물 예시 한 번 구경해보실래요?

HyperFrames 스킬이 만들어 주는 영상

따로 대본을 쓸 필요가 없어요. 이미 노션에 정리해 둔 페이지를 열고 말만 하면, 노션 AI가 페이지 내용을 읽고 영상을 만들어 MP4 파일로 건네줍니다.
  1. 수업·강의 인트로: 보고 있는 수업 페이지 내용으로 타이틀 카드를 만들어요.
  2. 프롬프트 예시 - 지금 보고 있는 수업 설계 페이지 내용으로 인트로 타이틀 카드 만들어줘. 10초 분량, 다크 톤으로.
  3. 페이지 요약 영상: 긴 페이지에서 핵심만 뽑아 자막이 흐르는 영상으로 만들어요.
  4. 프롬프트 예시 - 이 페이지 내용을 핵심 3가지로 요약해서 자막 영상으로 만들어줘.
  5. 공지·안내 영상: 공지 페이지를 멘션하면 그 내용으로 짧은 안내 영상을 만들어요.
  6. 프롬프트 예시 - @2학기 학사일정 안내 페이지 내용으로 15초 공지 영상 만들어줘.
  7. 씬 전환이 있는 소개 영상: 페이지의 소제목 순서대로 장면을 나눠 이어 붙여요.
  8. 프롬프트 예시 - 이 프로젝트 페이지를 소제목 기준으로 씬 4개로 나눠서 소개 영상 만들어줘. 씬 사이는 부드럽게 전환.
💡
팁 — 원하는 폰트로 만들고 싶다면: 두 가지 방법이 있어요.
  • 영상을 요청할 때 채팅에 폰트 파일(ZIP)을 함께 올리기
  • 자주 쓰는 폰트 파일을 데이터베이스에 모아두고, 요청할 때 원하는 폰트 페이지를 멘션하기
학교나 채널의 고정 색·폰트가 있다면 design.md 파일 하나만 만들어 두세요. 영상 만들 때마다 색과 폰트를 다시 설명하지 않아도 됩니다.

HTML로 만든다는데, 코딩은 몰라도 됩니다

속을 열어보면 HTML 파일 하나가 영상의 설계도 역할을 하는데요, 솔직히 이 원리는 몰라도 쓰는 데 아무 지장이 없습니다. 기억할 건 딱 하나예요. 노션 AI에게 ‘말로’ 지시하면 된다는 것!
"3번 장면만 2초 늘려줘", "제목 색을 학교 상징색으로 바꿔줘"처럼 채팅으로 말하면 그대로 반영됩니다. 렌더링까지 노션 AI 안에서 알아서 끝나니, 외부 서비스 가입도 별도 프로그램 설치도 필요 없어요.

오픈소스 HyperFrames를 노션용으로 재구성했습니다

HyperFrames는 HeyGen이 공개한 무료 오픈소스 도구예요. 렌더링 횟수 제한도, 상업적 사용 조건도 없이 자유롭게 쓸 수 있습니다. 원본이 궁금한 분만 여기를 살펴보세요.
원래는 개발자용 도구지만, 이 글의 스킬은 그걸 노션 AI 환경에 맞게 재구성한 버전입니다. 터미널을 한 번도 열어본 적 없는 분도 노션 페이지 하나로 부담 없이 쓸 수 있어요.

복제해서 시작하기

복제 링크는 여기예요: HyperFrames 스킬 복제하기
페이지를 복제해서 본인 워크스페이스의 스킬 모음, 또는 AI 지침이 참조하는 위치에 넣으면 준비가 끝납니다.
💡
: 이 스킬 페이지에는 참고 자료 번들(ZIP)이 첨부되어 있습니다. 스크립트가 포함된 스킬을 노션에서 쓰는 방법이 낯설다면 노션 AI 에이전트 스킬 ZIP 사용 가이드를 먼저 읽어보세요.
편집 프로그램과 씨름하던 시간을 아끼면, 영상에 담을 내용을 고민할 시간이 생깁니다. 부담 없이 복제해서 써보세요. 🐱