하이퍼프레임 사용법, 클로드 코드로 모션 그래픽 설치부터 렌더링까지

하이퍼프레임(HyperFrames) 사용법을 윈도우 클로드 앱 설치부터 스킬 설치, 디자인 시스템 정의, 장면 제작, 화면 캡처로 수정, 렌더링까지 67단계로 정리했습니다. 화자가 소리 내어 읽은 프롬프트 10개를 원문 그대로 담았고, 렌더링이 실패할 때 쓰는 우회 방법 두 가지와 영상에 없던 설치 명령·준비물도 보충했습니다.

하이퍼프레임과 클로드 코드로 무엇을 하나

라이프3.0픽처스 채널의 12분 40초짜리 시연입니다. 화자가 윈도우용 클로드(Claude) 앱을 설치하는 순간부터 헤이젠(HeyGen)의 HyperFrames 스킬을 붙이고, 디자인 시스템을 정의하고, 8초짜리 장면을 만들고, 화면 캡처로 고치고, 렌더링해서 파일을 얻는 데까지를 끊김 없이 보여줍니다.

하이퍼프레임은 HTML(웹페이지를 만드는 언어)로 영상 장면을 짜고 그것을 MP4 영상으로 렌더링하는 헤이젠의 오픈소스 도구입니다. 여기에 "스킬"(클로드 코드가 특정 작업 요령을 익히도록 넣어 주는 설명서 묶음)을 설치하면, 클로드 코드가 하이퍼프레임 문법에 맞춰 모션 그래픽을 알아서 만들어 줍니다.

화자가 하는 일은 결국 하나입니다. 클로드 코드 입력창에 한국어로 "이렇게 만들어 달라"고 쓰고, 나온 결과를 프린트 스크린으로 찍어 다시 붙여넣고 "여기를 이렇게 고쳐 달라"고 쓰는 것. 화자가 코드를 직접 치는 장면은 발화에 없습니다. 흐름은 준비(설치·폴더), 스킬 설치, 디자인 시스템(design.md), 소재 파일(assets), scene 제작, 캡처로 수정, 렌더링의 7토막이고, 마지막에 렌더링이 안 될 때의 우회 두 가지와 8편을 따로 만들었을 때의 아쉬움을 화자 경험으로 덧붙입니다.

시작 전에 챙길 것

• 윈도우 PC. 화자는 윈도우용 클로드를 설치합니다. 맥에서도 같은 흐름으로 할 수 있습니다
• 클로드 계정. 프로 이상 요금제가 필요하다는 게 화자 말이고, 제작 시점 기준 월 19달러라고 합니다. 요금은 바뀔 수 있으니 결제 전 공식 안내를 확인해야 합니다
• 구글 계정. 로그인은 '구글로 계속하기'로 합니다
• 소재 파일. assets.zip은 영상 더보기란 또는 고정 댓글 링크에서 받습니다. 뒤에 005.mp4·005.srt와 ChatGPT 로고 이미지도 씁니다. 로고를 어디서 받았는지는 영상에 없습니다
• Node.js와 FFmpeg. 영상에서는 언급하지 않지만 하이퍼프레임 공식 문서는 Node.js 22 이상과 FFmpeg(영상 변환 프로그램)를 요구합니다. 설치돼 있지 않으면 스킬 설치나 렌더링 단계에서 클로드 코드가 설치를 안내하거나 대신 설치해도 되는지 묻습니다
• 비용은 클로드 프로 요금제 외에 언급이 없습니다. HyperFrames 자체 비용도 영상에서 다루지 않습니다

1장. 윈도우용 클로드 설치

1. 브라우저 주소창에 클로드라고 입력합니다.
   • 확인: 주소창에 글자가 들어갑니다.
2. 엔터키를 누릅니다.
   • 확인: 검색 결과가 뜹니다.
3. 검색 결과에서 클로드 아이콘을 클릭합니다.
   • 위치: 호박색 원 안에 방사형 꽃잎 모양 아이콘(화자 묘사).
   • 확인: 클로드 첫 화면이 펼쳐집니다.
4. '구글로 계속하기'를 누릅니다.
   • 확인: 구글 아이디로 로그인됩니다.
