말로 장면을 만들고
내 목소리에 화면을 맞춥니다
클로드가 대본과 움직이는 웹 장면을 만들고 HyperFrames가 그 장면을 영상 파일로 바꿉니다. 사람은 주제를 정하고 대본을 확인한 뒤 직접 녹음합니다. 원리를 이해하고 작은 시험 영상부터 한 편 제작으로 넓혀 보세요.
HTML·CSS로 글자와 그림을 배치합니다. 말로 수정할 내용을 설명하면 클로드가 장면 코드를 고칩니다.
이 작업실은 직접 녹음한 길이와 구절 시점을 보고 화면을 맞춥니다. 자동 계산 뒤에는 청취와 보정이 필요합니다.
스킬 인식·실행 환경·렌더를 작은 샘플로 확인합니다. 설치만 끝내고 바로 긴 영상을 맡기지 마세요.
목차
01웹페이지를 시간에 맞춰 찍으면 영상이 됩니다
HyperFrames는 HeyGen이 공개한 HTML 기반 영상 프레임워크입니다. 클로드 같은 AI 에이전트가 HTML·CSS와 애니메이션으로 장면을 작성하면 HyperFrames가 브라우저에서 정해진 시점의 화면을 한 장씩 캡처합니다. 이어 FFmpeg로 MP4를 만듭니다. 공식 원리 설명
시간에 따른 움직임
프레임별 시점으로 이동
영상 파일로 변환
이 작업실의 영상 규격은 1920×1080, 초당 30프레임입니다. 3분 영상이라면 30 × 180 = 5,400프레임을 만듭니다. 이는 프레임 수 계산이며 렌더 속도를 뜻하지 않습니다.
코드로 남은 장면은 수정과 재사용이 쉽습니다. 제목이 늦게 나타나거나 그림이 작다면 클로드에게 해당 장면의 위치·크기·등장 시점을 설명합니다. 애니메이션은 정확한 시점으로 이동할 수 있게 만들어야 합니다. 폰트·미디어도 준비해야 렌더에서 의도한 화면이 나옵니다.
HyperFrames의 오픈소스 라이선스는 Apache-2.0이며 로컬 엔진의 렌더당 요금은 없습니다. 클로드 구독과 선택적으로 사용하는 생성 서비스·클라우드 렌더 서비스의 비용은 따로 확인하세요. 공식 저장소와 비용 범위
02사람의 판단과 도구의 실행을 나눕니다
사람은 무엇을 전달할지 정하고 결과를 확인합니다. 클로드는 조사·기획·장면 코드를 맡고 HyperFrames는 재생과 렌더를 수행합니다. 원본 작업실은 여기에 직접 녹음, 구절 시점 계산, 음악 합성, 썸네일 제작 절차를 더했습니다.
| 담당 | 맡기는 일 | 끝났는지 확인할 결과 |
|---|---|---|
| 사람 | 주제·대상·목적 결정, 대본 검토, 직접 녹음, 최종 확인 | 사실·표현·목소리·화면이 의도와 맞는가 |
| 클로드 | 자료 조사, 장면별 대본, HTML 장면 작성과 수정 | 출처가 있는 대본과 편집 가능한 프로젝트 |
| HyperFrames | 장면 재생, 프레임 캡처와 영상 렌더 | 재생되는 MP4와 오류 없는 출력 |
| 작업실 전용 도구 | 녹음 분석, 구절 타이밍 계산, 음악·효과음 합성, 반복 실행 | 해당 프로젝트에 맞는 싱크와 오디오 |
제작 절차를 읽는 지침
파일·검토 규칙
필요에 따라 추가
원본은 밝은 종이 배경, 검은 손그림 선, 파란 강조색, 세 캐릭터를 쓰는 설명 영상입니다. 채팅·폴더·터미널 화면은 그림으로 재현한 목업입니다. 실제 앱의 메뉴 위치를 보여 주는 화면으로 받아들이지 마세요. 업무 교육, 개념 설명, 제품 안내처럼 글자와 도식이 중심인 영상에서 이 방식을 먼저 시험해 볼 만합니다.
03설치 경로를 고르고 10초부터 확인하세요
클로드를 사용하는 환경, HyperFrames 지침, 렌더할 실행 환경, 작업 폴더가 필요합니다. 녹음이 있는 영상을 만들 때는 녹음 장치와 음성 파일도 필요합니다. 처음에는 글자 하나가 나타나는 10초 영상으로 파일 저장과 렌더를 확인하세요.
| 항목 | 공식 안내의 조건 | 처음 확인할 것 |
|---|---|---|
| 클로드 Skills | Free·Pro·Max·Team·Enterprise에서 제공, 코드 실행 활성화 필요 | 스킬이 활성화되고 지침을 읽는가 |
| Cowork와 폴더 연결 | Pro·Max·Team·Enterprise, 로컬 폴더 접근에는 열린 macOS·Windows 데스크톱 앱 필요 | 연결한 작업 폴더의 파일을 읽고 저장하는가 |
| 공식 HyperFrames 설치 | Claude Code 등 지원하는 코딩 에이전트 경로 | 사용 중인 도구의 플러그인 또는 스킬 목록에 있는가 |
| 로컬 렌더 | Node.js 22 이상·npm, 렌더용 FFmpeg와 브라우저 실행 환경 | 설치된 프로그램과 실제 MP4 출력 |
2026-10-11 기준 Pro·Max의 새 Cowork 작업은 클라우드에서 실행됩니다. 연결한 로컬 폴더에 접근하려면 데스크톱 앱이 열려 있어야 합니다. 클로드 공식 실행 조건을 확인하세요. 원본 작업실도 이 Mac의 브라우저 실행 제약으로 클라우드에서 렌더했습니다.
Claude Code의 공식 설치 예시
다음은 터미널에서 사용하는 Claude Code 명령입니다. 일반 클로드 채팅창에 입력하는 명령과 구분하세요. 설치 후 새 세션을 시작하거나 플러그인을 다시 불러옵니다. 공식 플러그인 설치
claude plugin marketplace add heygen-com/hyperframes
claude plugin install hyperframes@hyperframes
claude plugin details hyperframes플러그인 대신 지원되는 환경에 standalone 스킬을 설치할 때는 npx skills add heygen-com/hyperframes에서 Core Skills 묶음을 선택합니다. 비대화형 설치·갱신에는 npx hyperframes skills update를 안내합니다. Standalone 공식 안내
이 설치가 일반 Claude Desktop·Cowork에 자동 등록되는 공식 경로는 확인되지 않았습니다. 해당 환경은 스킬 업로드·폴더 지침과 실제 실행 가능 여부를 별도로 확인해야 합니다. 아래 예시는 필요한 환경이 준비된 뒤 사용하는 요청입니다.
HyperFrames 지침을 읽고 1920×1080, 30fps의 10초 시험 영상을 만들어 줘. 밝은 배경에서 제목 하나가 서서히 나타나게 해 줘. 외부 영상이나 유료 생성 서비스는 사용하지 말아 줘. 미리보기와 MP4를 만들고 프로젝트와 결과 파일의 위치를 알려 줘. 실행이 막히면 부족한 준비물을 설명해 줘.
요청 문장은 이 자료의 예시입니다. 이번 자료 제작에서 새 설치나 10초 샘플 렌더를 직접 재현하지 않았습니다. 샘플 MP4가 실제로 재생된 뒤 한 편 제작으로 넘어가세요.
04한 편의 규칙과 파일을 남겨 두세요
첫 편부터 긴 지침서를 완성할 필요는 없습니다. 화면을 만들며 정한 배경·서체·캐릭터·음악 크기와 파일 위치를 남기고 다음 편에 다시 읽게 합니다. 원본 작업실은 CLAUDE.md에 목적·스타일·역할·실행 환경을 적고 작업을 시작할 때 이 파일과 README를 먼저 읽도록 정했습니다.
지침 파일에 적을 내용
누구에게 설명할지, 어떤 화면 스타일을 쓸지, 직접 녹음을 언제 받을지, 원본을 어디에 보존할지 정합니다. 외부 서비스 사용과 게시 범위도 사용자가 맡긴 작업에 맞춰 적습니다.
진행 상태에 적을 내용
현재 대본·녹음·렌더 버전과 남은 문제를 기록합니다. 다음 날에는 완료한 일을 다시 만들지 않고 필요한 단계부터 이어 갑니다.
날짜-주제/
├─ output/ 최종 전달 파일
└─ 보관/
├─ 팩트.md 주장·출처·확인일
├─ 장면목록.json 낭독문·자막·화면 설명
├─ 녹음용/ 01.txt, 02.txt…
├─ audio/ 01.mp3, 02.mp3…
├─ hyperframes/ 장면과 미디어
└─ 진행상태.md 완료·대기·다음 작업원본 작업실의 폴더 구조를 줄여 보여 준 예시입니다. 이전 최종본은 output/보관/v1/처럼 버전별로 보존할 수 있습니다. 조사와 작업 파일을 두는 보관/과 구분하세요.
이번 영상에서 계속 쓸 배경·서체·캐릭터·음악 크기·파일 위치를 작업 지침으로 정리해 줘. 이번 편만 적용한 수정은 구분하고 다음 제작 때 먼저 읽을 파일을 알려 줘.
05조사한 내용을 읽을 문장과 화면으로 나눕니다
주제만 전달하면 설명의 깊이와 길이가 흔들리기 쉽습니다. 대상과 목적을 함께 적으세요. 예를 들어 신입 직원에게 문서 공유 방법을 알려 주는 영상이라면 따라 할 단계와 흔한 실수를 중심으로 구성합니다.
주제는 클로드로 회의록을 정리하는 방법이야. 처음 쓰는 직장인이 따라 하도록 개념과 절차를 설명해 줘. 공식 자료를 확인하고 출처와 확인일을 남겨 줘. 장면별 낭독문·핵심 자막·화면 설명을 먼저 보여 주고 내가 대본을 확인한 뒤 녹음하도록 해 줘.
출처와 확인일
핵심 자막·화면 설명
장면별로 직접 녹음
| 장면 구성 | 예시 | 작성 기준 |
|---|---|---|
| 낭독문 | 장면은 웹페이지로 만들고 정해진 시점의 화면을 한 장씩 찍어 영상으로 바꿉니다. | 입으로 읽기 쉬운 문장 |
| 핵심 자막 | HTML → 프레임 → MP4 | 낭독을 전부 복사하기보다 요점 표현 |
| 화면 설명 | 웹 장면, 여러 프레임, 영상 파일이 차례로 등장 | 말의 순서와 등장 순서 연결 |
가격·기능·이용 조건은 녹음 전에 최신 공식 자료와 대조합니다. 확인되지 않은 내용은 대본에서 빼거나 불확실성을 표시합니다. 직접 녹음한 뒤 낭독문을 바꾸면 해당 장면은 다시 녹음할 대상으로 표시해 두세요.
06녹음의 길이와 쉼을 보고 화면을 맞춥니다
녹음은 장면별로 나누어 저장합니다. 01.mp3, 02.mp3처럼 번호를 맞추면 한 장면만 다시 녹음하기 쉽습니다. 원본 작업실은 MP3 외에 WAV·M4A도 받도록 구성했습니다.
이 작업실의 timing.py는 녹음의 조용한 구간을 찾아 구절 시작 시점을 계산합니다. 설정은 -35dB 기준, 0.10초 이상 무음입니다. 제목·그림·자막이 계산한 시점에 등장하도록 장면을 작성합니다. 장면 길이도 녹음에서 구합니다.
쉼이 너무 짧거나 주변 소리가 크면 구절 경계를 찾지 못할 수 있습니다. 원본은 이때 글자 수로 시점을 추정하고 음성 인식 정렬이나 직접 청취로 보정합니다. 녹음할 때 문장 사이를 잠깐 쉬고 같은 거리·음량으로 말하면 분석하기 수월합니다.
장면별 녹음을 넣었어. 파일 번호와 대본이 맞는지 확인해 줘. 실제 녹음 길이를 기준으로 장면을 만들고 구절에 맞춰 자막과 그림을 배치해 줘. 추정한 타이밍은 표시하고 목소리가 잘 들리도록 음악을 조절한 뒤 미리보기를 보여 줘.
녹음 분석·자동 싱크·합성 음악은 원본 작업실이 별도로 만든 절차입니다. HyperFrames 기본 설치에 이 도구가 포함된다고 안내할 수는 없습니다. 처음에는 장면별 길이와 핵심 등장 시점부터 확인하고 반복되는 부분을 도구로 정리하세요.
07미리보기와 완성 MP4를 각각 확인하세요
미리보기에서는 배치와 움직임을 확인하고 렌더한 MP4에서는 실제 전달할 영상과 소리를 확인합니다. 원본은 외부 음원을 가져오지 않고 음악과 효과음을 코드로 합성했습니다. 다른 프로젝트는 선택한 음원의 사용 조건을 확인하고 내 목소리를 가리지 않는 크기로 조절하세요.
공식 CLI 점검과 렌더 예시
npx hyperframes lint
npx hyperframes check
npx hyperframes render --output final.mp4lint는 구조를 검사하고 check는 브라우저 실행·배치·모션·미디어 등을 점검합니다. 작업 프로젝트에서 실행해야 하며 검사 통과 후에도 완성 파일을 직접 재생해야 합니다. 공식 렌더 안내
글자 겹침·작은 자막·잘림과 첫 화면·마지막 화면을 확인합니다.
중요한 설명보다 그림이 너무 빠르거나 늦게 등장하지 않는지 봅니다.
영상 전체를 들으며 음성 누락, 과한 효과음, 목소리를 가리는 음악을 확인합니다.
수정할 때는 장면 번호와 문제를 적습니다. “3번 장면에서 도식을 설명할 때 그림이 늦게 보여. 해당 구절 시작에 맞춰 줘”처럼 요청하면 수정할 위치가 분명해집니다. 원본 작업실은 해당 장면을 고친 뒤 영향을 받는 전환도 고칩니다. 전체 영상은 새 버전으로 렌더합니다.
원본 작업 기록에서 이번 19장면 영상은 424.97초, 렌더는 809초였습니다. 이전 3~4분 영상의 렌더는 309~627초 범위였습니다. 모두 해당 클라우드 환경의 실측입니다. 조사·대본·녹음·썸네일·재수정 시간은 포함하지 않습니다. 다른 컴퓨터의 예상 시간으로 옮기지 마세요.
08확인한 결과만 전달하고 다음 편에 규칙을 이어 갑니다
최종 영상, 썸네일, 제목은 찾기 쉬운 전달 폴더에 둡니다. 조사·대본·녹음·장면 프로젝트와 이전 버전은 작업 폴더에 보존합니다. 원본 작업실은 Google Flow로 썸네일 A·B·C를 만들고 각 안에 제목 3개를 제안했습니다. 이는 별도 계정과 생성 도구를 사용하는 제작 절차이며 영상 렌더의 필수 단계는 아닙니다.
남은 수정 판단
이전 버전도 유지
지침과 도구에 반영
한 편 제작 체크리스트
체크 표시는 현재 화면에서만 유지됩니다. 원본은 영상 파일과 제작 기록이 있으나 직접 청취·사용자 최종 확인은 대기 상태로 기록돼 있습니다. 파일 생성과 최종 검토 완료는 따로 확인하세요.
09자주 묻는 질문과 공식 출처
코드를 직접 짜야 하나요?
장면 코드 작성과 수정은 클로드에게 맡길 수 있습니다. 사용자는 만들 내용과 고칠 위치를 설명하고 결과를 확인합니다. 다만 설치·실행 환경에 문제가 생기면 오류를 확인하고 필요한 프로그램과 권한을 준비해야 합니다.
클로드 스킬만 설치하면 이 작업실과 같은 영상이 나오나요?
스킬 외에 화면 스타일·캐릭터·녹음 타이밍·음악·파일 규칙이 필요합니다. 공개 HyperFrames 설치로 시작하고 첫 편에서 필요한 규칙과 도구를 차례로 추가하세요. 이 자료는 원본 작업실의 전용 도구를 배포하는 패키지가 아닙니다.
무료 클로드로도 시작할 수 있나요?
Skills 자체는 Free 요금제에도 제공되며 코드 실행 활성화가 필요합니다. 로컬 폴더를 연결하는 Cowork 작업은 Pro·Max·Team·Enterprise 조건을 따릅니다. Claude Code와 생성 도구의 이용 조건도 별도로 확인하세요.
노트북이나 데스크톱 앱을 꺼도 작업이 이어지나요?
클라우드 세션과 로컬 렌더를 구분해야 합니다. 클라우드 세션은 앱을 닫아도 이어질 수 있지만 그 컴퓨터의 로컬 폴더에는 접근할 수 없습니다. 내 컴퓨터에서 렌더하는 작업은 해당 컴퓨터와 실행 프로그램이 계속 필요합니다.
한 장면만 수정하거나 다시 녹음할 수 있나요?
장면별로 파일을 나누면 해당 장면의 대본·녹음을 바꾸기 쉽습니다. 장면 길이가 달라지면 뒤 장면과 전환도 다시 확인하세요. 원본 작업실의 전달본은 영향을 받는 부분을 고친 뒤 전체를 새 버전으로 렌더합니다.
공식 출처
- HeyGen — HyperFrames 저장소·오픈소스 라이선스
- HyperFrames — HTML 기반 영상 제작 원리
- HyperFrames — 빠른 시작과 비용 범위
- HyperFrames — Claude Code 등 플러그인 설치
- HyperFrames — Standalone 스킬 설치와 갱신
- HyperFrames — 검사·렌더·완성 파일 확인
- Anthropic — Skills 이용 요금제와 코드 실행
- Anthropic — 개인 스킬의 구성과 추가
- Anthropic — Cowork 시작과 이용 조건
- Anthropic — 기기별 이용·실행 위치·로컬 파일 접근
2026-10-11 확인. 직접 녹음·폴더 구조·타이밍·음악·썸네일·소요 시간은 제공된 제작 대본과 프로젝트 기록의 사례입니다. 공식 제품 기능과 구분했으며 이 자료를 작성할 때 신규 환경 설치와 영상 제작을 재현하지 않았습니다.