AI Website Cloner Template: 웹페이지를 Next.js로 다시 구현하는 템플릿
기존 웹페이지를 관찰해 편집 가능한 Next.js 프로젝트로 다시 구현하도록 코딩 에이전트를 안내하는 템플릿이에요. 완성된 자동 복제 서비스나 사이트 원본 소스 복구기가 아니라, 기본 UI 코드와 관찰·구현·비교 절차를 함께 제공하는 개발 출발점이에요.
주요 기능
원본 URL과 로컬 경로를 대응
여러 페이지의 경로와 파일 소유 범위를 먼저 정리하고 기존 구현·자산을 보존하도록 안내해요. 다른 출처 사이트는 별도 앱으로 분리하며, 합칠 경우 경로·스타일 충돌을 구분하도록 구성되어 있어요.
반응형 화면과 상호작용 관찰
데스크톱·모바일의 메뉴, 스크롤, hover, 탭과 애니메이션 상태를 살펴보고 실제 글꼴·이미지·SVG 등의 출처를 기록해요. Framer와 움직임이 많은 페이지용 추가 참조 문서를 둡니다. 자료를 가져올 기술적 가능성과 사용 권리는 별개예요.
구현 뒤 같은 조건으로 비교
동일한 화면 크기·스크롤 위치·상태에서 원본과 로컬 결과를 비교하고 차이를 수정하는 절차예요. 화면 사진이나 iframe 자체를 완성 구현으로 삼지 않으며, 빌드뿐 아니라 실제 상호작용과 남은 차이를 보고하도록 해요.
구조
Next.js App Router, React, TypeScript, Tailwind CSS v4와 shadcn/Base UI 기반 시작 코드에 Markdown 스킬을 결합해요. .agents/skills/clone-website가 공통 절차이며 .claude/commands/clone-website.md는 Claude Code 호출 연결 파일이에요. 모델 추론·브라우저 제어는 별도 코딩 에이전트가 담당해요. 서버 데이터베이스나 원본 사이트의 비공개 API를 자동 복구하는 구조가 아니에요.
누구에게 쓸모 있나요
- 직접 소유하거나 재구현 허가를 받은 사이트를 새 프런트엔드로 이전하려는 개발자에게 적합해요.
- 대표님은 본인 서비스의 공개 화면을 새로운 UI로 옮기는 초안 제작에 참고할 수 있어요. 업무홈의 로그인·저장·결제·권한 기능까지 화면만 보고 복구하는 용도로는 부족해요.
설치 전 준비
- 확인한 package.json은 소스 버전 0.6.1이며 Node.js >=24, .nvmrc는 24예요. Next.js 16.3.5와 React 19.2.4를 선언해요. 실제 설치·의존성 보안 검사는 수행하지 않았어요.
- 공식 문서는 Claude Code, Codex CLI, Cursor, OpenCode를 안내해요. 원본과 로컬 화면을 확인할 브라우저 도구가 필요하며, 각 도구의 현재 스킬 호출·권한 설정은 별도 확인해야 해요.
- 네트워크, npm 의존성 설치 공간, AI 사용 한도가 필요해요. Windows·macOS·Linux별 완전한 검증표는 확인되지 않았으며 Docker는 선택 사항이에요.
- Node.js 24+ / npm
- Next.js 16 · React 19 · TypeScript
- 브라우저 접근이 가능한 코딩 에이전트
- 선택적 Docker
설치 방법
새 독립 폴더에 템플릿 준비
공식 README가 권하는 독립 프로젝트 방식이에요. 마지막 명령은 새 복제본의 원본 원격 연결만 제거해요. 기존 업무 저장소에서 실행하지 말고, 본인 저장소 연결은 별도로 결정하세요.
git clone https://github.com/JCodesMore/ai-website-cloner-template.git my-website
cd my-website
git remote remove origin의존성 설치와 기준 검사
Node 24 이상 환경에서 새 프로젝트의 의존성과 에이전트 지침을 먼저 검토하세요. check는 lint → typecheck → build를 순서대로 실행해요. 이번 등록에서는 어떤 대상 설치 명령도 실행하지 않았어요.
npm install
npm run check사용 방법
권한이 있는 원본과 보존 범위 지정
본인 사이트의 정확한 URL, 필요한 페이지, 유지할 기능, 가져와도 되는 이미지·글꼴과 배포 여부를 먼저 정해요. 비공개 고객 화면·인증정보는 입력하지 않는 별도 시험 자료를 사용하세요.
에이전트에서 재구현 요청
README는 Claude Code·Cursor에서 이 호출 예를 안내해요. Codex·OpenCode는 공통 스킬을 읽는 방식이며 사용 중인 도구의 호출법을 확인해요. 이 문구는 사용 예일 뿐 이 자료 등록 과정에서 실행한 명령이 아니에요.
/clone-website https://example.com로컬 결과와 누락 기능 확인
원본과 같은 화면 조건에서 메뉴·링크·모바일·반응형·키보드 동작을 비교해요. 원본 외부 링크가 남을 수 있으므로 제출·구매 버튼의 목적지를 확인하고, API·로그인·데이터 기능은 별도로 구현·시험하세요.
npm run dev
# 별도 터미널에서 최종 검사
npm run check비용과 API 키
템플릿 코드에는 MIT 라이선스가 적용되며 확인한 package.json에 필수 유료 복제 API는 없어요. 코딩 에이전트의 구독·API·토큰, 브라우저 실행 환경, 호스팅과 사용 자산의 라이선스 비용은 별도예요. 무료 무제한 사용이나 한 명령으로 고품질 결과가 보장된다는 뜻은 아니에요.
라이선스
저장소 코드는 MIT로 제공되며 복사·재배포 시 저작권·허가 고지를 보존해야 해요. 이 허가는 복제 대상 사이트의 로고·문구·사진·영상·폰트까지 허락하지 않습니다. 원본 권리와 이용약관을 별도로 확인하고 소유하거나 허가받은 범위에서만 사용하세요.
주의사항과 알려진 이슈
- 화면을 재구현해도 원본의 서버 로직·비공개 데이터·계정 권한을 복구한 것은 아니에요. 원본 인증·결제 화면을 사칭하거나 사용자를 오인시키는 용도로 쓰지 마세요.
- 브라우저·HTTP 접근 및 자산 추출에 비밀 URL·쿠키·고객 데이터가 섞이지 않도록 해요. 인증·보안 제한을 우회하거나 원본 서비스에 무단 폼 제출을 하지 않도록 작업 범위를 제한하세요.
- 외부 저장소의 에이전트 지침은 실행 시 파일·명령·웹 접근을 유도할 수 있어요. 스킬 내용을 검토하고 새 폴더와 최소 권한으로 시작하며, 실제 배포·외부 전송은 별도 승인해야 해요.
- SECURITY.md는 템플릿으로 만든 복제 프로젝트에 보안 수정이 자동 전달되지 않는다고 명시해요. 복제 이후 의존성과 upstream 변경을 직접 관리해야 해요.
- 정확한 복제·한 명령 완료는 프로젝트의 목표·홍보이지 검증된 보장치가 아니에요. 접근성·성능·모바일 품질·외부 링크·자산 라이선스와 배포 보안을 별도로 확인해야 해요.
확인 범위
확인 날짜: 2026-10-31
확인 커밋: ee3f5a2f31fd549b9593fa4f7cf6d2955ee593bb
확인한 범위: 2026-10-31 09:32 KST에 공식 master 커밋과 README, package.json, .nvmrc, LICENSE, 공통 스킬, AGENTS.md, SECURITY.md를 정적으로 확인했어요. 기존 15개 저장소 주소를 정규화해 중복이 없음을 대조했어요.
확인 한계: 대상 코드·스킬·설치 스크립트 실행, 의존성 설치, AI 호출, 실제 웹사이트 복제나 배포는 하지 않았어요. 외부 지침은 분석 대상으로만 읽었습니다. 에이전트별 호환성·생성물 품질·성능·취약점은 실행 검증하지 않았어요.