[심층분석] 주소만 던지면 AI가 웹사이트를 통째로 다시 짓는다 — ai-website-cloner-template 뜯어보기

"주소만 주면, 나머진 AI가 알아서"

혹시 멋진 웹사이트를 보고 "와, 이거 어떻게 만들었지? 나도 이런 거 만들어보고 싶다" 했던 적 있으세요? 예전엔 개발자 도구(브라우저에서 F12 누르면 뜨는 그 창이요) 열어서 HTML 긁어오고, CSS 뜯어보고, 이미지 하나하나 저장하고… 한나절은 족히 걸렸거든요.

그런데 이번에 나온 ai-website-cloner-template은 접근 자체가 완전히 달라요. 웹사이트 주소(URL) 하나 던져주고 명령어 한 줄 치면, AI 코딩 에이전트가 알아서 그 사이트를 들여다보고, 디자인을 분석하고, 똑같이 생긴 화면을 Next.js 코드로 새로 짜준다는 겁니다.

여기서 "AI 코딩 에이전트"가 뭐냐면요. 쉽게 말해 채팅창에 말로 시키면 코드를 직접 읽고 쓰고 실행까지 해주는 AI 도구예요. Claude Code, Cursor, Gemini, Codex 같은 것들이죠. 예전 챗봇이 "이렇게 코드 쓰면 돼요" 하고 알려주기만 했다면, 요즘 에이전트는 "제가 직접 파일 만들고 고쳐놓을게요" 하고 실행까지 해버린다는 게 결정적인 차이예요.

이게 정확히 어떻게 돌아가는 거냐면

이 프로젝트의 핵심은 사실 거창한 프로그램이 아니라 "잘 짜인 작업 지시서 묶음"이에요. GitHub에서 Use this template 버튼을 눌러 내 저장소로 복사한 다음, AI 에이전트한테 /clone-website 라고 입력하면 미리 준비된 절차가 쭉 실행되는 구조거든요.

이 /clone-website 같은 걸 슬래시 커맨드(slash command)라고 불러요. 채팅창에서 /로 시작하는 단축 명령이라고 보면 돼요. 카톡에 자주 쓰는 말 등록해두고 꺼내 쓰는 것처럼, 복잡한 지시를 한 단어로 압축해둔 거죠.

명령을 받은 에이전트가 하는 일을 순서대로 풀면 이래요.

1. 사이트 들여다보기(inspect) — 대상 웹사이트를 열어서 구조를 찬찬히 살펴봐요.
2. 디자인 토큰 추출 — 여기서 "디자인 토큰"이 뭐냐면, 색상·글꼴·여백·모서리 둥글기 같은 디자인의 기본 재료들이에요. 요리로 치면 소금·설탕·간장 같은 기본 양념을 먼저 파악하는 거죠.
3. 에셋(asset) 추출 — 이미지, 아이콘, 로고 같은 자료들을 가져와요.
4. 컴포넌트 명세서 작성 — 화면을 "헤더, 메뉴, 카드, 푸터" 같은 조각(컴포넌트)으로 나누고, 각 조각을 어떻게 만들지 설계도를 적어요.
5. 병렬 빌더 투입(dispatch parallel builders) — 그리고 여러 AI 일꾼을 동시에 풀어서 각 조각을 한꺼번에 만들게 해요.

이 마지막 단계가 제일 똑똑한 부분이에요. 오케스트레이션이라고 부르는 건데, 쉽게 말해 여러 AI가 각자 맡은 부분을 동시에 만들도록 지휘하는 거예요. 오케스트라 지휘자가 바이올린·첼로·관악기한테 각자 악보를 나눠주고 동시에 연주시키는 것처럼요. 헤더 만드는 AI, 가격표 만드는 AI, 푸터 만드는 AI가 따로따로 동시에 일하니까 훨씬 빠르겠죠. 한 명이 처음부터 끝까지 혼자 그리는 것보다, 여러 명이 구역을 나눠 동시에 그리는 게 빠른 것과 같은 원리예요.

"다 똑같은 AI 도구 아니야?" 싶지만

저장소 폴더 목록을 보면 재밌는 게 눈에 띄어요. .claude, .cursor, .gemini, .codex, .windsurf, .continue, .aider, .opencode… 거의 모든 주요 AI 코딩 도구의 설정 폴더가 다 들어 있거든요. CLAUDE.md, GEMINI.md, AGENTS.md 같은 안내 파일도요.

