Matt Penny의 영상 **「Claude + Three.js = Premium 3D Motion Graphics」**는 Claude와 Three.js를 결합해 웹 브라우저에서 실행되는 **프리미엄 느낌의 3D 모션그래픽**을 만드는 방법을 소개합니다. > 이번 영상은 YouTube 자막을 불러오는 과정에서 요청 제한(HTTP 429)이 발생해 전체 자막은 확인하지 못했습니다. 아래 내용은 영상의 제목·설명과 Three.js의 일반적인 활용 구조를 바탕으로 정리했습니다. ## 핵심은 생성형 영상이 아니라 ‘코드로 만드는 3D 모션’ 이 방식은 이미지나 영상을 AI 모델이 직접 생성하는 구조와 다릅니다. Claude가: - Three.js 코드 작성 - Scene 구성 - Camera 설정 - Light 배치 - Geometry / Material 구성 - Animation Loop 작성 - Interaction 추가 같은 작업을 코드로 만들어 주고, 실제 렌더링은 브라우저와 WebGL이 담당합니다. 즉: **Claude → Three.js 코드 → 브라우저 렌더링 → 3D Motion Graphic** 구조입니다. ## Three.js는 무엇인가? Three.js는 WebGL을 직접 다루지 않고도 브라우저에서 3D 그래픽을 만들 수 있게 해주는 JavaScript 라이브러리입니다. 일반적으로 다음 요소를 조합합니다. - Scene - Camera - Renderer - Geometry - Material - Mesh - Light - Animation Claude에게 이런 구조를 자연어로 설명하면 코드를 빠르게 생성할 수 있습니다. ## 왜 Claude와 잘 맞는가? Three.js는 코드 기반이라 AI 코딩 모델이 다루기 좋습니다. 예를 들어: > 검은 배경에 금속 재질의 구체가 천천히 회전하고, 뒤에는 입자가 흐르도록 만들어줘. 라고 요청하면 Claude가: - Scene 생성 - Sphere Geometry - Metallic Material - Lighting - Particle System - Animation Loop 를 포함한 코드를 작성할 수 있습니다. 이후: > 카메라 움직임을 더 시네마틱하게 바꿔줘. > 입자 속도를 절반으로 줄여줘. > 텍스트가 등장할 때 Glow 효과를 넣어줘. 처럼 자연어로 반복 수정할 수 있습니다. ## 생성형 영상 도구와의 차이 Seedance, Veo, Kling 같은 생성형 영상 모델은 최종 영상을 직접 생성합니다. 반면 Three.js 방식은 **코드와 실시간 렌더링**이 핵심입니다. 장점은: - 수정 가능성이 높음 - 반복 재생이 쉬움 - 해상도 제약이 상대적으로 적음 - 인터랙션 추가 가능 - 웹사이트에 바로 삽입 가능 - 브랜드 색상과 타이밍을 정확히 제어 가능 입니다. ## 웹사이트 Hero Section에 특히 잘 맞는다 Three.js 기반 모션은 다음과 같은 웹 디자인에 적합합니다. - SaaS Landing Page - Product Hero Section - Tech Brand Intro - 3D Logo Animation - Data Visualization - Interactive Portfolio - Product Showcase 영상 파일을 단순 배경으로 넣는 대신 실제 3D Scene을 실행할 수 있기 때문에 사용자 입력에 반응하는 효과도 만들 수 있습니다. ## Claude가 맡을 수 있는 역할 Claude는 단순 코드 생성보다 다음 작업까지 맡길 수 있습니다. 1. Scene 구조 설계 2. 코드 작성 3. 오류 수정 4. Animation Timing 조정 5. Camera Movement 개선 6. Light / Material 변경 7. Responsive 처리 8. Performance 최적화 즉, 디자이너가 직접 Three.js API를 모두 외우지 않아도 자연어로 3D Motion Graphic을 반복 개선할 수 있습니다. ## 모션그래픽 디자이너에게 의미가 큰 이유 기존 3D 모션그래픽은 Blender, Cinema 4D, After Effects 같은 툴을 배워야 했습니다. Three.js + Claude 조합은 다른 접근입니다. **디자인 의도는 자연어로 설명하고, 구현은 AI가 코드로 작성** 하는 방식입니다. 그래서 개발 경험이 많지 않은 디자이너도: - 3D Landing Page - Interactive Graphic - Web Motion - Product Animation 을 빠르게 실험할 수 있습니다. ## After Effects 방식과의 차이 기존 AI + After Effects 자동화가 완성된 영상을 만드는 데 유리하다면 Three.js는 실시간 웹 경험에 더 적합합니다. ### After Effects - 영상 중심 - Timeline 기반 - 최종 Render 파일 생성 - 광고·모션그래픽 영상 제작에 적합 ### Three.js - 웹 중심 - Code 기반 - 실시간 Render - Interaction 가능 - Landing Page·Portfolio·Product UI에 적합 따라서 두 방식은 경쟁 관계라기보다 용도가 다릅니다. ## 성능 최적화는 여전히 중요하다 AI가 코드를 만들어 준다고 해서 모든 Three.js 결과가 자동으로 최적화되는 것은 아닙니다. 특히: - Polygon 수 - Texture 크기 - Shadow 품질 - Particle 수 - Post-processing - Mobile GPU 성능 을 고려해야 합니다. 시각적으로 멋진 결과라도 모바일에서 프레임이 떨어지면 실제 서비스에 쓰기 어렵습니다. ## 실전 Prompt 예시 Claude에 다음과 같이 요청할 수 있습니다. > Three.js로 어두운 배경의 프리미엄 테크 제품 Hero Section을 만들어줘. 중앙에 반투명한 유리 재질의 구체를 배치하고, 천천히 회전하게 해줘. 주변에는 작은 입자가 흐르고, 마우스를 움직이면 카메라가 약하게 따라오게 해줘. 모바일에서는 Particle 수를 줄여줘. 이런 식으로: **Scene + Visual Style + Motion + Interaction + Responsive 조건** 을 함께 말하면 결과가 더 안정적입니다. ## AI 모션그래픽의 방향 최근 AI 모션그래픽은 두 가지 방향으로 발전하고 있습니다. ### 1. 생성형 Video Prompt → 완성 영상 ### 2. Code-based Motion Prompt → Code → 실시간 Graphic Three.js는 두 번째 방향의 대표적인 도구입니다. Code 기반 결과물은 수정·재사용·인터랙션 측면에서 큰 장점이 있어 웹디자인과 AI 코딩의 접점에서 활용도가 높습니다. ## 한 줄 정리 **Claude + Three.js의 핵심은 AI가 영상을 직접 생성하는 것이 아니라, 디자이너의 자연어 지시를 Three.js 코드로 바꿔 실시간 3D 모션그래픽을 만드는 것입니다.** 웹사이트, 포트폴리오, SaaS Landing Page처럼 **수정 가능하고 인터랙티브한 3D 표현**이 필요한 작업에서는 생성형 영상 모델과는 다른 강점을 가집니다.