AI 웹사이트 클론, 명령어 한 줄로? Claude Code 오픈소스 분석

웹사이트 하나를 통째로 코드로 옮기려면 보통 며칠이 걸려요. 그런데 명령어 한 줄(/clone-website <주소>)이면 끝난다는 오픈소스가 화제예요. 바로 JCodesMore/ai-website-cloner-template인데, 2026-06-26 기준 GitHub 스타가 21,102개까지 올랐습니다. 단순 베끼기가 아니라 AI 웹사이트 클론의 새로운 방식을 보여줘서 주목받고 있어요.

이 글에서는 이 템플릿이 정확히 무엇인지, 왜 화제인지, 어떻게 작동하는지, 그리고 "남의 사이트를 베껴도 되나?" 하는 법적·윤리 문제까지 균형 있게 풀어드릴게요.

AI 웹사이트 클론 템플릿이란 무엇인가요?

AI Website Cloner Template은 Claude Code 같은 AI 코딩 에이전트(사람 대신 코드를 직접 짜주는 AI 프로그램)에게 명령어 한 줄을 주면, 대상 웹사이트를 검사해 디자인 정보를 추출하고 깨끗한 Next.js 코드로 다시 만들어 주는 오픈소스 도구예요.

핵심은 "복사"가 아니라 "역설계(reverse engineering, 완성된 결과물을 뜯어보고 설계도를 거꾸로 만드는 것)"라는 점이에요. 남의 HTML을 그대로 긁어오는 게 아니라, 사이트의 디자인을 분석해 새로운 코드로 재구성합니다.

기본 정보를 정리하면 이래요 (2026-06-26 기준).

항목	내용
저장소	JCodesMore/ai-website-cloner-template
GitHub 스타	21,102개
포크(fork, 남이 복사해 간 사본)	3,071개
저장소 생성일	2026-03-13 (오늘 기준 약 105일 전)
최근 업데이트	2026-06-01 (오늘 기준 약 25일 전)
라이선스	MIT (자유로운 사용·수정 허용)
주 언어	TypeScript

왜 이렇게 빠르게 화제가 됐을까요?

성장 속도가 정말 가팔라요. 공개 직후인 2026-03-16 보도에서는 "3일 만에 스타 6,000개"였고, 2026-04-20에는 한 미디어가 "스타 1.3만개"로 소개했어요. 그리고 2026-06-26 기준으로는 2.1만개까지 왔습니다. 약 3개월 만에 6천 → 1.3만 → 2.1만으로 뛴 셈이에요.

(혹시 다른 글에서 "스타 1.3만개"나 "1.87만개"라고 본 적 있다면, 그건 더 오래된 시점의 숫자예요. 2026-06-26 현재 정확한 값은 2.1만개입니다.)

단순히 신기해서 인기인 건 아니에요. 진짜 이유는 여러 AI 에이전트가 동시에 작업하는 패턴을 실전에 녹였기 때문이에요. 이 부분은 뒤에서 따로 설명할게요.

어떻게 작동하나요? 5단계 파이프라인

이 도구는 웹사이트를 다섯 단계를 거쳐 다시 만듭니다. "여러 일꾼이 한 건물을 동시에 짓고 마지막에 합치는" 공사 현장을 떠올리면 이해가 쉬워요.

정찰(Reconnaissance): 사이트를 실제로 띄워 스크린샷을 찍고, 색상·폰트 같은 디자인 토큰(design token, 디자인을 이루는 기본 값들)과 스크롤·클릭·마우스 올림(hover)·반응형 동작을 훑어봐요.
기초 공사(Foundation): 폰트, 색상, 전역 스타일을 맞추고 이미지 같은 에셋(asset, 사이트에 쓰이는 자료 파일)을 내려받아요.
상세 설계(Component Specs): 각 요소가 실제로 어떻게 보이는지 정확한 수치로 "상세 스펙 문서"를 만들어요.
병렬 빌드(Parallel Build): git worktree(같은 코드 저장소를 여러 작업 공간으로 동시에 나눠 쓰는 기능)를 이용해 섹션·컴포넌트별로 빌더 에이전트를 동시에 일하게 해요.
조립과 검수(Assembly & QA): 나뉘어 만든 결과를 하나로 합치고, 원본과 화면을 나란히 비교(visual diff)해 사람이 검수해요.

마지막에 사람의 검수와 비교가 들어간다는 점이 중요해요. "버튼만 누르면 100% 자동 완성"이 아니라, 정밀하게 재구성한 뒤 사람이 확인하는 도구예요.

