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
VT 코드: 멀티 프로바이더 지원과 에이전트 기술을 갖춘 오픈소스 러스트 TUI 코딩 에이전트
VT Code는 Rust 기반 터미널 UI(TUI) 코딩 에이전트로, Anthropic, OpenAI, Gemini, Codex를 지원하며 LM Studio와 Ollama를 통한 로컬 추론이 가능합니다. 에이전트 스킬, 모델 컨텍스트 프로토콜, 에이전트 클라이언트 프로토콜을 포함합니다.
Claude-kit: Claude 코드 프로젝트를 위한 구성 관리 시스템
Claude-kit은 여러 프로젝트에서 .claude/ 디렉토리 구성을 관리하는 오픈소스 도구입니다. 기술 스택을 자동 감지하고, 구성을 생성하며, 보안과 품질을 감사하고, 사용자 정의 사항을 덮어쓰지 않으면서 변경 사항을 동기화합니다.
제품 관리자가 PM 업무 자동화를 위한 70가지 이상의 Claude 스킬 공유
20년 경력의 제품 관리자가 일반적인 PM 업무를 자동화하는 70개 이상의 Claude 스킬을 만들었습니다. 여기에는 PRD 생성, 사용자 인터뷰 분석, 경쟁사 프로파일링, 로드맵 구축이 포함됩니다. 이 스킬들은 Claude Code용 다운로드 가능한 .md 파일로 제공됩니다.
릴레이: 클로드 코드 세션을 다른 AI 에이전트로 넘겨주는 도구
Relay는 Claude Code의 세션 컨텍스트(대화 기록, 도구 호출, 오류, git 상태 포함)를 추출하여 속도 제한에 도달했을 때 Codex나 Gemini 같은 다른 AI 에이전트로 전송하는 Rust 바이너리입니다. 8개의 에이전트를 지원하며 GitHub나 npm을 통해 설치할 수 있습니다.