꽃집 홍보 영상을 만들어야 하는데 촬영과 편집까지 생각하면 시작하기도 부담스럽죠. HyperFrames 사용법의 핵심은 복잡한 영상 편집 화면을 먼저 배우는 대신, 만들고 싶은 장면을 말로 설명하고 AI 코딩 도구가 영상 프로젝트를 구성하게 하는 것입니다. 다만 문장 한 줄만 적으면 언제나 광고 영상이 완벽하게 완성되는 방식은 아니에요. 설치부터 시안 확인, MP4 출력까지 실제 작업 순서를 알아두면 훨씬 덜 헤맵니다.
아래에서는 Claude Code로 처음 시작하는 흐름과 꽃집 홍보 영상을 예로 든 프롬프트, 영상 제작 도구들의 차이까지 함께 짚어보겠습니다.
HyperFrames는 어떤 AI 영상 제작 도구일까
HyperFrames는 HTML, CSS, 자바스크립트와 이미지·오디오 등의 미디어를 이용해 동영상으로 렌더링하는 오픈소스 프레임워크입니다. AI 코딩 에이전트에 영상을 요청하면 에이전트가 편집 가능한 프로젝트를 만들고, HyperFrames가 화면을 미리 보여주거나 MP4로 출력하는 구조죠. 일상적인 장면을 카메라로 새로 찍는 생성형 동영상 모델과는 작동 방식이 다릅니다.
이 방식이 매력적인 이유는 결과가 하나의 영상 파일로만 남지 않는다는 점입니다. 문구 색상이나 등장 순서, 움직임을 수정하고 다시 출력할 수 있는 프로젝트 파일이 남거든요. 특히 행사 소개, 제품 특징, 가격표가 움직이는 모션 그래픽처럼 글자와 화면 구성을 정확하게 다뤄야 할 때 눈여겨볼 만합니다.
다만 꽃이나 매장 내부를 실물처럼 보여주려면 사용할 사진이나 영상 소스가 필요할 수 있습니다. AI에게 없는 매장 사진을 상상으로 만들어 달라고 하면 실제 매장과 다른 결과가 나올 수 있으니, 저는 매장 홍보라면 사진 자료부터 준비하는 편을 권하겠습니다. HyperFrames 공식 소개에서도 편집 가능한 프로젝트와 프레임별 렌더링 구조를 설명하고 있습니다.
Claude Code 설치 전에 준비할 프로그램과 비용
Claude Code와 함께 로컬에서 영상을 만들 계획이라면 먼저 Node.js 22 이상, npm, FFmpeg를 준비해야 합니다. 공식 플러그인 안내에서는 이 환경을 로컬 CLI의 준비 사항으로 명시합니다. FFmpeg는 완성한 화면을 영상으로 인코딩하는 과정에서 사용되므로, 설치가 빠져 있으면 마지막 출력 단계에서 막힐 수 있어요.
HyperFrames 자체는 Apache-2.0 라이선스의 무료 오픈소스이고 로컬 렌더링에는 HeyGen 크레딧이 소모되지 않습니다. 그렇다고 제작에 드는 모든 비용이 사라지는 건 아닙니다. Claude Code 같은 코딩 에이전트나 별도로 연결한 음성·아바타·이미지 생성 서비스는 사용 조건과 요금이 다르기 때문이죠. 무료라는 말만 보고 시작했다가 다른 서비스 요금에서 당황하지 않도록 구분해 두는 게 좋겠습니다.
제일 먼저 확인할 것은 멋진 템플릿보다 컴퓨터 환경입니다. 터미널에서 node -v와 ffmpeg -version으로 설치 여부를 살피고, 필요한 프로그램을 설정한 뒤 다음 단계로 넘어가세요. 공식 플러그인 설치 안내에 운영 환경과 에이전트별 설치 경로가 자세히 나옵니다.
Claude Code에 HyperFrames 플러그인 설치하는 순서
HyperFrames 사용법이 처음이라면 Claude Code 공식 저장소에서 권장하는 버전 관리형 플러그인 방식부터 시작하면 됩니다. 터미널에서 다음 순서로 진행합니다. 플러그인이 설치됐더라도 현재 열린 세션에는 바로 보이지 않을 수 있으므로 다시 불러오거나 새 세션을 열어 주세요.
-
Claude Code가 실행되는 환경에서
claude plugin marketplace add heygen-com/hyperframes를 입력합니다. -
이어
claude plugin install hyperframes@hyperframes를 실행합니다. -
claude plugin details hyperframes로 설치된 플러그인 정보를 살핍니다. -
Claude Code에서
/hyperframes:hyperframes를 이용해 영상 제작을 요청합니다.
플러그인 대신 스킬만 설치하려면 작업 폴더에서 npx skills add heygen-com/hyperframes를 실행해 Core Skills를 선택하는 방식도 있습니다. 플러그인과 독립 스킬을 반드시 둘 다 설치해야 하는 것은 아니에요. 설정이 복잡하게 느껴진다면 한 방식으로 먼저 짧은 테스트 영상을 만드는 쪽이 낫습니다.
첨부 화면에는 hyperframes 외에도 remotion-skills, motion-graphics, manim-mcp, mcp-for-blender라는 항목이 함께 보입니다. 여기서 조심할 점 하나. 영상에서 나란히 소개됐다고 해서 이 다섯 개가 HyperFrames 설치에 필요한 공식 필수 구성요소인 것은 아닙니다. 기본 영상 하나를 만드는 데 모든 도구를 설치할 필요는 없어요.
꽃집 홍보 영상 프롬프트는 이렇게 작성하기
예를 들어 봄맞이 꽃다발을 알리는 15초짜리 세로 영상을 만든다고 가정해 보겠습니다. 막연히 ‘꽃집 홍보 영상 만들어줘’라고 하면 어떤 꽃을 보여줄지, 누구에게 말을 거는지, 화면이 어떻게 끝날지 AI가 추측해야 합니다. 저는 처음부터 길이와 화면 비율, 장면 순서, 브랜드 문구를 함께 알려주는 쪽이 좋다고 봅니다.
요청 예시: ‘HyperFrames로 15초 길이의 세로형 꽃집 홍보 영상을 만들어줘. 첫 장면은 따뜻한 자연광의 꽃다발 사진, 다음 장면은 꽃을 포장하는 손, 마지막에는 매장 이름과 예약 문의 문구가 등장하게 해줘. 밝고 차분한 분위기, 읽기 쉬운 큰 자막, 부드러운 전환을 사용해줘. 실제 매장 사진은 내가 제공할 파일만 사용하고, 먼저 미리보기를 보여줘.’
이 요청에는 전달할 메시지와 장면 구조가 함께 들어 있습니다. 자막은 화면을 넘길 정도로 길지 않게 하고, 상호·주소·가격 등 실제 운영 정보는 제공한 자료에서만 가져오게 부탁하는 것이 좋아요. 특히 AI가 알아서 할인율이나 영업시간을 만들어 넣지 않도록 제한해 두면 수정할 일이 줄어듭니다.
스토리는 세 장면만으로도 충분합니다. 처음에는 꽃의 분위기를 보여주고, 중간에는 정성껏 포장하는 과정으로 관심을 붙잡고, 마지막에는 예약 행동을 안내하는 식입니다. 화면 전환을 무조건 화려하게 만들기보다 모바일에서 읽히는 문구를 우선한다는 게 제 판단입니다.
미리보기부터 MP4 저장까지 실수 줄이는 과정
AI가 첫 영상을 만들었다면 곧바로 올리기보다 우선 미리보기를 처음부터 끝까지 보는 것을 추천합니다. 공식 빠른 시작 안내에서는 에이전트가 편집 가능한 작업 폴더를 남기고 미리보기를 열어주며, 필요하면 프로젝트 폴더 안에서 npx hyperframes preview를 실행할 수 있다고 설명합니다. 첫 결과는 완성본이라기보다 수정 가능한 시안으로 보는 편이 맞습니다.
내보내기 직전에는 npx hyperframes lint와 npx hyperframes check로 프로젝트 검사를 진행할 수 있습니다. 그다음 터미널에서 npx hyperframes render --output renders/final.mp4를 실행하면 MP4 출력 경로를 지정할 수 있어요. Studio를 쓴다면 내보내기 화면에서 형식과 크기를 선택하는 방식도 지원합니다.
중요한 건 미리보기가 잘 보인다고 해서 내보낸 영상까지 완벽하다고 생각하지 않는 것입니다. 완성 MP4를 다시 열어 첫 화면, 끝 화면, 자막이 잘리는 부분, 음량과 전환 타이밍을 점검하세요. 공식 문서도 미리보기와 출력 파일을 각각 확인하도록 권합니다. 공식 MP4 출력 안내에서 렌더링 명령과 최종 확인 항목을 볼 수 있습니다.
사진 속 영상 제작 도구 5종 차이와 선택 기준
한 화면에 도구가 다섯 개나 있으면 전부 설치해야 영상을 만들 수 있다고 느끼기 쉽습니다. 하지만 이름을 보면 다루는 작업의 무게중심이 다릅니다. 로고 애니메이션과 제품 홍보 화면을 만들고 싶은지, 수학 개념을 설명할지, 3차원 장면이 필요한지를 먼저 구분하는 편이 훨씬 실용적이에요.
| 영상 도구 | 주로 적합한 작업 | 초보자의 판단 |
|---|---|---|
| HyperFrames | HTML 기반 홍보 영상, 자막, 모션 그래픽과 MP4 렌더링 | 꽃집 홍보 영상부터 시작 |
| remotion-skills | React와 Remotion을 이용한 코드 기반 영상 제작 | React 작업이 익숙할 때 검토 |
| motion-graphics | 타이틀, 도형 애니메이션, 화면 전환 등 | 그래픽 효과가 중심일 때 검토 |
| manim-mcp | 수식, 그래프, 교육용 애니메이션 계열 작업 | 설명형 강의 영상에서 검토 |
| mcp-for-blender | Blender와 연결하는 3차원 모델·장면 작업 | 3D 작업에 익숙할 때 검토 |
이 표는 영상에 등장한 도구 이름과 일반적인 활용 분야를 구분한 비교입니다. 각 항목의 정확한 배포자와 설치 명령은 해당 프로젝트에서 따로 확인해야 해요. 특히 화면에 나온 이름만으로 동일 개발사가 만든 공식 묶음이라고 판단하는 것은 피하는 편이 좋습니다.
꽃집이나 카페의 짧은 공지 영상을 처음 제작한다면 저는 HyperFrames 하나로 먼저 끝까지 출력해 보겠습니다. 영상이 완성되는 전체 흐름을 경험한 뒤 필요한 그래픽이나 3D 도구를 더하는 편이 시간도 덜 들고 문제 원인도 쉽게 찾을 수 있거든요.
자주 묻는 질문
Q. HyperFrames는 완전히 무료인가요?
오픈소스 프레임워크와 로컬 렌더링은 무료로 사용할 수 있습니다. 다만 Claude Code 및 연동하는 외부 생성형 서비스의 비용은 별도입니다.
Q. 코딩을 전혀 몰라도 사용 가능한가요?
AI 코딩 에이전트가 코드를 만드는 경로를 지원하므로 직접 HTML을 작성하지 않고 시작할 수 있습니다. 그래도 프로그램 설치나 실행 오류를 해결할 때 기본적인 터미널 사용은 도움이 됩니다.
Q. 설치한 뒤 FFmpeg 오류가 나타나면 어떻게 하나요?
npx hyperframes doctor로 환경을 점검하고, FFmpeg 설치 여부와 경로를 살펴보세요. 공식 오류 해결 페이지에서 운영체제별 설치 안내를 제공합니다.
Q. 제가 찍은 꽃집 사진으로 영상을 만들 수 있나요?
프로젝트의 미디어 자료로 사진과 영상을 활용할 수 있습니다. 홍보용이라면 실제 매장 사진과 정확한 상호 정보, 연락처를 제공하는 편이 좋겠어요.
결국 HyperFrames 사용법을 익히는 데는 처음부터 다섯 도구를 모으는 것보다 짧은 영상 하나를 제대로 완성하는 경험이 더 값집니다. 꽃다발 사진 몇 장, 정확한 문구, 15초 분량의 장면 순서만 정해도 첫 프로젝트의 방향은 충분히 구체적이니까요.
출처와 참고한 곳
- HyperFrames 공식 빠른 시작 — 설치, 첫 요청, 미리보기 흐름
- HyperFrames 플러그인 공식 문서 — Claude Code 설치 명령과 준비 환경
- HyperFrames 출력 안내 — 검사 명령과 MP4 렌더링
- HyperFrames GitHub 저장소 — 프로젝트 개요, 오픈소스 라이선스와 스킬 배포
함께 읽으면 좋은 글
- FreeLLMAPI 무료 설치와 클로드 코드 연동, 보안 주의점
- PHP 보안 취약점 비상, AI 발견 PHP2Shell 워드프레스 서버 패치
- Inspo MCP 무료 설치와 코딩 에이전트 디자인 레퍼런스 설정
