본문으로 건너뛰기
RAISE LAB

VIDEO NOTE

클로드와 바이브 코딩으로 웹 모션 그래픽 영상 만들기

코드깎는노인 · 9분 8초 · 중급 · 26. 10. 06. · 분야별 AX 사례 › 영상·이미지 생성

YouTube 에서 보기 · 코드깎는노인 (새 탭에서 열림)

영상 생성 모델 대신 웹 기술(HTML, CSS, JavaScript, GSAP, Canvas, Three.js)을 활용해 코드로 모션 그래픽을 구현하고 영상으로 변환하는 방법을 소개한다. Claude Code와 Claude 3.5 Sonnet(또는 Opus 3.5)을 이용해 프롬프트만으로 텍스트 모션 그래픽과 3D 효과를 생성하며, 폰트 라이선스 제약까지 코드로 해결한 사례를 보여준다. 코드로 제작한 영상은 글자 깨짐이 없고 부분 수정이 쉬우며 원하는 해상도로 선명하게 출력할 수 있다.

핵심

  • AI 영상 제작 방식은 영상 생성 모델을 쓰는 법과 코드로 화면을 움직여 영상화하는 법으로 나뉜다.
  • 웹 애니메이션 구현에는 HTML, CSS, JavaScript 외에 GSAP, SVG, Canvas, Three.js, WebGL 같은 도구를 활용한다.
  • Claude Code를 통해 프롬프트를 입력하면 타이포그래피 모션과 시각 요소를 코드로 작성해 준다.
  • 외부 폰트 사용 제한 조건을 맞추기 위해 클로드가 직접 벡터 코드로 서체를 그려 문제를 해결했다.
  • 코드로 만든 영상은 전체를 다시 생성할 필요 없이 특정 부분의 코드만 수정해 바로 반영할 수 있다.
  • 완성된 브라우저 애니메이션은 4K 60fps MP4 동영상 파일로 변환해 출력할 수 있다.
  • 벡터 수치 기반으로 렌더링되므로 일반 픽셀 영상과 달리 대형 화면에서도 글자와 도형이 깨지지 않는다.

RAISE LAB 에서 배우는 사람에게

설명 영상이나 타이포그래피 콘텐츠를 제작할 때 영상 생성 모델의 오타·해상도 한계를 코딩 에이전트로 극복하는 실전 대안을 보여준다.

챕터

  1. 0:00코드로 만든 웹 모션 그래픽 영상 소개 (새 탭에서 열림)
  2. 0:10AI 영상 제작의 두 가지 방식 (새 탭에서 열림)
  3. 1:24웹에서 움직임을 구현하는 기술과 도구 (새 탭에서 열림)
  4. 3:19클로드로 직접 영상 모션 코드 만들기 (새 탭에서 열림)
  5. 4:26코드 영상의 수정과 MP4 파일 출력 (새 탭에서 열림)
  6. 5:22화소 기반 영상 대비 벡터 코드 영상의 장점 (새 탭에서 열림)
  7. 6:24코드 기반 영상 제작의 핵심 이점 (새 탭에서 열림)

이 노트는 RAISE LAB 운영팀이 고른 영상을 AI(Gemini)가 보고 한국어로 정리한 것입니다. 영상의 저작권은 원작자에게 있고, 자막·대본은 싣지 않습니다. 코드깎는노인 원작자 채널 (새 탭에서 열림)

영상·이미지 생성