모션 그래픽 전환 효과 5가지, 이름 넣은 하이퍼프레임즈 프롬프트

모션 그래픽 전환 효과는 이름만 정확히 알아도 AI에게 시킬 수 있습니다. 이 글은 픽셀 디졸브, 원 팝 전환, 텍스트 샌드위치, 화면 속 다이브, 글자 관통 줌 다섯 가지가 어떤 효과인지와, 클로드 코드에 하이퍼프레임즈 스킬을 깔고 그 이름을 넣은 프롬프트로 만드는 7단계를 정리했습니다. 영상에 없는 스킬 설치 명령과 결과를 고치는 요청 예시는 글 끝 편집자 정리에 넣었습니다.

효과에도 이름이 있다

커리어해커 알렉스 채널의 46초짜리 쇼츠입니다. 화자는 "제 기준 화려한 순"으로 5위부터 1위까지 소개하고, 영상 속 장면을 전부 코딩 AI에 하이퍼프레임즈 스킬을 깔아 만들었다고 밝힙니다. 하이퍼프레임즈(HyperFrames)는 HTML로 장면을 짜서 영상 파일로 렌더링(최종 영상 파일로 뽑아내기)하는 도구이고, 스킬은 클로드 코드가 그 도구를 쓰는 법을 담아 둔 지침 묶음입니다.

발화에는 프롬프트가 나오지 않아, 아래 7단계의 프롬프트와 조건은 채널 주인이 쓴 고정 댓글과 더보기란을 근거로 했습니다.

화자가 소개한 모션 그래픽 전환 효과 다섯 가지

순위는 화자 개인의 판단입니다.

• 5위 픽셀 디졸브: 화면이 작은 네모로 부서지면서 다음 장면이 나온다고 설명합니다.
• 4위 원: 동그라미가 퍼지면서 화면을 통째로 바꾼다고 합니다. 자막에는 이름이 "원"까지만 잡혔고, 더보기란 이름은 원 팝 전환입니다.
• 3위 텍스트 샌드위치: 캐릭터가 글자 사이를 앞뒤로 지나가서 입체감이 살아난다고 합니다. 글자 일부는 캐릭터 앞에, 일부는 뒤에 놓여 캐릭터가 글자에 끼인 것처럼 보이는 효과입니다.
• 2위 화면 속 다이브: 노트북 화면 속으로 카메라가 그대로 들어간다고 합니다.
• 1위 글자 관통: 글자가 다음 장면으로 들어가는 문이 된다고 합니다. 커다란 글자 안쪽으로 화면이 확대되며 그 속에서 다음 장면이 열리는 방식입니다.

화자가 밝힌 제작 방법

화자는 방금 본 장면 전부를 코딩 AI에 하이퍼프레임즈 스킬을 깔고, 이름을 넣은 프롬프트 한 번으로 만들었다고 말합니다.

"프롬프트 한 번"은 화자의 주장입니다. 같은 프롬프트를 넣었을 때 같은 결과가 나오는지는 발화만으로 확인할 수 없습니다. 어떤 코딩 AI인지, 프롬프트가 무엇인지도 발화에는 없고, 아래 더보기란과 고정 댓글에서 확인됩니다.

영상 끝에서 화자는 제일 마음에 드는 번호를 댓글로 알려 달라고 합니다.

더보기란·고정 댓글에서 확인한 것

발화가 아니라 채널 주인이 설명란과 고정 댓글에 적은 내용입니다.

기법 이름 전체와 영문 (더보기란)

• 5위 픽셀 디졸브: pixel dissolve
• 4위 원 팝 전환: circle pop transition
• 3위 텍스트 샌드위치: text sandwich
• 2위 화면 속 다이브: screen dive
• 1위 글자 관통 줌: letter fly-through

만든 환경과 조건

• 코딩 AI는 Claude Code이고 HyperFrames 스킬만 설치했다고 적혀 있습니다. (더보기란)
• 기법 이름을 넣은 "프롬프트 한 번(추가 지시 없음)"으로 만든 실제 결과라고 적혀 있습니다. (더보기란)
• 테스트 날짜는 2026-10-01입니다. (더보기란)
• 순위는 화면이 얼마나 확 바뀌는지를 기준으로 한 채널 주인의 판단이라고 적혀 있습니다. (더보기란)
• 3위 장면만 길이를 맞추려고 0.93배속으로 재생했다고 합니다. (더보기란)
• 3위는 캐릭터 이미지 alex.png를 같은 폴더에 넣고 실행했다고 합니다. (고정 댓글)
• 영상의 목소리는 채널 주인의 목소리로 학습한 AI 음성이라고 적혀 있습니다. (더보기란)
• HyperFrames 사이트: hyperframes.heygen.com (더보기란)

다섯 프롬프트가 함께 쓰는 틀 (고정 댓글)

