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
80줄 파이썬 스크립트가 Claude로 내부 링크 제안을 자동 생성, 링킹 시간을 2시간에서 8분으로 단축
한 레딧 사용자가 80줄짜리 파이썬 스크립트를 만들어 기사 초안과 사이트맵을 클로드에 전달하면 관련 내부 링크 대상을 제안 앵커 텍스트와 함께 반환하도록 했습니다. 이로 인해 기사당 내부 링크 작업 시간이 2시간에서 8분으로 줄었습니다.
ClamBot: 보안을 위해 WASM 샌드박스에서 LLM 생성 코드를 실행하는 AI 에이전트
ClamBot은 LLM이 생성한 모든 코드를 WebAssembly 샌드박스에서 QuickJS와 Wasmtime을 사용해 실행하는 AI 에이전트 프레임워크로, exec()나 서브프로세스 호출이 필요하지 않습니다. 도구 호출을 위한 승인 게이트, 'clams'로 저장되는 지속적 스크립트 캐싱, 그리고 여러 LLM 제공업체를 지원합니다.
Airbyte 에이전트: AI 에이전트용 사전 인덱스 컨텍스트 레이어와 Raw API MCP 비교
Airbyte가 Airbyte Agents를 출시했습니다. 이는 운영 시스템(Slack, Salesforce, Linear, Zendesk, Gong)의 데이터를 사전 인덱싱하는 컨텍스트 계층으로, 직접 vendor MCP를 사용할 때와 비교해 최대 90%까지 에이전트 토큰 소비를 줄여줍니다.
Claude Desktop에서 MCP 서버 구축 및 테스트: 아키텍처와 교훈
한 개발자가 Claude Desktop 내에서 MCP 서버를 구축하고 테스트한 경험을 공유하며, 아키텍처 설정과 도구 스키마, 디버깅, 한계점에 대한 실용적인 교훈을 상세히 설명합니다.