URL 하나로 사이트 1:1 복제: Claude Code 기반 AI 웹사이트 클로너 템플릿

웹사이트의 디자인과 UI를 바닥부터 다시 코딩하지 않고, 대상 URL 하나만으로 원본 페이지를 1:1 수준의 클린한 Next.js 프로젝트로 역공학·재구축할 수 있는 오픈소스 템플릿 ‘ai-website-cloner-template’이 개발자 커뮤니티에서 주목받고 있습니다.

이미지 출처: JCodesMore / @xiao92666

JCodesMore가 공개한 이 프로젝트는 Claude Code와 Chrome MCP(Model Context Protocol) 환경을 결합해, 타깃 웹페이지의 DOM 구조·디자인 토큰·컴포넌트 인터랙션을 브라우저에서 자동 정찰하고 독립된 Git Worktree를 통해 병렬로 프론트엔드 코드를 복원하는 자동화 워크플로우를 제공합니다. 단순 스크린샷 기반 목업 생성을 넘어 실제 동작하는 컴포넌트 스펙과 Next.js 기반 클린 코드를 산출하는 실무형 에이전트 템플릿입니다.

Chrome MCP와 5단계 자동 역공학 파이프라인

ai-website-cloner-template의 핵심은 단일 프롬프트로 대충 모양만 흉내 내는 방식 대신, 철저한 정찰과 명세화를 거친 뒤 서브 에이전트들이 분업하는 5단계 파이프라인에 있습니다.

사용자가 대상 URL을 지정하고 복제 명령을 실행하면 에이전트는 다음과 같은 체계적인 단계를 거쳐 프로젝트를 빌드합니다.

1. 정찰(Reconnaissance): Claude Code가 Chrome MCP를 통해 실제 브라우저 세션을 열고 대상 사이트를 탐색합니다. 데스크톱과 모바일 뷰포트별 스크린샷을 확보하고, 스크롤·클릭·호버 등 인터랙션 상태와 DOM 트리, 디자인 토큰을 정밀하게 추출합니다.
2. 파운데이션(Foundation): 대상 웹사이트에서 사용된 웹 폰트, 컬러 팔레트, 여백 시스템, 전역 스타일(CSS/Tailwind) 설정을 프로젝트 기본 골격에 반영하고, 파비콘 및 이미지 에셋을 다운로드합니다.
3. 컴포넌트 명세(Component Specs): 브라우저 요소의 실제 렌더링 값인 getComputedStyle() 수치, 상태 머신, 브레이크포인트, 텍스트 콘텐츠를 기반으로 docs/research/components/ 디렉터리에 섹션별 정밀 기술 명세를 작성합니다.
4. 병렬 빌드(Parallel Build): 분해된 각 컴포넌트 명세를 바탕으로 git worktree 명령어를 실행해 독립된 격리 작업 트리를 생성하고, 빌더 서브 에이전트들을 병렬 디스패치하여 개별 섹션을 동시에 코딩합니다.
5. 조립 및 QA(Assembly & QA): 각 브랜치의 작업을 메인 트리에 자동 병합하고 페이지 레이아웃을 조립한 뒤, 원본 캡처 화면과 완성된 결과물 간의 시각적 Diff를 측정하는 검증 절차를 수행합니다.

이러한 단계적 접근은 LLM이 한 번에 방대한 웹페이지 전체를 작성할 때 발생하는 문맥 누락이나 스타일 왜곡 현상을 방지해 줍니다.

시작 방법과 TARGET.md 기반 복제 범위 제어

이 저장소는 일반적인 라이브러리처럼 원본 저장소를 로컬에 바로 git clone하는 대신, GitHub의 템플릿 기능을 활용해 자신의 독립 저장소를 생성한 후 사용하는 방식을 권장합니다.

실제 개발 환경에서의 설치 및 구동 단계는 다음과 같습니다.

1. 템플릿 저장소 생성: GitHub의 ai-website-cloner-template 페이지에서 Use this template 버튼을 누르고 Create a new repository를 선택해 본인 계정에 새 리포지토리를 생성합니다.
2. 로컬 복제 및 디렉터리 이동: 생성된 본인 저장소를 터미널 환경에 클론합니다.

   git clone https://github.com/YOUR-USERNAME/YOUR-NEW-REPOSITORY.git
   cd YOUR-NEW-REPOSITORY
   

3. Claude Code 기동(Chrome MCP 연동): 브라우저 제어 권한을 부여한 상태로 Claude Code를 실행합니다.

   claude --chrome
   

4. 복제 명령어 실행: CLI 인터페이스에서 대상 URL을 전달하여 복제 스킬을 활성화합니다.

   /clone-website <target-url>
   

복제 작업을 시작하기 전 세부 옵션을 사전 조정하고 싶다면 프로젝트 루트의 TARGET.md 파일을 편집할 수 있습니다. TARGET.md에서는 복제 대상 특정 서브페이지 경로, 재현 충실도 수준(pixel-perfect, high fidelity, structural), 클로닝에서 배제할 외부 위젯이나 백엔드 연동 범위, 클론 완료 후 적용할 커스텀 수정 사항을 선언적으로 지정할 수 있습니다.

지원 클라이언트 생태계와 도입 시 유의사항

ai-website-cloner-template은 Claude Code(원문 저장소 기준 Opus 5 권장, 일부 포크 저장소에서는 Opus 4.6 표기)에서 최적의 결과를 내도록 설계되었으나, Codex, Cursor, Gemini 등 다양한 AI 코딩 에이전트와도 호환됩니다.

도입 전 실무적으로 고려해야 할 특징과 제약은 다음과 같습니다.

• 규칙 동기화 체계: 프로젝트 가이드라인의 단일 진실 공급원(SSOT)으로 AGENTS.md를 채택하고 있으며, bash scripts/sync-agent-rules.sh 스크립트를 통해 다양한 코딩 도구의 룰 파일로 설정을 동기화할 수 있습니다.
• 클라이언트 전제 조건: Chrome 브라우저를 직접 구동해 DOM과 스타일을 탐색하므로, 로컬 머신에 Chrome 브라우저와 Chrome MCP 실행 환경이 정상적으로 구성되어 있어야 합니다.
• 클라이언트 UI 영역 한정: 이 도구는 공개 웹페이지의 프론트엔드 UI, 인터랙션, 스타일 자산을 리버스 엔지니어링하여 Next.js 코드로 재구축하는 도구입니다. 백엔드 데이터베이스, 비공개 인증 로직, 서버 사이드 비즈니스 로직은 복제 대상에 포함되지 않습니다.
• 소셜 홍보 수치 검증: 일부 소셜 미디어 게시글에서 'GitHub 2.8W+ Star' 등으로 바이럴 홍보가 이루어졌으나, 이는 신규 공개된 템플릿 저장소 자체의 객관적 지표와 일치하지 않으므로 과장된 마케팅 문구에 유의해야 합니다.

출처

• ai-website-cloner-template GitHub 저장소
• @xiao92666 X(구 트위터) 릴리스 게시글