코드 애니메이션 스튜디오

게시물 내용

[실험 기록] 유튜브 영상 속 '100% Code 애니메이션 스튜디오'를 직접 재현해 보았습니다. Google의 Creative Technologist Matias Piña Aguilera가 공개한 Gemini 4 Argon 기반 실시간 애니메이션 워크플로(외부 이미지·영상·사운드 파일 0개)를 보고, 실제로 동일한 아키텍처를 재현할 수 있는지 실험해 보았습니다. 🧪 실험 목표 외부 에셋(PNG, MP4, WAV)을 일절 사용하지 않고 오직 코드만으로: 1. 6막 스토리보드 애니메이션 2. 다중 화풍 실시간 렌더링 갤러리 3. 실시간 파라미터 슬라이더 GUI 4. 생성형 오디오 신디사이저(DAW) 5. 캐릭터 표정·체형 커스터마이저를 구현할 것. 🛠 실제로 구현된 결과물 • Art-Code Studio (studio.html): 순수 HTML5 Canvas 2D + Web Audio API 기반 5탭 스튜디오 - #37 볼펜 공책 스케치, #08 수채화 번짐, #04 1비트 디더링, #20 스테인드글라스 등 12종 화풍 실시간 전환 - V1/V2/V3 팔레트 3분할 비교 및 5종 셰이더 슬라이더 - 6채널 스템 믹서 + 4밴드 EQ + 16스텝 모티프 시퀀서 + 실시간 WAV 바운스 - 눈 크기·눈썹 각도·고개 기울기·얼굴 클로즈업(Portrait Zoom) 캐릭터 커스터마이저 • 100% 코드 렌더링 비디오 (reproduced-100pct-code.mp4): - 900프레임(30초)의 모든 픽셀과 44.1kHz 스테레오 오디오 파형을 코드로만 계산해 인코딩한 영상 • 따라하기 카드 10장 & 5단계 가이드 문서 이번 실험을 통해 확인한 핵심은 두 가지였습니다. 첫째, 기본 장면 기하학(Geometry)과 렌더링 패스(Style Shader)를 분리하면 서브에이전트 병렬 작업으로 수십 가지 화풍을 동시에 탐색할 수 있다는 점. 둘째, AI에게 수정 프롬프트를 수십 번 입력하는 것보다 '슬라이더가 달린 커스텀 GUI'를 먼저 만들게 하는 편이 훨씬 빠르고 정교하다는 점입니다. 원본 영상: https://www.youtube.com/watch?v=T2Wfds62ZjM #Antigravity #Gemini4Argon #ProceduralAnimation #CreativeTechnologist #WebDev #AIWorkflow

— @reasonofmoon