HeyGen 무료 영상 편집기, Claude 코딩 agent로 홍보 영상 만들기

HeyGen이 공개한 무료 데스크톱 앱 HyperFrames Studio를 쓰면 손으로 편집하지 않고도 브랜드에 맞춘 홍보 영상을 AI coding agent(코드를 직접 읽고 쓰며 작업을 처리하는 AI 도구)에게 맡길 수 있습니다. 홍보 영상의 네 단계 장면을 템플릿에서 고르고 웹사이트 주소를 넣으면, 그 사이트의 색과 글꼴, 문구를 반영해 Claude Code가 HTML과 CSS 코드로 영상을 짭니다. 고칠 곳은 화면 위에 표시하거나 말로 지시하면 됩니다. 다만 처음 쓰는 사람이 가장 많이 헤매는 곳은 편집 화면보다 프로젝트 폴더입니다.

영상을 코드로 짜는 HyperFrames

HyperFrames Studio의 바탕은 AI 영상 플랫폼 HeyGen이 만든 오픈소스 프레임워크 HyperFrames입니다. GitHub에 Apache-2.0 라이선스로 공개돼 있고, 저장소에는 star 6만 2,700개와 기여자 96명이 표시돼 있습니다. npm(JavaScript 패키지를 내려받아 관리하는 도구)의 주간 내려받기는 81만 1,600회입니다.

영상을 코드로 만든다는 점은 Remotion과 같지만 재료가 다릅니다. Remotion은 React 컴포넌트(화면을 이루는 코드 조각)로 영상을 구성하고, HyperFrames는 표준 웹 기술인 HTML, CSS와 웹 애니메이션 라이브러리를 씁니다. 이 코드는 Claude Code나 OpenAI Codex 같은 AI coding agent가 프로젝트 안에서 직접 쓰고 고칩니다. 영상이 HTML, CSS, JSON 코드로 남기 때문에 말로 지시한 수정을 정확하게, 몇 번이고 같은 방식으로 적용할 수 있습니다.

HyperFrames Studio는 이 틀 위에서 AI coding agent와 사람이 함께 영상을 만들도록 설계한 편집기입니다. macOS(Apple Silicon, Intel), Windows(x64, arm64), Linux(deb, AppImage)용 데스크톱 앱이 있습니다. 앱은 완전히 무료이고 HeyGen 무료 계정만 있으면 됩니다. HeyGen API 키는 프리미엄 아바타나 음성 해설, 음성 복제 같은 유료 클라우드 기능을 쓸 때만 넣으면 되고, 이런 기능에는 API 크레딧이 청구됩니다.

설치: 앱과 agent skill을 함께 준비합니다

agent가 HyperFrames를 제대로 다루려면 앱을 열기 전에 터미널에서 skill(agent가 특정 작업을 처리하는 방법을 담은 지침 묶음)부터 설치해야 합니다. macOS 기준 순서는 다음과 같습니다.

1. 공식 내려받기 페이지에서 운영체제에 맞는 설치 파일을 받아 설치합니다. macOS용은 DMG 디스크 이미지입니다.
2. 터미널에서 npx skills add heygen-com/hyperframes 명령을 실행해 GitHub 저장소의 HyperFrames skill 설치를 시작합니다.
3. 대화형 메뉴에서 핵심(core) skill 분류를 고르고, Space 키로 핵심 skill을 모두 선택한 뒤 Return 키로 확정합니다.
4. 함께 쓸 agent를 고릅니다. 목록에는 Claude Code와 Codex, Cursor, Gemini CLI, GitHub Copilot 등 8개 agent가 있습니다. 설치 방식은 권장되는 symlink(원본 파일을 가리키는 연결 파일)를 고릅니다. 그래야 skill 저장소가 갱신될 때 모든 agent에 자동으로 반영됩니다.
5. 보안 점검 결과를 확인하고 설치를 마칩니다.
6. 터미널에서 claude 명령으로 Claude Code를 열고 /hyp까지 입력해 봅니다. 자동 완성 목록에 HyperFrames skill이 보이면 연결된 것입니다.

앱을 처음 열면 사용자 역할과 주로 쓰는 coding agent를 묻는데, ’Skip all’로 건너뛰어도 됩니다. 이어 HeyGen 무료 계정으로 로그인합니다. 브라우저에서 Google 계정 등으로 인증하면 앱으로 돌아옵니다. 왼쪽 아래 톱니바퀴 아이콘을 누르면 설정 창이 열리고, 자주 손대는 탭은 다음과 같습니다.

네 단계 이야기 틀로 장면 고르기

