Layperson의 쇼츠 **「말로만 시켜 사이트 첫 페이지 복제했습니다, 코드 안 고치고 만든 건축 사무소 화면」**은 AI 코딩 에이전트가 기존 웹사이트를 직접 탐색하고, 화면 구조와 자산을 분석한 뒤 비슷한 프론트엔드를 다시 구현하는 **Website Cloner Skill** 사례를 보여줍니다. > 영상 속 사례는 해당 건축 사무소에 연락해 **허락을 받은 뒤 진행한 복제 테스트**입니다. 실제 사이트를 재현할 때는 저작권, 상표, 이미지·폰트 라이선스, 이용약관을 반드시 확인하고 본인이 소유했거나 명시적으로 허가받은 대상에서 사용하는 것이 안전합니다. ## 핵심은 단순 스크린샷 복사가 아니다 영상에서 사용하는 방식은 화면을 이미지처럼 캡처해 붙이는 것이 아닙니다. AI 코딩 에이전트가 실제 사이트를 직접 탐색하면서: - 페이지를 끝까지 스크롤 - 이미지·폰트·기타 자산 확인 - 레이아웃 구조 분석 - 컴포넌트 재구성 - 애니메이션과 스크롤 효과 확인 - 원본과 복제본 비교 까지 수행합니다. 즉: **사이트 관찰 → 자산 수집 → 구조 분석 → 코드 재구성 → 시각 검증 → 수정** 이라는 Agent Workflow입니다. ## AI Website Cloner Template 영상 설명에는 오픈소스 프로젝트 **AI Website Cloner Template**이 소개됩니다. 이 프로젝트에는 웹사이트 복제를 위한 Skill 지침이 포함되어 있어 Claude Code나 다른 코딩 에이전트가 정해진 절차에 따라 작업할 수 있도록 합니다. 핵심은 단순히: > 이 사이트처럼 만들어줘 라고 한 번 요청하는 것이 아니라, 에이전트에게 **사이트 분석과 검증 절차 자체를 Skill로 제공한다는 점**입니다. ## Skill이 중요한 이유 AI 코딩 에이전트의 결과는 프롬프트 한 번으로도 만들 수 있지만, 복잡한 작업에서는 결과 편차가 큽니다. Skill을 사용하면 작업 절차를 미리 고정할 수 있습니다. 예를 들어: 1. 대상 페이지 전체 확인 2. 주요 Section 분석 3. 자산 다운로드 4. Layout 구조 추출 5. Component 구현 6. Responsive 확인 7. 원본과 시각 비교 8. 차이점 수정 같은 순서를 반복적으로 적용할 수 있습니다. 이렇게 하면 Website Cloning이 단순 Prompt Engineering이 아니라 **재사용 가능한 Agent Workflow**가 됩니다. ## 브라우저를 직접 보는 Agent 웹사이트 복제에서 중요한 것은 HTML 코드만 보는 것이 아닙니다. 실제 화면에는: - CSS Animation - Scroll Interaction - Hover - Sticky Element - Responsive Layout - Lazy Loading - JavaScript Motion 같은 동작이 포함됩니다. 그래서 에이전트가 브라우저를 직접 열어 실제 화면을 보고 비교하는 과정이 중요합니다. 이 구조는 Playwright 같은 Browser Automation 도구와 결합할 때 더 강력해집니다. ## 원본과 같은 스크롤 위치로 비교 영상에서는 원본 페이지와 복제 페이지를 같은 위치까지 스크롤해 비교합니다. 이 방식은 사람이 눈으로 대충 확인하는 것보다 훨씬 체계적입니다. 예를 들어 다음 요소를 비교할 수 있습니다. - Section 높이 - 여백 - Typography - 이미지 크기 - Alignment - Scroll Position - Animation Timing - Responsive Breakpoint AI Agent가 이런 차이를 반복적으로 확인하고 수정하면 결과 품질을 점진적으로 높일 수 있습니다. ## 컴포넌트를 다시 만든다는 점이 중요하다 Website Cloner의 목표는 기존 사이트의 코드를 그대로 복사하는 것이 아니라, 화면과 동작을 분석한 뒤 **새로운 코드 구조로 재구현하는 것**입니다. 예를 들어 원본이 어떤 프레임워크를 사용했는지와 관계없이: - React - Vue - Next.js - HTML/CSS/JS 등 현재 프로젝트 환경에 맞게 다시 만들 수 있습니다. 이 방식은 기존 디자인을 참고해 빠르게 Prototype을 만들거나, 자사 사이트를 새 기술 Stack으로 이전할 때 특히 유용합니다. ## 말로 한 번 더 수정 영상에서는 첫 복제 결과 이후에도 자연어로 추가 수정 지시를 내립니다. 즉 Workflow는: **자동 복제 → 시각 비교 → 자연어 수정 → 재검증** 으로 이어집니다. 이 과정에서 개발자가 직접 CSS 값을 하나씩 조정하지 않아도 Agent가 반복 수정 작업을 수행할 수 있습니다. ## 1시간 36분 동안 130개 파일 생성 영상 설명에 따르면 이번 사례에서는 추가 수정까지 포함해 약 **1시간 36분 동안 130개 파일**이 생성되었습니다. 이는 Website Cloning이 단순 HTML 한 장 복사 수준이 아니라, 이미지·컴포넌트·Style·Script 등 실제 프로젝트 구조 전체를 재구성하는 작업이라는 점을 보여줍니다. ## REA와는 무엇이 다른가? 기존 REA(Reverse Engineering Anything)가 실행 파일이나 소프트웨어 내부 동작을 분석해 기능 구조를 재구성하는 방향이라면, Website Cloner는 **웹 브라우저에서 관찰 가능한 UI와 동작을 중심으로 재구현**합니다. 쉽게 비교하면: **REA** → 프로그램의 기능과 내부 동작 분석 **Website Cloner** → 웹페이지의 UI·Layout·Asset·Interaction 분석 입니다. ## 실제 활용처 이 Workflow는 단순 복제보다 다음 용도로 활용하는 것이 적합합니다. - 본인 회사 사이트 리뉴얼 - 기존 서비스의 Frontend Migration - 허가받은 디자인 Prototype 제작 - Landing Page 재구축 - 오래된 HTML 사이트를 React/Vue로 전환 - 디자인 시스템 추출 - Responsive Layout 분석 특히 기존 사이트가 오래되었지만 디자인은 유지하고 싶은 경우 AI Agent를 이용한 Migration 도구로 활용할 수 있습니다. ## 주의할 점 공개 웹사이트라고 해서 자유롭게 복제할 수 있는 것은 아닙니다. 특히 다음 요소는 별도 권리가 있을 수 있습니다. - Logo - Brand Identity - Photo - Illustration - Font - Copywriting - UI Asset - Video - Proprietary JavaScript 또 원본 사이트의 인증, 결제, 사용자 데이터 같은 Backend 기능을 무단으로 재현하거나 접근해서는 안 됩니다. 따라서 가장 안전한 활용 범위는: **본인이 소유한 사이트 / 오픈소스 / 명시적으로 허가받은 사이트** 입니다. ## AI 코딩 Agent가 바꾸는 Frontend 개발 이 사례에서 중요한 점은 “사이트를 복제했다”는 결과 자체보다 개발 방식의 변화입니다. 기존에는: **개발자 → 화면 분석 → HTML/CSS 작성 → 브라우저 확인 → 수정** 이었다면, 이제는: **개발자 → 목표 설명 → Agent가 분석·구현·비교 → 사람이 승인** 구조로 이동하고 있습니다. 즉 개발자는 직접 모든 픽셀을 구현하는 역할에서, **Agent에게 목표와 품질 기준을 정의하고 결과를 검토하는 역할**로 이동하고 있습니다. ## 한 줄 정리 AI Website Cloner Skill의 핵심은 단순히 웹사이트를 베끼는 것이 아니라, **AI 코딩 에이전트가 브라우저를 직접 관찰하고, 자산과 구조를 분석하고, 컴포넌트를 재구성한 뒤 원본과 시각적으로 비교하며 반복 수정하는 자동화된 Frontend 재구현 Workflow**를 만드는 것입니다.