| 한눈에 보기 | |
|---|---|
| 저장소 | JCodesMore/ai-website-cloner-template |
| 개발 | JCodesMore (개인) |
| GitHub 스타 | 37,948 (오늘 +156) |
| GitHub 트렌딩 | 일간 TypeScript 6위 |
| 포크 | 5,571 |
| 주 언어 | TypeScript |
| 라이선스 | MIT |
| 공개일 | 2026-03-13 |
| 최신 릴리스 | v0.6.1 (2026-10-05) |
AI 웹사이트 클로너(AI Website Cloner Template)는 기존 웹사이트를 깔끔한 Next.js 코드베이스로 다시 만들어 주는 템플릿이다. 개인 개발자 JCodesMore가 만든 JCodesMore/ai-website-cloner-template은 코딩 에이전트에 URL을 건네면 화면 구성과 인터랙션을 관찰해 편집 가능한 컴포넌트로 재현한다. 이 저장소는 지난 3월 생성된 뒤 꾸준히 스타를 모았고, 30일 기준 일간 TypeScript 트렌딩 6위에 올랐다.
무엇을 하나: 코딩 에이전트용 웹사이트 복제 스킬
핵심은 '/clone-website https://example.com' 한 줄이다. 저장소가 제공하는 스킬을 에이전트가 읽고 작업을 진행한다. README가 내세우는 기능은 다음과 같다.
- 데스크톱·모바일 화면을 모두 살피고 실제 에셋과 폰트를 추출
- 호버, 스크롤 등 대체 상태까지 확인해 동작하는 인터랙션 구현
- 소스 사이트별로 컴포넌트와 에셋을 분리해 저장
- 프레이머(Framer) 페이지와 애니메이션이 많은 사이트를 위한 별도 점검 지침
작업이 끝나면 라우트 매핑, 실행 방법, 비교 스크린샷, 남은 차이점을 결과물로 남긴다고 README는 설명한다.
작동 방식·구조: 지도, 관찰, 구축, 비교 4단계
스킬은 네 단계로 움직인다. 먼저 원본 URL을 로컬 라우트에 대응시키고 기존 작업을 보존한다(Map). 다음으로 화면을 검사하고 자산과 폰트를 뽑으며 다양한 상태를 실행해 본다(Observe). 이어서 편집 가능한 컴포넌트와 동작하는 인터랙션을 구현하며, 독립적인 섹션은 다른 에이전트에 맡길 수 있다(Build). 마지막에는 원본과 로컬 페이지를 같은 크기·상태에서 비교해 차이를 고치고 프로덕션 빌드 검사를 돌린다(Compare). 추출에는 가능한 한 직접 HTTP나 에셋 도구를 쓰고, 브라우저는 외형과 동작 비교에 쓴다는 설명이다.
기술 스택은 Next.js 16(App Router, React 19), TypeScript 엄격 모드, shadcn/ui와 Tailwind CSS v4다. 에이전트 지침은 AGENTS.md 한 곳에 두고, 스킬은 .agents/skills/clone-website/에 하나만 유지한다. 코덱스, 커서, 오픈코드는 이를 직접 읽고, 클로드 코드는 .claude/commands의 얇은 연결 파일로 같은 스킬을 쓴다.
써보면: 설치와 실행
Node.js 24 이상과 지원 에이전트가 필요하다. README는 에이전트에게 설정을 맡기는 방식을 권한다.
Set up https://github.com/JCodesMore/ai-website-cloner-template
as a standalone project in a new folder on my computer.
Install dependencies and run npm run check.
준비가 끝나면 브라우저 접근을 켠 에이전트에서 복제를 실행한다.
/clone-website https://example.com
이후 npm run dev로 개발 서버를 띄우고, npm run check로 린트·타입 검사·빌드를 한 번에 돌릴 수 있다. 도커 구성도 제공한다.
최근 업데이트: v0.6.1
지난 10월 5일 나온 v0.6.1은 복제 지침을 더 일반적인 원칙으로 다듬어 원본과의 차이를 더 잘 잡도록 했다고 릴리스 노트는 밝혔다.
- 관찰 하나를 규칙의 표본으로 보고, 선언된 값을 읽으며 뷰포트 너비(디자인보다 넓은 경우 포함)·높이·입력·상태를 바꿔 확인
- 원본이 실제로 불러오는 파일을 사용
- 부드러운 스크롤 같은 페이지 전체 동작과 공유 컴포넌트를 관찰된 모든 상태에서 구성
- 스크롤과 포인터 동작은 실제 입력으로 판단
누구에게 유용한가
README는 세 가지 용도를 든다. 워드프레스·웹플로·스퀘어스페이스 사이트를 최신 Next.js 코드베이스로 옮기는 플랫폼 이전, 서비스는 살아 있지만 저장소가 사라진 경우의 코드 복구, 실제 사이트의 레이아웃과 반응형 구현을 뜯어보는 학습이다. 프런트엔드 에이전시나 소규모 팀이 레거시 사이트를 재구축할 때 초안을 빠르게 얻는 용도로 쓸 수 있다.
의의와 한계
라이선스는 MIT로 상업적 활용에 제약이 적다. 공개 7개월가량이고 v0.6.x까지 나온 만큼 아직 1.0 이전 단계다. 결과물 품질은 에이전트 성능에 좌우되며, README는 클로드 코드와 오퍼스 5.5(Opus 5.5) 조합을 가장 좋은 결과로 권장한다. 브라우저 접근이 가능한 에이전트 환경도 필요하다.
법적·윤리적 주의도 분명하다. README는 피싱과 사칭, 남의 디자인을 자기 것처럼 내세우는 행위, 이용약관 위반을 의도하지 않은 용도로 명시한다. 로고·브랜드 자산·원문 카피는 원 소유자의 것이므로, 자신이 소유한 사이트나 허용된 범위에서 써야 한다.
