수록 현황:307 건의 뉴스/102 개의 AI 도구/391 개의 오픈소스 프로젝트/73 개의 학습 자료
홈뉴스오픈소스모델AI 도구학습 자료
홈 / 오픈소스 / ai-website-cloner-template

ai-website-cloner-template

AI 에이전트 기반 GitHub 템플릿으로, URL 하나만 주면 어떤 웹사이트든 깔끔하고 현대적인 Next.js 애플리케이션으로 재구축합니다.

JavaScriptMITApplication
⭐ GitHubhttps://github.com/JCodesMore/ai-website-cloner-template
31,747
스타 수
+0
스타 증가율
2026년 8월 10일
최근 업데이트
4
클릭 수

1. 프로젝트 개요

ai-website-cloner-template은 AI 코딩 에이전트가 대상 URL만으로 기존 웹사이트를 깔끔하고 현대적인 Next.js 애플리케이션으로 재창조할 수 있게 해주는 오픈소스 GitHub 템플릿입니다. 마크업, 스타일, 에셋을 수동으로 역설계하지 않고도 사이트의 UI를 재구축하는 문제를 해결합니다.

2. 배경 및 포지셔닝

이 프로젝트는 "이 웹사이트를 복제해 줘"라는 작업을 며칠이 걸리는 수동 역설계 작업에서 안내된, 대부분 자동화된 AI 워크플로우로 전환하기 위해 만들어졌습니다. 개발자가 HTML/CSS를 직접 복사하고, 폰트와 아이콘을 찾아다니고, 픽셀 차이를 육안으로 비교하는 대신, 이 템플릿은 반복 가능한 5단계 파이프라인(정찰, 기반 구축, 컴포넌트 명세, 병렬 빌드, QA)을 제공하며, AI 에이전트가 이를 단계별로 실행하여 일회성 스크랩 스냅샷이 아닌 구조화되고 타입이 지정된 Next.js 코드베이스를 생성합니다.

일반적인 웹 스크래핑이나 "이 페이지 다운로드" 도구와 달리, 이 프로젝트는 정적 HTML만 캡처하지 않습니다. AI 에이전트를 통해 디자인 토큰 추출(폰트, 색상, 중단점), 에셋 다운로드(이미지, 비디오, SVG 아이콘), 그리고 shadcn/ui 및 Tailwind CSS를 사용한 TypeScript 컴포넌트 수준 재구축을 수행한 다음, 원본 사이트와의 시각적 비교로 결과를 검증합니다. 또한 에이전트에 구애받지 않으며, Claude Code에 대한 일급 지원과 다른 수십 개의 AI 코딩 에이전트에 대한 구성을 제공하여 특정 공급업체의 도구에 얽매이지 않습니다.

3. 기능 분류

  • 🔍 정찰 도구 — 3가지 핵심 기능: 전체 페이지 스크린샷 캡처, 디자인 토큰 추출, 상호작용/상태 매핑. 목적: 코드를 작성하기 전에 소스 사이트에 대한 정확한 그림을 구축합니다.
  • 🏗️ 기반 구축 — 폰트 및 색상 구성, 전역 Tailwind/Next.js 설정, 대량 에셋 다운로드(이미지, 비디오, SVG)를 다룹니다. 목적: 이후 컴포넌트가 기반으로 삼을 프로젝트 스캐폴드를 설정합니다.
  • 🧩 컴포넌트 명세 — 계산된 CSS 값, 반응형 상태, 상호작용 동작을 포함한 컴포넌트별 문서를 생성합니다. 목적: 빌드 단계에 모호함이 없는 기계가 읽을 수 있는 명세를 제공합니다.
  • ⚙️ 병렬 구축 — 격리된 git worktree에 컴포넌트 빌드를 분산하여 UI의 여러 부분을 동시에 구현할 수 있게 합니다. 목적: 크고 다중 컴포넌트 사이트의 재구축 속도를 높입니다.
  • ✅ 통합 및 QA — 빌드된 컴포넌트를 통합하고 원본 사이트와 시각적 비교를 실행합니다. 목적: 복제가 완료된 것으로 간주되기 전에 레이아웃, 간격, 스타일 회귀를 잡아냅니다.

