Claude Code와 Veo를 이용해 2시간 만에 3D 스크롤 웹사이트를 만든 방법
Reddit 사용자 u/Tough-Survey-2155가 약 2시간 만에 3D 스크롤 웹사이트를 처음부터 구축하는 워크플로우를 공유했습니다. 이 방법은 Claude Code를 주요 도구로 사용하며, 맞춤형 video to website 스킬(Nate Herk의 아이디어)과 Veo를 영상 생성에 활용합니다.
워크플로우
- 비디오-투-웹사이트 스킬 생성 — 움직임을 스크롤 기반 상호작용으로 변환하는 기초를 마련합니다.
- 소스 비디오에서 첫 번째 및 마지막 프레임 이미지 추출 후 Veo를 사용하여 새 비디오로 변환합니다. 비디오 프롬프트는 ChatGPT를 통해 생성되었습니다.
- Claude Code에 프롬프트를 주어 비디오 에셋을 사용해 웹사이트를 구축합니다. 저자는 비디오가 준비되면 나머지는 간단한 프롬프팅이었다고 전합니다.
- 디자인 수정 — 생성 후 몇 가지 수동 조정이 필요했습니다.
결과 및 링크
- 라이브 웹사이트: royal-pop-website.vercel.app
- 전체 소스 코드: github.com/hamzafarooq/claude-code-starter
이 저장소에는 유사한 프로젝트에 재사용할 수 있는 Claude Code 스타터 템플릿이 포함되어 있습니다. 저자는 전체 과정이 단 2시간 만에 완료되었다고 강조하며, AI 지원으로 스크롤 기반 3D 사이트를 빠르게 프로토타이핑하려는 개발자에게 실용적인 참고 자료가 될 것이라고 말합니다.
📖 전체 출처: r/ClaudeAI
👀 See Also
클로드 코드 가이드라인 탐구: 65줄의 미니멀리스트 접근법
클로드 코드 확장 프로그램은 '코딩 전에 생각하라'를 강조하며 단 65줄의 마크다운으로 핵심적인 AI 코딩 원칙을 담고 있습니다. 단순함에도 불구하고 개발자들 사이에서 주목할 만한 인기를 얻었습니다.
오픈소스 MCP 서버가 Claude Desktop에 내장 세션 메모리 기능을 추가합니다
개발자가 Claude Desktop 코딩 세션 간에 컨텍스트를 보존하기 위해 통합 세션 메모리를 갖춘 TypeScript MCP 서버를 구축하여 별도의 메모리 인프라가 필요하지 않게 했습니다. 이 서버에는 세션 저장/로드 기능과 Brave 검색 및 Google Gemini 통합과 같은 추가 도구가 포함되어 있습니다.
Agent MCP Studio: Build Multi-Agent MCP Systems Entirely in a Browser via WASM
Agent MCP Studio lets you design, orchestrate, and export MCP agent systems from a single static HTML file using WebAssembly – no backend, no Docker, no server.
Chapper: LM Studio, Ollama 및 OpenAI 호환 로컬 모델을 위한 네이티브 iOS 클라이언트
Chapper는 LM Studio, Ollama, OpenAI 호환 로컬 모델에 연결하는 네이티브 SwiftUI iOS 앱으로, 클라우드 서비스나 계정 없이 사용할 수 있습니다. 실시간 토큰 스트리밍, 완전한 샘플링 제어, <think> 태그를 통한 추론 모델 지원, 7가지 형식의 내보내기 기능을 제공합니다.