5. 좌측 하단 프로필 아이콘을 누릅니다.
   • 확인: 메뉴가 펼쳐집니다.
6. '앱 및 확장 프로그램 받기'를 클릭합니다.
   • 확인: 클로드 코드 제품군 목록이 보입니다.
   • 대안: claude.ai/download 주소로 바로 가도 같은 다운로드 화면이 나옵니다.
7. '윈도우용 다운로드'를 클릭합니다.
   • 확인: 설치 프로그램이 다운로드됩니다.
8. 다운받은 파일을 더블클릭합니다.
   • 확인: 설치가 진행됩니다.
9. 윈도우 검색창에 영문으로 Claude를 입력합니다.
   • 확인: 검색 결과에 클로드 앱이 보입니다.
10. 엔터키를 누릅니다.
    • 확인: 클로드 앱이 열립니다. 로그인 화면이 나오면 4단계와 같은 구글 계정으로 로그인합니다.

2장. 클로드 코드 작업 폴더와 모델 설정

11. 좌측 상단 3개 메뉴 중 </> Code를 클릭합니다.
    • 확인: 클로드 코드 화면으로 들어갑니다.
12. 하단 입력창 바로 위 '로컬' 옆의 '폴더 선택...'을 클릭합니다.
    • 확인: '로컬 세션용 폴더 선택' 팝업창이 뜹니다.
13. 팝업에서 원하는 경로에 새 폴더를 만듭니다.
    • 참고: 화자는 바탕화면에 20260526_HyperFrame 폴더를 만들었습니다.
    • 확인: 새 폴더가 목록에 보입니다.
14. '폴더 선택'을 누릅니다.
    • 확인: 작업 디렉토리(클로드 코드가 파일을 만들고 고치는 폴더)가 지정됩니다.
15. 우측 하단 모델 선택에서 '오퍼스 4.7'을 선택합니다.
    • 주의: 모델명은 자막 표기 그대로입니다. 목록에 없으면 그때 쓸 수 있는 가장 상위 오퍼스 모델을 고르면 됩니다.
    • 확인: 모델 이름이 바뀝니다.
16. 작업량은 '보통'을 선택합니다.
    • 확인: 작업량 표시가 '보통'으로 바뀝니다. 작업량은 답하기 전에 얼마나 오래 생각할지 정하는 설정입니다.

3장. 하이퍼프레임 스킬 설치

17. 브라우저 주소창에 영문으로 Heygen Hyperframes를 입력합니다.
    • 확인: 주소창에 글자가 들어갑니다.
18. 엔터키를 누릅니다.
    • 확인: 검색 결과가 뜹니다.
19. 검색 결과 중 헤이젠(HeyGen)의 하이퍼프레임즈를 클릭합니다.
    • 확인: 하이퍼프레임 첫 페이지가 열립니다.
20. 페이지 하단 'Click to copy'를 클릭합니다.
    • 확인: CLI 명령어(터미널에 입력하는 설치 명령)가 클립보드에 복사됩니다.
    • 주의: 화자는 명령어 내용을 읽지 않았습니다. 페이지 버튼이 복사해 주는 최신 명령을 쓰는 것이 우선이고, 하이퍼프레임 공식 문서에 실린 스킬 설치 명령은 아래와 같습니다.

npx skills add heygen-com/hyperframes --all

21. 클로드 코드 입력창으로 돌아옵니다.
    • 확인: 입력창이 보입니다.
22. 입력창 위에서 마우스 우측 버튼을 클릭합니다.
    • 확인: 메뉴가 뜹니다.
23. '붙여넣기'를 선택합니다.
    • 확인: 방금 복사한 명령어가 입력창에 붙습니다.
24. 엔터키를 누릅니다.
    • 확인: 하이퍼프레임 스킬 설치가 시작됩니다.
25. 설치 권한을 물으면 '허용'을 클릭합니다.
    • 확인: "하이퍼프레임 스킬이 설치되었습니다" 메시지가 나옵니다.

4장. 디자인 시스템 정의

