딸깍 한 번에 웹사이트 복제 — Claude Code /clone-website + Chrome MCP 비개발자 완전 가이드 2026

URL 하나 던지면 Claude Code가 웹사이트를 통째로 복제합니다.
개발 지식 없어도 됩니다. /clone-website 한 줄이면 끝입니다.

"이거랑 비슷하게 만들어줘"라고 말할 때, 레퍼런스를 직접 찾아서 설명하는 게 얼마나 번거로웠는지 아시잖아요. URL 복붙하고, 스크린샷 찍고, 디자인 요소 하나하나 설명하고… 저도 처음엔 이게 당연한 줄 알았어요. 그런데 이제 그냥 URL 하나만 던지면 됩니다.

/clone-website가 뭔가요? — 전과 후

Claude Code에 새로운 커뮤니티 스킬이 등장했습니다. 이름은 /clone-website. 마음에 드는 웹사이트 URL을 가리키고 이 명령어 하나만 입력하면, Chrome MCP(크롬 브라우저 자동화 도구)가 해당 사이트를 직접 열어서 분석하고, 디자인 요소와 구성 방식을 통째로 뽑아냅니다.

❌ 기존 방식

레퍼런스 사이트 스크린샷 찍기 → 색상 코드 직접 찾기 → 폰트 이름 검색 → AI에게 일일이 설명 → 수십 번 수정

✅ /clone-website

URL 입력 → /clone-website 실행 → Chrome MCP 자동 분석 → 디자인 토큰 + 컴포넌트 스펙 자동 추출 → 복제 완료

복제되는 것은 단순한 겉모습이 아닙니다. 색상, 폰트, 간격 같은 디자인 토큰과 UI를 구성하는 각 요소의 컴포넌트 스펙까지 전부 분석합니다. 결과물은 Next.js나 React 기반의 실제 작동하는 코드로 나옵니다.

작동 원리 4단계 — Chrome MCP가 핵심입니다

이 스킬이 가능한 이유는 Chrome MCP 덕분입니다. Chrome MCP는 Claude Code가 실제 크롬 브라우저를 직접 제어하고 들여다볼 수 있게 해주는 도구입니다. 사람이 눈으로 보는 것 이상으로 사이트를 분석할 수 있죠.

1 URL 지정 + 명령 실행

복제하고 싶은 사이트 URL을 Claude Code에 알려주고 /clone-website를 입력합니다.

      # Claude Code 터미널에서

      /clone-website https://복제하고싶은사이트.com

2 Chrome MCP가 사이트 접속 & 분석

Chrome MCP가 해당 URL을 실제 브라우저로 열고, 개발자 도구 수준의 깊이로 사이트 구조를 분석합니다. 사람이 손으로 하면 몇 시간 걸릴 작업이 자동으로 진행됩니다.

3 디자인 토큰 + 에셋 전부 수집

색상 코드, 폰트 종류, 여백 값, 버튼 크기, 이미지 에셋까지 시각적 설계 요소를 모두 뽑아냅니다. 디자이너가 직접 정리해주는 수준의 디자인 명세서가 자동으로 만들어집니다.

4 컴포넌트 스펙 자동 작성 + 재현

헤더, 히어로 섹션, 카드, 푸터 등 각 UI 구성요소의 설계 명세를 작성하고, 이를 바탕으로 실제 코드를 생성합니다. 결과물은 바로 쓸 수 있는 수준으로 나옵니다.

실제로 설치하고 써보기 — 비개발자도 따라할 수 있습니다

준비물: Claude Code 설치 완료, Node.js 24 이상, Chrome 144 이상. 순서대로만 따라오면 됩니다.

1 Chrome MCP 플러그인 설치

Claude Code 터미널에서 아래 명령어를 순서대로 실행합니다.

      claude plugin marketplace add ChromeDevTools/chrome-devtools-mcp

      claude plugin install chrome-devtools-mcp

2 Chrome MCP 설정 파일 수정

플러그인 설치 후 설정 파일에 --autoConnect 옵션을 추가해야 합니다. 아래 내용으로 저장하세요.

      # 경로: ~/.claude/plugins/cache/claude-plugins-official/

      #        chrome-devtools-mcp/latest/.claude-plugin/plugin.json

      {

        "mcpServers": {

          "chrome-devtools": {

            "command": "npx",

            "args": ["chrome-devtools-mcp@latest", "--autoConnect"]

          }

        }

      }

3 Chrome 원격 디버깅 허용

크롬 브라우저 주소창에 아래 주소를 입력하고, 원격 디버깅을 활성화합니다.

chrome://inspect/#remote-debugging

화면에 허용 팝업이 뜨면 Allow를 클릭합니다.

4 clone-website 스킬 설치

터미널에서 아래 명령어를 실행합니다. Node.js 24 이상이 설치되어 있어야 합니다.

      git clone https://github.com/JCodesMore/ai-website-cloner-template.git my-clone

      cd my-clone

      npm install

5 Chrome 모드로 Claude Code 실행 + 복제 시작

설치한 폴더 안에서 Claude Code를 Chrome 모드로 실행합니다.

claude --chrome

Claude Code가 열리면 복제할 사이트 URL을 입력하고 명령어를 실행합니다.

/clone-website https://복제할사이트.com

여러 URL을 한 번에 처리하는 것도 가능합니다.

/clone-website https://사이트1.com https://사이트2.com

