751 ／ 754
프롬프트 하나로 10초 영상 15편, Claude Opus 5.5가 코드로 만든 모션 디자인
대부분의 교사는 챗GPT가 글을 쓰고 이미지 생성 AI가 그림을 그리는 풍경에 익숙하다. 그런데 AI가 그림을 ‘생성’하지 않고 코드를 짜서 화면을 그리고, 음악과 효과음까지 코드로 합성해 10초짜리 모션 그래픽 영상을 통째로 만든다면 어떨까? 깃허브에 공개된 15 Motion Design Styles 저장소가 바로 그 결과물이다. 15가지 모션 디자인 스타일마다 10초 영상을 한 편씩, 모두 Claude Opus 5.5가 코드를 써서 만들었다.
이미지 생성 없이 코드로 그린 영상
이 저장소가 눈길을 끄는 이유는 제작 방식에 있다. 이미지나 영상 생성 모델을 쓰지 않았다. 화면은 SVG, Canvas, WebGL, Three.js로 짠 코드이고, 3D 영상 한 편에만 블렌더(Blender)를 썼다. 몇몇 영상에는 CC0나 퍼블릭 도메인 사진이 들어갔다. 소리도 코드다. 영상마다 딸린 audio.py가 음악과 효과음을 합성하며, 15편의 사운드트랙은 녹음된 악기 샘플 103개를 재료로 쓴다.
모든 것이 공개되어 있다는 점도 중요하다. 영상, 스타일 노트, 프롬프트 전문, 전체 소스가 15개 스타일 모두에 붙어 있다. 누구든 마음에 드는 스타일을 보고, 어떻게 만들었는지 읽고, 프롬프트를 복사해 자기 영상을 만들어 볼 수 있다.
프롬프트 한 편이 영상이 되기까지
영상 한 편은 사실 웹 페이지다(3D 영상만 예외로, 블렌더가 그림을 렌더링하고 웹 페이지가 글자와 질감을 더한다). 시간 값을 주면 그 순간의 화면을 그리는 함수(window.renderAt(t))를 가진 페이지를 Claude가 작성한다. 렌더러가 헤드리스 크롬(headless Chrome)으로 프레임을 하나하나 캡처하고, audio.py가 같은 타이밍에 맞춰 음악과 효과음을 만들고, ffmpeg가 그림과 소리를 정확히 10초짜리 MP4로 합친다. 마지막으로 두 번째 AI가 rubric.md 기준으로 영상을 심사했고, 그 평가를 받아 두 차례 수정했다. 최종 심사 점수는 10점 만점에 7.57~8.21점이다.
15가지 스타일은 다음과 같다.
| 번호 | 스타일 | 번호 | 스타일 | 번호 | 스타일 |
|---|---|---|---|---|---|
| 01 | Frame-by-Frame (프레임별 손그림) | 06 | Shape Morph (도형 변형) | 11 | Geometric Bauhaus (기하학 바우하우스) |
| 02 | Isometric 2.5D (아이소메트릭) | 07 | Sticker Explainer (스티커 설명) | 12 | 80s Synthwave / VHS (80년대 신스웨이브) |
| 03 | Flat Vector (플랫 벡터) | 08 | Cyberpunk HUD (사이버펑크 계기판) | 13 | Pixel Art (픽셀 아트) |
| 04 | Line Art (라인 아트) | 09 | Collage / Cut-out (콜라주) | 14 | Liquid Motion (액체 모션) |
| 05 | 3D Render (3D 렌더) | 10 | Aurora & Glassmorphism (오로라·유리 질감) | 15 | Variety Captions (예능 자막, 9:16 세로) |
직접 만들어 보려면
README가 안내하는 순서는 이렇다. 코드를 쓰고 명령을 실행할 수 있는 AI 도우미(예: Claude Code)를 빈 폴더에서 열고, prompts/ 폴더의 프롬프트 하나를 통째로 보낸다. 자기 이야기로 바꾸고 싶다면 Creative seed 항목의 줄거리, 브랜드명, 문구, 색만 바꾸면 된다. 세로 1080×1920으로 만들려면 Output 항목을 고친다. Signature features는 지우지 않는다. 한눈에 그 스타일로 알아보게 만드는 핵심이기 때문이다. 다 만든 뒤 두 번째 AI에게 rubric.md로 평가를 받아 다시 넘기면 한 차례 더 다듬을 수 있다.
다만 기대치는 낮춰 둘 필요가 있다. README는 같은 프롬프트라도 실행할 때마다 다른 영상이 나오고, 한 번 실행으로는 원본 수준의 완성도에 닿지 못하는 경우가 많다고 분명히 적는다. 원본 영상들도 여러 차례 반복해서 다듬은 결과다.
교실에 들이기 전에 따져 볼 것
잠재력은 분명하지만 교실에 바로 들이기에는 장벽이 있다. 가장 먼저 부딪히는 것은 실행 환경이다. 소스를 돌리려면 Node.js 22.12 이상, 구글 크롬, ffmpeg, Python 3.11 이상이 필요하고, 3D 영상은 블렌더까지 있어야 한다. 일반 교사나 학교 정보 담당자가 쉽게 갖출 수 있는 수준은 아니다.
둘째, 저작권과 라이선스다. 이 저장소의 코드, 프롬프트, 영상은 MIT 라이선스로 공개되어 있고, 악기 샘플, 사진, HDRI 같은 외부 자료는 대부분 CC0나 퍼블릭 도메인이고, 일부 파일은 각자의 라이선스(BSD-3-Clause, SIL Open Font License)를 따른다. 글꼴 파일은 라이선스가 제각각이라 저장소에 넣지 않았다. README도 직접 영상을 만들 때는 상업적 이용이 허락된 자료(CC0, OFL 등)만 쓰라고 권한다. 학생이 AI로 만든 결과물을 검토 없이 쓰면 바로 이 지점에서 사고가 난다. 라이선스를 읽는 습관부터 가르쳐야 하는 이유다.
셋째, 의존의 문제다. AI가 코드를 대신 짜 주면 편하지만, 학생이 코딩이나 디자인 원리를 이해하지 못한 채 결과물만 손에 쥘 위험이 있다. AI가 코드를 짠다고 학생의 코딩 실력이 저절로 늘지는 않는다.
교육 현장을 위한 활용 설계
이 기술을 당장 학교에 들이기는 어렵지만, 그 안에서 교육적 가치를 찾을 수는 있다. 핵심은 AI의 가능성을 인정하되 한계를 분명히 짚고, 현장에 맞는 전략을 세우는 일이다.
| 활용 분야 | 활동 | 교육적 가치 |
|---|---|---|
| 콘텐츠 제작 보조 | 교사가 학습 목표(예: 물의 순환, 한글 자모 원리)에 맞는 스타일의 프롬프트를 골라 고쳐 쓰고, 만들어진 코드를 다듬어 수업 자료로 쓴다 | 복잡한 개념을 움직이는 화면으로 보여 줄 수 있다 |
| 프롬프트 분석 | 원본 프롬프트와 스타일 노트를 함께 읽으며 어떤 지시가 어떤 화면을 만들었는지 짚어 본다 | 문제를 구체적으로 정의하고 지시하는 능력을 기른다 |
| 프로젝트 기반 학습 | 학생이 주제(예: 학교 폭력 예방 캠페인, 역사적 사건 설명)를 정해 기획, 제작, 수정, 평가를 거쳐 10초 영상을 만든다 | 팀워크와 디자인 사고를 기르고 결과물에 책임을 진다 |
| AI 윤리와 리터러시 | 저작권과 라이선스, 같은 프롬프트에서도 결과가 달라지는 재현성 문제, AI가 AI를 심사하는 방식의 한계를 토론한다 | AI 기술을 비판적으로 이해하는 힘을 기른다 |
| 코딩 학습 동기 부여 | 공개된 소스 코드를 읽고 숫자나 색을 바꿔 결과가 어떻게 달라지는지 확인한다 | AI가 만든 코드를 재료 삼아 프로그래밍 구조를 익힌다 |
AI를 대신 해 주는 도구가 아니라 생각을 넓히는 재료로 쓰도록 설계하는 것이 관건이다. 기술의 역량보다 그 기술을 어떤 교육적 가치로 바꿀지 정하는 일이 더 중요하다.
연극학의 미장센으로 보면
연극학에서 미장센(Mise-en-scène)은 무대 위 모든 시각 요소를 하나의 의미와 분위기로 묶어 배치하는 일을 말한다. 이 저장소의 프롬프트가 하는 일도 비슷하다. 출력 규격, 기술 경로, 이야기, 그 스타일만의 특징을 한 문서에 적어 두고, 10초 안에 화면과 소리와 움직임이 모두 같은 스타일을 가리키게 만든다. 스타일 하나하나가 일종의 연출 노트인 셈이다. 다만 심사 점수가 7~8점대에 머문다는 사실은 연출 노트만으로 무대가 완성되지 않는다는 점도 함께 보여 준다.
출처
- Vincentwei1021, 15 Motion Design Styles, GitHub 저장소. https://github.com/Vincentwei1021/mg-styles-15
- 쇼케이스 페이지: https://vincentwei1021.github.io/mg-styles-15/