여기서부터는 타이핑입니다. 화자가 읽어 준 프롬프트를 그대로 옮깁니다. 디자인 시스템은 색, 글꼴, 여백, 움직임 규칙을 한곳에 정해 두는 문서로, 장면을 여러 개 만들어도 같은 분위기를 유지하게 해 줍니다.

26. 입력창에 다음을 입력합니다.
    • 확인: 입력창에 문장이 들어갑니다.

챗GPT의 등장과 엔비디아의 주가 폭발을 주제로 모션 그래픽 영상을 만들려고 합니다.
엔비디아의 CI, BI를 기준으로 디자인 시스템을 정의해 주세요.
엔비디아 GTC 영상의 분위기가 나면 좋겠어요.

27. '보내기' 버튼을 누릅니다.
    • 확인: 팝업창이 뜹니다.
28. 팝업에서 '워크스페이스 신뢰'를 클릭합니다.
    • 확인: 클로드가 디자인 시스템을 정의해 줍니다.
29. 입력창에 다음을 입력하고 보냅니다.
    • 확인: MD 파일 두 개가 생성됩니다.

위에 디자인 시스템을 design.md 파일로 만들어 이 프로젝트에서 참조해 주세요

5장. 소재 파일 준비

30. 더보기란 또는 고정 댓글의 링크에서 assets.zip을 다운로드합니다.
    • 확인: 다운로드 폴더에 zip 파일이 있습니다.
31. 2장에서 만든 작업 폴더에 압축을 풉니다.
    • 확인: assets 폴더 안에 001.mp4, reference_frame.png, 001.srt, script.txt가 있습니다.
    • 참고(화자 설명): 001.mp4는 모션 그래픽을 오버레이할 소스 영상, reference_frame.png는 001.mp4에서 캡처한 이미지로 클로드가 화면 영역을 파악하게 하는 용도, 001.srt는 타임라인이 있는 8초 자막 파일('브루'라는 프로그램에서 제작), script.txt는 전체 나레이션 스크립트로 클로드가 전체 맥락을 이해하게 하는 용도입니다.
    • 대안: 내 영상으로 하려면 같은 구성으로 준비합니다. 소스 영상, 그 영상의 한 장면 캡처, 자막 파일(SRT, 시간 정보가 붙은 자막 형식), 전체 대본 텍스트 파일 네 가지입니다.
32. 탐색기에서 assets 폴더에 마우스를 올리고 오른쪽 버튼을 클릭합니다.
    • 확인: 메뉴가 펼쳐집니다.
33. '경로로 복사'를 선택합니다.
    • 확인: 폴더 경로가 클립보드에 복사됩니다.
34. 클로드 코드 입력창에 복사한 경로를 붙여넣습니다.
    • 확인: 입력창에 경로가 보입니다.

6장. 연출 프롬프트 작성 후 scene01 제작

화자는 바로 "만들어 달라"고 하지 않습니다. 먼저 클로드에게 연출 프롬프트를 쓰게 하고, 그 프롬프트로 장면을 만들게 합니다. 두 번에 나눕니다.

35. 경로 뒤에 이어서 다음을 입력합니다.
    • 확인: 입력창에 경로와 문장이 함께 들어갑니다.

001.srt를 기준으로 동영상 연출을 위한 프롬프트를 작성해주세요.
영상에서 캡처한 레퍼런스 프레임을 참조하여 등장인물을 기준으로 좌우 여백에
타이포그래피, 그래픽 요소, 기업 로고가 장면 위에 자연스럽게 오버레이되는 방식입니다.
팟캐스트의 하이라이트 인트로처럼 시청자가 초반부터 강하게 몰입할 수 있는
모션 그래픽 영상으로 구성해주세요. 전체 영상 내용은 script.txt 파일을 참고하면 됩니다.

36. '보내기' 버튼을 누릅니다.
    • 확인: 클로드가 연출 프롬프트를 작성해 줍니다.
37. 입력창에 다음을 입력합니다.
    • 확인: 입력창에 문장이 들어갑니다.

위에 작성한 프롬프트를 기반으로 scene01을 하이퍼프레임 스킬을 활용해 제작해주세요

38. 엔터키를 누릅니다.
    • 확인: 동영상 제작이 시작됩니다.