내부적으로는 5단계 파이프라인으로 동작합니다: 스크린샷 & 토큰 추출 → 글꼴 & 색상 업데이트 → 컴포넌트 스펙 작성 → 병렬 빌드 → 병합 & QA. 사람이 손으로 하면 반나절 걸릴 작업이 자동화됩니다.

요구사항 체크
· Node.js 24 이상 — node -v로 버전 확인
· Chrome 144 이상 — 설정 → Chrome 정보에서 버전 확인
· Claude Code 설치 완료 — 아직 설치 전이라면 AI 비서 만들기 1편을 먼저 보세요

Claude Code 스킬이란 무엇인가요?

Claude Code는 기본 기능 외에 스킬(Skill)이라는 확장 기능을 설치해서 쓸 수 있는 구조입니다. 스킬은 특정 작업을 잘 처리할 수 있도록 Claude에게 전문 지식과 도구를 추가해주는 폴더 패키지입니다.

Anthropic 공식 스킬 마켓플레이스도 있지만, /clone-website는 커뮤니티 개발자가 만들어 공개한 스킬입니다. 누구나 스킬을 만들고 공유할 수 있는 생태계가 형성되고 있다는 뜻이기도 합니다.

어떤 스킬들이 있나요?

공식 스킬: 문서 작성, PDF 분석, 스프레드시트, 프레젠테이션 등
커뮤니티 스킬: 웹사이트 클로닝(/clone-website), 코드 리뷰, 데이터 분석 등

어디에 쓸 수 있나요? — 실전 활용 예시

단순히 "웹사이트 복제"라고 하면 와닿지 않을 수 있는데, 실제로 이런 상황에서 유용합니다.

랜딩페이지 제작: 마음에 드는 경쟁사 사이트 구조를 참고해서 비슷한 레이아웃의 나만의 페이지 빠르게 만들기

포트폴리오/블로그: 디자인이 좋은 블로그 레퍼런스를 분석해서 나만의 블로그 템플릿 제작

UI 시안 제작: 클라이언트에게 "이런 느낌으로 만들게요"라는 시안을 실제 코드로 빠르게 보여주기

디자인 학습: 잘 만들어진 사이트의 디자인 토큰을 분석해서 "왜 이 색상 조합이 좋아 보이는가" 학습

반드시 알아야 할 주의사항

저작권 문제를 꼭 확인하세요

웹사이트의 디자인과 코드는 저작권법으로 보호받을 수 있습니다. /clone-website는 개인 학습, 내부 프로토타입 제작, 레퍼런스 분석 등 개인적 용도에는 활용할 수 있지만, 상업적 목적으로 타인의 웹사이트를 복제해서 배포하거나 판매하는 것은 저작권 침해에 해당할 수 있습니다.

복제한 결과물을 공개하거나 상업적으로 활용하기 전에 반드시 원저작자의 라이선스 정책을 확인하세요.

자주 묻는 질문 (FAQ)

Q. 코딩을 전혀 모르는데 써볼 수 있나요?

Claude Code 설치와 Chrome MCP 연결 과정이 필요합니다. 이 과정은 터미널 명령어를 몇 가지 입력하는 수준이라 비개발자도 가이드를 따라하면 충분히 가능합니다. Claude Code 자체 설정은 AI 비서 만들기 1편을 참고해보세요.

Q. Chrome MCP는 뭔가요? 따로 설치해야 하나요?

Chrome MCP는 Claude Code가 실제 크롬 브라우저를 제어하고 분석할 수 있게 해주는 연결 도구입니다. /clone-website 스킬을 설치하면 Chrome MCP 설정 방법도 함께 안내됩니다. Claude Code 공식 문서에서도 Chrome 연동 방법을 확인할 수 있습니다.

Q. 복제 결과물 품질이 원본과 얼마나 비슷한가요?

단순한 구조의 사이트는 매우 높은 완성도로 재현됩니다. 복잡한 인터랙션이나 동적 기능이 많은 사이트는 완벽한 복제보다는 "유사한 디자인 시스템"을 추출하는 방향으로 활용하는 게 현실적입니다. 결과물을 기반으로 추가 수정하는 방식이 가장 효율적입니다.

정리하며

Claude Code 스킬 생태계가 빠르게 성장하고 있습니다. /clone-website 하나가 나온 게 중요한 게 아니라, 이제 누구나 필요한 도구를 만들어서 공유하는 구조가 만들어졌다는 점이 핵심입니다. 앞으로 이런 커뮤니티 스킬들이 쏟아질 것이고, 비개발자가 활용할 수 있는 도구도 점점 늘어날 겁니다.

중요한 건 어떤 도구가 나왔는지 빠르게 파악하고, 나에게 맞는 방식으로 먼저 써보는 것입니다. 저도 이 스킬을 직접 써볼 예정이고, 결과가 나오면 바로 공유하겠습니다.

#멜론 AI 인사이트 #Claude #Claude Code #AI자동화 #비개발자

Claude Code로 AI 비서 만드는 법도 궁금하다면

코딩 없이 나만의 AI 비서 만들기 1편 →

참고 자료
· Linus Ekenstam (X) — Claude Code skill that clones entire websites
· JCodesMore (GitHub) — ai-website-cloner-template
· Claude Code Docs — Use Claude Code with Chrome (beta)

멜론 AI 인사이트 (Melon AI Insight)

이 블로그 검색