Section 00
지금 뭘 만들 수 있게 됐나
5개 도구를 설치·연결해서, Claude에게 말로 시키면 영상·3D·수학애니메이션·제너러티브아트까지 코드로 만들어서 mp4/png/svg로 뽑아낼 수 있는 환경이 됐습니다. 전부 실제 렌더로 검증 완료.
설치된 도구
8종
렌더 검증
4/5 성공
전역 스킬
11개
수동 단계
1건 (Blender)
도구 → 한 줄 역할
도구무엇을 하나가장 잘 맞는 결과물
RemotionReact 컴포넌트로 비디오 작성데이터 차트·슬라이드형 영상
HyperFramesHTML+CSS/GSAP로 비디오 작성브랜드 필름·킨타입·설명 영상
MCP for Blender자연어로 Blender 3D 씬 조작3D 인트로·모델·렌더
ManimPython으로 수식·그래프 애니메이션3Blue1Brown식 설명 영상
algorithmic-art시드 기반 제너러티브 아트 코드배경·패턴·플로터/레이저 출력물
💡 다섯 도구는 서로 대체재가 아니라 조합 가능한 레이어입니다 — 자세한 조합 시나리오는 06번 섹션 참고.
Section 01
Remotion — React로 짜는 비디오
공식 Agent Skill 설치 완료(프로젝트 전용). remotion-starter/ (zip 받기)에서 렌더 검증됨.
이제 가능한 것
  • 데이터 기반 차트/픽토그램 애니메이션 — 발표자료의 막대·도넛·누적영역 그래프를 코드로 애니메이션
  • useCurrentFrame/interpolate/spring 기반 정밀 타이밍 제어 — 프레임 단위로 재현 가능한 모션
  • 웹 기술 그대로 재사용 — SVG·CSS·React 컴포넌트를 그대로 비디오 레이어로
  • interactivity/maps/multimedia 등 공식 스킬 9종 — 자막, 지도 애니메이션, 오디오 동기화까지 패턴 보유
예시 호출
"Remotion으로 이번 FSK 발표자료 KPI를 바레이스 애니메이션으로 만들어줘"
✅ 이미 [[027-1 모션영상 제작 학습]]에서 BarRace.tsx 등 교재형 코드 자산 축적돼 있음 — 그대로 재사용 가능.
Section 02
HyperFrames — HTML로 짜는 비디오
HeyGen 공식, 65k★. 플러그인+전역 스킬 9종 설치됨. hyperframes-starter/ (zip 받기)에서 check+render 검증됨.
이제 가능한 것
  • HTML을 그대로 비디오로 — React/빌드 과정 없이 div+CSS+GSAP만으로 영상 제작
  • 레지스트리 ~400개 사전제작 블록 설치 — 글리치, CRT 스캔라인, 크로매틱 애버레이션, 필름그레인, 차트, 터미널창, 지도, 컨페티 등을 직접 안 만들고 설치해서 씀
  • 자동 린트/대비/모션 검사(hyperframes check) — WCAG AA 대비, 타임라인 시크 안전성까지 자동 리포트
  • 오디오 믹싱 엔진 — 페이드, 덕킹(보이스오버 위로 BGM 깔기), EQ/컴프레서/리버브
  • 카메라 무브·키프레임 — 펀치인/아웃, Ken Burns, 리프레임, 2D/3D 키프레임
  • 클라우드/Lambda 렌더까지 커버 — 로컬뿐 아니라 배치 렌더 파이프라인으로 확장 가능
