영상에서 플레이 가능한 게임으로 — 한 줄도 코드를 쓰지 않고
아무 영상이나 가리키며 "이걸 게임으로 만들어줘"라고 말할 수 있다면 어떨까요? 이 워크플로는 바로 그것을 해냅니다. Eigent의 멀티모달 에이전트가 2026 춘절 갈라의 화려한 로봇 무술 공연 영상을 시청해 캐릭터, 움직임, 시각 스타일을 추출한 뒤, 그 구조화된 분석을 기반으로 게임을 만드는 개발자 에이전트에게 전달합니다. 전체 파이프라인은 하나의 프롬프트와 하나의 비디오 파일로 실행됩니다.
두 에이전트 파이프라인
이 워크플로는 순차적으로 작업하는 두 개의 특화된 에이전트가 필요합니다:
- 멀티모달 에이전트 — Image Analysis, Video Processing, Audio Processing, Image Generation을 처리합니다. 영상을 보고 보이는 내용을 구조화된 데이터로 만듭니다.
- 개발자 에이전트 — Terminal & Shell, Web Deployment, Screen Capture를 처리합니다. 구조화된 분석을 바탕으로 게임을 빌드합니다.
핵심은 전달 과정입니다. 개발자 에이전트는 원본 영상을 받지 않고, 캐릭터, 동작, 색상, 배경, 테마를 설명하는 구조화된 텍스트 문서를 받습니다. 이 번역 단계가 게임 결과물을 일반적인 수준이 아니라 영상에 충실하게 만드는 이유입니다.
비디오를 첨부하고 프롬프트를 작성하세요
Martial Arts.mp4를 첨부하고 원하는 내용을 설명하세요:
첨부된 비디오 파일을 분석해 2026 춘절 갈라의 로봇 공연, 캐릭터, 움직임, 시각 스타일, 배경을 이해한 다음, Three.js를 사용해 핵심 요소, 캐릭터, 동작을 영상과 충실하게 재현하고 몰입감 있는 게임 메커니즘, 직관적인 조작, 축제 분위기의 시각 효과를 갖춘 완전한 단일 파일 3D 인터랙티브 HTML 게임을 만드세요.
즉시 두 개의 작업이 생성되며, 두 번째 작업은 첫 번째가 완료될 때까지 차단됩니다.
작업 1 — 멀티모달 에이전트가 영상을 시청합니다
멀티모달 에이전트는 Video Downloader Toolkit을 사용해 Martial Arts.mp4를 프레임 단위로 처리하고, 주요 순간의 스크린샷을 추출합니다. 그런 다음 해당 프레임을 분석해 martial_arts_video_analysis.txt로 저장되는 포괄적인 서면 분석을 생성합니다:
- 캐릭터와 로봇: 외형, 비율, 색상 구성(금색과 빨간색), 퍼포머 수
- 동작과 액션: 관찰된 구체적인 무술 기술 — 펀치, 킥, 스태프 공격, 안무 시퀀스
- 시각 스타일: 무대 조명, 색상 팔레트, 축제 장식 스타일, 공연 공간의 깊이와 규모
- 배경과 환경: 무대 환경, 배경 디자인, 분위기 요소
- 축제 요소: CNY(춘절) 특유의 장식, 상징적 모티프, 공연에 사용된 효과
이 문서는 크리에이티브 브리프가 되며, 개발자 에이전트가 정확하게 실행할 수 있는 구조화된 설명입니다.
작업 2 — 개발자 에이전트가 게임을 빌드합니다
분석을 바탕으로 개발자 에이전트는 Note Taking Toolkit의 노트를 읽고, HTML, CSS, JavaScript가 모두 인라인으로 포함된 단일 자립형 파일 spring_festival_martial_arts_game.html을 만듭니다.
게임은 멀티모달 에이전트가 식별한 모든 요소를 충실하게 구현합니다:
- 3D 로봇 캐릭터 — 영상의 금색/빨간색 색상 구성을 Three.js로 렌더링
- 무술 애니메이션 — 관찰된 펀치, 킥, 스태프 공격 재현
- 무대 환경 — Spring Festival Gala 공연의 시각적 배경과 일치
- 축제 파티클 효과 — 랜턴, 스파크, CNY 장식
- 여러 게임 모드: Performance Mode, Combat Mode, Free Practice
완성된 게임
브라우저에서 spring_festival_martial_arts_game.html을 열면 완전한 경험이 제공됩니다:
- 타이틀 화면: 2026 Spring Festival Gala — Martial Arts Performance — Year of the Horse
- 조작법: W/S/A/D 이동 · J 펀치/공격 · K 킥 · L 스태프 공격 · Space 특수 동작 · 마우스로 카메라 조작 · 스크롤로 확대/축소
- HUD: 점수 카운터(데모에서는 527 표시), 콤보 카운터, 모드 표시기
- 비주얼: 금색/빨간색 3D 로봇 캐릭터, 축제 무대 배경, 파티클 효과
총 사용 토큰 수: 약 467,000 — 비디오 분석과 Three.js 게임 생성의 깊이를 합친 결과입니다.
왜 비디오-투-게임이 새로운 워크플로 범주인가
이 파이프라인은 새로운 가능성을 보여줍니다: 비디오 이해를 디자인 명세 도구로 사용하는 것입니다. 게임 디자인 문서를 직접 작성하는 대신, 원하는 미학, 캐릭터, 상호작용이 담긴 영상을 촬영하거나 찾아서 멀티모달 에이전트가 이를 구현 가능한 명세로 변환하게 할 수 있습니다.
적용 범위는 게임을 훨씬 넘어섭니다. 같은 영상→구조화된 분석→코드 파이프라인은 UI 목업 재현, 애니메이션 시스템 설계, 인터랙티브 데모 생성, 그리고 텍스트보다 영상이 의도를 더 잘 담아내는 모든 상황에 적용할 수 있습니다.
다음에 시도해 볼 것
제품 언박싱 영상을 분석해 영상 속 물체를 재현하는 인터랙티브 3D 제품 뷰어를 생성하세요.
요리 영상을 보고 영상의 시각 스타일과 일치하는 단계별 인터랙티브 레시피 앱을 생성하세요.
스포츠 하이라이트 영상을 분석해 보여진 종목을 기반으로 한 미니게임을 생성하세요.
Spring Festival 게임에 멀티플레이어 모드를 추가해 두 플레이어가 공연에 등장한 서로 다른 로봇으로 경쟁하게 하세요.
더 나은 결과를 위한 팁
-
고품질 원본 영상을 사용하세요. 멀티모달 에이전트의 장면 추출은 선명하고 밝은 영상에서 가장 정확합니다. 이 갈라 영상처럼 캐릭터와 움직임이 뚜렷한 공연 영상은 빠르게 편집되었거나 저해상도인 콘텐츠보다 더 풍부한 분석을 만들어냅니다.
-
빌드 전에 분석 검토를 요청하세요. "게임을 만들기 전에 비디오 분석 문서를 보여줘"를 추가하면, 빌드에 들어가기 전에 에이전트가 영상을 올바르게 이해했는지 확인할 수 있는 체크포인트가 생깁니다.
-
단일 파일을 요청하세요. "single-file 3D interactive HTML game"이라고 지정하면 빌드 단계나 서버 없이 즉시 공유 가능한 완전한 자립형 결과물을 보장합니다.