39. 작업 실행 여부를 묻는 창이 나오면 '항상 허용'을 클릭합니다.
    • 확인: 작업이 멈추지 않고 진행됩니다.
40. 클로드가 작업을 마치면 우측의 검은색 프리뷰 창을 닫습니다.
    • 확인: 프리뷰 창이 사라집니다.
41. 입력창에 다음을 입력하고 보냅니다.
    • 확인: 브라우저에서 확인할 수 있는 UI(하이퍼프레임 스튜디오)가 열립니다.

결과물을 볼 수 있도록 브라우저에서 하이퍼 프레임 스튜디오 UI를 띄워주세요

42. 플레이 버튼을 누릅니다.
    • 확인: 모션 그래픽 영상이 재생됩니다. 화자 예시 나레이션은 "2022년 11월 30일 챗GPT가 세상에 나왔습니다…"입니다.

7장. 화면 캡처로 수정 요청

수정 방식이 이 영상의 핵심입니다. 고칠 지점에서 화면을 캡처해 붙여넣고, 자연어로 지시합니다.

43. 수정할 부분에 재생 인디케이터(타임라인 위 현재 위치 표시)를 위치시킵니다.
    • 확인: 해당 장면이 화면에 멈춰 있습니다.
44. 프린트 스크린(Print Screen) 키를 눌러 화면을 캡처합니다.
    • 확인: 클립보드에 캡처가 들어갑니다.
45. 클로드 코드 입력창에 붙여넣기 합니다.
    • 확인: 캡처 이미지가 첨부됩니다.
46. 다음을 입력합니다.
    • 확인: 입력창에 문장이 들어갑니다.

첨부 화면에서 2022.11.30 글자를 1.3배로 키워주고 스플릿 플랩 디스플레이 형태로 연출해주세요

47. '보내기' 버튼을 누릅니다.
    • 확인: 잠시 후 수정된 영상을 확인할 수 있습니다. 스플릿 플랩 디스플레이는 옛 공항 전광판처럼 글자판이 촤라락 넘어가며 바뀌는 연출입니다.
    • 참고: 크기·스타일·컬러·모션도 같은 방식(자연어)으로 수정 요청할 수 있다고 화자는 말합니다.
48. 인디케이터를 'ChatGPT' 텍스트가 나오는 부분에 멈춥니다.
    • 확인: 해당 장면이 멈춰 있습니다.
49. 화면을 캡처합니다.
    • 확인: 클립보드에 캡처가 들어갑니다.
50. 캡처를 입력창에 붙여넣습니다.
    • 확인: 이미지가 첨부됩니다.
51. ChatGPT 로고 파일을 다운로드합니다.
    • 참고: 다운로드 출처는 영상에 없습니다. 기업 로고는 해당 회사의 공식 브랜드 자료 페이지에서 받는 것이 안전하고, 사용 조건도 그 페이지에서 확인합니다.
    • 확인: 로고 이미지 파일이 있습니다.
52. 로고 파일을 assets 폴더에 추가합니다.
    • 확인: assets 폴더에 로고 파일이 보입니다.
53. 다음을 입력합니다.
    • 확인: 입력창에 문장이 들어갑니다.

assets 폴더에 있는 ChatGPT 로고를 화면에 크게 추가해주세요

54. '보내기' 버튼을 누릅니다.
    • 확인: 클로드 코드가 작업을 시작하고, 결과물에 로고가 들어갑니다.
    • 주의(화자): 수정은 클로드 사용량을 빠르게 소모합니다. 5시간 사용량과 주간 사용량 한도가 있으니 처음 나온 결과물을 보고 계획을 세워 수정하라고 합니다.

8장. scene05, 메인 영상 축소와 여백 콘텐츠, 지구본 배경

영상 첫머리에서 보여준 "본 화면이 작아지면서 우측 하단으로 이동하고, 넓어진 여백에 콘텐츠가 뜨는" 연출입니다.

55. 005.mp4, 005.srt 파일을 다운로드합니다.
    • 확인: 두 파일이 다운로드 폴더에 있습니다.
56. 두 파일을 assets 폴더에 넣습니다.
    • 확인: assets 폴더에 005.mp4, 005.srt가 보입니다.
