JYP Garden

클로드 코드 + AI 조합으로 천만원짜리 웹사이트를 만원에 제작

Properties1
tagsclaude-code, web-development, ai도구, higgsfield, kling, taste-skill, 비용절감, knowledge

6 min read

클로드 코드 + AI 조합으로 천만원짜리 웹사이트를 만원에 제작

채널: 성공지식백과 | 길이: 8분 50초
출처: https://www.youtube.com/watch?v=azQgRMcZvbo

요약

Claude Code, Taste-Skill, Higgsfield-AI(Seedance 2.0)을 조합한 AI 웹사이트 제작 파이프라인을 통해 기존 외주 비용(500~1,000만 원) 수준의 인터랙티브 웹사이트를 만 원 이하로 제작할 수 있음을 실증. 스크롤 연동 영상 인터랙션 등 사용자 경험 중심의 고품질 웹사이트 제작이 비전문가도 접근 가능한 영역이 됨.

4단계 제작 파이프라인

1. Claude Code ([[wiki/entities/AntiGravity]] 또는 VS Code)
   └─ 원하는 웹사이트 내용을 자연어로 지시

2. Taste Skill (GitHub 레포 URL을 Claude Code에 붙여넣기)
   └─ 에이전트를 위한 프론트엔드 프레임워크
   └─ 디자인 품질을 전문가 수준으로 끌어올림

3. Higgsfield AI (이미지 → 영상 순서 준수)
   └─ GPT Image 2로 레퍼런스 이미지 생성
   └─ Kling 2.0(Seedance 2.0)으로 3D 애니메이션 영상 변환

4. 웹사이트 배포
   └─ 영상 파일 경로를 Claude Code에 알려주면 자동 삽입

핵심 기술: 스크롤 인터랙티브 애니메이션

“원하는 영상을 프레임을 하나씩 잘라서 스크롤마다 프레임을 보여주는 스크롤 효과를 넣어 달라”

단순 영상 자동재생이 아니라 사용자 스크롤에 반응하는 인터랙션이 핵심 경쟁력. Claude Code에 위 프롬프트 한 줄만으로 구현 가능.

IDEAS

  • Claude Code + Taste Skill + Kling 3-레이어 조합이 웹 개발 비용 구조를 붕괴시킴
  • 이미지 먼저 생성 후 영상으로 변환하면 Kling 결과물 품질 향상
  • 스크롤 인터랙션 경험이 단순 정보 전달보다 웹사이트 경쟁력의 핵심이 됨
  • 스킬 패키징·배포가 AI 시대 커뮤니티 지식 자산 교환 단위로 부상
  • AI 도구 크레딧 단가·가성비 계산이 새로운 디지털 리터러시
  • 3D 블렌더 등 전문 기술 영역이 프롬프트 한 줄로 대체되는 기술 민주화

INSIGHTS

  1. 비용 구조 파괴: AI 도구 조합이 외주 팀 전체를 1인으로 대체 가능한 수준에 도달했다.
  2. 경험 > 정보: 인터랙티브 UX가 AI로 손쉽게 구현되면서, 웹사이트 품질 기준이 ‘아는 것’의 문제로 전환됐다.
  3. 스킬이 자산: 특정 효과를 구현하는 프롬프트를 스킬로 패키징·배포하는 행위 자체가 경쟁 우위.
  4. 비용 리터러시: 크레딧 단가·플랜 가성비를 계산하는 능력이 AI 도구 활용의 핵심 역량.

QUOTES

“외주를 맡기시면 500에서 1천만 원을 할 거예요. 근데 여러분이 1000 비용으로 정말 빠르게 만들 수가 있습니다.”

“옛날에는 3D 블렌드 애니메이션으로 만들다던가 정말 많은 시간과 노력이 들어갔어야 되는데 이제는 누구나 뚝딱해서 만들 수가 있는 시대가 되었습니다.”

“단순히 영상이 자동적으로 재생이 되는 것뿐만 아니라 사용자가 웹사이트와 인터랙트하는 그 경험이 되게 중요해졌거든요.”

FACTS (수치)

항목수치
Kling 2.0 8초 영상 생성72 크레딧
Ixfield 울트라 플랜$129 / 3,000크레딧
크레딧 단가$0.043/크레딧
8초 영상 1편 비용~$3 (약 5,000원)
전체 웹사이트 제작 비용만 원 이하 (제작자 주장)
외주 동급 퀄리티 견적500만~1,000만 원
권장 영상 비율/길이16:9 / 8초

RECOMMENDATIONS

  1. Claude Code + Taste Skill 조합을 먼저 익혀 뼈대 웹사이트 제작 기본기 갖추기
  2. 영상 제작 순서 준수: 이미지(GPT Image 2) → 영상(Kling 2.0)
  3. 스크롤 인터랙션 프롬프트: “프레임을 하나씩 잘라서 스크롤마다 프레임을 보여주는 스크롤 효과를 넣어 달라”
  4. Ixfield 연간 플랜 검토 (월정액 대비 크레딧 단가 절감)
  5. 영상 파일 경로 관리 습관화 (Claude Code는 영상 직접 처리 불가)

관련 노트

  • Taste-Skill — Claude Code용 프론트엔드 디자인 스킬
  • Higgsfield-AI — 이미지·영상 생성 플랫폼
  • Kling-2.0 — Seedance 2.0, 영상 생성 모델
  • Claude Code — 자연어 기반 코딩 에이전트

그래프 뷰