예시 호출
"/hyperframes로 제네시스시험1실 타운홀용 15초 인트로 만들어줘, CRT 스캔라인 느낌으로"
💡 Remotion과 결과물(mp4)은 같지만 입력이 React가 아니라 HTML이라 더 가볍게 시작 가능 — 둘 다 설치해놨으니 작업 성격에 따라 골라 쓰면 됨.
Section 03
MCP for Blender — 말로 조작하는 3D
ahujasid, 31k★. Blender 5.2.2 LTS 신규 설치 + MCP 서버 연결 확인됨. ⚠ GUI 수동 활성화 필요
활성화되면 가능한 것
  • 자연어 → 3D 오브젝트 생성/수정/삭제 — "구체 10개를 원형으로 배치해줘" 같은 지시 실행
  • 머티리얼·색상 제어
  • Blender 내부에서 Python 코드 직접 실행 — 복잡한 절차적 모델링도 코드로
  • Poly Haven / Sketchfab 에셋 불러오기 — 외부 3D 모델 라이브러리 바로 임포트
  • 씬 인스펙션 — 현재 씬 상태를 Claude가 읽고 판단
남은 수동 단계 (한 번만)
  1. Blender 앱 실행
  2. Edit → Preferences → Add-ons → "Interface: MCP for Blender" 검색 후 체크
  3. 3D 뷰포트에서 N키 → 사이드바 → "Start MCP Server" 클릭
⚠️ GUI 클릭이라 터미널에서 자동화할 수 없는 유일한 단계입니다. 이거 하고 나면 바로 연결됩니다.
💡 [[036 GV90 침수 와이어프레임 영상]]·[[041 와이어프레임 오버레이 영상 워크플로우]]에서 "CAD 확보 시 Blender Freestyle 우선"이라 적어둔 그 작업을, 이제 Claude가 Blender를 직접 조작하며 할 수 있습니다.
Section 04
Manim — 수식·데이터를 그려내는 애니메이션
Manim CE 0.22.0 설치 + 스킬 전역 등록. Circle 애니메이션 렌더 검증됨.
이제 가능한 것
  • 3Blue1Brown 스타일 수학 애니메이션 — 수식 변형, 그래프 그리기, 좌표계 변환
  • ValueTracker 기반 숫자/값 애니메이션 — 카운트업, 값 변화 시각화
  • 알고리즘/프로세스 시각화 — 정렬 알고리즘, 플로우차트, 상태 다이어그램
  • 3D 씬 + 카메라 애니메이션
  • 480p 프리뷰 ~ 4K60 고품질까지 품질 단계 선택
예시 호출
"매님으로 이 정렬 알고리즘 동작과정을 애니메이션으로 만들어줘"
💡 발표자료의 "그래프가 왜 저렇게 되는지" 원리를 설명하는 영상에 특히 강함 — Remotion/HyperFrames가 완성된 데이터를 "보여주는" 쪽이라면 Manim은 "유도과정"을 보여주는 쪽.
Section 05
algorithmic-art — 코드로 짜는 제너러티브 아트
결정론적 시드 기반, 렌더-비평-수정 루프 내장. 스킬 전역 등록 + Playwright 렌더 의존성 설치됨.
이제 가능한 것
  • 시드 고정 → 똑같은 아트워크 재현 가능 — 랜덤이지만 재현 가능한 "의도된 랜덤"
  • 화면/인쇄/펜플로터/레이저커터/비디오 — 5개 출력 타겟 — SVG는 mm 단위까지 지원해서 실제 플로터 출력 가능
  • WebGL/셰이더 기반 비주얼
  • 오디오 반응형 비주얼 — 음악 비트에 맞춰 패턴 변화
  • 완벽 루프 영상(perfect loop) — ffmpeg로 끊김 없는 배경 영상 제작
  • Blender 에스컬레이션 — 2D로 안 되면 03번 Blender MCP로 자동 확장
예시 호출
"플로우필드 기반 제너러티브 아트로 포트폴리오 배경 패턴 만들어줘"
Section 06
사용 예 — 뭐라고 쓰면 뭐가 나오나
도구별로 실제로 입력할 법한 프롬프트와, 그 결과로 나오는 파일·형식을 짝지었습니다. 왼쪽이 입력, 오른쪽이 결과물.
실제 렌더 결과물 (목업 아님)

이 환경 자체를 10초 모션그래픽으로

