자기소개 모션그래픽 만들기, 하이퍼프레임즈 스킬과 프롬프트 예시

자기소개 모션그래픽을 코드나 영상 편집 툴 없이 프롬프트 한 번으로 만드는 4단계를 정리했습니다. 이름, 하는 일, 숫자 몇 개를 적고 원하는 느낌을 덧붙이는 방식인데, 영상이 댓글로 넘긴 프롬프트 대신 바로 복사해 쓸 수 있는 예시와 설치·렌더링 절차를 채워 넣었습니다.

코드도 편집 툴도 없이 자기소개 모션그래픽을

커리어해커 알렉스 채널의 43초 쇼츠입니다. 화자의 설명은 이렇습니다. 코드를 직접 짤 필요도, 영상 편집 툴도 필요 없다. 코딩 에이전트에게 스킬을 설치하게 하고, 영상에 넣을 내용과 원하는 느낌을 적어 보내면 된다.

여기서 코딩 에이전트는 내 컴퓨터의 파일을 직접 만들고 명령을 실행하는 AI 도구입니다. 화자는 Claude Code(클로드 코드)를 예로 듭니다. 하이퍼프레임즈(HyperFrames)는 HeyGen이 공개한 도구로, 웹페이지(HTML) 형태로 장면을 짜고 그것을 영상 파일로 렌더링(최종 영상으로 굽는 작업)합니다. 스킬은 에이전트가 이 도구를 다루는 요령을 적어 둔 절차 문서입니다.

미리 말해 두면, 화자가 실제로 쓴 프롬프트 전문은 발화로는 나오지 않습니다. 화자는 댓글에 남겨 두겠다고 말했지만 이 글은 댓글과 화면을 확인하지 못했습니다. 그래서 아래 프롬프트 예시는 화자가 말로 설명한 구성에 맞춰 편집자가 새로 만든 것입니다.

• 1단계: 클로드 코드 같은 코딩 에이전트에게 하이퍼프레임즈 스킬 설치를 시킨다.
• 2단계: 영상에 넣을 내용(이름, 하는 일, 숫자 몇 개)을 프롬프트에 적는다.
• 3단계: 원하는 느낌(예: 박자에 맞춰 빠르게, 색은 세 가지만)을 덧붙인다.
• 4단계: 보낸다. 화자 말로는 에이전트가 음악까지 붙여 영상으로 뽑아 준다.

준비물

• 코딩 에이전트. 이 글은 Claude Code 기준으로 적습니다. Claude 유료 요금제나 API 결제가 필요하고, 요금은 바뀌므로 공식 안내를 확인해야 합니다.
• Node.js 22 이상. 하이퍼프레임즈 공식 문서가 요구하는 버전입니다. nodejs.org에서 LTS 버전을 받습니다.
• FFmpeg. 영상 파일을 만드는 무료 프로그램으로, 하이퍼프레임즈가 렌더링에 씁니다. 맥은 brew install ffmpeg로 설치합니다. 설치가 어렵다면 클로드 코드에게 "FFmpeg 설치해줘"라고 맡겨도 됩니다.
• 영상에 넣을 내용: 이름, 하는 일, 숫자 몇 개, 마지막 한 문장.
• 배경음악 파일(선택). 저작권이 정리된 음원을 직접 준비하는 편이 안전합니다.
• 작업용 빈 폴더 하나. 예: 바탕화면의 intro-video 폴더.

자기소개 모션그래픽 만들기 4단계

1단계. 하이퍼프레임즈 스킬 설치를 시킨다

화자 표현으로는 코딩 에이전트한테 "하이퍼프레임즈 스킬 설치해"라고 말하면 알아서 설치합니다. 실제로는 이렇게 합니다.

1. 터미널을 열고 작업 폴더로 이동합니다.

cd ~/Desktop/intro-video

2. claude를 입력해 클로드 코드를 켭니다.
3. 채팅창에 아래처럼 요청합니다.

하이퍼프레임즈 스킬 설치해줘.

4. 에이전트가 설치 명령을 실행해도 되느냐고 물으면 허용합니다.
   • 참고: 에이전트가 실행하는 명령은 공식 문서 기준 아래와 같습니다. 터미널에 직접 입력해도 같습니다.

npx skills add heygen-com/hyperframes --all

5. 클로드 코드를 껐다가(/exit) 다시 켭니다.
   • 확인: 채팅창에 /를 치면 hyperframes로 시작하는 스킬 이름이 목록에 보입니다.

2단계. 영상에 넣을 내용을 적는다

