요즘 개발자 커뮤니티에서는 AI 코딩 에이전트에게 웹사이트 주소나 화면 캡처를 주고 비슷한 구조의 사이트를 코드로 다시 만들게 하는 방식이 자주 이야기됩니다. 이 글에서는 이런 '웹사이트 복제' 작업이 어떤 원리로 이루어지는지, 사람들이 어디에 활용하는지, 처음 해 보는 사람이 따라 하기 좋은 순서는 무엇인지 정리합니다. 저작권이나 서비스 약관처럼 꼭 짚어야 할 주의점도 함께 다룹니다.
웹사이트 '복제'란 정확히 무엇인가
여기서 말하는 복제는 브라우저의 '다른 이름으로 저장'처럼 파일을 그대로 내려받는 것과는 조금 다릅니다. AI 에이전트가 화면 구성, 색상, 글꼴, 여백, 버튼 배치 같은 시각적 요소를 분석한 뒤 새로운 코드로 비슷한 결과물을 다시 짜는 작업에 가깝습니다.
과거에는 사이트 하나를 따라 만들려면 개발자 도구를 열어 CSS를 하나하나 확인하고, 레이아웃을 직접 손으로 옮겨야 했습니다. 지금은 클로드 코드(Claude Code) 같은 터미널 기반 코딩 에이전트가 이 과정을 상당 부분 대신합니다. 에이전트는 대략 다음 흐름으로 일합니다.
- 대상 페이지의 화면을 캡처하거나 HTML 구조를 읽습니다.
- 헤더, 본문, 카드 목록, 푸터처럼 화면을 구역별로 나눕니다.
- 원하는 기술(순수 HTML/CSS, React, Next.js, Tailwind 등)로 각 구역을 코드로 작성합니다.
- 결과물을 다시 캡처해 원본과 비교하고, 차이가 나는 부분을 고칩니다.
마지막 단계, 즉 만들고 비교하고 고치는 반복이 핵심입니다. 한 번에 완벽하게 나오는 경우는 드물고, 몇 차례 다듬으면서 원본에 가까워집니다. 최근에는 이런 반복 과정을 자동화해 주는 오픈소스 프로젝트와 설정 모음도 여럿 공유되고 있습니다.
사람들이 실제로 쓰는 활용사례
공개적으로 공유되는 사례를 보면 '남의 사이트를 베끼는 것'보다 훨씬 다양한 목적으로 쓰이고 있습니다. 대표적인 유형을 정리하면 다음과 같습니다.
오래된 내 사이트를 최신 기술로 옮기기
가장 실용적인 사례입니다. 오래전에 만든 홈페이지나 빌더로 만든 사이트를 운영하다 보면, 디자인은 그대로 두고 코드만 현대적으로 바꾸고 싶을 때가 있습니다. 원본 화면을 기준으로 React나 정적 사이트 생성기 기반의 새 코드를 만들게 하면, 처음부터 다시 설계하는 것보다 훨씬 빠르게 이전 작업을 시작할 수 있습니다.
디자인 공부와 코드 학습
잘 만든 사이트의 레이아웃이 어떻게 구현되는지 궁금할 때, 에이전트에게 비슷한 화면을 만들게 한 뒤 생성된 코드를 읽어 보는 방식입니다. 그리드 배치, 반응형 처리, 애니메이션 효과 같은 기법을 실제 코드로 확인할 수 있어 학습 자료로 유용합니다. 결과물은 공개하지 않고 개인 연습용으로만 두는 것이 원칙입니다.
기획 단계의 빠른 시안 만들기
클라이언트나 팀원과 회의할 때 "이런 느낌의 랜딩 페이지"를 말로만 설명하면 오해가 생기기 쉽습니다. 참고 사이트의 구조를 바탕으로 빠르게 작동하는 시안을 만든 뒤, 문구와 색상, 이미지를 자기 브랜드에 맞게 바꾸면 논의가 훨씬 구체적으로 진행됩니다.
소스 코드가 사라진 사이트 복구
외주로 만든 사이트의 원본 코드를 받지 못했거나, 관리하던 저장소를 잃어버린 경우에도 쓰입니다. 화면만 남아 있다면 그것을 바탕으로 수정 가능한 코드를 다시 확보할 수 있습니다.
디자인 시스템 추출
화면 전체를 복제하기보다 색상 팔레트, 글꼴 크기 단계, 버튼과 입력창 스타일만 뽑아 정리하게 하는 사례도 있습니다. 자기 서비스의 여러 페이지에서 흩어진 스타일을 하나의 규칙으로 통일하고 싶을 때 도움이 됩니다.
함께 보면 좋은 영상
글로 흐름을 이해했다면 실제 화면으로 과정을 보는 것이 훨씬 빠릅니다. 아래 영상은 '문외인 Layperson' 채널의 콘텐츠로, 제목에 따르면 웹사이트를 통째로 복제하는 오픈소스 도구를 클로드 코드와 함께 다루며 사람들의 실제 활용사례와 간단한 사용법을 정리한 내용입니다.
영상에서 소개하는 구체적인 도구 이름이나 설치 방법은 시점에 따라 바뀔 수 있으니, 따라 할 때는 해당 오픈소스 프로젝트의 공식 저장소 안내문을 함께 확인하는 것을 권합니다.
처음 해 보는 사람을 위한 간단 사용법
특정 도구에 얽매이지 않고, AI 코딩 에이전트로 사이트를 복제할 때 공통적으로 거치는 순서를 정리했습니다.
1단계: 작업 환경 준비
- 코딩 에이전트를 사용할 수 있는 환경을 준비합니다. 클로드 코드처럼 터미널에서 동작하는 도구라면 Node.js 등 안내된 실행 환경이 필요합니다.
- 빈 프로젝트 폴더를 하나 만들고 그 안에서 작업을 시작합니다. 기존 프로젝트와 섞이면 결과를 비교하기 어렵습니다.
- 화면 캡처와 비교를 자동화하려면 Playwright 같은 브라우저 자동화 도구를 함께 쓰는 경우가 많습니다.
2단계: 목표를 구체적으로 정하기
에이전트에게 "이 사이트 똑같이 만들어 줘"라고만 하면 결과가 들쭉날쭉합니다. 다음 항목을 미리 정해 두면 품질이 크게 올라갑니다.
- 사용할 기술: 예를 들어 Next.js와 Tailwind CSS
- 범위: 메인 페이지만인지, 하위 페이지까지인지
- 반응형 여부: 모바일 화면까지 맞출지
- 제외할 것: 로그인, 결제, 실제 데이터 연동 등은 빼고 화면만
3단계: 구역별로 나눠서 요청하기
페이지 전체를 한 번에 맡기기보다 헤더, 히어로 영역, 기능 소개, 푸터처럼 나눠서 요청하는 편이 안정적입니다. 구역마다 결과를 확인하고 다음으로 넘어가면 어디서 어긋났는지 찾기 쉽습니다.
4단계: 비교하고 다듬기
결과물을 브라우저로 열어 원본과 나란히 놓고 봅니다. 여백이 넓다, 글자가 굵다, 모바일에서 메뉴가 깨진다처럼 눈에 보이는 차이를 구체적으로 지적하면 에이전트가 정확하게 고칩니다. 캡처 비교를 자동화해 두었다면 이 과정을 에이전트가 스스로 반복하게 할 수도 있습니다.
5단계: 내 것으로 바꾸기
구조가 완성되면 원본의 로고, 문구, 사진, 아이콘을 모두 자신의 것으로 교체합니다. 이 단계를 건너뛰면 다음에 설명할 법적 문제로 이어질 수 있습니다.
반드시 알아야 할 주의점
기술적으로 쉽게 만들 수 있다고 해서 마음대로 써도 되는 것은 아닙니다.
- 저작권: 사이트의 문구, 사진, 일러스트, 로고는 대부분 저작권이나 상표권의 보호를 받습니다. 구조를 참고하는 것과 콘텐츠를 그대로 가져다 쓰는 것은 전혀 다른 문제입니다.
- 서비스 약관: 많은 사이트가 자동화된 수집이나 복제를 약관으로 제한합니다. 대상 사이트의 이용약관과 robots.txt 정책을 확인하는 습관을 들이세요.
- 피싱 오용 금지: 은행, 쇼핑몰, 로그인 페이지를 똑같이 만들어 공개하는 행위는 사기 범죄에 악용될 수 있으며, 의도와 관계없이 심각한 문제가 될 수 있습니다.
- 개인정보: 원본 페이지에 실린 이름, 연락처, 후기 같은 정보가 복제 결과물에 섞여 들어가지 않았는지 확인해야 합니다.
상업적으로 활용할 계획이라면 어디까지가 허용되는 참고인지 판단이 애매한 경우가 많습니다. 이럴 때는 지식재산권 분야의 전문가에게 상담을 받아 보는 것이 안전합니다. 이 글의 내용은 일반적인 정보이며 법률 자문을 대신하지 않습니다.
잘 쓰기 위한 마음가짐
웹사이트 복제 도구는 결국 좋은 출발점을 빠르게 얻는 수단입니다. 내 사이트를 옮기거나, 공부하거나, 시안을 만드는 용도로 쓰면 작업 시간이 크게 줄어듭니다. 반면 결과물을 그대로 쓰면 원본과 다를 바 없는 사이트가 되고, 법적 위험도 떠안게 됩니다.
처음이라면 자신이 운영하는 페이지나 공개된 연습용 템플릿으로 시작해 보세요. 구역별로 나눠 요청하고, 차이를 구체적으로 지적하고, 마지막에 콘텐츠를 자기 것으로 바꾸는 흐름만 익혀도 이 도구를 충분히 실용적으로 쓸 수 있습니다.