HyperFrames로 이 044 환경을 소개하는 인트로 영상을 직접 렌더했습니다. 타이틀 → 5개 도구 스태거 리스트 → 진행률 바 → 클로징 카피까지, 전부 HTML+CSS+GSAP 코드로 작성하고 npm run render로 뽑은 실제 mp4입니다.

1920×1080 · 30fps 10.0s · 2.9MB 렌더 16.8s hyperframes-starter/
이 영상을 만든 프롬프트
"/hyperframes로 지금 설치한 5개 도구를 소개하는 10초짜리
인트로 영상 만들어줘 — 타이틀, 도구 5개 스태거 리스트,
진행률 바, 클로징 카피 순서로"

Remotion

💬 프롬프트

"Remotion으로 FSK 참가팀 20개 순위가 라운드마다 바뀌는 바레이스 애니메이션 만들어줘, 10초짜리로"

결과물

remotion-starter/src/에 BarRace 컴포넌트(.tsx) 생성 → npx remotion render로 mp4 출력. 데이터는 JSON 배열로 받아 순위 변동을 interpolate로 처리.

.tsx + .mp41920×1080~10s
💬 프롬프트

"발표자료 3번 슬라이드 파이차트를 애니메이션으로 바꿔서 15초 영상으로 만들어줘"

결과물

기존 컴포지션에 새 Composition 추가, SVG 파이차트가 그려지는 애니메이션 mp4. 발표자료 원본 색상·폰트 그대로 매핑.

.mp415s

HyperFrames

💬 프롬프트

"/hyperframes로 제네시스시험1실 타운홀용 15초 인트로 만들어줘, CRT 스캔라인 느낌으로"

결과물

index.html 컴포지션에 레지스트리의 CRT 스캔라인 블록을 설치해서 삽입(hyperframes.json 갱신) → npm run render로 mp4.

.html + .mp4레지스트리 블록 재사용
💬 프롬프트

"이 보이스오버 파일에 배경음악 깔아줘, 목소리 나올 때는 음악 볼륨 낮춰줘"

결과물

오디오 트랙 2개(BGM/보이스) + 덕킹 자동화 볼륨 엔벨로프가 적용된 컴포지션 → 믹싱된 mp4.

.mp4오디오 덕킹

MCP for Blender

💬 프롬프트

"GV90 와이어프레임 쿼터뷰 모델 만들어서 360도 턴어라운드로 렌더해줘"

결과물

Blender 씬에 오브젝트 생성 + 카메라 360도 회전 애니메이션 → Blender 렌더 엔진으로 png 시퀀스 또는 mp4.

.blendpng seq / .mp4Blender 앱 활성화 필요
💬 프롬프트

"Poly Haven에서 콘크리트 바닥 텍스처 가져와서 바닥 머티리얼로 입혀줘"

결과물

Poly Haven 에셋을 임포트해서 바닥 오브젝트에 머티리얼 적용된 .blend 파일.

.blendPoly Haven 임포트

Manim

💬 프롬프트

"매님으로 버블소트 알고리즘이 숫자를 정렬하는 과정을 애니메이션으로 만들어줘"

결과물

scene.py에 Scene 클래스 생성(막대 높이로 숫자 표현, Swap 애니메이션) → manim -qh로 mp4 렌더.

.py + .mp4480p~4K60 선택
💬 프롬프트

"이 데이터셋의 정규분포 곡선이 그려지는 과정을 애니메이션으로 보여줘"

결과물

Axes + 함수 그래프가 Create 애니메이션으로 그려지는 mp4. 평균/표준편차 값을 ValueTracker로 애니메이션 가능.

.mp4그래프/수식

algorithmic-art

💬 프롬프트

"플로우필드 기반 제너러티브 아트로 포트폴리오 배경 패턴 만들어줘, 시드 고정해서"

결과물

결정론적 시드가 박힌 캔버스 코드(HTML+JS) + 렌더된 PNG. 같은 시드로 언제든 동일 결과 재현.

.html + .png시드 고정
💬 프롬프트