단순 스크래핑과 무엇이 다른가요?

기존의 웹사이트 복제는 보통 두 가지였어요. 하나는 HTML·CSS를 그대로 긁어오는 스크래핑(scraping, 웹페이지 내용을 자동으로 수집하는 것)이고, 다른 하나는 사람이 눈으로 보고 손으로 다시 만드는 거예요. 스크래핑은 빠르지만 결과물이 "남의 코드 덩어리"라 나중에 고치기가 어려워요.

AI 웹사이트 클론은 제3의 길을 택해요. 브라우저로 사이트를 실제로 띄운 다음, 각 요소의 getComputedStyle() 값(브라우저가 실제로 화면에 적용한 최종 CSS 수치)을 직접 읽어요. 그러니까 "이 버튼의 진짜 색은 이 코드값, 여백은 정확히 이 픽셀"까지 자로 재듯 떠서 설계도를 만드는 거죠.

이 도구가 강조하는 원칙이 **"추측 금지(No Guessing)"**예요. 빌더 에이전트가 "대충 이쯤이겠지" 하고 짐작하지 않도록, 색상·간격·폰트·마우스 동작·반응형 기준점까지 전부 정확한 수치로 박아서 넘깁니다. 비유하자면 남의 집을 사진만 찍어 베끼는 게 아니라, 벽 두께와 창문 치수, 페인트 색 코드까지 실측해 도면을 만들고 그 도면으로 새로 짓는 셈이에요.

참고로 Firecrawl 같은 도구와는 용도가 달라요. Firecrawl은 "AI가 읽기 좋은 텍스트(마크다운·JSON)로 정리해 추출"하는 데 특화돼 있고, 이 템플릿은 "픽셀 단위로 다시 만들 디자인 설계도 추출 + 코드 재생성"이 목표예요. 경쟁하는 도구가 아니라 쓰임새가 다른 거죠.

진짜 핵심: 여러 AI가 동시에 짓는 병렬 빌드

이 도구가 단순 신기함을 넘어선 이유가 바로 이 병렬 에이전트 빌드예요.

Claude Code의 worktree 격리 기능은 AI 일꾼(서브에이전트)마다 코드 저장소 사본을 따로 줘요. 그래서 여러 에이전트가 같은 파일을 동시에 고치다 충돌하는 문제가 사라져요. 메인 에이전트가 "이 섹션은 A 일꾼, 저 컴포넌트는 B 일꾼" 식으로 일을 쪼개 동시에 맡기고, 끝나면 사람이 결과를 합쳐 검토합니다.

웹사이트는 헤더·히어로(맨 위 큰 영역)·기능 섹션·푸터처럼 자연스럽게 독립된 조각으로 나뉘어서, 이 병렬 방식과 궁합이 아주 좋아요. "한 사람이 차례로 짓던 집"이 "설계도를 떠서 여러 명이 동시에 짓고 마지막에 합치는 집"으로 바뀐 거죠.

실제로 2026년 중반 기준으로 개발자 한 명이 동시에 4~~8개의 작업 공간을 안정적으로 돌린다는 보고가 있고, 한 회사(incident.io) 사례는 4개월 만에 동시 에이전트가 0개에서 개발자당 4~~7개로 늘었다고 해요.

기술 스택은 Next.js 16(웹 프레임워크) + shadcn/ui + Tailwind CSS v4 조합이에요. Claude Code, Codex CLI, Cursor, Gemini CLI 등 12개 이상의 AI 에이전트를 지원하지만, 권장 조합은 Claude Code + Opus 4.7이에요. "아무 에이전트로나 완벽"한 건 아니라는 점은 기억해 두세요.

합법인가요? 정당한 용도와 법적 주의점

가장 민감한 질문이죠. "그럼 남의 사이트를 마음대로 베껴도 되나?" 답은 **"내 것이거나 권한이 있는 사이트일 때만"**이에요.

저장소 README가 직접 정당한 용도와 금지 용도를 못 박아 뒀어요.

정당한 용도: 워드프레스·윅스(Wix)·스퀘어스페이스에 묶인 자사 홈페이지를 모던 Next.js 코드로 옮기는 마이그레이션, 잃어버린 소스코드 복구, 잘 만든 사이트의 구조를 배우는 학습용 분석.
금지 용도: 피싱·사칭, 타인 디자인 도용, 사이트 이용약관(ToS) 위반. 로고·브랜드 자산·원본 카피는 소유자에게 귀속된다고 README가 분명히 적고 있어요.

