724 ／ 733
code-video, 주제만 주면 코드로 홍보 영상을 그리는 에이전트 스킬
주제 하나만 주면 에이전트가 직접 조사하고, 프레임마다 코드로 그려 MP4 영상을 만든다. code-video는 영상 생성 모델이나 스톡 푸티지 없이 코드만으로 짧은 홍보 영상을 만드는 에이전트 스킬이다. 개발자는 Claude Opus 5.5와 Claude Sonnet 5.5가 코드로 그린 영상이 피드를 채우는 것을 보고, 두 모델에서 모두 쓸 수 있도록 이 스킬을 만들었다고 밝힌다.
코드로 만드는 영상, code-video
code-video는 주제와 디자인, 형식을 받아 처음부터 끝까지 코드로 그린 MP4를 내놓는 에이전트 스킬이다. 사용자는 주제와 스타일을 정한다. 스타일은 미리 준비된 프리셋 가운데 하나를 고르거나, 어떤 사이트의 DESIGN.md를 넘기거나, 원하는 모습을 말로 설명하면 된다. 영상 생성 모델이나 스톡 푸티지는 쓰지 않는다. 에이전트가 장면을 직접 쓰고, 프레임 단위로 렌더링한 뒤 완성된 파일을 건넨다.
영상이 만들어지는 과정
README는 작동 방식을 다섯 가지로 설명한다.
- 모든 것이 코드다. 각 프레임은 시간을 받아 HTML 캔버스에 그림을 그리는 함수다. 헤드리스 크롬이 프레임을 캡처하고 ffmpeg가 인코딩한다. 음악과 효과음도 코드로 합성하기 때문에 같은 입력을 넣으면 언제나 같은 영상이 나온다.
- 조사가 먼저다. 에이전트는 출처가 붙은 사실을 열 개쯤 모으고, 색 팔레트와 글꼴은 해당 브랜드에서 가져온다. 화면에 나오는 숫자에는 모두 출처가 있다.
- 디자인, 조사, 형식. 사용자는 외형(스타일, 브랜드 프리셋, 사이트의 DESIGN.md, 또는 말로 설명한 모습)과 주제, 그리고 영상의 길이·프레임·언어를 정한다. 에이전트는 여기에 맞는 이야기를 쓰고, 제작에 들어가기 전에 짧은 계획을 먼저 보여 준다.
- 규칙은 일부러 적게 둔다. 스킬이 에이전트에게 주는 것은 외형과 강제 규칙 하나(숫자에는 출처를 단다)뿐이고, 이야기 구성은 에이전트에게 맡긴다. 개발자의 A/B 테스트에서 과정 규칙을 덜어내자 영상 한 편의 제작 비용이 23~51% 줄었고, 눈에 띄는 품질 저하는 없었다.
- 고쳐 가며 만들 만큼 빠르다. 프레임은 병렬로 띄운 헤드리스 크롬 페이지에서 렌더링해 JPEG로 캡처한다. 45초짜리 1080p 영상은 10코어 노트북에서 약 1분이면 렌더링되고, 조사부터 MP4 출력까지 전체 과정은 테스트에서 4~13분 걸렸다.
스타일 갤러리
갤러리에는 스타일별 예시 영상 38개가 몇 초씩 실려 있다. 손그림, 브랜드 모션 그래픽, 모래 그림, 16비트 아케이드, 애플풍 쇼룸, 삼성풍 테크 론칭, 페라리풍 레이싱 럭셔리, 나이키풍 애슬레틱, 스포티파이풍 다크 미디어처럼 결이 전혀 다른 스타일이 나란히 있다. 예시는 모두 이 스킬 하나만 가진 새 에이전트가 만든, 이 스킬을 소개하는 영상이다. 브랜드풍 프리셋은 각 사이트의 공개된 디자인 언어만 빌렸고 해당 기업과는 관계가 없다고 README는 밝힌다. 스타일은 계속 늘어나며, 새 스타일 기여도 받는다.
설치와 사용
설치는 skills CLI, Claude Code 플러그인, 직접 복제 가운데 하나를 고르면 된다. skills CLI는 Claude Code와 Codex를 비롯한 여러 에이전트에서 쓸 수 있다.
# skills CLI
npx skills add Changroro/code-video -g
# Claude Code 플러그인
/plugin marketplace add Changroro/plugins
/plugin install code-video@changroro
직접 설치하려면 에이전트의 스킬 폴더에 저장소를 복제한다. Claude Code는 ~/.claude/skills/code-video, Codex는 ~/.codex/skills/code-video다.
실행에는 Node.js 18 이상과 npm, libx264로 빌드한 ffmpeg, Google Chrome, 헬퍼 스크립트용 uv가 필요하다. 효과음 합성에 쓰는 numpy·scipy와 비트 감지에 쓰는 librosa는 실행할 때 자동으로 설치된다.
설치한 뒤에는 에이전트에게 영상을 만들어 달라고 하면 된다. 원하는 스타일이 있으면 이름을 대고, 없으면 주제에 맞춰 에이전트가 제안한다. README가 예로 든 요청은 “이 사이트로 30초 홍보 영상 만들어 줘”, “우리 회사 역사를 모래 그림 영상으로 만들어 줘”, “두 요금제를 아케이드 스타일로 비교해 줘” 같은 것들이다. 에이전트의 추론 강도를 높이면 움직임이 더 섬세해지는 경향이 있다.
언어학·인지언어학의 시선으로 보면
언어학에서는 사람이 세상을 이해하는 방식을 설명할 때 프레임 의미론이나 스크립트 같은 개념을 쓴다. 어떤 상황이나 개념이 관련 정보와 행동의 묶음으로 머릿속에 자리 잡고 있다는 생각이다. code-video의 스타일은 에이전트가 내용을 조사하고 장면을 그릴 때 따르는 시각적·서사적 틀로 볼 수 있다. ‘뉴스 속보’라는 말을 들으면 특정한 어조와 화면 구성이 함께 떠오르듯, 에이전트도 주어진 스타일에 맞춰 같은 정보를 다른 시각 언어로 옮긴다.
출처
- https://github.com/Changroro/code-video