클로드 코드+하이퍼프레임! 모션 그래픽 입문, 19달러로 3D 지구본 만들기

클로드 코드와 하이퍼프레임으로 모션 그래픽 영상 만들기! 🚀

오늘은 클로드 코드랑 하이퍼프레임이라는 도구를 써서 멋진 모션 그래픽 영상을 만들어 볼 거야. 영상이 작아지면서 오른쪽 아래로 슝~ 하고 이동하고, 빈 공간에는 3D 지구본이 빙글빙글 돌아가는 걸 넣어볼 거야. 중학생도 쉽게 따라 할 수 있게 단계별로 설명해 줄게!

1단계: 클로드 코드 설치하기 (프로 요금제 필요!)

• 준비물: 클로드 '프로' 요금제 (월 19달러 정도)
• 방법:
  1. 브라우저에 'Claude'라고 검색해서 클로드 웹사이트에 들어가.
  2. 호박색 동그라미에 꽃잎 모양 아이콘을 클릭해.
  3. '구글로 계속하기'를 눌러서 구글 계정으로 로그인해.
  4. 왼쪽 아래 프로필 아이콘을 누르고 '앱 및 확장 프로그램 받기'를 클릭해.
  5. '윈도우용 다운로드'를 눌러서 설치 파일을 받아.
  6. 다운받은 파일을 더블클릭해서 설치해.
  7. 윈도우 검색창에 'Claude'라고 쳐서 클로드 앱을 열어.
  8. 왼쪽 위 메뉴에서 'Code'를 선택하면 클로드 코드로 들어갈 수 있어.

2단계: 작업 폴더 설정하고 모델 고르기

• 방법:
  1. 클로드 코드 화면 아래쪽에 '로컬' 옆에 있는 '폴더 선택...'을 클릭해.
  2. 새로운 폴더를 만들 거야. 바탕화면에 '20260526_HyperFrame'이라고 이름을 지어볼까?
  3. 만든 폴더를 선택해서 '폴더 선택'을 눌러. 이제 클로드 코드가 이 폴더 안에서 파일을 만들고 관리할 수 있어.
  4. 오른쪽 아래에서 모델을 선택할 수 있는데, '오퍼스 4.7'을 고르고 작업량은 '보통'으로 해두자.

3단계: 하이퍼프레임 스킬 설치하기

• 방법:
  1. 브라우저에 'Heygen Hyperframes'라고 검색해서 해당 페이지로 들어가.
  2. 페이지 아래쪽에 있는 'Click to copy'를 눌러서 CLI 명령어를 복사해.
  3. 클로드 코드 입력창에 마우스 오른쪽 버튼을 눌러 '붙여넣기'를 선택해.
  4. 복사한 명령어가 입력되면 엔터키를 눌러.
  5. 설치 권한을 물어보면 '허용'을 눌러줘. 이제 하이퍼프레임 스킬이 설치됐어!

4단계: 첫 번째 영상 만들기 요청하기

• 방법:
  1. 입력창에 이렇게 써보자: "챗GPT의 등장과 엔비디아의 주가 폭발을 주제로 모션 그래픽 영상을 만들려고 합니다. 엔비디아의 CI, BI를 기준으로 디자인 시스템을 정의해 주세요. 엔비디아 GTC 영상의 분위기가 나면 좋겠어요."
  2. '보내기' 버튼을 누르고 팝업창이 뜨면 '워크스페이스 신뢰'를 클릭해.
  3. 클로드가 디자인 시스템을 만들어 줄 거야.
  4. 다음으로 이렇게 입력해: "위에 디자인 시스템을 design.md 파일로 만들어 이 프로젝트에서 참조해 주세요."
  5. 이제 design.md 파일이 만들어졌을 거야.

5단계: 영상에 필요한 파일 다운로드 및 준비

• 준비물: assets.zip 파일 (더보기란이나 고정 댓글 링크에서 다운로드)
• 방법:
  1. 다운받은 assets.zip 파일을 아까 만든 작업 폴더에 압축을 풀어.
  2. assets 폴더 안에 001.mp4, reference_frame.png, 001.srt, script.txt 파일이 있을 거야.
     • 001.mp4: 모션 그래픽을 입힐 원본 영상
     • reference_frame.png: 클로드가 영상의 영역을 파악하도록 돕는 이미지
     • 001.srt: 영상에 맞춰 자막을 넣기 위한 타임라인 정보 파일 (8초 분량)
     • script.txt: 영상 전체 내용을 담은 나레이션 스크립트

6단계: 영상 연출 프롬프트 작성 요청

• 방법:
  1. 탐색기에서 assets 폴더를 오른쪽 클릭하고 '경로로 복사'를 선택해.
  2. 클로드 코드 입력창에 복사한 경로를 붙여넣고 이렇게 입력해: "001.srt를 기준으로 동영상 연출을 위한 프롬프트를 작성해주세요. 영상에서 캡처한 레퍼런스 프레임을 참조하여 등장인물을 기준으로 좌우 여백에 타이포그래피, 그래픽 요소, 기업 로고가 장면 위에 자연스럽게 오버레이되는 방식입니다. 팟캐스트의 하이라이트 인트로처럼 시청자가 초반부터 강하게 몰입할 수 있는 모션 그래픽 영상으로 구성해주세요. 전체 영상 내용은 script.txt 파일을 참고하면 됩니다."
  3. '보내기' 버튼을 누르면 클로드가 프롬프트를 만들어 줄 거야.

