MOODLABAI STUDIO

MOODLAB AI STUDIO

클로드 환경 설치법 — Claude Code와 HyperFrames 준비하기

클로드버전 영상을 우리 가게 버전으로 만들고 싶다면, 먼저 내 PC에서 Claude가 영상을 직접 만들 수 있는 환경부터 준비해요. 순서는 딱 다섯 단계! Claude Code 열기 → Node.js·FFmpeg 확인 → HyperFrames 스킬 설치 → 준비 상태 점검 → 5초 시험 영상이에요.

HyperFrames는 HeyGen이 공개한 무료 오픈소스(Apache-2.0) 영상 도구예요. HTML과 애니메이션 코드로 화면을 만들고 MP4로 렌더링해요. 스킬은 Claude에게 “HyperFrames로 영상을 어떻게 만들고 검사하는지” 알려 주는 작업 지침 묶음이고, 실제 렌더링은 HyperFrames CLI라는 실행 도구가 맡아요. 둘 다 아래 순서대로 준비하면 돼요.

준비물 한눈에

  • Windows 10(1809 이상) 또는 Windows 11 PC와 인터넷 연결
  • Claude 유료 요금제(Claude Code는 Pro, Max, Team, Enterprise 요금제에서 쓸 수 있어요)
  • Claude 데스크톱 앱의 Code 탭, 또는 터미널용 Claude Code
  • Node.js 22 이상, FFmpeg
  • HyperFrames 스킬(설치 방법은 3단계)

렌더링에 쓰는 전용 크롬(헤드리스 브라우저)은 처음 영상을 만들 때 HyperFrames가 자동으로 내려받아요. 이 블로그와 HyperFrames는 무료지만, Claude 이용 요금은 각자의 요금제를 따라요.

1. Claude Code 열기

가장 쉬운 방법은 Claude 데스크톱 앱이에요. 앱을 설치하고 로그인한 뒤 Code 탭에서 작업 폴더를 열면 Claude가 그 폴더 안에서 파일을 만들고 실행할 수 있어요. 자세한 화면 안내는 Claude Code 데스크톱 시작하기에 있어요.

터미널이 편하다면 PowerShell에서 공식 설치 명령으로 Claude Code를 설치할 수도 있어요.

irm https://claude.ai/install.ps1 | iex

PC에 ‘우리 가게 영상’처럼 알아보기 쉬운 빈 폴더를 하나 만들고, 그 폴더를 Claude Code에서 열어 두세요. 이후의 모든 작업은 이 폴더 안에서 진행해요.

2. Node.js와 FFmpeg, Claude에게 먼저 확인받기

설치 명령을 외울 필요는 없어요. 작업 폴더를 연 Claude에게 이렇게 보내 보세요.

이 PC에 Node.js 22 이상과 FFmpeg가 설치돼 있는지 확인해 줘.
없는 것이 있으면 공식 경로(winget의 OpenJS.NodeJS.LTS, Gyan.FFmpeg)로 설치하는 방법을 먼저 쉽게 설명하고,
내가 허락하면 설치를 진행해 줘. 끝나면 버전을 다시 확인해서 알려 줘.

직접 설치하고 싶다면 PowerShell에서 아래 두 줄이면 돼요. 설치가 끝나면 터미널(또는 Claude Code)을 새로 열어야 새 경로가 인식돼요.

winget install OpenJS.NodeJS.LTS
winget install Gyan.FFmpeg

확인은 node --version(v22 이상이면 OK)과 ffmpeg -version으로 해요. 설치 중 관리자 권한이나 동의 창이 뜨면 내용을 읽고 직접 선택해 주세요.

3. HyperFrames 스킬 설치하기

방법은 두 가지예요. 하나만 하면 돼요.

방법 A — 명령 한 줄(추천): Claude에게 “npx hyperframes skills 를 실행해서 HyperFrames 스킬을 설치해 줘”라고 부탁하거나, 터미널에서 직접 실행해요. HyperFrames 공식 안내에 따르면 이 명령은 스킬 전체를 내려받아 PC에 설치된 AI 도구(Claude Code 등)에 연결해 줘요.

