platinumG들어가며
AI로 웹사이트를 만드는 것은 이제 누구나 '딸깍'으로 할 수 있는 일이 되어버렸다. 하지만 AI 결과물은 항상 평균치에 수렴하기 마련이고 왠지 모르게 불만족스럽다. 이걸 AI Slop이라고 하고 글, 이미지, 웹디자인, 영상 어떤 결과물이든 이제는 AI Slop을 없애려는 니즈가 커지고 있다. 오늘 소개할 템플릿은 웹사이트의 AI Slop을 해소하는 새로운 접근법이다. 사람이 만든 잘 만들어진 웹사이트를 복제하여 내용과 디자인을 내 브랜드에 맞게 수정한다. 이 글은 이 템플릿을 직접 테스트한 과정을 기록한 글이다.
README에 소개된 대로 명령 한 줄로 supabase.com 홈페이지를 거의 똑같이 다시 만들었다. 코드는 한 줄도 직접 쓰지 않았다. 코딩을 몰라도 같은 결과를 얻을 수 있다는 뜻이다. 필요한 건 명령어 몇 줄을 붙여 넣고, AI가 만든 화면을 원본과 비교해 보는 것뿐이다. 데스크톱 화면에서는 페이지 높이와 섹션 위치가 원본과 1px도 다르지 않았다.
처음 만드는 사이트는 대부분 어색하다. 간격, 글꼴 크기, 모바일 화면이 다 조금씩 어긋난다. 그렇다면 잘 만든 사이트를 먼저 그대로 따라 만들고, 그다음 내 것으로 바꾸면 어떨까. 이 질문을 확인하려고 웹사이트 복제 템플릿을 써 봤다.
준비물
필요한 것은 템플릿 하나와 Claude Code다. 템플릿은 GitHub의 ai-website-cloner-template이다. Next.js(웹사이트를 만드는 도구)와 Tailwind(클래스 이름으로 스타일을 붙이는 도구)가 미리 세팅돼 있다.
| 항목 | 내 환경 |
|---|---|
| 운영체제 | Omarchy (Arch Linux) |
| Node.js | 26 (템플릿은 24 이상 필요) |
| AI 도구 | Claude Code (Claude Opus 5.5) |
| 브라우저 | Chromium (화면 없이 돌리는 모드로 사용) |
템플릿 안에 /clone-website라는 명령이 들어 있다. 따로 설치할 필요는 없다. 템플릿 폴더에서 Claude Code를 켜면 바로 쓸 수 있다.
실제 과정: 명령 한 줄에서 완성까지
내가 친 건 /clone-website https://supabase.com 한 줄뿐이었다. 나머지는 AI가 아래 순서로 진행했다.
/clone-website https://<복제하고 싶은 사이트 url>
하나씩 풀어 보면 이렇다.
- 원본 조사: 화면 없는 브라우저로 데스크톱(1440px)과 모바일(390px) 화면을 찍었다. 메뉴에 마우스를 올리고 탭을 눌러 상태별 화면도 남겼다. 이미지·영상 59개 이상을 내려받았다.
- 공통 기반: 원본도 Tailwind를 써서, 클래스 이름은 그대로 살리고 색 값만 실제 화면에서 재서 옮겼다. 글꼴과 버튼 모양도 이때 정했다.
- 동시 제작: 섹션 12개를 하위 에이전트(AI가 띄운 보조 AI) 4개에 나눠 동시에 만들었다. 각자 5분 안팎으로 끝났다.
- 비교와 수정: 합친 뒤 원본과 같은 화면 크기에서 나란히 찍어 비교했다. 차이가 보이면 고치고 다시 찍었다.
1~3까지 claude code가 알아서 작업하고, 4번의 비교와 수정 과정만 직접 필요에 맞게 진행하면 된다.
결과: 원본과 얼마나 같은가
데스크톱 화면에서는 섹션 11개의 위치와 높이가 원본과 전부 같았다. 같은 화면 크기, 같은 스크롤 위치에서 재서 비교했다.
| 확인한 것 | 원본 | 복제본 |
|---|---|---|
| 데스크톱(1440px) 페이지 높이 | 7691px | 7691px |
| 모바일(390px) 페이지 높이 | 9876px | 9887px |
| 가로로 삐져나오는 부분 | 없음 | 없음 |
| 깨진 이미지, 실행 오류 | – | 없음 |
왼쪽이 원본, 오른쪽이 복제본이다. 데스크톱 첫 화면(1440px)을 같은 위치에서 찍었다.
모바일(390px)에서는 제품 카드가 그림 없는 단순한 카드로 바뀐다. 이 변화도 그대로 따라갔다.
직접 눌러 보고 원본처럼 동작하는 것도 확인했다.
- 상단 메뉴에 마우스를 올리면 드롭다운 3종이 열린다.
- 모바일 메뉴는 아코디언으로 펼쳐지고, 뒤 화면은 스크롤되지 않는다.
- 대시보드 탭을 누르면 영상이 바뀌어 재생된다.
- 프레임워크 탭을 누르면 코드와 문서 링크가 바뀐다.
- 고객 사례 카드를 클릭하면 펼쳐진다.
아래는 고객 사례에서 세 번째 카드(Phoenix Energy)를 클릭한 뒤의 모습이다. 누른 카드가 펼쳐지고 나머지는 좁은 막대로 접힌다.
몇 가지의 애니메이션은 복제되지 않았다. Realtime 카드의 회색 커서는 움직이지 않는다. Edge Functions 카드의 명령어는 deploy에 멈춰 있다. 라이트 모드는 아직 없다. "픽셀 퍼펙트"라고 부르려면 이것들을 더 고쳐야 하지만, 우리의 목적은 픽셀 퍼펙트가 아니라 잘 만들어진 웹사이트의 구조와 골격을 재활용 하는 것이니 이 정도는 무시해도 될 것 같다.
막힌 곳과 배운 것
순조롭기만 한 건 아니었다. 막힌 곳에서 배운 게 더 많았다.
| 막힌 곳 | 어떻게 풀었나 | 배운 것 |
|---|---|---|
원본 CSS를 curl로 받으려다 권한에서 막힘 |
브라우저가 이미 받아 둔 파일을 꺼내 옴 | 길이 막히면 같은 목적의 다른 길이 있다 |
| 커뮤니티 트윗이 바뀌는 간격을 3~4초로 짐작 | Supabase 공개 코드를 보니 10초였다 | 눈으로 짐작한 값보다 실제 설정값을 읽는다 |
| 마지막 CTA 영역이 19px 짧음 | 원본 제목 규칙(줄높이 1.2 + 아래 여백 16px)을 빠뜨린 것 | 숫자로 재면 원인이 나온다 (3px + 16px = 19px) |
| 모바일 메뉴 버튼이 40px로 큼 | 원본과 같은 32px로 맞춤 | 모바일 메뉴는 열어 봐야 보인다 |
| 원본은 라이트, 복제본은 다크로 떠서 비교 불가 | 원본 푸터의 테마 버튼으로 다크 전환 | 복제 전에 라이트·다크 중 무엇을 만들지 정한다 |
마지막 항목이 가장 헷갈렸다. 지금 사이트들은 컴퓨터 설정을 따라 테마가 바뀐다. 조사에 쓴 브라우저와 내가 쓰는 브라우저의 설정이 달랐던 것이다.
내 프로젝트에 써먹기
원리는 간단하다. 새 폴더에 템플릿을 받고, 복제하고, 내 것으로 바꾼다. 레이아웃·간격·반응형·메뉴 같은 뼈대가 검증된 상태로 손에 들어오는 게 장점이다.
- 준비 (5분): 템플릿을 새 폴더로 받고 원작자 저장소와 연결을 끊는다.
- 복제 (30분~1시간): 그 폴더에서 Claude Code를 켜고
/clone-website 주소를 입력한다. - 확인 (10분): 원본과 같은 테마, 같은 창 너비로 나란히 띄워 보고 커밋한다.
- 내 것으로 바꾸기: 글, 색, 로고, 섹션, 링크를 한 부분씩 바꾼다.
- 공개 (선택, 10분): Vercel 같은 호스팅에 올린다. 올리기 전에
npm install next@16.4.3으로 Next.js부터 올린다. 템플릿이 고정한 16.3.5에는 남이 내 서버에서 명령을 실행할 수 있는 심각한 보안 구멍이 있다.
1단계 명령은 템플릿 원본 github repo를 내 프로젝트 폴더로 clone 하는 것이다.
git clone https://github.com/JCodesMore/ai-website-cloner-template.git ~/Projects/my-site
cd ~/Projects/my-site
git remote remove origin
npm install
내 브랜드 컨텐츠를 적용하기
마지막 단계인 4단계는 복제한 사이트의 골격과 내용을 내 브랜드에 맞도록 수정하는 것이다. 이 단계에서는 한 번에 하나씩 부탁하는 게 결과가 좋았다. 예를 들면 이렇게 말한다.
- "히어로 제목을 '동네 꽃집 예약을 1분 만에'로 바꿔줘"
- "초록 포인트 색을 #E4572E로 바꿔줘"
- "커뮤니티 트윗 섹션 빼고, 그 자리에 요금표 넣어줘"
공개 전에 꼭 할 것: 원본의 글, 로고, 사진, 영상, 회사 이름은 그 회사의 것이다. 전부 내 것으로 바꿔야 저작권·상표 문제가 생기지 않는다. 남은 게 있는지 AI에게 "원본에서 가져온 자산이나 문구가 남아 있는지 찾아줘"라고 물어보면 된다.
분위기(색·글꼴)만 빌리고 구조는 새로 만들고 싶다면, 복제보다 디자인 토큰만 뽑는 도구가 더 맞다.
이럴 때는 안 된다
- 봇을 막는 사이트: AI가 브라우저로 화면을 여러 번 눌러 보는 방식이라, 자동 접속을 막는 사이트에서는 빈 화면만 받거나 막힌 사례가 보고돼 있다. 이번에 고른 supabase.com은 AI 봇 접속을 허용한 사이트라 막히지 않았다.
- 움직임이 많은 사이트: 스크립트로 움직이는 효과는 빠지기 쉽다. 이번에도 커서 애니메이션과 명령어가 바뀌는 효과는 복제되지 않았다.
- 사이트 전체가 필요할 때: 명령에 적은 주소의 페이지 한 장만 만든다. 서브페이지가 필요하면 주소를 하나씩 더 적어야 하고, 페이지가 늘수록 시간과 사용량도 는다.
- 쓰면 안 되는 용도: 템플릿 README가 세 가지를 금지한다. 진짜 사이트인 척하는 피싱·사칭, 남의 디자인을 내 것처럼 쓰기, 복제를 금지한 사이트의 이용약관 어기기다. 템플릿은 약관을 대신 확인해 주지 않는다. 고르기 전에 그 사이트의 약관을 직접 본다.
핵심 3줄 요약
/clone-website 주소한 줄로, 코딩을 몰라도 잘 만든 사이트의 뼈대를 거의 그대로 얻을 수 있다.- "똑같다"는 눈이 아니라 숫자로 확인한다. 같은 테마, 같은 화면 크기에서 비교해야 한다.
- 복제는 출발점이다. 공개하기 전에 글·로고·이미지를 전부 내 것으로 바꾼다.
따라 해 보고 싶다면, 마음에 드는 사이트 하나를 골라 위 1단계 명령부터 시작해 보자. 처음에는 페이지 하나짜리 작은 사이트가 비교하기 편하다.