URL 하나만 주면 AI가 웹사이트를 Next.js 앱으로 재현해 주는 자동화 도구
브라우저에서 보고 있는 웹사이트의 주소를 복사해 AI 코딩 에이전트에 붙여넣기만 하면, 해당 사이트의 레이아웃과 인터랙션을 갖춘 로컬 프로젝트가 완성됩니다. 이 도구는 웹사이트의 구조와 디자인을 분석해 Next.js 기반의 코드로 변환하는 템플릿입니다. 기존에 사용하던 플랫폼에서 벗어나거나 소스코드를 잃어버린 경우, 혹은 특정 디자인 기법을 학습하고 싶을 때 유용하게 쓸 수 있습니다.
네 단계로 이루어진 재현 과정
이 도구는 /clone-website 명령어를 통해 네 가지 단계를 거칩니다. 먼저 소스 URL을 로컬 라우트로 매핑하고, 데스크톱과 모바일 페이지를 검사해 실제 에셋과 폰트를 추출합니다. 이후 편집 가능한 컴포넌트와 동작하는 인터랙션을 구현하며, 필요하면 독립적인 섹션을 분리해 작업합니다. 마지막으로 소스와 로컬 페이지를 동일한 크기와 상태로 비교해 보이는 차이를 수정하고 프로덕션 검사를 실행합니다. Framer 기반 페이지나 애니메이션이 많은 사이트에는 반응형 변형, 미디어, 스티키 씬, 스크롤 기반 모션에 대한 집중적인 검사 지침이 제공됩니다.
주요 활용 시나리오
이 도구는 주로 세 가지 상황에서 쓰입니다. 첫째, WordPress나 Webflow 같은 플랫폼에서 만든 사이트를 최신 Next.js 코드베이스로 이주할 때입니다. 둘째, 사이트는 운영 중이지만 저장소가 사라지거나 개발자가 떠난 경우, 현대적인 형식으로 코드를 되찾을 때입니다. 셋째, 프로덕션 사이트가 특정 레이아웃이나 애니메이션을 어떻게 구현하는지 실제 코드를 통해 분해하고 학습할 때입니다. 이러한 작업은 단순한 스크래핑이 아니라, 웹사이트의 동작과 외관을 이해하고 재구성하는 과정에 가깝습니다.
사용 전 확인해야 할 사항
이 프로젝트는 피싱이나 사칭, 법을 위반하는 활동에 사용해서는 안 됩니다. 또한 타인의 로고나 브랜드 에셋, 원본 카피를 자신의 것으로 속여서는 안 되며, 일부 사이트는 스크래핑이나 복제를 명시적으로 금지하므로 서비스 약관을 먼저 점검해야 합니다. 기술적으로는 Node.js 24 이상과 지원되는 AI 코딩 에이전트(Claude Code, Codex CLI, OpenCode, Cursor)가 필요합니다. Claude Code를 사용할 경우 Opus 5.5 모델이 가장 좋은 결과를 내는 것으로 권장됩니다. 라이선스는 MIT이며, 프로젝트 구조는 Next.js 16, React 19, TypeScript strict, shadcn/ui, Tailwind CSS v4를 기반으로 합니다.
