AI Website Cloner Template: 웹사이트를 깨끗한 코드로 복제하는 AI 템플릿

URL 하나만 주면 AI 코딩 에이전트가 그 웹사이트를 "내가 소유하는 깨끗한 코드"로 다시 만들어 준다면 어떨까요? JCodesMore/ai-website-cloner-template가 바로 그 일을 합니다. 2026년 3월 공개된 이 오픈소스 템플릿은 GitHub에서 스타 22,190개·포크 3,179개(2026-06-28 실측)를 모으며 AI 웹사이트 복제 분야에서 가장 주목받는 프로젝트가 됐어요. 결론부터 말하면, 단순한 "스크린샷 → 코드" 도구가 아니라 실제 브라우저로 사이트를 검사해서 깨끗한 Next.js 코드베이스로 역설계하는 자동화 파이프라인입니다.

AI Website Cloner Template, 무엇인가요?

이 프로젝트는 GitHub "Use this template" 버튼으로 복제해서 쓰는 보일러플레이트입니다. 직접 clone하지 말고 자기 저장소를 만들어 쓰라고 README가 명시하고 있어요.

AI Website Cloner Template이란? AI 코딩 에이전트(Claude Code 권장)에게 URL 하나를 주고 /clone-website <url> 명령을 실행하면, 사이트를 검사해 디자인 토큰·에셋을 추출하고 컴포넌트 스펙을 작성한 뒤 병렬 빌더로 깨끗한 Next.js 코드베이스를 만들어내는 MIT 라이선스 오픈소스 템플릿입니다.

라이선스는 MIT, 주 언어는 TypeScript입니다. 저장소는 2026-03-13에 생성됐고(2026-06-28 기준 107일 전), 마지막 코드 푸시는 2026-06-01이에요. 외부 테크 미디어가 "공개 사흘 만에 6,000+ 스타"로 보도했던 초기 폭발 이후 약 3.5배 더 성장한 상태입니다.

어떻게 동작하나요? 현장 감독과 병렬 빌더

가장 흥미로운 건 동작 방식이에요. 단순히 "검사하고 → 빌드한다"의 2단계가 아니라 "현장 감독(foreman)" 모델을 씁니다. 비유하자면, 감독이 건물을 한 구역씩 둘러보며 그 자리에서 시방서를 쓰고, 그 시방서를 전담 기술자에게 바로 넘겨 동시에 짓게 하는 방식이에요.

전체는 5단계 파이프라인으로 돌아갑니다.

정찰(Reconnaissance): 데스크톱(1440px)·모바일(390px) 풀페이지 스크린샷을 찍고, 폰트·색상·favicon을 추출합니다. 여기에 scroll/click/hover/responsive 4종 인터랙션 스위프를 의무로 돌려서, 정적 스크린샷엔 안 보이는 동작까지 찾아냅니다.
파운데이션: layout.tsx 폰트, globals.css 색상 토큰·키프레임, TypeScript 인터페이스, 아이콘, 에셋을 일괄 정비하고 빌드 통과를 확인합니다.
컴포넌트 스펙 & 디스패치(핵심 루프): 섹션마다 추출 → 스펙 파일 작성 → 빌더 디스패치를 반복합니다. 빌더는 스펙을 프롬프트에 인라인으로 받아요(외부 문서 참조 금지).
페이지 조립: 각 빌더의 작업을 병합한 뒤 page.tsx에서 스크롤·z-index·sticky 등을 토폴로지대로 배선합니다.
비주얼 QA Diff: 원본과 복제본을 데스크톱/모바일로 섹션별 대조하고, 어긋난 곳은 다시 수정합니다. 이 단계 전엔 "완료" 선언을 못 하게 막아 둡니다.

여기서 두 가지 설계가 핵심입니다. 첫째, 라이브 DOM 실측이에요. getComputedStyle()로 실제 적용된 정확한 값을 읽고, 인터랙션 모델(클릭 기반인지 스크롤 기반인지)을 먼저 판정합니다. 둘째, 병렬 빌더의 git worktree 격리입니다. 빌더마다 저장소 사본에서 독립 작업하니 파일 충돌 없이 동시에 진행돼요. 스펙이 ~150줄을 넘으면 섹션을 더 쪼개라는 "복잡도 예산" 규칙도 있어, 작게 나눠 정확하게 만드는 걸 강제합니다.

기술 스택

복제 결과물은 최신 스택으로 나옵니다. package.json 기준 Next.js 16.2.1(App Router)·React 19.2.4·shadcn/ui 4.x(Radix primitives)·Tailwind CSS v4(oklch 디자인 토큰)이고, Lucide React 아이콘을 씁니다. 전제 조건은 Node.js 24+예요.

에이전트도 가립니다만 묶어 둡니다. Claude Code(Opus 4.7 권장)가 1순위지만, Codex CLI·Cursor·Windsurf·Gemini CLI·Copilot·Cline·Aider 등 13종 에이전트를 AGENTS.md 단일 소스로 지원합니다. 특정 도구에 종속되지 않는다는 뜻이에요.

기존 도구와 뭐가 다른가요? (v0·Bolt 비교)

"웹사이트를 AI로 만드는 도구"는 이미 많죠. 그런데 결과물의 성격이 다릅니다.