npx hyperframes skills

방법 B — Claude Code 플러그인: 터미널용 Claude Code 대화창에 아래 명령을 입력하고 안내에 따라 설치해요. 이 블로그 PC의 Claude Code에도 이 공식 마켓플레이스 플러그인이 설치돼 있어요.

/plugin install hyperframes@claude-plugins-official

설치가 끝나면 Claude Code를 한 번 다시 시작해 주세요. 새로 설치한 스킬은 새 대화부터 인식돼요.

4. 준비 상태 점검하기

Claude에게 이렇게 부탁해 보세요.

npx hyperframes doctor 와 npx hyperframes skills check 를 실행하고,
영상 렌더링에 꼭 필요한 항목이 모두 준비됐는지 쉬운 말로 알려 줘.

doctor 결과에서 FFmpeg, FFprobe, Chrome에 체크(✓)가 있으면 기본 준비 끝! Docker, 음성 합성(TTS), 음악 생성(MusicGen) 같은 항목은 선택 기능이라 ✗로 나와도 클로드버전 예제를 따라 하는 데 문제없어요.

5. 5초 시험 영상으로 마무리

본격적인 영상 전에 짧게 한 번 돌려 보면 막히는 곳을 미리 찾을 수 있어요.

HyperFrames 스킬을 사용해서 '[우리 가게 이름]' 글자가 부드럽게 나타나는 5초짜리 정사각형 시험 영상을 만들어 줘.
미리보기를 확인한 뒤 MP4로 렌더링하고, 저장한 파일 경로를 알려 줘.

알려 준 경로의 .mp4를 열어 끝까지 재생되면 준비 완료예요. 이제 클로드버전 작품 중 마음에 드는 영상을 골라, 글의 복사용 프롬프트에서 대괄호만 우리 가게 정보로 바꿔 보내면 돼요.

알아 두면 좋은 점

  • 인터넷 연결: 처음 렌더링할 때 전용 크롬을 내려받고, 렌더링 중에도 애니메이션 라이브러리를 인터넷에서 불러와요.
  • 익명 사용 통계: HyperFrames는 익명 사용 통계를 기본으로 보내요. 원하지 않으면 npx hyperframes telemetry disable 로 끌 수 있어요.
  • 추가 비용이 생길 수 있는 기능: PC에 Gemini API 키(GEMINI_API_KEY)를 설정해 둔 경우, 장면 미리보기 명령(snapshot)이 Gemini 화면 분석을 함께 실행할 수 있어요. 비용이 걱정되면 “snapshot은 --describe false 로 실행해 줘”라고 덧붙여 주세요.
  • 막혔을 때: 오류 문구를 그대로 붙여 넣고 “무엇이 문제인지, 내가 할 일과 네가 할 일을 나눠서 알려 줘”라고 요청해 보세요.

이 안내를 확인한 환경

2026년 10월 12일, 이 블로그의 제작 PC(Windows)에서 Claude Code 2.1.286, Node.js 24.19.0, FFmpeg 9.0.1(winget Gyan.FFmpeg), HyperFrames CLI 0.8.149, HyperFrames 플러그인 0.8.61이 설치된 상태로 doctor·skills check를 실행하고 실제 영상을 렌더링했어요. 아무것도 설치되지 않은 새 PC에서 처음부터 설치하는 과정은 직접 검증하지 않았고, 위 설치 방법은 각 도구의 공식 안내를 따랐어요. Mac은 확인하지 않았어요. 도구 버전과 화면은 업데이트에 따라 달라질 수 있어요.

클로드버전 첫 글(입체 글자 브랜드 인트로)은 HyperFrames 이전에 Python·Pillow·NumPy·FFmpeg로 만들었어요. 그 글을 그대로 따라 할 때는 Node.js 대신 Python이 필요해요. Claude에게 “이 글의 방식에 필요한 도구가 내 PC에 있는지 확인해 줘”라고 먼저 물어보면 돼요.