왼쪽 사이드바의 Sessions에서는 앱이 컴퓨터 안의 HyperFrames 프로젝트 폴더를 스스로 찾아 주고, ’Import projects’를 누르면 클릭 한 번으로 불러옵니다. 새 영상은 ’Make my launch video’를 누르거나 ’Take the step by step’을 골라 시작합니다.

HyperFrames Studio는 출시 홍보 영상을 네 단계 이야기 틀로 짜고, 단계마다 미리 만든 템플릿을 고르게 합니다.

주간 AI 뉴스레터의 홍보 영상이라면 Hook에는 손으로 그린 듯한 상자 모양 캐릭터, Proof에는 깔끔한 대화 화면 카드, Call to action에는 로고와 제목, 버튼만 둔 마무리 화면을 고르는 식입니다.

장면을 고른 뒤 ‘Your website or idea’ 입력란에 웹사이트나 뉴스레터 주소를 넣으면, 앱이 그 페이지의 색 구성과 글꼴, 문구, 브랜드 자산을 읽어 와 템플릿을 꾸밉니다. 디자인 지침을 일일이 적기보다 홈페이지나 뉴스레터 보관함 주소를 주는 편이 손이 덜 갑니다. 미니 플레이어로 흐름을 훑어보고 ’Use this cut’을 누르면 새 프로젝트 폴더가 생기고 편집 타임라인이 열립니다.

여기서부터는 Claude Code가 뒤에서 Claude Opus 5.5 모델로 프로젝트 참고 자료를 읽고, HTML과 CSS를 짜고, 타임라인 트랙을 채웁니다. 오른쪽 위 inspector 패널에는 불러온 자산과 구성 요소가 쌓입니다. 이 예에서는 완성까지 15분 37초가 걸렸습니다. 앞선 시험에서 7분 안팎이 걸린 것의 두 배쯤이라, 걸리는 시간은 작업마다 꽤 달라질 수 있어 보입니다.

결과물은 AI 소식 제목이 흘러가는 띠, 알림 숫자가 붙은 봉투 아이콘, 이번 호의 꼭지 카드, 지난 호 번호가 넘어가는 보관함 격자를 거쳐 로고와 구독 권유로 끝났습니다. 세세하게 지시하지 않은 prompt(AI에게 주는 지시문)였는데도 디자인 의도를 잘 읽어 낸 결과로 보입니다.

▲ 홍보 영상의 네 단계 구성

고칠 곳은 그리거나 말로 지시합니다

결과물에서 바꾸고 싶은 곳은 미리 보기 화면 위에서 바로 짚어 줄 수 있습니다.

• Draw: 연필 아이콘을 누르고 영상 프레임 위에 직접 그립니다. 특정 카드에 동그라미를 치고 ’이 블록을 키워 줘’처럼 지시문을 붙이면 agent가 고칠 요소를 정확히 압니다.
• Comment: 화면이나 타임라인 아무 곳에 댓글 핀을 꽂아 고칠 곳을 표시합니다.
• Select: 화면의 개별 요소나 영역을 눌러 그것만 고치도록 지정합니다.
• 말로 지시: 그림 없이 Claude Code의 prompt 입력란에 고칠 내용을 적어도 됩니다.

음악과 효과음도 prompt로 넣습니다. 입력란에서 ’@’를 치거나 ‘+’ 버튼을 누르면 템플릿과 자산 라이브러리가 열리고, Framey에게 설명에 맞는 짧은 클립이나 자산을 찾게 할 수도 있습니다. 배경 음악은 다음처럼 구체적으로 요청합니다.

• 밝고 긍정적인 분위기의 부드러운 어쿠스틱 기타나 펠트 피아노 연주
• 음성 해설과 보컬은 넣지 않음
• 호 번호나 카드가 화면에 자리 잡을 때마다 가볍게 ‘틱’ 하는 효과음
• HeyGen의 유료 음원을 사지 말고 내장 라이브러리의 무료 음악 사용

Claude Code는 1분이 채 안 돼 배경 음악과 기계식 클릭 효과음을 만들어 장면 전환에 맞춰 배치했습니다. 클릭 소리가 지나치다 싶으면 해당 오디오 레이어나 효과음 클립만 음소거하거나 지우면 됩니다. 유료 음원 라이선스 비용을 피하려면 마지막 항목처럼 무료 음악을 쓰라고 분명히 적어야 합니다.

내보내기와 세로 영상