57. 다음을 입력합니다.
    • 확인: 입력창에 문장이 들어갑니다.

005.mp4, 005.srt 파일을 기반으로 편집을 해주세요. scene05에 해당합니다.
영상이 시작되면서 영상이 우측 하단에 배치된 세로형 9대16 비율의 모서리가 둥근 직사각형 형태로 축소되고,
중앙에 검은색 영역이 열리면서 모션 그래픽이 들어갑니다.
즉, 넓은 공간에는 국가별 시가총액 내용이 들어가며 국가명 위에는 나라의 국기 이미지를 넣어주세요.

58. '보내기' 버튼을 누릅니다.
    • 확인: 작업 후 결과물에서 국가별 시가총액과 국기가 보입니다.
59. 다음을 입력하고 보냅니다.
    • 확인: 잠시 뒤 지구본 애니메이션이 배경에 들어갑니다.
    • 참고: '21st.dev'는 웹 UI 컴포넌트를 모아 둔 사이트입니다.

'21st.dev'를 참고하여 회전하는 와이어프레임 지구본 애니메이션을 배경에 자연스럽게 넣어주세요

9장. 하이퍼프레임 스튜디오에서 렌더링

60. 하이퍼프레임 스튜디오 우측 상단 'Inspector' 버튼을 누릅니다.
    • 확인: 우측 컬럼이 펼쳐지고 탭 3개가 보입니다.
61. 'Renders' 탭을 누릅니다.
    • 확인: 렌더 설정 항목이 보입니다.
62. 해상도·퀄리티·초당 프레임 수·동영상 포맷을 선택합니다.
    • 주의: 화자는 구체 값을 읽지 않았습니다. 유튜브용이라면 1920x1080(가로) 또는 1080x1920(세로), 30fps, MP4가 무난한 기본값입니다.
    • 확인: 각 항목이 선택돼 있습니다.
63. 'Export' 버튼을 누릅니다.
    • 확인: 렌더링이 시작되고, 파일은 작업 폴더의 scene05/renders 폴더에 저장됩니다.

10장. 렌더링이 안 될 때 (화자 경험)

화자는 여기서 자기 경험을 꺼냅니다. HyperFrames가 브라우저 기반 렌더링이라 에러가 뜨기도 하고, 자바스크립트로 도는 와이어프레임 지구본이 렌더 결과에 안 들어가는 경우도 있었다고 합니다. 그럴 때 쓰는 우회 두 가지입니다.

64. 클로드 코드 입력창에 다음을 입력해 렌더링을 시도합니다.
    • 확인: 오류가 나면 클로드 코드가 오류 로그 분석, 원인 진단, 코드 수정, 재시도까지 한 번에 처리합니다(화자 주장).
    • 참고: 화자는 스튜디오 UI에서 렌더링할 때보다 결과물을 얻을 확률이 높아진다고 말합니다. 이때 클로드 코드는 보통 하이퍼프레임 명령줄 도구의 렌더 명령(npx hyperframes render)을 실행해 처리합니다.

scene05를 렌더링해주세요

65. 그래도 실패하면 플레이 패널 우측의 'Enter fullscreen'을 누릅니다.
    • 확인: 전체 화면으로 전환됩니다.
66. 키보드 프린트 스크린 키를 눌러 동영상 캡처 상태로 만듭니다.
    • 주의: 자막 발화 그대로입니다. 윈도우 11의 캡처 도구는 프린트 스크린 키로 열리고 동영상 녹화 모드를 고를 수 있습니다. Win+Alt+R(Xbox Game Bar 녹화)로도 화면을 녹화할 수 있습니다.
    • 확인: 녹화 대기 상태가 됩니다.
67. 플레이 버튼을 누릅니다.
    • 확인: 동영상이 캡처(녹화)됩니다. 화자는 퀄리티는 부족하지만 정식 렌더링 결과물과 유사한 파일을 얻을 수 있다고 말합니다.

완성작과 화자의 회고