다섯 프롬프트는 뼈대가 같습니다. 바뀌는 것은 장면 내용과 기법 이름뿐입니다.

• 길이: 6초
• 크기: 1080x830
• 색: 페이퍼·차콜·빨강 3가지만
• 기법 이름: 한글 이름 뒤에 영문을 괄호로 붙임
• 마지막 요청: MP4로 렌더링

준비물

• Claude Code. 발화에서는 "코딩 AI"라고만 합니다. Claude Code라는 이름은 더보기란 기준입니다. 클로드 유료 요금제나 API 결제가 있어야 쓸 수 있고, 요금은 공식 안내를 확인해야 합니다.
• HyperFrames 스킬 (더보기란). 설치 명령은 1단계와 편집자 정리에 적었습니다.
• 3위 장면에 쓸 캐릭터 이미지 파일. 채널 주인은 alex.png를 썼습니다. (고정 댓글) 배경이 투명한 PNG가 글자 사이에 끼우기 쉽습니다.
• 작업할 빈 폴더 하나. 클로드 코드를 이 폴더에서 열어 두면 결과 파일이 한곳에 모입니다.

비용은 발화에도 더보기란에도 나오지 않습니다.

하이퍼프레임즈로 전환 효과 만드는 7단계

단계 순서는 이렇습니다. 스킬 설치가 프롬프트 입력보다 먼저이고, 3위는 이미지를 먼저 넣은 뒤 프롬프트를 입력합니다. 프롬프트는 고정 댓글에 적힌 글자 그대로 옮겼습니다.

1. Claude Code에 HyperFrames 스킬을 설치합니다. (더보기란)
   • 주의: 설치 명령이나 방법은 영상과 더보기란 어디에도 나오지 않습니다. 하이퍼프레임즈 공식 문서에 실린 스킬 설치 명령은 아래와 같습니다. 클로드 코드를 연 폴더의 터미널에서 실행하거나, 클로드 코드 입력창에 붙여 넣고 실행해 달라고 하면 됩니다.
   • 확인: 설치 뒤 클로드 코드를 다시 열고 "하이퍼프레임즈 스킬이 설치돼 있는지 확인해 줘"라고 물으면 스킬 목록에서 확인해 줍니다.

npx skills add heygen-com/hyperframes --all

2. 5위 픽셀 디졸브 프롬프트를 입력합니다. (고정 댓글)
   • 위치: Claude Code 입력창
   • 확인: 프롬프트에서 요청한 대로 6초짜리 MP4 파일이 렌더링됩니다. 저장 위치와 완료 표시는 고정 댓글에 없습니다. 보통 클로드 코드가 마지막에 파일 경로를 알려 주고, 모르면 "렌더링한 MP4 파일 경로 알려 줘"라고 물으면 됩니다.
   • 주의: 채널 주인은 추가 지시 없이 한 번만 넣었다고 적었습니다. (더보기란) 같은 결과가 나오는지는 확인되지 않았습니다.

HyperFrames로 6초짜리 모션 그래픽 만들어줘. 크기는 1080x830, 색은 페이퍼·차콜·빨강 3가지만. 첫 화면은 '어제의 나', 3초쯤 픽셀 디졸브(pixel dissolve) 전환으로 '오늘의 나'가 나오게 해줘. MP4로 렌더링해줘.

3. 4위 원 팝 전환 프롬프트를 입력합니다. (고정 댓글)
   • 위치: Claude Code 입력창
   • 확인: 6초짜리 MP4 파일이 렌더링됩니다. 저장 위치와 완료 표시는 고정 댓글에 없습니다.
   • 주의: 채널 주인은 추가 지시 없이 한 번만 넣었다고 적었습니다. (더보기란) 같은 결과가 나오는지는 확인되지 않았습니다.

HyperFrames로 6초짜리 모션 그래픽 만들어줘. 크기는 1080x830, 색은 페이퍼·차콜·빨강 3가지만. 첫 화면은 '아이디어', 3초쯤 원 팝 전환(circle pop transition)으로 '완성된 영상'이 나오게 해줘. MP4로 렌더링해줘.

4. 3위용 캐릭터 이미지 alex.png를 작업하는 폴더와 같은 폴더에 넣습니다. (고정 댓글)
   • 위치: 고정 댓글 표현은 "같은 폴더"입니다. 어느 폴더인지는 적혀 있지 않습니다. 클로드 코드를 실행한 작업 폴더에 넣는 것이 가장 무난합니다.
   • 확인: 그 폴더 안에 alex.png 파일이 보입니다.
   • 주의: alex.png는 채널 주인의 캐릭터 이미지입니다. 내 이미지를 쓸 때는 파일 이름을 바꾸고, 5단계 프롬프트의 alex.png도 같은 이름으로 고쳐 넣으면 됩니다.