"이 패턴을 펜플로터로 뽑을 수 있게 SVG로 변환해줘, mm 단위로"

결과물

mm 단위 치수가 명시된 SVG 파일 — 플로터/레이저커터에 바로 입력 가능.

.svg (mm)플로터/레이저용
Section 07
조합하면 뭐가 되나
다섯 도구는 레이어 — 한 도구의 산출물을 다른 도구의 입력으로 쓸 수 있습니다.

Blender→HyperFrames/Remotion

Blender로 3D 모델/렌더 시퀀스를 뽑고, HyperFrames나 Remotion에서 텍스트·차트·자막을 얹어 합성. 3D 인트로 + 데이터 오버레이 조합.

Manim→HyperFrames registry

Manim으로 그린 그래프/수식 영상을 HyperFrames 컴포지션의 한 클립으로 끼워넣고, 주변에 캡션·BGM·트랜지션을 HyperFrames가 처리.

algorithmic-art→Remotion/HyperFrames

제너러티브 아트로 만든 루프 영상을 배경으로 깔고, 그 위에 Remotion/HyperFrames로 타이틀·데이터 텍스트를 애니메이션.

algorithmic-art→Blender

2D 제너러티브 패턴이 복잡도 한계에 부딫히면 algorithmic-art 스킬이 자체적으로 Blender MCP로 에스컬레이션 — 같은 아이디어를 3D로 확장.

✅ 기존 [[027-1 모션영상 제작 학습]]의 Remotion 자산(BarRace.tsx 등)은 그대로 재사용되고, 여기에 HyperFrames/Blender/Manim/algorithmic-art가 새 레이어로 얹히는 구조입니다 — 기존 걸 버리는 게 아니라 선택지가 늘어난 것.
Section 08
설치 상태 체크리스트
2026-10-17 기준. 시간이 지나면 버전이 바뀔 수 있으니 중요한 작업 전엔 재확인.
도구설치 범위렌더 검증상태
Remotion프로젝트 전용 (remotion-starter/)✅ mp4 성공정상
HyperFrames전역 플러그인 + 스킬 9종✅ check+render 성공정상
MCP for Blender전역 MCP 서버 + 애드온— (서버 연결은 됐지만 Blender 앱 내 활성화 전)수동 1단계 남음
Manim전역 pip + 스킬✅ mp4 성공정상
algorithmic-art전역 스킬 + npm 의존성— (스킬/빌드만 확인, 실제 작품 렌더는 미실행)사용 준비됨
같이 바뀐 시스템 설정
  • Homebrew 신규 설치 — uv, cairo, pango, pkg-config, blender(cask)
  • PATH 수정 — ~/.bash_profile, ~/.zshrc에 ~/Library/Python/3.11/bin 추가 (manim 커맨드용)
  • claude mcp add -s user blender — 전역이라 어떤 프로젝트에서든 연결됨
  • claude plugin install hyperframes@hyperframes — user scope, enabled
Section 09
빠른 시작 — 도구별 첫 명령
설치가 끝났다는 전제에서, 각 도구로 실제 산출물 하나를 뽑는 최단 경로입니다. 전부 이 환경에서 직접 돌려 확인한 명령입니다. 설치부터 필요하면 044 설치 가이드를 먼저 보세요.
Remotion 산출
45.9KB / 3초
HyperFrames 검사
0issues
대비 검사
59/59WCAG AA
Manim 렌더
4.0초 / 5컷
Remotion — React로 영상
bash
npx create-video@latest my-video
cd my-video && npm install
npx remotion studio                            # 미리보기
npx remotion render HelloMotion out/hello.mp4  # 스타터 팩 예제
⚠️ 기본 스캐폴드의 MyComp는 null을 반환합니다 — 렌더하면 빈 영상이 나오는 게 정상입니다. 설치 실패로 오해하기 쉬우니 HelloMotion으로 확인하세요.
HyperFrames — HTML로 영상
bash
npm run check    # 린트 + 모션 + 대비(WCAG) — 렌더보다 훨씬 빠르다
npm run render   # mp4 (헤드리스 크롬 + ffmpeg)
npm run dev      # 미리보기
💡 렌더 전에 항상 check. 실제 출력: 0 issues across 9 sample(s) / Motion 0 errors / Contrast 59/59 pass. 모션·대비 문제를 렌더 비용을 치르기 전에 거릅니다.
Manim — 수식·개념 애니메이션
python
from manim import *

