Video Works · 2026
코드로 그리고,
코드로 소리 낸 두 편
그림, 움직임, 효과음을 모두 코드로 만들었습니다. 한 편은 320×180 픽셀 캔버스에 그린 동화풍 게임 소개영상이고, 다른 한 편은 React로 짠 제조업 AI 교육 홍보영상입니다.
게임 소개 애니메이션
메두사 미용실
출장 미용을 떠난 원장님이 올림푸스 신들의 카드판에서 가위를 드는 이야기. 카드게임의 규칙을 동화 한 편으로 소개합니다.
장면00:00:00 /
만든 방식
이미지 파일을 한 장도 쓰지 않았습니다. 메두사, 제우스, 헤라클레스, 헤르메스와 신전, 경기장, 연회장까지 모든 픽셀을 자바스크립트 함수로 그렸고, 브라우저에서 한 프레임씩 찍어 영상으로 묶었습니다.
- 그림320×180 캔버스에 도트를 직접 찍고 6배 확대. 장면마다 시간 곡선을 따로 두어 느리게, 멈췄다, 빠르게를 조절
- 목소리Qwen3-TTS 합성 음성. 대사 12줄을 줄마다 네 번씩 생성해 가장 나은 테이크를 골랐고, 줄마다 연기 지시를 따로 줌
- 소리배경음악과 효과음(코풍선, 번개, 가위질, 환호)을 Python으로 파형부터 합성. 목소리가 나올 때 음악이 자동으로 물러나게 믹스
정보
- 길이
- 01:07:16 · 음악판 00:42:00
- 화면
- 1920×1080, 30fps (원본 320×180)
- 프레임
- 2,026
- 도구
- Canvas 2D, Playwright, FFmpeg, NumPy
- 글꼴
- 갈무리 (픽셀 글꼴)
기업 홍보 모션그래픽
컨티스 제조업 AI 교육
"AI 교육은 받았는데, 왜 공장은 그대로일까?" 스마트팩토리 구축사가 만든 현장 실습형 AI 교육을 7개 장면으로 소개합니다.
장면00:00:00 /
만든 방식
Remotion(React)으로 장면을 컴포넌트로 짰습니다. 같은 코드에서 가로 16:9와 세로 9:16이 함께 나오고, 목소리를 바꾸면 장면 길이와 효과음 시각이 새 내레이션에 맞춰 다시 계산됩니다.
- 화면채팅창, 집계 카운터, Before/After 카드, 과제 카드를 컴포넌트로 만들고 대사 구절이 시작되는 시각에 맞춰 등장
- 목소리Qwen3-TTS VoiceDesign으로 40대 뉴스 앵커 톤을 설계한 뒤 보이스 클론으로 7개 장면을 같은 목소리로 생성. 여성·남성 두 벌
- 소리타이핑, 에러 버저, 카운트업, 도장, 로고 차임 등 효과음 11종을 코드로 합성. 배경음악은 Mixkit 라이선스 음원
정보
- 길이
- 00:52:25 · 남성판 00:52:00
- 화면
- 1920×1080 · 1080×1920, 30fps
- 구성
- 7장면 × 2비율 × 2목소리 = 4벌
- 도구
- Remotion, React, TypeScript, FFmpeg, NumPy
- 음악
- "Infinity" – Arulo (Mixkit)