법적으로 조금 더 들어가면 이래요. 대부분의 나라에서 레이아웃이나 디자인 패턴 자체(예: "왼쪽에 메뉴, 위에 큰 사진")는 저작권 보호 대상이 아니어서 구조 모방은 일반적으로 합법 영역으로 봐요. 하지만 콘텐츠·이미지·로고·원본 글·소스코드를 그대로 복제하는 건 저작권·상표 침해가 될 수 있고, 사이트 약관이 복제를 금지하면 약관 위반이 됩니다.

"AI가 원본 코드를 받지 않고 스펙만 보고 기능이 같은 코드를 새로 만든다"는 방식은 파생 저작물 논쟁을 어느 정도 비켜갈 수 있다는 견해도 있어요. 다만 이건 여전히 회색지대이고 결론이 안 난 쟁점이에요. 정리하면, 이 도구는 **"소유했거나 권한이 있는 사이트 + 원본 콘텐츠는 새로 만들 의도"**일 때 가장 안전하게 쓰여요.

한국 사용자에게 주는 시사점

한국의 사업자나 1인 기업에게 이 도구는 "버튼 하나로 누구 사이트든 베끼는 마법"이 아니라 **"내 사이트를 현대 코드로 갈아타게 해주는 이사 도구"**로 보는 게 정확해요.

이렇게 쓰면 실용적이에요.

자사 사이트 마이그레이션: 워드프레스·윅스에 묶여 답답했던 우리 홈페이지를, 소유자 본인이 직접 모던 코드로 옮길 때 초안 만드는 시간을 크게 줄일 수 있어요.
레퍼런스 학습: 잘 만든 사이트의 레이아웃·디자인 패턴을 "설계도 수준"으로 분석해 배우는 학습 도구로 활용해요(구조·패턴은 모방 가능, 단 콘텐츠·로고·카피는 제외).
레거시 복구: 소스코드를 잃어버렸지만 살아있는 사이트를 다시 코드로 되살리는 복구 작업.

AI 코딩 에이전트가 단순한 코드 자동완성을 넘어, 실제 업무 워크플로우를 통째로 바꾸는 단계에 들어섰다는 걸 잘 보여주는 사례예요. 다만 도구가 강력할수록 "선"을 분명히 지키는 게 중요해요.

마무리

AI 웹사이트 클론 템플릿은 "명령어 한 줄로 웹사이트를 역설계한다"는 매력적인 아이디어를, getComputedStyle 기반 정밀 추출과 병렬 에이전트 빌드라는 탄탄한 기술로 구현한 오픈소스예요. 2026-06-26 기준 스타 2.1만개가 그 관심을 증명하죠.

다만 핵심은 도구 그 자체가 아니라 올바른 용도예요. 내 것이거나 권한 있는 사이트를 모던 코드로 옮기는 마이그레이션 도구로 쓸 때 진짜 가치가 나옵니다. 혹시 자사 홈페이지를 갈아타는 걸 고민 중이라면, 한 번 들여다볼 만한 흐름이에요.

여러분은 AI 에이전트를 업무에 어떻게 활용하고 계신가요? 궁금한 점이 있으면 편하게 남겨주세요.

자주 묻는 질문 (FAQ)

Q: AI 웹사이트 클론 템플릿은 무료인가요?

네, MIT 라이선스라 무료로 쓰고 수정할 수 있어요. 다만 실제로 돌리려면 Claude Code 같은 AI 코딩 에이전트가 필요하고, 그 에이전트의 사용 비용(예: Opus 4.7 모델 사용료)은 별도로 발생해요.

Q: 남의 웹사이트를 이걸로 베껴서 써도 되나요?

Q: 단순 웹 스크래핑 도구와 뭐가 다른가요?

스크래핑은 HTML을 그대로 긁어와 "남의 코드 덩어리"를 남기지만, 이 도구는 getComputedStyle로 실제 적용된 디자인 수치를 정확히 떠서 깨끗한 Next.js 코드로 새로 만들어요. "복사"가 아니라 "설계도 기반 재구성"이라는 점이 가장 큰 차이예요.

Q: 어떤 AI 에이전트로 써야 하나요?

Claude Code, Codex CLI, Cursor, Gemini CLI 등 12개 이상을 지원하지만, 권장 조합은 Claude Code + Opus 4.7이에요. 병렬 worktree 빌드 기능을 가장 잘 살릴 수 있는 조합이라서 그래요.

AI 웹사이트 클론, 명령어 한 줄로? Claude Code 오픈소스 분석