class HelloManim(Scene):
    def construct(self):
        title  = Text("Motion Stack OK", font_size=56, color=GREEN)
        circle = Circle(radius=1.4, color=BLUE).shift(DOWN * 1.2)
        self.play(Write(title), run_time=1.2)
        self.play(title.animate.shift(UP * 1.6), run_time=0.6)   # .animate 필수
        self.play(Create(circle), run_time=1.0)
        self.play(circle.animate.set_fill(BLUE, opacity=0.5), run_time=0.8)
        self.wait(0.4)
bash
export PATH="$HOME/Library/Python/3.11/bin:$PATH"   # manim 못 찾을 때
manim -ql --disable_caching scene.py HelloManim     # 빠른 확인(480p15)
manim -qh scene.py HelloManim                       # 최종(1080p60)
# 출력: ./media/videos/scene/<품질>/HelloManim.mp4
⚠️ .animate를 빼고 속성을 직접 바꾸면 즉시 반영되어 애니메이션이 생기지 않습니다. 가장 흔한 실수입니다.
algorithmic-art · Blender — 말로 시키는 도구
  • algorithmic-art — "코드로 제너러티브 아트 만들어줘. 시드를 고정해서 같은 결과를 다시 뽑을 수 있게, SVG 버전도 함께."
    시드를 요구하지 않으면 마음에 든 결과를 영원히 재현할 수 없습니다. 플로터·레이저 출력 계획이 있으면 SVG를 꼭 함께 요청하세요.
  • Blender — 앱에서 N키 → MCP 탭 → Start MCP Server를 먼저 누른 뒤 "지름 2짜리 구를 원점에 만들고 금속 재질을 입혀줘"
    서버를 안 켜면 claude mcp list가 Connected여도 조작되지 않습니다. Blender를 끄면 매번 다시 켜야 합니다.
Section 10
함정 — 여기서 막힙니다
설치는 됐는데 안 되는 것처럼 느껴지는 상황을 증상별로 모았습니다. 대부분 고장이 아니라 알고 있어야 하는 동작입니다.
증상 → 원인 → 조치
  • zsh: command not found: manim
    pip --user 바이너리 경로가 PATH에 없음 → export PATH="$HOME/Library/Python/3.11/bin:$PATH". 영구 적용은 ~/.zshrc에 추가 후 새 터미널에서.
  • 렌더한 영상이 완전히 비어 있다
    Remotion 기본 스캐폴드의 정상 동작입니다(MyComp가 null 반환). HelloMotion 같은 실제 컴포지션을 렌더하세요.
  • CSS 애니메이션이 영상에 안 나온다
    렌더는 재생이 아니라 프레임 시킹이라 CSS 애니메이션이 진행되지 않습니다. Remotion은 useCurrentFrame()+interpolate(), HyperFrames는 GSAP 타임라인(paused:true)으로 작성해야 합니다.
  • HyperFrames 렌더가 정지 화면
    타임라인을 window.__timelines["main"]에 등록하지 않았거나 paused: true가 빠진 경우입니다. 둘 다 확인하고 tl.seek(0)까지 호출하세요.
  • Blender가 조작되지 않는다
    GUI에서 Start MCP Server 미실행. 이것만은 자동화할 수 없습니다.
  • 스킬을 넣었는데 Claude가 모른다
    ① 폴더가 한 겹 더 들어갔는지(skills/이름/SKILL.md가 맞는 구조) ② 세션을 새로 시작했는지 확인.
  • brew install이 멈춘다
    Homebrew는 bottle을 ghcr.io(GitHub 인프라)에서 받습니다. GitHub 차단 환경이면 ffmpeg.org 공식 빌드·conda-forge·pip로 우회하세요.
  • Manim에서 한글이 네모로 나온다
    기본 폰트에 한글 글리프가 없습니다. Text("한글", font="Pretendard")처럼 설치된 폰트명을 명시하세요.
