ai-website-cloner-template: AI 코딩 에이전트를 사용하여 웹사이트를 Next.js 코드베이스로 역공학하는 재사용 가능한 템플릿
ai-website-cloner-template: AI 코딩 에이전트를 사용하여 웹사이트를 Next.js 코드베이스로 역공학하는 재사용 가능한 템플릿
해결하는 문제
이 프로젝트는 기존 웹사이트를 깨끗하고 현대적인 Next.js 코드베이스로 역공학할 수 있는 재사용 가능한 템플릿을 제공합니다. 플랫폼 마이그레이션(예: WordPress 또는 Webflow에서 Next.js로 이동), 라이브 사이트에서 손실된 소스 코드를 복구하거나, 실제 운영 중인 웹사이트가 어떻게 구조화되고 스타일링되었는지 학습하는 데 도움을 주도록 설계되었습니다.
작동 방식
이 템플릿은 /clone-website 명령어를 통해 다단계 파이프라인을 실행하기 위해 AI 코딩 에이전트(Claude Code, Cursor 또는 Aider와 같은)를 활용합니다:
- Reconnaissance: 에이전트는 스크린샷을 찍고 디자인 토큰, 에셋, 상호작용 동작을 추출합니다.
- Foundation: 글로벌 스타일, 폰트, 색상을 업데이트하고 필요한 에셋을 다운로드합니다.
- Component Specs: 에이전트는 정확한 계산된 CSS 값과 동작을 포함하여 각 컴포넌트에 대한 상세한 사양을 작성합니다.
- Parallel Build: 여러 빌더 에이전트가 개별 섹션이나 컴포넌트를 병렬로 재구성하기 위해 파견됩니다.
- Assembly & QA: 최종 조각들이 병합되고, 정확성을 보장하기 위해 원본 사이트와 시각적 diff를 수행합니다.
대상 사용자
레거시 사이트를 현대적인 스택으로 마이그레이션하려는 개발자, 웹사이트의 프론트엔드 코드를 복구해야 하는 사람, 또는 프로덕션 수준의 레이아웃과 애니메이션을 연구하고자 하는 개발자들을 위한 것입니다.
주요 특징
- Modern Tech Stack: Next.js 16, React 19, Tailwind CSS v4, 그리고 shadcn/ui로 구축되었습니다.
- Agent Agnostic: Claude Code, GitHub Copilot, Cursor, 그리고 Windsurf를 포함한 광범위한 AI 코딩 에이전트를 지원합니다.
- Automated Pipeline: 디자인 토큰 추출과 컴포넌트 사양 생성을 자동화하여 빌드 과정에서 추측을 요구하는 단계를 제거합니다.
- Parallel Construction: git worktrees를 사용하여 빌더 에이전트가 사이트의 서로 다른 섹션을 동시에 작업할 수 있도록 합니다.