5. 3위 텍스트 샌드위치 프롬프트를 입력합니다. (고정 댓글)
   • 위치: Claude Code 입력창
   • 확인: 6초짜리 MP4 파일이 렌더링됩니다. 저장 위치와 완료 표시는 고정 댓글에 없습니다.
   • 주의: 채널 주인은 추가 지시 없이 한 번만 넣었다고 적었습니다. (더보기란) 같은 결과가 나오는지는 확인되지 않았습니다.

HyperFrames로 6초짜리 모션 그래픽 만들어줘. 크기는 1080x830, 색은 페이퍼·차콜·빨강 3가지만. 큰 글자 'MOTION' 사이로 alex.png 캐릭터가 지나가는 텍스트 샌드위치(text sandwich) 효과로 만들어줘. MP4로 렌더링해줘.

6. 2위 화면 속 다이브 프롬프트를 입력합니다. (고정 댓글)
   • 위치: Claude Code 입력창
   • 확인: 6초짜리 MP4 파일이 렌더링됩니다. 저장 위치와 완료 표시는 고정 댓글에 없습니다.
   • 주의: 채널 주인은 추가 지시 없이 한 번만 넣었다고 적었습니다. (더보기란) 같은 결과가 나오는지는 확인되지 않았습니다.

HyperFrames로 6초짜리 모션 그래픽 만들어줘. 크기는 1080x830, 색은 페이퍼·차콜·빨강 3가지만. 노트북 화면 속으로 카메라가 들어가는 화면 속 다이브(screen dive)로, 화면 안의 '모션 그래픽' 장면이 꽉 차게 해줘. MP4로 렌더링해줘.

7. 1위 글자 관통 줌 프롬프트를 입력합니다. (고정 댓글)
   • 위치: Claude Code 입력창
   • 확인: 6초짜리 MP4 파일이 렌더링됩니다. 저장 위치와 완료 표시는 고정 댓글에 없습니다.
   • 주의: 채널 주인은 추가 지시 없이 한 번만 넣었다고 적었습니다. (더보기란) 같은 결과가 나오는지는 확인되지 않았습니다.

HyperFrames로 6초짜리 모션 그래픽 만들어줘. 크기는 1080x830, 색은 페이퍼·차콜·빨강 3가지만. 큰 글자 'AI' 속으로 카메라가 뚫고 들어가는 글자 관통 줌(letter fly-through)으로 다음 장면 '프롬프트 한 줄'이 나오게 해줘. MP4로 렌더링해줘.

마지막 점검

• HyperFrames 스킬을 설치했다.
• 다섯 프롬프트를 각각 한 번씩 넣었다. (고정 댓글)
• 3위 프롬프트를 넣기 전에 캐릭터 이미지를 같은 폴더에 넣었다. (고정 댓글)
• MP4 파일 5개가 만들어졌다. 각 프롬프트의 마지막 요청 기준입니다. (고정 댓글)

3위 프롬프트에서 캐릭터가 나오지 않으면 이미지 파일이 같은 폴더에 있는지부터 봅니다. 채널 주인이 적은 조건이 그것 하나이기 때문입니다. (고정 댓글)

프롬프트 틀에서 건질 것

이 영상에서 건질 것은 기법 이름 다섯 개와, 그 이름을 어떤 틀에 넣어 지시했는지입니다. 길이, 크기, 색 제한, 장면 내용, 기법 이름, 렌더링 요청. 틀이 단순해서 장면 내용과 기법 이름만 바꿔 넣으면 됩니다.

다만 한 번에 됐다는 것은 채널 주인의 말입니다. 결과가 마음에 들지 않을 때 고치는 방법도 영상에는 나오지 않아, 편집자 정리에 수정 요청 예시를 따로 적었습니다.

하이퍼프레임즈 실행에 필요한 Node.js와 FFmpeg가 설치돼 있는지 확인하고, 없으면 내 운영체제에 맞는 설치 방법을 알려 줘.

픽셀 디졸브 전환이 너무 빨라. 전환을 1.5초 동안 천천히 진행하고, 네모 조각 크기를 지금보다 두 배로 키워 줘. 다시 MP4로 렌더링해 줘.

텍스트 샌드위치에서 캐릭터가 글자 앞으로만 지나가 보여. 'MOTION' 중 O 두 개는 캐릭터 뒤에, 나머지 글자는 캐릭터 앞에 오게 바꿔 줘.

렌더링하기 전에 0초, 3초, 6초 장면을 이미지로 뽑아서 보여 줘. 확인하고 나서 MP4로 렌더링하자.

HyperFrames로 {길이}초짜리 모션 그래픽 만들어줘. 크기는 {가로x세로}, 색은 {색 3가지}만. 첫 화면은 '{첫 장면 글자}', {전환 시점}초쯤 {기법 한글 이름}({영문 이름}) 전환으로 '{다음 장면 글자}'가 나오게 해줘. MP4로 렌더링해줘.

출처: youtube.com/…