작업 습관 — 비용을 가장 많이 줄이는 3가지
  • 작업 중엔 저품질로. Manim -ql, Remotion은 짧은 durationInFrames로 구조부터 맞춥니다. 최종 품질은 마지막 한 번만.
  • 검사 먼저, 렌더 나중. HyperFrames의 check는 렌더보다 훨씬 쌉니다. 모션·대비 문제를 먼저 거르세요.
  • 결과를 열어서 봅니다. "렌더 성공" 로그는 내용이 맞다는 증거가 아닙니다. ffmpeg -ss 2 -i out.mp4 -frames:v 1 f.png로 프레임을 뽑아 확인하는 습관이 가장 싸게 먹힙니다.
✅ 실제 사례: 이 환경 구축 중에도 "파일이 생성됐는데 내용은 에러 페이지"인 경우가 있었습니다. 종료 코드도 파일 크기도 정상이었습니다.
Section 11
용어 — 모르면 설치해도 못 씁니다
이 보드와 설치 가이드에 나오는 말을 Claude Code를 처음 쓰는 사람 기준으로 풀었습니다.
Claude Code 쪽
  • 스킬(Skill) — ~/.claude/skills/<이름>/SKILL.md에 있는 마크다운 지시문 묶음. 실행 파일이 아니라서 설치 = 폴더를 그 경로에 두는 것입니다. 그래서 오프라인 팩으로 통째 옮겨도 동작합니다.
  • 플러그인(Plugin) — 스킬·에이전트·명령을 묶어 배포하는 단위. HyperFrames가 이 방식이고 설치하면 스킬 9종이 한꺼번에 붙습니다. 확인: claude plugin list.
  • MCP — Claude가 외부 프로그램과 대화하는 표준 규격. 스킬이 "지시문"이면 MCP는 "도구 연결"입니다. Blender MCP는 별도 서버 프로세스가 떠서 요청을 Blender 조작으로 번역합니다. 확인: claude mcp list.
  • uvx / npx — 설치하지 않고 바로 실행하는 도구. uvx는 Python, npx는 npm 패키지를 임시로 받아 실행합니다. 전역 설치 흔적이 남지 않습니다.
영상 제작 쪽
  • 컴포지션(Composition) — "영상 한 편"의 단위. Remotion은 <Composition id ...>로 등록하고, HyperFrames는 data-composition-id로 선언합니다. 한 프로젝트에 여러 개를 두고 이름으로 골라 렌더합니다.
  • 시킹(seeking) — 렌더링은 재생이 아니라 "0.000초 상태를 그려라 → 캡처 → 0.033초 상태를…" 방식입니다. 그래서 느린 컴퓨터에서도 결과가 똑같습니다(결정론적). CSS 애니메이션이 영상에 안 나오는 이유이기도 합니다.
  • 헤드리스 렌더 — 화면 없는 브라우저로 페이지를 그려 이미지·영상으로 뽑는 방식. HyperFrames가 이 구조라 웹에서 되는 건 대부분 영상으로도 됩니다.
  • 시드(seed) — 제너러티브 아트에서 난수의 출발점. 같은 시드 = 같은 결과물이라 마음에 든 작품을 다시 만들 수 있습니다.
  • fps · 프레임 — 초당 프레임 수. 30fps 10초 영상 = 300프레임이고, 렌더 시간은 대체로 프레임 수에 비례합니다. 작업 중 길이를 줄이면 반복 비용이 즉시 줄어듭니다.