4. 주요 특징

  • AI 에이전트 기반 파이프라인 — 구조화된 5단계 프로세스(정찰 → 기반 → 명세 → 빌드 → QA)가 임시방편 수동 복제를 반복 가능한 워크플로우로 대체합니다.
  • 다중 에이전트 호환성 — Claude Code(권장, Opus급 모델과 함께 사용), Codex CLI, Cursor, Windsurf, Gemini CLI, GitHub Copilot, Cline, Roo Code, Continue, Amazon Q, Augment Code, Kiro, OpenCode와 함께 작동합니다.
  • 현대적이고 타입이 지정된 출력 — 원시 스크랩 HTML이 아닌 Next.js 16 + React 19 + TypeScript(엄격 모드) 코드베이스를 생성합니다.
  • 디자인 시스템 충실도 — 실제 디자인 토큰(폰트, 색상, 중단점)을 oklch 색상 값과 함께 Tailwind CSS v4로 추출하고, shadcn/ui + Radix 프리미티브로 UI를 구축합니다.
  • 자동화된 에셋 처리 — 이미지와 비디오를 다운로드하고 SVG 아이콘을 자동으로 추출하며, 누락된 기본 아이콘은 Lucide React로 대체합니다.
  • 시각적 비교 검증 — QA 단계에서 완성된 복제본을 원본 사이트와 비교하여 육안 검증에 의존하지 않고 정확성을 확인합니다.

5. 역할별 사용 사례

  • 일반 개발자 — 레이아웃을 처음부터 구축하는 대신 기존 사이트 디자인의 현대적이고 유지보수 가능한 Next.js 버전을 빠르게 구축합니다.
  • 프로젝트 관리자 / 기술 리더 — 더 빠르고 구조화된 개념 증명 경로를 통해 레거시 사이트를 최신 기술 스택(Next.js, TypeScript, Tailwind)으로 마이그레이션하는 것을 평가합니다.
  • 학생 / 자기 주도 학습자 — 에이전트가 프로덕션 웹사이트를 검사 가능한 컴포넌트로 분해하도록 하여 특정 레이아웃, 애니메이션, 반응형 동작이 어떻게 구현되는지 연구합니다.

(DevOps/SRE, 보안 엔지니어링, 데이터/연구 과학 워크플로우에는 직접 적용되지 않으므로 생략합니다.)

6. 시작하기

필요한 것 찾기 — README와 정찰 단계 실행 후 docs/research/ 아래에 생성된 문서를 읽고 추출 출력과 컴포넌트 명세를 이해합니다.

설치 / 통합

# 1. GitHub에서 "Use this template"을 클릭하여 자신의 저장소를 만든 후:
git clone https://github.com/YOUR-USERNAME/YOUR-REPO.git
cd YOUR-REPO
npm install

# 2. AI 코딩 에이전트 실행 (Claude Code 예시, --chrome은 브라우저 접근 활성화)
claude --chrome

# 3. 에이전트 세션 내에서 복제 스킬 실행
/clone-website <target-url>

# 일상적인 스크립트
npm run dev     # 개발 서버 시작
npm run build   # 프로덕션 빌드
npm run check   # 린트, 타입 검사, 빌드 통합 실행

기여하기 — 저장소를 포크하고, 기능 브랜치에서 변경한 후, MIT 라이선스의 개방형 기여 모델에 따라 JCodesMore/ai-website-cloner-template에 풀 리퀘스트를 엽니다.

7. 프로젝트 구조

src/
  app/              # Next.js 라우트
  components/       # React/TypeScript UI 컴포넌트
  hooks/, types/, utils/
public/
  images/, videos/  # 다운로드된 사이트 에셋
  seo/              # SEO 관련 에셋
docs/
  research/         # 정찰 출력 및 컴포넌트 명세
.cline/ .kiro/ .roo/ # 플랫폼별 AI 에이전트 구성

핵심 항목: docs/research/는 정찰 및 명세 단계에서 생성된 산출물(스크린샷, 디자인 토큰, 컴포넌트 명세)을 보관하며 이후 단계에서 사용합니다. 플랫폼별 점-디렉토리(.cline/, .kiro/, .roo/ 등)는 핵심 프로젝트를 변경하지 않고도 동일한 템플릿을 다양한 AI 코딩 에이전트로 구동할 수 있게 합니다.