7단계: 하이퍼프레임으로 영상 제작 시작!

• 방법:
  1. 입력창에 이렇게 입력해: "위에 작성한 프롬프트를 기반으로 scene01을 하이퍼프레임 스킬을 활용해 제작해주세요."
  2. 엔터키를 누르면 영상 제작이 시작돼. 중간에 작업 실행 여부를 물어보면 '항상 허용'을 눌러줘.
  3. 클로드가 작업을 마치면 오른쪽 검은색 프리뷰 창을 닫고 이렇게 입력해: "결과물을 볼 수 있도록 브라우저에서 하이퍼 프레임 스튜디오 UI를 띄워주세요."
  4. 브라우저에서 하이퍼프레임 스튜디오가 열리면 플레이 버튼을 눌러 영상을 확인해 봐!

8단계: 영상 수정하기 (자연어로 요청!)

• 방법:
  1. 영상에서 수정하고 싶은 부분에 인디케이터를 놓고 화면을 캡처해. (프린트 스크린 키 사용)
  2. 캡처한 화면을 클로드 코드 입력창에 붙여넣고 이렇게 입력해: "첨부 화면에서 2022.11.30 글자를 1.3배로 키워주고 스플릿 플랩 디스플레이 형태로 연출해주세요."
  3. 엔터키를 누르고 기다리면 수정된 영상이 나와.
  4. 이런 식으로 크기, 스타일, 색깔, 움직임 등을 자연어로 요청하면 클로드가 수정해 줄 거야.
  5. 팁: ChatGPT 로고를 추가하고 싶으면, 로고 파일을 다운받아 assets 폴더에 넣고 "assets 폴더에 있는 ChatGPT 로고를 화면에 크게 추가해주세요."라고 요청하면 돼.
  6. 주의: 수정할 때마다 클로드 사용량이 소모되니까, 처음 결과물을 보고 계획을 세워서 수정하는 게 좋아.

9단계: 메인 영상 축소 및 콘텐츠 배치

• 방법:
  1. 005.mp4, 005.srt 파일을 다운받아 assets 폴더에 넣고 이렇게 입력해: "005.mp4, 005.srt 파일을 기반으로 편집을 해주세요. scene05에 해당합니다. 영상이 시작되면서 영상이 우측 하단에 배치된 세로형 9대16 비율의 모서리가 둥근 직사각형 형태로 축소되고 중앙에 검은색 영역이 열리면서 모션 그래픽이 들어갑니다. 즉, 넓은 공간에는 국가별 시가총액 내용이 들어가며 국가명 위에는 그 나라의 국기 이미지를 넣어주세요."
  2. '보내기' 버튼을 누르면 클로드가 작업을 시작해. 결과물을 확인해 봐!

10단계: 배경에 3D 지구본 애니메이션 추가

• 방법:
  1. 입력창에 이렇게 입력해: "'21st.dev'를 참고하여 회전하는 와이어프레임 지구본 애니메이션을 배경에 자연스럽게 넣어주세요."
  2. 잠시 후 확인하면 지구본 애니메이션이 배경에 추가된 걸 볼 수 있을 거야.

11단계: 최종 영상 렌더링하기

• 방법:

  1. 하이퍼프레임 스튜디오 인터페이스 오른쪽 위에 있는 'Inspector' 버튼을 눌러.
  2. 오른쪽 컬럼에서 'Renders' 탭을 클릭해.
  3. 해상도, 퀄리티, 초당 프레임 수, 동영상 포맷을 선택하고 'Export' 버튼을 누르면 영상 파일로 렌더링이 시작돼.
  4. 렌더링 파일은 작업 중인 scene05 폴더 안의 renders 폴더에 저장돼.

• 렌더링 오류 시 대처법:

  • 클로드 코드에 렌더링 요청: 하이퍼프레임 스튜디오에서 오류가 나면, 클로드 코드 입력창에 "scene05를 렌더링해주세요."라고 입력해서 다시 시도해 봐. 클로드가 오류를 분석하고 수정해서 렌더링해 줄 확률이 높아.
  • 화면 녹화: 그래도 실패하면, 플레이 패널에서 전체 화면으로 전환한 후 프린트 스크린 키를 눌러 동영상을 캡처하는 방법도 있어. 화질은 조금 떨어질 수 있지만 결과물을 얻을 수 있어.

12단계: 완성된 영상 확인 및 마무리

• 이제 8편의 영상이 완성되었을 거야. 각각 따로 작업해서 다채로운 모션 그래픽이 들어갔지만, 전체적인 일관성이 조금 떨어질 수 있어.
• 일관성 높이기: 8편의 영상을 하나로 합치고 클로드 코드에서 모션 그래픽을 한 번에 입히면 일관성을 높일 수 있어. 이때는 미리 스토리보드를 자세히 짜두는 게 좋아.
• 마지막으로 완성된 영상을 보면서 오늘 배운 내용을 정리해 보자!

오늘 클로드 코드와 하이퍼프레임을 이용해서 멋진 모션 그래픽 영상을 만들어 봤어. 수고 많았어! 👍