Claude Code로 웹사이트를 복제·분석하는 AI 클로너 템플릿과 프록시 설정법

핵심

• AI Website Cloner Template은 Claude Code에서 슬래시 명령어 한 줄로 웹사이트를 Next.js와 Tailwind CSS 코드로 재작성하는 템플릿이다.
• 에이전트는 맵(Map), 관찰(Observe), 빌드(Build), 비교(Compare)의 4단계로 작동하며 Playwright로 데스크톱과 모바일 화면을 직접 탐색한다.
• 기존 리버스 엔지니어링과 달리 원본 코드를 그대로 긁어오는 것이 아니라 화면 렌더링 결과와 인터랙션을 관찰해 코드를 새로 작성한다.
• 실습에서는 Apache 2.0 라이선스이고 robots.txt로 크롤러를 허용한 Supabase 홈페이지를 대상으로 복제를 시연했다.
• 선행 조건으로 Node.js 24 버전 이상과 Claude Code 브라우저 제어 옵션 활성화가 필요하며 실습에는 Opus 3.5 모델을 사용했다.
• 에이전트 탐색 과정에서 발생하는 429 에러나 IP 차단을 방지하기 위해 Webshare 무료 프록시와 전용 MCP 서버를 연동해 활용할 수 있다.
• 저장소에서는 사칭·피싱, 타인 디자인 자산 무단 도용, 서비스 약관 위반을 금지하며, 플랫폼 이전·코드 유실 복구·UI 학습 목적으로 사용을 권장한다.

챕터

1. 0:00AI Website Cloner Template 개요 (새 탭에서 열림)
2. 2:24에이전트의 4단계 복제 프로세스 (새 탭에서 열림)
3. 3:24리버스 엔지니어링과의 차이와 윤리적 주의사항 (새 탭에서 열림)
4. 4:08Supabase 사이트 선정 이유와 라이선스 확인 (새 탭에서 열림)
5. 4:54템플릿 설치와 Claude Code 설정 (새 탭에서 열림)
6. 6:58Supabase 홈페이지 클론 결과 비교 (새 탭에서 열림)
7. 7:41에이전트의 내부 실행 로그 분석 (새 탭에서 열림)
8. 9:00봇 탐지 차단과 Webshare 프록시 MCP 연동 (새 탭에서 열림)
9. 12:59깃허브가 권장하는 세 가지 정당한 활용처 (새 탭에서 열림)