화자는 8초 길이 영상 8편을 각각 만들어 이어 붙인 완성작을 보여줍니다. 나레이션은 엔비디아 시가총액 이야기입니다. "챗GPT 출시 당시 시가총액 약 4,200억 달러, 세계 시총 순위 10위권 밖, 2024년 6월 마이크로소프트 추월, 지금 5조 5천억 달러 규모로 한국 4조 5천억·영국 4조·프랑스 3조 5천억·독일 3조 달러보다 큽니다." 이 숫자들은 화자가 만든 영상 안의 나레이션이지 이 글이 검증한 시장 데이터가 아닙니다.

그리고 솔직하게 아쉬운 점을 말합니다. 8편을 따로 작업하니 모션 그래픽은 다채로워졌는데, 전체를 관통하는 일관성이 다소 떨어진다는 것입니다.

대안으로 제시하는 건 순서를 바꾸는 겁니다. 8편을 먼저 1편으로 연결한 다음 클로드 코드에서 모션 그래픽을 한 번에 입히면 일관성이 잡힌다고 합니다. 이때는 사전에 스토리보드로 설계를 구체화한 뒤 입히라고 권합니다. 다만 그렇게 하면 앞의 완성작처럼 다양하고 풍부한 느낌은 덜할 수 있다는 단서도 붙입니다. 8편을 어떤 도구로 이어 붙였는지는 영상에 없습니다. 캡컷 같은 편집 프로그램을 써도 되고, 클로드 코드에 "scene01부터 scene08 렌더 파일을 순서대로 이어 붙여 줘"라고 요청해도 FFmpeg로 합쳐 줍니다.

하이퍼프레임 작업에서 막힐 만한 곳

• 첫 프롬프트를 보내면 팝업이 뜹니다. '워크스페이스 신뢰'를 누르면 됩니다.
• 장면을 만드는 도중 실행 여부를 계속 물어봅니다. '항상 허용'으로 넘깁니다.
• 스튜디오 UI 렌더링에서 에러가 나면 64단계처럼 클로드 코드 입력창에서 렌더링을 시킵니다.
• 지구본 같은 JS 애니메이션이 렌더에 빠지면 위와 같고, 그래도 안 되면 65~67단계의 전체 화면 녹화로 갑니다.
• 수정을 반복하다 사용량 한도에 걸릴 수 있다고 화자는 말합니다. 첫 결과물을 보고 계획을 세운 뒤 고치라는 게 화자 조언입니다.
• 8편을 따로 만들면 일관성이 떨어지더라는 게 화자 소감입니다. 1편으로 연결한 뒤 한 번에 입히고, 그 전에 스토리보드를 그리라고 합니다.
• 스킬 설치나 렌더링에서 node, ffmpeg 관련 오류가 나면 Node.js 22 이상과 FFmpeg가 설치됐는지 확인합니다. 클로드 코드에 "하이퍼프레임 실행에 필요한 프로그램이 설치됐는지 확인해 줘"라고 물어도 됩니다.

프롬프트 10개로 끝나는 작업량

따라 하는 데 실제로 손이 가는 건 프롬프트 10개와 캡처 몇 번입니다. 이 영상에서 건질 것은 두 가지입니다. 하나는 "만들어 달라" 전에 "연출 프롬프트를 써 달라"고 한 번 거치는 35~37단계의 순서. 다른 하나는 스튜디오 UI가 아니라 클로드 코드 입력창에 렌더링을 시키는 64단계의 우회입니다. 반대로 이 글만으로 재현이 안 되는 곳도 분명합니다. 렌더 설정의 화자 값, ChatGPT 로고 출처, 그리고 scene02~04·06~08을 어떻게 만들었는지는 영상에 나오지 않습니다. 화자가 시연한 건 scene01과 scene05뿐입니다.

이 글은 라이프3.0픽처스 채널의 760초(약 12분 40초) 분량 영상을 자동 자막 기반(빠른 모드)으로 정리했고 화면은 대조하지 못했습니다. 스킬 설치 명령, Node.js·FFmpeg 요구 사항, 렌더 명령은 하이퍼프레임 공식 문서를 옮긴 것이고, 렌더 설정 기본값과 화면 녹화 방법, 영상 이어 붙이기 방법은 편집자가 덧붙였습니다. 고유명사 '오퍼스 4.7', 'Heygen Hyperframes', '21st.dev'는 자막 표기를 따랐습니다.

출처: youtu.be/…