더 볼 것
  • 044 설치 가이드 — 0에서 설치, 네트워크 차단 환경 대응, 도구별 튜토리얼, 에러 사전, 제거 방법.
  • 029·042·043 구현 핸드북 — 편집기·출력 파이프라인을 직접 만들 때의 설계 계약과 검증 방법.
Section 12
실전 시나리오 — 업무에서 이렇게 씁니다
"뭘 만들 수 있나"를 넘어 실제 업무 요청이 들어왔을 때 어떤 도구로 어떻게 푸는지를 적었습니다. 각 시나리오는 요청 → 도구 선택 근거 → 산출물 → 확인 지점 순입니다.
도구 선택 — 겹치는 영역에서 뭘 고르나
  • 데이터가 바뀌면 영상도 바뀌어야 한다 → Remotion. props로 데이터를 흘려넣고 반복 생성이 쉽습니다. 주간 리포트처럼 같은 틀에 수치만 바뀌는 작업은 압도적입니다.
  • 웹 디자인 감각을 그대로 영상으로 → HyperFrames. HTML/CSS를 그대로 쓰므로 디자인 토큰·웹폰트·CSS 효과를 옮기기 가장 빠릅니다. 대비·모션 검사가 내장돼 있습니다.
  • 수식 전개·알고리즘 설명 → Manim. 수학 객체가 1급 시민이라 다른 도구로 하면 전부 수작업이 됩니다.
  • 3D 장면·제품 렌더 → Blender MCP. 다만 자막·타이포는 HyperFrames로 덧씌우는 편이 수정 비용이 훨씬 낮습니다.
  • 배경 패턴·추상 비주얼·물리 출력물 → algorithmic-art. 시드 기반이라 재현이 되고, SVG로 뽑으면 플로터·레이저로 출력할 수 있습니다.
  • 여러 성격이 섞인 한 편 → 구간을 나눠 각자 뽑고 ffmpeg로 이어붙입니다. 한 도구로 전부 하려다 막히는 경우가 가장 흔합니다.
💡 다섯 도구는 대체재가 아니라 레이어입니다. 결과물의 성격을 먼저 정하고 → 그 성격의 1순위 도구를 쓰고 → 섞이면 구간별로 나눕니다.

시나리오 — 기술 설명 영상

💬 요청

"시험 결과 보고용으로 40초짜리 설명 영상이 필요해. 인트로 → 측정 원리(수식) → 결과 그래프 순서로."

푸는 방법

구간을 셋으로 나눕니다. 0~5초 인트로는 HyperFrames(브랜드 톤·웹폰트 그대로), 5~25초 원리는 Manim(수식 전개), 25~40초 결과는 Remotion(실제 측정 JSON을 props로). 마지막에 ffmpeg concat으로 합칩니다.
확인 지점: 세 파일의 해상도·fps·코덱이 같아야 재인코딩 없이 붙습니다. ffprobe로 먼저 대조하세요.

3도구 조합1920×1080·30fps~40s
💬 요청

"주간 실적을 매주 같은 형식 영상으로 뽑고 싶어. 사람 손 안 타게."

푸는 방법

Remotion 컴포지션을 props로 데이터를 받도록 한 번만 만들어두고, 주차별 JSON을 --props로 주입해 반복 렌더합니다. 스크립트 한 줄로 N편이 나옵니다.
확인 지점: 데이터가 비었는데도 렌더는 "성공"합니다. 컴포지션 안에 data.length === 0일 때 눈에 띄는 경고 화면을 그려두면 샘플만 봐도 사고가 드러납니다.

Remotion--props자동화
💬 요청

"제품 3D 렌더에 설명 텍스트를 얹은 소개 영상."

푸는 방법

Blender MCP로 장면·조명·카메라를 잡아 연속 렌더 → 그 mp4를 HyperFrames에서 <video>로 깔고 그 위에 HTML 텍스트·로고를 올립니다.
왜 이렇게: 문구가 바뀔 때마다 3D를 다시 렌더하지 않아도 됩니다. 3D는 3D로, 타이포는 HTML로 나누는 것이 수정 비용을 결정합니다.
확인 지점: 영상 위 텍스트는 대비가 떨어지기 쉽습니다 — npm run check의 WCAG 검사로 거르세요.