화자가 든 예는 세 가지입니다. 이름, 하는 일, 숫자 몇 개. 그리고 "마지막 한 문장이면" 충분하다고 덧붙입니다. 영상 끝에 넣을 마무리 문장 하나로 읽는 것이 자연스럽습니다. 프롬프트 전체가 한 문장이면 된다는 뜻인지는 발화만으로 확정되지 않습니다.

숫자는 자기소개 영상에서 눈에 가장 잘 띄는 부분입니다. 경력 연수, 만든 결과물 수, 고객 수처럼 내가 실제로 확인할 수 있는 숫자만 넣습니다.

3단계. 원하는 느낌을 덧붙인다

화자가 든 예는 둘입니다. 박자에 맞춰 빠르게, 그리고 색은 세 가지만. 느낌은 이런 항목으로 적으면 에이전트가 덜 헤맵니다.

• 길이와 화면 비율: 15초, 세로 9:16(쇼츠·릴스용) 또는 가로 16:9
• 속도: 박자에 맞춰 빠르게 전환, 또는 천천히
• 색: 세 가지 이름을 직접 지정
• 숫자 연출: 0부터 올라가는 카운트업 등

4단계. 프롬프트를 보낸다

2·3단계 내용을 한 번에 담은 프롬프트 예시입니다. 괄호 안 내용만 내 것으로 바꿔 붙여 넣습니다.

하이퍼프레임즈 스킬로 15초짜리 세로(9:16) 자기소개 모션그래픽을 만들어줘.

[내용]
- 이름: (내 이름)
- 하는 일: (예: 동네 빵집 SNS 마케터)
- 숫자: (예: 경력 N년 / 만든 콘텐츠 N개 / 함께한 가게 N곳)
- 마지막 문장: (예: 작은 가게의 이야기를 크게 전합니다)

[느낌]
- 박자에 맞춰 빠르게 전환
- 색은 세 가지만: 크림색 배경, 진한 갈색 글자, 주황색 강조
- 숫자는 0부터 올라가는 카운트업
- 배경음악은 폴더 안 bgm.mp3를 쓰고, 장면 전환을 비트에 맞춰줘

먼저 미리보기로 보여주고, 내가 확인하면 MP4로 렌더링해줘.

화자 말로는 이렇게 보내면 "에이전트가 음악까지 붙여서" 영상으로 뽑아 줍니다.

• 확인: 에이전트가 장면 파일을 만든 뒤 미리보기 주소를 알려 줍니다. 브라우저로 열어 움직임을 봅니다.
• 확인: 렌더링이 끝나면 MP4 파일 경로를 알려 줍니다. 위치를 말하지 않으면 "영상 파일 어디에 저장됐어?"라고 물으면 됩니다.

마지막 점검

• 코딩 에이전트에게 하이퍼프레임즈 스킬 설치를 시켰다.
• 프롬프트에 이름·하는 일·숫자 몇 개·마지막 문장을 적었다.
• 원하는 느낌(속도·색 등)을 덧붙였다.
• 프롬프트를 보냈고 음악이 붙은 영상이 나왔다.

화자가 쓴 프롬프트는 어디에

영상 끝에 화자는 "이게 제가 쓴 프롬프트 전체예요"라고 말합니다. 화면에 보여 준 것으로 보이지만 판독하지 못했습니다. 화자는 "댓글에도 그대로 남겨 둘게요"라고 했으니, 원문이 필요하면 원 영상의 댓글을 직접 확인하세요. 위 예시와 원문을 나란히 놓고 빠진 조건을 보태는 것도 방법입니다.

결과가 기대와 다를 때 고치는 법

영상은 고치는 과정을 다루지 않습니다. 하이퍼프레임즈 결과물은 장면 파일로 남아 있어서, 처음부터 다시 만들 필요 없이 말로 부분만 고칠 수 있습니다.

두 번째 장면 숫자 카운트업을 지금보다 두 배 느리게 바꾸고,
주황색은 숫자에만 쓰도록 고쳐줘. 나머지는 그대로 둬.

• 전체가 너무 빠르다: "전환 간격을 늘려줘"처럼 속도만 콕 집어 말합니다.
• 글자가 잘린다: "세로 화면 안쪽 여백을 넉넉히 두고 글자 크기를 줄여줘"라고 요청합니다.
• 음악과 박자가 안 맞는다: 음악 파일의 박자에 맞춰 다시 배치해 달라고 요청합니다.
• 한 번에 여러 가지를 고치기보다 한 가지씩 고치고 미리보기로 확인하는 편이 빠릅니다.

화자가 실제로 권한 것

스킬 설치는 에이전트에게 맡기고, 사람은 내용과 느낌만 적으라는 겁니다. 내용은 이름·하는 일·숫자 몇 개, 느낌은 속도와 색 같은 조건.

npx hyperframes preview
npx hyperframes render

출처: youtube.com/…