완성한 영상은 오른쪽 위 Export 버튼으로 내보냅니다. 해상도는 1080p와 4K, 파일 형식은 MP4와 WebM, 초당 프레임 수는 24, 30, 60 가운데 고릅니다. 내보낸 파일은 컴퓨터에 저장돼 Finder나 다른 플레이어로 바로 열 수 있습니다.

휴대폰용 세로 영상도 처음부터 다시 만들 필요가 없습니다. 사이드바 메뉴에서 프로젝트를 복제해 이름을 바꾼 뒤 Claude에게 9:16 세로 비율로 바꾸라고 지시하면, 기존 배치와 애니메이션 설정을 세로 화면에 맞게 다시 짭니다. 같은 스토리보드로 16:9 가로판과 9:16 세로판을 함께 갖추는 셈입니다.

프로젝트 폴더는 어디에 있을까

처음 쓰는 사람이 가장 헷갈려하는 부분은 프로젝트 폴더 관리입니다. 앱에서 만든 프로젝트는 기본적으로 홈 폴더 안의 숨김 폴더 ~/.hyperframes-studio에 저장되므로 macOS에서 평소처럼 찾아서는 보이지 않습니다. 사이드바에서 프로젝트 이름 옆 점 세 개 메뉴를 누르고 ’Reveal in Finder’를 고르면 그 폴더가 바로 열립니다.

원하는 폴더에 새 프로젝트 만들기

바탕화면의 전용 폴더처럼 찾기 쉬운 곳에 프로젝트를 두고 싶을 때 빈 폴더를 앱으로 끌어다 놓으면, HyperFrames 프로젝트로 인식되지 않는다는 오류만 나옵니다. 프로젝트로 인정받으려면 폴더에 index.html과 함께 hyperframes.json, project.json, meta.json 가운데 하나 이상의 설정 파일이 있어야 하기 때문입니다. 기존 프로젝트 폴더를 통째로 복사해 넣는 우회 방법도 있지만, 앱의 ‘What counts as a project?’ 안내가 알려 주는 방법은 명령줄 초기화입니다.

1. Finder에서 원하는 폴더를 오른쪽 클릭하고 서비스 메뉴의 ’New Terminal at Folder’를 골라 그 위치에서 터미널을 엽니다.
2. npx hyperframes init 명령을 실행합니다. 필요한 패키지를 설치할지 물으면 y를 입력하고 Return 키를 누릅니다.
3. 프로젝트 이름을 정하고 시작 템플릿을 고릅니다. 빈 프로젝트인 Blank와 Product Promo 등 9가지가 있습니다.
4. Blank를 고르면 index.html과 hyperframes.json, meta.json, package.json, AGENTS.md, CLAUDE.md가 만들어지고, 브라우저에 localhost(내 컴퓨터 안에서 띄운 웹 서버 주소)로 웹 편집기가 열립니다.
5. 웹 편집기 오른쪽 위의 초록색 ‘Edit with Framey’ 버튼을 누르면 이 프로젝트가 데스크톱 앱에서 열립니다. 이제 앱이 폴더를 프로젝트로 인식하므로 Claude Code에 prompt를 보내 새 영상을 만들면 됩니다.

빈 폴더를 넣었을 때 뜨는 오류 창은 초보자에게 무엇을 해야 하는지 분명히 알려 주지 않으니, 원하는 폴더라면 처음부터 이 명령으로 초기화하는 편이 낫습니다.

▲ 프로젝트 폴더와 편집 앱의 연결

정리: 처음 써 본다면 이 순서로

HyperFrames Studio는 편집 솜씨보다 무엇을 보여 줄지 정하는 판단이 더 중요한 도구로 보입니다. 장면 구성은 네 단계 템플릿이, 디자인은 웹사이트 주소가, 제작과 수정은 Claude Code가 맡기 때문입니다. 비용은 아바타나 음성 복제 같은 HeyGen의 유료 기능을 쓸 때만 듭니다. 처음이라면 다음 순서로 시작하면 됩니다.

1. 앱을 열기 전에 터미널에서 HyperFrames skill을 symlink 방식으로 설치하고, Claude Code에서 /hyp 입력으로 연결을 확인합니다.
2. HeyGen 무료 계정으로 로그인하고, 네 단계 템플릿과 홈페이지 주소로 첫 영상을 만듭니다.
3. 고칠 곳은 화면에 표시해 지시하고, 음악은 무료 라이브러리를 쓰라고 적습니다.
4. 1080p나 4K로 내보내고, 프로젝트를 복제해 9:16 세로판을 만듭니다.
5. 원하는 폴더에서 시작할 때는 빈 폴더 대신 npx hyperframes init 명령으로 초기화합니다.