Blender + HyperFrames오버레이
💬 요청

"발표 슬라이드 배경으로 쓸 추상 패턴이 필요한데, 나중에 같은 걸 또 써야 해."

푸는 방법

algorithmic-art로 시드를 고정해 생성하고 파일명에 시드를 넣습니다. 같은 시드로 언제든 재현되고, 색만 바꾼 변형도 쉽습니다. 인쇄·커팅 계획이 있으면 SVG도 함께 받습니다.
확인 지점: 시드를 요구하지 않으면 "아까 그 그림"을 영원히 못 찾습니다.

algorithmic-artPNG + SVG재현 가능
Section 13
품질 기준 — 내보내기 전에 확인할 것
영상은 "돌아간다"와 "쓸 만하다" 사이가 멉니다. 넘기기 전에 거르는 기준을 정리했습니다.
기술 체크
  • 해상도·fps가 목적지에 맞는가 — 발표 슬라이드 삽입은 1920×1080·30fps면 충분합니다. 4K는 렌더 시간이 수십 배인데 발표 화면에선 차이가 안 보입니다.
  • 길이가 의도한 값인가 — ffprobe -show_entries format=duration. 마지막 wait()이나 퇴장 애니메이션이 잘린 경우가 흔합니다.
  • 첫 프레임과 마지막 프레임이 비어 있지 않은가 — 페이드인이 길면 썸네일이 검게 잡힙니다. ffmpeg -ss 0 -frames:v 1로 확인하세요.
  • 용량이 비정상적으로 작지 않은가 — 10초 1080p가 수십 KB면 대개 빈 화면입니다.
  • 한글이 제대로 나오는가 — Manim은 폰트 명시, 웹 기반(HyperFrames·Remotion)은 셀프호스팅 폰트 권장. CDN 폰트는 캡처 시점에 미도착할 수 있습니다.
보는 사람 기준 체크
  • 글자가 읽을 시간을 주는가 — 만든 사람은 내용을 아니까 빠르게 느껴지지 않습니다. 한 문장당 최소 2~3초, 수식은 더 길게.
  • 대비가 충분한가 — HyperFrames check의 WCAG AA 검사를 쓰세요(실측: 59/59 통과). 영상은 압축으로 대비가 더 떨어집니다.
  • 움직임이 과하지 않은가 — 모든 요소가 동시에 움직이면 아무것도 안 읽힙니다. 한 번에 하나씩, stagger로 시선을 유도하세요.
  • 소리 없이도 이해되는가 — 발표 중 재생되는 영상은 대개 음소거입니다. 자막·레이블로 내용이 전달돼야 합니다.
⚠️ 페이지가 빠르게 전환되는 영상(초당 여러 장)은 광과민성 위험이 있습니다. 발표용이라면 전환 속도를 낮추세요.
넘기기 전 마지막 확인
bash
# 사양 확인
ffprobe -v error -select_streams v:0 \
  -show_entries stream=codec_name,width,height,r_frame_rate \
  -show_entries format=duration,size -of default=nw=1 final.mp4

# 구간별 프레임 추출 — "열어서 본다"의 최소 버전
for t in 0 5 15 30; do
  ffmpeg -y -ss $t -i final.mp4 -frames:v 1 check_$t.png
done

# 썸네일로 쓸 프레임 고르기(검은 프레임 회피)
ffmpeg -y -ss 2 -i final.mp4 -frames:v 1 -q:v 2 thumb.jpg
✅ "렌더 성공" 로그는 내용이 맞다는 증거가 아닙니다. 이 환경을 구축하면서도 종료 코드·파일 크기가 모두 정상인데 내용은 에러 페이지였던 사례가 있었습니다. 프레임을 뽑아 보는 30초가 가장 싼 보험입니다.