생성형 AI로 영상을 제작할 때 보통 미드저니나 런웨이 같은 영상 생성 모델을 먼저 떠올리게 됩니다. 그런데 대형 언어 모델에게 직접 웹 코드를 작성하게 해 역동적인 애니메이션을 구현하는 새로운 시도들이 눈길을 끌고 있어요.
최근 깃허브에 공개된 저장소에는 클로드 오퍼스 5.5 영상 프롬프트를 활용해 제작된 감각적인 모션그래픽과 3D 인터랙티브 작업물들이 집대성되어 있습니다. 단순한 동영상 렌더링이 아니라 코드로 구현된 결과물이라는 점이 독특해요.
🎬 코드로 움직이는 모션그래픽 아카이브
깃허브 저장소 ‘awesome-opus5-5-videos’는 클로드 오퍼스 5.5로 생성한 바이럴 영상들과 그 제작 프롬프트를 한데 모은 오픈소스 프로젝트예요. 저장소 안내에 따르면 HTML, 캔버스(Canvas), SVG, Three.js 같은 웹 표준 기술을 지시문만으로 코딩해 움직이는 화면을 구성했다고 해요.
현재 이 저장소에는 700여 개 이상의 프롬프트가 수록되어 있으며 꾸준히 새로운 영상과 코드가 업데이트되고 있습니다. 웹 개발 지식이 깊지 않아도 프롬프트 구조를 파악해 AI 코딩 에이전트에 바로 대입해 볼 수 있도록 정리되어 있어요.
🔍 원본과 실시간 리메이크를 비교하는 Skillry
이 프로젝트의 재미있는 점은 Skillry 웹 플랫폼과 연계되어 있다는 사실입니다. Skillry 페이지에서는 원작자가 소셜미디어에 공유한 원본 영상과, 동일한 프롬프트를 다시 실행해 얻은 실시간 리메이크 결과를 화면 양옆에 나란히 띄워 비교해 볼 수 있어요.
화면 분할 뷰를 통해 프롬프트가 코드로 번역될 때 어떤 시각적 차이가 발생하는지 직관적으로 확인할 수 있습니다. 모션그래픽뿐만 아니라 개념 설명 영상, 3D 공간 연출, 간단한 게임까지 카테고리별로 분류되어 있어 원하는 레퍼런스를 찾기 수월해요.
🕹️ Three.js부터 키네틱 타이포까지 다채로운 표현
공개된 작업물들을 살펴보면 복잡한 3D 오브젝트 회전이나 파티클 입자 효과, 물리 엔진을 적용한 인터랙티브 그래픽까지 폭넓게 다룹니다. 자바스크립트 기반 애니메이션 라이브러리인 GSAP이나 셰이더 언어 GLSL을 프롬프트만으로 다뤄낸 사례들도 포함되어 있어요.
문자 중심의 리듬감 넘치는 키네틱 타이포그래피부터 귀여운 캐릭터 연출까지 프롬프트 한두 줄로 이뤄진 결과물들이 상당수입니다. 기존 영상 편집 툴을 다루지 못해도 웹 브라우저 안에서 동작하는 시각 효과를 AI와 함께 만들 수 있음을 보여줘요.
💡 저장소 프롬프트 활용 포인트
- 코드 스택 확인: Canvas, Three.js, GSAP 등 영상마다 사용된 기술 태그가 표시되어 있어 원하는 기술을 골라 프롬프트를 살펴볼 수 있어요.
- 프롬프트 복사: 수록된 지시문을 복사해 클로드 코드(Claude Code)나 본인이 사용하는 AI 에이전트에 그대로 붙여넣어 실행할 수 있어요.
- 웹 결과물 공유: 코드로 생성된 결과물이기 때문에 별도 비디오 인코딩 없이 웹 브라우저에서 가볍게 공유하고 수정할 수 있어요.
코드를 다루는 AI의 능력이 시각적 연출 영역까지 깊숙이 확장되고 있는 흐름을 생생하게 보여주는 아카이브입니다. 프로그래밍 기반 인터랙션이나 웹 애니메이션을 구상하고 있다면 유용한 참고 자료가 될 것으로 보여요.