회사에서 이미 운영 중인 웹페이지를 보면서 "여기 이 문구만 좀 바꾸면 딱인데…" 싶었던 적 없으세요?
문제는 그 페이지가 내 것이 아니라는 거예요. 수정하려면 페이지를 만든 담당자한테 연락해서, 뭘 어떻게 바꿔달라 설명하고, 반영될 때까지 기다려야 하죠. 급한 홍보용으로 쓰려는데 이 과정이 은근히 번거롭습니다.
저도 똑같은 상황이었는데, Claude Code로 그 페이지를 통째로 "클 론(복제)" 떠버렸어요. 100% 똑같진 않아도, 한 번 내 손에 들어오니 문구든 버튼이든 제 마음대로 고칠 수 있더라고요. 이 글은 그 과정을 그대로 담았습니다. 웹페이지 클론이 처음이신 분도 따라올 수 있게요.
실제로 이렇게 떴어요. 왼쪽이 원본, 오른쪽이 제가 복제한 페이지예요. (기업명은 가렸습니다)
거의 똑같죠? 원본을 이만큼 닮게 떠온 다음, 홍보에 불필요한 신청 버튼 같은 요소만 제 마음대로 걷어냈어요. 이런 편집을 담당자 없이 제가 바로 한 거예요.
시작은 "홍보 페이지 있어요?"라는 질문이었어요
운영하던 스터디에 참여자를 모집해야 하는 상황이 생겼어요. 함께 일하는 분이 "참가자한테 보여줄 홍보 페이지 같은 거 있냐"고 물으셨죠.
가진 건 이미 올라가 있는 스터디 소개 페이지 하나였어요. 그런데 이걸 홍보용으로 쓰기엔 애매했습니다.
- 상세 일정, 신청 폼 같은 게 다 붙어 있어서 홍보용으론 정보가 많았고요
- 무엇보다 그 페이지는 제가 직접 고칠 수 있는 게 아니었어요. 문구 하나 바꾸려 해도 담당자 손을 거쳐야 했죠
"그럼 이 페이지를 복제해서, 홍보용으로 내가 다듬으면 되지 않을까?" — 여기서 클론 작업이 시작됐어요.
"그냥 같이 편집하면 되지 않아?" — 그게 안 되는 상황이 있어요
여기서 짚고 넘어갈 게 있어요. 사실 웹페이지를 여러 명이 함께 다루는 정석은 따로 있어요. 코드를 깃헙(GitHub)에 올려두고, 여러 사람이 각자 고친 걸 합치는 방식이죠. 하나의 페이지를 협업해서 개발·수정하는 데는 이걸로 충분해요. 또는 원본을 직접 고치고 싶다면, 수정 권한이 담긴 API를 발급받아 연결해서 고치는 방법도 있고요.
문제는, 이 방법들 모두 "권한"이 전제라는 거예요. 깃헙에 올리려면 원본 소스에 접근할 수 있어야 하고, 수정용 API도 담당자가 발급해줘야 받을 수 있죠. 결국 어느 쪽이든 매번 담당자에게 요청 → 대기라는 병목이 생겨요. 이번엔 그 페이지가 제 소유가 아니었고, 급한 홍보용이라 이 병목이 특히 번거로웠어요.
그래서 혼자 빠르게 클론 떠서 내 손에 넣는 게 이 상황엔 제일 실용적이었어요. "협업이 안 되니 어쩔 수 없이"가 아니라, "이 상황엔 이게 제일 빠르니까."
클론을 뜨는 데도 길이 3가지나 있었어요 (AI가 골라줬죠)
처음엔 제가 예전에 봐둔 오픈소스 템플릿을 참고하라고 던졌어요.
https://(우리 스터디 소개 페이지 주소)
위 페이지 클론 뜨고 싶은데
"https://github.com/JCodesMore/ai-website-cloner-template.git"
이거 참고해서 클론 떠줄래? 거기서 내가 편집 작업하고 싶어서.그런데 Claude가 그 템플릿을 열어보더니, 곧이곧대로 따라 하지 않고 방식을 바꿔서 작업하더라고요. 나중에 제가 궁금해서 물어봤어요.
근데 왜 깃헙 템플릿대로 안하고 이번방식으로 바꿈?여기서 알게 된 게, 웹페이지를 복제하는 데는 크게 세 갈래 길이 있다는 거예요.
복제 방식 3갈래
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
① 깃헙 클론 템플릿 (무거운 방식)
전용 도구 + 브라우저 자동화로 픽셀까지 똑같이
→ 원본을 100% 그대로, 규모 큰 사이트를 복제할 때
② 단일 HTML로 재구성 (가벼운 방식) ★ 이번에 채택
페이지를 파일 하나로 새로 짜기
→ 내가 계속 손봐야 하고, 빠르게 배포하고 싶을 때
③ 브라우저 자동화로 실시간 복제
브라우저를 띄워 화면·구조를 그대로 떠오기
→ 로그인 뒤 화면 등 '살아있는' 상태가 필요할 때제 목적은 "홍보용으로 쓰고, 내가 계속 자유롭게 편집한다"였어요. 원본 페이지도 그렇게 복잡하지 않았고요. 그래서 Claude는 픽셀 100% 동일보다 편집 자유도가 중요하다고 판단해서 ②단일 HTML 방식을 골랐던 거예요.
이게 핵심 포인트예요. "클론 떠줘"라고만 해도, AI가 목적을 보고 알아서 적당한 방식을 잡아준다는 것. 무조건 무거운 도구를 쓰는 게 정답이 아니었어요.
원본이랑 나란히 비교하면서 다듬었어요
복제본이 나온 뒤엔 원본 화면을 캡처해서 나란히 비교하며 다듬었어요. 특히 신경 쓴 건 원본에 있던 카드 넘김(캐러셀) 부분이었죠.
[ 원본 화면 캡처 첨부] 이 부분 원본인데 클론에도 최대한 유사하게 구현 가능?응 카드 누르면 url 타지게도 가눙?카드 모양을 원본과 비슷하게 맞추고, 카드를 누르면 게시판으로 넘어가도록 링크까지 걸었어요. "이 부분 좀 더 원본처럼"이라고 말로 요청하면 바로바로 반영되니까, 디자인 감각이 없어도 눈으로 보고 고칠 수 있었어요.
필요 없는 건 통째로 걷어냈어요
여기서부터가 "내 것이 된" 진짜 이점이에요. 원본이었으면 담당자한테 부탁했어야 할 것들을, 그냥 한마디로 처리했어요.
야 클론 html에서 일정 부분 빼자. 아예 다 드러내.그리고 신청하기 다 빼. 신청 여기서 안받을거라서.- 홍보용엔 과했던 상세 일정 섹션 제거
- 이 페이지에선 신청을 받지 않으니 신청 버튼·폼 전부 제거
담당자 연락, 요청, 대기 없이 말 한마디에 몇 초 만에 끝났어요.
배포하다 만난 함정: "왜 로그인하라고 나오지?"
다 만들고 인터넷에 올렸어요(Vercel이라는 무료 배포 서비스를 썼어요). 처음 올린 주소는 잘 열렸는데, 주소 이름이 'clone'이라 좀 거슬리더라고요. 그래서 주소 이름만 바꿨는데 — 갑자기 로그인 화면이 뜨는 거예요.
아니 여기 로그인 하라고 나오는데? 바로 안열리고
'clone 주소'는 잘 열리잖아. url 이름만 바꾸는데? 왜?이게 처음엔 정말 당황스러웠어요. 알고 보니 배포 서비스의 "접근 보호" 기능 때문이었어요. 주소를 새로 붙이면 그 주소엔 기본 보호가 걸려서, 관계자만 로그인해서 보게 막혀버린 거죠. 홍보 페이지는 아무나 열려야 하는데 정반대가 된 거예요.
해결은 간단했어요. 보호 설정을 끈 상태로 다시 배포하니 새 주소도 아무나 바로 열 수 있게 됐어요. (혹시 같은 증상 만나시면 "배포 보호(Deployment Protection)"를 의심하세요.)
결과
Before(원본 페이지) → After(내 클론 페이지)
━━━━━━━━━━━━━ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━
문구·구성 수정 담당자 요청→대기 → 내가 말 한마디로 즉시
홍보용 맞춤 불가능(내 것 아님) → 몇 초 만에 완료
배포 — → 무료 웹주소 발급, 바로 공유
전체 소요 시간 — → 약 1시간 (복제→편집→배포)수치보다 체감이 컸어요. "남의 페이지라 못 건드린다"에서 "내 페이지라 뭐든 바꾼다"로 바뀐 게 제일 달라진 점이에요. 급하게 홍보용이 필요할 때, 담당자 일정에 안 매이고 내가 직접 만들 수 있다는 자신감이 생겼어요.
AI 활용 팁!
이럴 때 써먹기 좋아요.
- 회사 페이지 중 "이것만 좀 바꿨으면" 싶은데 수정 권한이 없을 때
- 기존 페이지를 베이스로 이벤트용·홍보용 변형을 빠르게 만들고 싶을 때
- 디자인은 마음에 드는데 내용만 우리 것으로 갈아끼우고 싶을 때
주의할 점도 솔직히요.
- 클론은 100% 똑같지 않아요. 복잡한 페이지일수록 세부가 조금씩 달라질 수 있어요. "적당히 비슷하게, 내용은 내가 고친다"는 목적일 때 잘 맞아요
- 남의 저작물을 그대로 베껴 공개하는 건 조심하세요. 내부 자료를 내가 편집해 쓰는 용도가 안전해요
- 로그인해야 보이는 페이지는 복제가 어려워요
바로 쓸 수 있는 프롬프트
[복제하고 싶은 페이지 주소]
위 페이지를 클론 떠줘. 나는 이걸 [홍보용]으로 계속 편집할 거라, 픽셀 100% 동일보다 내가 편집하기 쉬운 형태가 우선이야. 방식이 여러 개면(무 거운 템플릿 / 가벼운 단일 파일 등) 내 목적에 맞는 걸로 네가 판단해서 골라주고, 왜 골랐는지도 알려줘.※ [ ] 안은 본인 상황에 맞게 바꾸세요.
만들고 나서 특정 부분을 원본과 맞추고 싶으면, 원본 화면을 캡처해서 붙여넣고 "이 부분 최대한 비슷하게"라고 하면 잘 반영돼요.
