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
audio-analyzer-rs: Claude를 위한 오디오 분석 MCP 서버
한 개발자가 Rust로 구현된 MCP 서버인 audio-analyzer-rs를 구축했습니다. 이 도구는 Claude에게 스펙트럼, 하모닉, 리듬, LUFS 음량(EBU R128), 다이내믹 레인지 측정을 포함한 오디오 파일 분석에 직접 접근할 수 있도록 합니다. 이 도구는 토큰 효율적이며, Claude는 낮은 해상도로 시작하여 필요에 따라 작은 청크로 확대합니다.
SWE-CI: CI를 통한 장기간 코드 유지 관리에 대한 AI 에이전트의 새로운 벤치마크 테스트
SWE-CI는 지속적 통합 사이클을 통해 코드베이스를 유지 관리하는 데 있어 LLM 기반 에이전트를 평가하는 저장소 수준 벤치마크로, 정적 버그 수정에서 벗어나 100개의 실제 작업에 걸친 장기적 유지 관리성에 초점을 맞춥니다.
범죄 팀: 오픈클로를 위한 다중 에이전트 오케스트레이터 — 코더 에이전트와의 병렬 코드 리뷰
Crime Team v0.1은 여러 전문 OpenClaw 에이전트를 병렬로 실행하여 코드를 검토하고 결과를 통합합니다. 에이전트별 모델, 변경사항을 적용하는 코더 에이전트, 재감사 루프를 포함합니다. CLI + GUI.
EsoLang-Bench: LLM 추론 능력을 테스트하기 위한 난해한 프로그래밍 언어를 활용한 코딩 벤치마크
연구진은 브레인퍽(Brainfuck)과 화이트스페이스(Whitespace) 같은 난해한 프로그래밍 언어를 사용해 LLM이 진짜로 추론하는지 아니면 단순히 패턴 매칭을 하는지 테스트하는 코딩 벤치마크인 EsoLang-Bench를 만들었습니다. GPT-5.2, O4-mini, Gemini, Qwen, Kimi 중 가장 좋은 결과는 11.2%였습니다.