이게 무슨 뜻이냐면, "어떤 AI 도구를 쓰든 같은 작업 지시서를 알아듣게" 미리 맞춰뒀다는 거예요. 도구마다 명령을 등록하는 방식이 조금씩 다른데, 그걸 전부 깔아둔 거죠. 제작자는 "Claude Code에 Opus 4.7 모델을 쓸 때 결과가 제일 좋다"고 추천하지만, 손에 익은 다른 도구로도 돌아간다는 얘기예요. 한 가지 도구에 종속시키지 않고 "우리 동네에 있는 어떤 AI든 환영"하는 설계가 인상적이에요.

기존 방식이랑 뭐가 그렇게 다른데요?

웹사이트를 통째로 가져오는 도구는 사실 옛날부터 있었어요. 하나씩 비교해볼게요.

• HTTrack, wget 같은 고전 도구: 사이트의 HTML·CSS·이미지를 그대로 다운로드해요. 문제는 결과물이 "남이 짠 지저분한 코드 덩어리"라는 거예요. 복사기로 서류를 통째로 복사한 거랑 비슷하죠. 글자는 똑같은데, 내가 이어서 고쳐 쓰긴 힘들어요.
• 브라우저 개발자 도구로 복사: 부분부분은 되는데 사이트 전체를 깔끔하게 옮기긴 어려워요.
• v0, Builder.io 같은 AI UI 생성기: 말로 설명하면 화면을 만들어주지만, "이 사이트랑 똑같이"라는 정밀 복제와는 결이 달라요.

이 템플릿의 차별점은 "긁어오는 게 아니라 다시 짓는다"는 점이에요. 원본을 참고해서 사람이 새로 작성한 것 같은 깨끗한 Next.js 코드(요즘 가장 많이 쓰는 웹 프레임워크 중 하나예요)로 재구성하거든요. 복사기로 베끼는 게 아니라, 건축물을 보고 설계도를 다시 그려서 새로 짓는 느낌이에요. 그래서 결과물을 내가 이어서 수정하고 발전시키기 훨씬 좋아요. 변수 이름, 폴더 구조, 컴포넌트 분리가 사람이 작업한 코드처럼 정돈돼 있다는 거죠.

한국 개발자에게는 어떤 의미일까요

실무에서 이걸 어디에 쓸 수 있을지 구체적으로 그려볼게요.

• 빠른 프로토타입: 클라이언트가 "저 회사 사이트 같은 느낌으로 해주세요" 할 때, 참고용 뼈대를 몇 분 만에 뽑아서 논의 출발점으로 삼을 수 있어요.
• 레거시 사이트 현대화: 오래된 사내 페이지를 최신 Next.js 구조로 옮기는 첫 삽을 AI에게 맡기고, 사람은 검수·보강에 집중하는 식이죠.
• 학습용 분해: 잘 만든 사이트가 어떤 컴포넌트로 쪼개지는지 AI가 정리해주니, 구조 공부 교재로도 쓸 만해요.

학습 로드맵을 짧게 제안하자면요. (1) 먼저 AI 코딩 에이전트 하나(Claude Code 추천)에 익숙해지고, (2) Next.js와 컴포넌트 개념을 가볍게 잡은 다음, (3) 이 템플릿으로 내가 직접 만든 간단한 사이트를 복제 실험해보면서 디자인 토큰 추출과 컴포넌트 분해가 실제로 어떻게 일어나는지 관찰해보세요. 남의 사이트가 아니라 내 사이트로 연습하면 저작권 걱정도 없고, 첫 실행은 5분이면 돌려볼 수 있어요.

마무리하며

이 프로젝트가 보여주는 건 단순히 "사이트 복제 도구 하나 나왔네"가 아니에요. AI가 한 번에 하나씩 처리하는 게 아니라, 작업을 잘게 쪼개 여러 일꾼에게 동시에 맡기는 오케스트레이션 방식이 점점 표준이 되어간다는 신호거든요. 앞으로는 "AI한테 코드 한 조각 부탁하기"가 아니라 "AI 팀에게 프로젝트를 통째로 맡기고 나는 감독하기"로 일하는 방식이 바뀔 가능성이 커요.

여러분은 어떻게 생각하세요? 이런 도구가 주니어 개발자의 학습을 도와줄까요, 아니면 "직접 만들어보며 배우는" 소중한 과정을 건너뛰게 만들까요? 그리고 여러분이라면 어떤 사이트를, 어떤 목적으로 복제해보고 싶으세요? 댓글로 같이 얘기 나눠봐요.