Claude Code + Seedance 2.0 = $10K Websites (Kling + Sora Are Dead)

원본 영상: Claude Code + Seedance 2.0 = $10K Websites (Kling + Sora Are Dead)

한 줄 요약

Seedance 2.0 영상 + Claude Code 빌드 + Vercel 배포, 세 단계로 “에이전시급 웹사이트”를 코딩 지식 없이 완성하는 실습 영상.

핵심 내용

AI 비디오 모델 4종(Sora, VEO 3.1, Kling, Seedance 2.0)을 동일 프롬프트·동일 입력 이미지로 비교
Seedance 2.0이 가장 우수하다고 결론 — Sora는 서비스 종료, Kling은 과도한 흔들림, VEO 3.1은 360° 회전 미완성·픽셀화
Seedance 2.0에서 제품 영상(워치 분해·재조립 루프, 자동차 360° 회전) 생성 후 MP4 다운로드
Claude Code에서 빈 폴더 생성 → claude.md 작성 → MP4 드롭 → 첫 프롬프트로 히어로 배경 영상 웹사이트 생성
Dribbble에서 유사 디자인 이미지 저장 → Claude Code에 업로드 → “below the fold 디자인” 지시로 페이지 하단 재설계
세부 수정 2가지(텍스트 위치, 그라디언트) 한 메시지에 묶어 요청
GitHub private repo 생성 → Claude Code에 push 명령 전달 → Vercel에서 import·배포

전술·요소

단계	구체 액션
환경 설치	VS Code 또는 Anti-Gravity(무료) 중 하나 + Claude Code extension
프로젝트 초기화	빈 폴더 생성 → `claude.md` 붙여넣기 (SOPs 역할)
플러그인	`/plugins` → Manage Plugins → Frontend Design Plugin 설치 후 재시작
영상 삽입	MP4를 프로젝트 폴더에 드롭 후 프롬프트에 파일 언급
디자인 참고	Dribbble 검색 → 이미지 저장 → `+` 버튼으로 업로드 → “below the fold” 키워드로 지시
배포	GitHub private repo → Vercel 연동 → Next.js 선택 → Deploy
도메인	Vercel 내장 구매 또는 GoDaddy·Namecheap에서 외부 도메인 연결

claude.md는 Claude Code의 행동 지침서로, 채널 제공 무료 템플릿 사용 가능
localhost는 개발 서버로 본인 브라우저에서만 확인 가능 — 공개 접근은 Vercel 배포 후

수치·사례

빌드 소요 시간: 약 10분 (본인 실측)
GitHub push 파일 수: 13개 (본인 실측)
Sora 서비스 종료: “2주 전”이라고 언급 (미검증, 본인 주장)
데모 사이트: 워치 이커머스 — 히어로 배경 영상(분해·재조립 루프), 리뷰 섹션

도구·워크플로

Seedance 2.0 (영상 생성)
  └→ MP4 다운로드
      └→ Claude Code 프로젝트 (VS Code / Anti-Gravity)
            ├→ claude.md 설정
            ├→ Frontend Design Plugin
            ├→ Dribbble 이미지 참고 업로드
            └→ localhost 확인 후 수정
                  └→ GitHub (private repo) push
                        └→ Vercel 배포 (Next.js)

프롬프트 패턴:

초기 빌드: "Can you please build out a beautiful website for me? This is for my watch company where we sell watches online" + MP4 첨부
디자인 지시: Dribbble 이미지 업로드 + "Please design the rest of the site around this graphic below the fold"
복합 수정: 텍스트 오버랩 제거 + hero↔white 영역 그라디언트를 한 메시지에 묶어 요청