8. 관련 생태계

  • 상위 의존성: Next.js 16, React 19, TypeScript, Tailwind CSS v4, shadcn/ui, Radix UI 프리미티브, Lucide React 아이콘, Node.js 24+.
  • 통합되는 AI 코딩 에이전트: Claude Code, Codex CLI, Cursor, Windsurf, Gemini CLI, GitHub Copilot, Cline, Roo Code, Continue, Amazon Q, Augment Code, Kiro, OpenCode.
  • 보완적 사용: 복제가 완료되면 표준 Next.js 배포 플랫폼(예: Vercel)과 자연스럽게 연동됩니다.

9. 라이선스

MIT 라이선스.

  • ✅ 상업 프로젝트를 포함하여 코드를 자유롭게 사용, 복사, 수정, 병합, 게시, 배포할 수 있습니다.
  • ✅ 템플릿을 사용하여 자신의 레거시 사이트를 마이그레이션하거나 사이트 구축 방법을 학습할 수 있습니다.
  • ❌ 기만적인 목적, 사칭, 또는 법을 위반하는 활동에 도구를 사용하지 마십시오 — 프로젝트 지침에서 명시적으로 금지합니다.
  • ℹ️ MIT는 소프트웨어를 보증 없이 "있는 그대로" 제공합니다. 재배포 시 원본 라이선스 및 저작권 고지를 유지하십시오.

10. FAQ

Q: 이 도구를 사용하려면 유료 AI 코딩 에이전트 구독이 필요한가요?
A: 지원되는 AI 코딩 에이전트에 대한 접근 권한이 필요합니다(Claude Code 권장, Opus급 모델과 함께 사용). Cursor이나 Gemini CLI 같은 대부분의 다른 지원 에이전트도 각자의 요금제로 작동합니다.

Q: 전체 Next.js 재구축이 아닌 정적 복사본만 원하면 어떻게 하나요?
A: 이 템플릿은 정적 HTML 스냅샷이 아닌 구조화된 Next.js/TypeScript 코드베이스를 출력하도록 특별히 설계되었습니다. 원시 HTML만 필요하다면 더 간단한 스크래핑 도구가 더 적합할 수 있습니다.

Q: 이 도구로 어떤 웹사이트든 복제하는 것이 합법인가요?
A: 복제하는 내용의 합법성은 사용자에게 책임이 있습니다. 프로젝트는 기만적이거나 사칭하는 사용을 명시적으로 금지하므로, 소유한 사이트, 권한이 있는 사이트, 또는 개인 학습 목적으로 사용하는 사이트에만 사용하십시오.

Q: AI 에이전트가 추출한 내용을 보려면 어떤 디렉토리를 확인해야 하나요?
A: 정찰 단계 후 docs/research/를 확인하십시오. 이후 빌드 단계에서 사용하는 디자인 토큰, 스크린샷, 컴포넌트 명세가 포함되어 있습니다.

Q: Claude Code 외에 다른 에이전트를 사용할 수 있나요?
A: 네 — 템플릿에는 12개 이상의 에이전트(Codex CLI, Cursor, Windsurf, Gemini CLI, GitHub Copilot 등)에 대한 구성이 포함되어 있습니다. 다만 Opus급 모델과 함께 사용하는 Claude Code가 권장 조합입니다.

11. 빠른 링크

12. 요약

ai-website-cloner-template은 웹사이트 복제를 구조화된 AI 에이전트 기반 파이프라인으로 전환하여 스크랩된 HTML 덤프가 아닌 현대적이고 타입이 지정된 Next.js 코드베이스를 출력합니다. 레거시 사이트를 최신 스택으로 마이그레이션하려는 개발자와 팀, 배포된 사이트의 소스를 복구하려는 경우, 또는 프로덕션 레이아웃이 어떻게 구축되었는지 연구하려는 경우 — 모든 컴포넌트를 수동으로 역설계하지 않고 충실하고 유지보수 가능한 재구축을 원하는 모든 사람에게 가장 가치가 있습니다.