URL 하나로 웹사이트 복제 — AI 에이전트가 코드까지 써준다

URL 하나를 입력하면 AI 에이전트가 그 사이트를 보고 이해해 Next.js 코드로 다시 짜준다. ai-website-cloner-template은 오늘(2026-06-25) 하루에만 GitHub 별 693개를 받으며 트렌딩 1위에 올랐다(누적 ★19,247). 이 속도가 의미하는 건 하나다 — 개발자들이 "진짜 쓸 수 있겠다"고 판단했다는 것.

이게 뭔가

"웹사이트 복제"라고 하면 소스 보기 + Ctrl+C를 떠올리기 쉽다. 이 프로젝트는 방식 자체가 다르다. AI 코딩 에이전트(Claude Code 권장)가 타깃 URL을 실제 브라우저로 열어 시각적으로 분석한다. 색상·폰트·간격 같은 디자인 토큰과 레이아웃 구조를 추출한 뒤, 이를 Next.js + Tailwind CSS + shadcn/ui 컴포넌트로 처음부터 재작성한다. HTML을 긁어오는 스크래퍼가 아니라, AI가 보고 이해한 내용을 현대적인 코드로 번역한다.

왜 지금 뜨는가

세 가지가 동시에 익었다.

1. Claude Code + Opus 4.7의 성숙: 멀티 에이전트 병렬 실행이 안정화되면서 섹션별 동시 빌드가 현실적이 됐다. README도 이 조합을 명시적으로 권장한다.
2. --chrome 플래그의 등장: 에이전트가 실제 브라우저를 직접 제어해 렌더링 후 DOM·CSS를 읽는다. 정적 HTML 파서로는 불가능했던 SPA·동적 사이트 분석이 가능해졌다.
3. 결과물이 바로 배포 가능한 형태: Next.js + shadcn/ui 보일러플레이트가 표준으로 자리잡으면서 "구경용 데모"가 아닌 실제 시작점으로 쓸 수 있다.

핵심 기능

• 단일 명령 파이프라인: /clone-website <URL> 한 줄이 전체 분석·생성 흐름을 실행
• 병렬 섹션 빌더: AI 에이전트가 섹션을 나눠 동시에 구성 → 속도 향상
• 디자인 토큰 자동 추출: 색상·타이포그래피·간격 → Tailwind 설정으로 변환
• MIT 라이선스: 상업적 사용·수정 자유, 포크 부담 없음

누구에게 쓸모 있나

• 프리랜서·에이전시: 레퍼런스 사이트를 빠르게 프로토타입으로 전환할 때
• 스타트업 MVP 팀: 디자인 확정 전 레퍼런스 UI로 개발을 선행할 때
• 학습자: 실제 사이트의 컴포넌트 구조를 역공학으로 익히는 교재로

단, 법적 경계는 반드시 확인해야 한다. 타인의 사이트를 클론해 공개 배포하는 것은 저작권 침해다. 학습·내부 프로토타이핑 용도에 한정해야 한다.

시작하기

중요: GitHub 레포 페이지에서 "Use this template" 버튼으로 본인 레포를 먼저 만들어야 한다. 이 템플릿을 직접 클론해 작업하면 안 된다.

1. GitHub에서 "Use this template → Create a new repository" 클릭
2. 생성된 본인 레포를 로컬에 클론 후 의존성 설치
3. Chrome 접근 권한으로 Claude Code 실행

git clone https://github.com/YOUR-USERNAME/YOUR-NEW-REPO.git
cd YOUR-NEW-REPO
npm install

사용 예시

예시 1 — Chrome 모드로 에이전트 시작

claude --chrome

AI 에이전트가 실제 브라우저를 제어해 렌더링된 페이지를 읽는다. JS로 동작하는 SPA도 분석 가능한 핵심 플래그다.

예시 2 — 웹사이트 클론 명령 실행

/clone-website https://stripe.com

에이전트가 stripe.com을 시각 분석 → 섹션별 컴포넌트 스펙 작성 → 병렬 빌더가 Next.js 컴포넌트 생성하는 전체 파이프라인이 실행된다.

예시 3 — 결과물 로컬 확인

npm run dev

localhost:3000에서 클론된 사이트를 미리볼 수 있다. 생성된 컴포넌트는 components/, app/ 디렉토리에 정리된다.

한계·주의

• 픽셀 퍼펙트는 아니다: AI 해석 기반이라 세부 애니메이션·인터랙션은 누락되거나 단순화될 수 있다.
• API 비용 발생: Opus 4.7 권장이므로 사이트 복잡도에 따라 수 달러 이상의 토큰 비용이 청구된다.
• 동적 데이터는 재현 안 됨: 실제 API 연동·백엔드 로직은 포함되지 않는다. 정적 UI 껍데기만 생성된다.
• 저작권 책임: 퍼블릭 배포 시 법적 책임은 전적으로 사용자에게 있다.

이 도구는 '복사'가 아닌 역공학 기반 코드 생성이다. 아이디어를 빠르게 검증하거나 레퍼런스 구조를 분석할 때 유효하지만, 완성된 제품의 대체재는 아니다.