도구	방식	결과물
AI Website Cloner Template	브라우저 실측 + 병렬 빌더	본인 소유 Next.js 16 코드베이스
open-lovable (firecrawl)	스크래핑 + AI 생성	React 앱
v0 (Vercel)	스크린샷/프롬프트 → 코드	shadcn/ui 컴포넌트
Bolt.new	프롬프트 → 풀앱	완결 앱
screenshot-to-code 류	스크린샷 → HTML/Tailwind	레이아웃 70~80% 근사

테크 미디어 aimultiple은 스크린샷 → 코드 도구들이 "레이아웃·타이포·색상의 70~80%만 재현하며 pixel-perfect 복제는 결코 아니다"라고 평가했어요. 이 템플릿의 차별점은 세 가지로 정리됩니다. ① 정적 스크린샷이 아닌 라이브 DOM 실측 + 인터랙션 모델 추출, ② 결과물이 본인 소유의 깨끗한 코드베이스, ③ 특정 SaaS가 아닌 에이전트 무관 오픈소스 템플릿. 정확도·소유권·개방성 세 축에서 갈립니다.

누가, 언제 쓰면 좋을까요?

README가 정리한 합법 용도는 세 가지예요.

플랫폼 마이그레이션: 본인 소유의 WordPress·Webflow·Squarespace 사이트를 모던 Next.js로 재구축
소스코드 유실 복구: 라이브는 살아있지만 저장소가 사라졌거나 개발자가 떠난 경우 코드 복원
학습: 프로덕션 사이트의 레이아웃·애니메이션·반응형 동작을 실제 코드로 분해해 학습

실무에선 레퍼런스 사이트의 디자인 시스템을 뽑아내는 프리랜서 개발자, 노코드·레거시 사이트를 소유 코드로 이관하려는 1인 창업가, 프로덕션 인터랙션을 코드로 공부하려는 디자이너에게 잘 맞습니다.

저작권·합법 사용 경계 (반드시 확인)

좋은 도구일수록 경계가 중요하죠. README는 다음을 "Not Intended For"(의도하지 않은 용도)로 못 박았습니다.

피싱·사칭 등 기만·불법 행위
로고·브랜드 에셋·원본 카피를 자기 것인 양 도용하는 행위
스크래핑·복제를 금지하는 사이트의 이용약관(ToS) 위반

정리하면, 복제 대상이 내 것이거나 명백히 허용된 경우에 쓰는 도구입니다. 타인의 사이트를 그대로 베껴 자기 것으로 내거나 약관을 어기는 건 명백히 선을 넘는 거예요. 저작권·약관 리스크는 사용자 책임이며, 이 글은 법률 자문이 아니라는 점도 함께 기억해 주세요.

시작하는 법 (Quick Start)

직접 써 보고 싶다면 순서는 간단합니다.

GitHub에서 "Use this template"로 자기 저장소를 생성합니다(원본을 직접 clone하지 마세요).
npm install로 의존성을 설치합니다.
claude --chrome으로 에이전트를 기동합니다(브라우저 검사를 위한 --chrome 플래그).
/clone-website <target-url>을 실행합니다(여러 URL을 동시에 넘길 수도 있어요).
베이스 복제가 끝나면 필요한 부분만 커스터마이즈합니다.

Node.js 24+ 환경에서, 복제 대상이 본인 소유이거나 허용된 사이트인지 먼저 확인한 뒤 실행하는 걸 권합니다.

자주 묻는 질문 (FAQ)

Q: AI Website Cloner Template은 무료인가요?

네, MIT 라이선스 오픈소스라 무료로 쓸 수 있습니다. 다만 Claude Code 같은 AI 코딩 에이전트의 사용 비용(구독 또는 API 요금)은 별도예요.

Q: 꼭 Claude Code로만 써야 하나요?

아니에요. Claude Code(Opus 4.7)를 권장하지만, AGENTS.md 한 파일로 Codex CLI·Cursor·Windsurf·Gemini CLI·Copilot·Cline·Aider 등 13종 에이전트를 함께 지원합니다.

Q: 정말 픽셀 단위로 똑같이 복제되나요?

스크린샷 기반 도구(70~80% 근사)보다 정확도를 크게 높이는 게 목표입니다. getComputedStyle() 라이브 DOM 실측과 원본 대조 QA Diff 단계를 거쳐 pixel-perfect를 지향하지만, 복잡한 사이트는 결과를 확인하며 보정하는 게 좋아요.

Q: 남의 웹사이트를 복제해도 되나요?

마무리

AI Website Cloner Template은 "참고 사이트를 비슷하게 흉내내기"가 아니라 "실제 사이트를 실측해서 내가 소유하는 깨끗한 코드로 가져오기"에 가깝습니다. 옛 워드프레스·노코드 사이트의 플랫폼 이전, 잃어버린 소스코드 복구, 잘 만든 사이트의 구조 학습처럼 합법적인 용도라면 한 번 살펴볼 만한 오픈소스 도구예요. 다만 피싱·사칭·타인 디자인 도용은 README가 명확히 금지하니, 저작권 경계는 반드시 본인이 책임지고 확인하세요.

AI Website Cloner Template: 웹사이트를 깨끗한 코드로 복제하는 AI 템플릿