웹개발은 끝났다? 웹사이트 통째로 복사하는 미친 오픈소스.. ㄷㄷ

🖼️ 인포그래픽

🖼️ 4컷 인포그래픽

💡 한 줄 결론

웹사이트를 주소 하나로 재현하는 오픈소스는 웹개발의 종말을 입증하기보다, 화면과 상호작용을 관찰해 수정 가능한 코드로 만드는 작업의 문턱을 낮춘다.

📌 핵심 요점

1. AI 웹사이트 클로너 템플릿은 Next.js 프로젝트에 Claude Code용 복제 명령을 묶은 도구다. 주소를 입력하면 사이트를 관찰하고 수정 가능한 코드로 재구현한다.
2. 작업은 페이지 구조 파악, 데스크톱·모바일 화면과 상호작용 관찰, Next.js·Tailwind 컴포넌트 작성, 원본과 캡처 비교 및 수정의 네 단계로 진행된다.
3. Supabase 시연에서는 메뉴, 문구, 아이콘, 타이핑 효과와 마우스 반응까지 높은 시각적 유사도를 보였다고 소개한다. 다만 공개 코드와 봇 접근 허용이라는 대상 사이트의 조건을 함께 고려해야 한다.
4. 원본 소스 코드를 그대로 가져오는 방식과 화면을 보고 새로 구현하는 방식은 구분된다. 그래도 로고·브랜드 자산·콘텐츠의 권리와 사이트 이용약관은 별도로 확인해야 한다.
5. 주요 활용처는 본인 사이트의 플랫폼 이전, 원본 소스를 잃은 사이트의 재구현, 좋은 UI 구조 학습이다. 후반부에는 브라우저 접근 제한 문제와 Webshare 프록시·MCP 연결을 소개한다.

🧩 배경과 문제 정의

영상은 기존 앱을 분석해 다시 만드는 리버스 엔지니어링에 대한 관심에서 출발해, 웹사이트 주소만으로 유사한 화면을 재구현하는 오픈소스를 소개한다. 문제의식은 마음에 드는 사이트를 스크린샷으로만 따라 만드는 과정을 어떻게 더 체계적으로 만들 수 있느냐는 것이다.

소개하는 AI 웹사이트 클로너 템플릿은 Claude Code가 브라우저로 페이지와 상호작용을 관찰하고, 리소스를 수집한 뒤 Next.js·Tailwind 코드로 재구성하는 작업 흐름을 제공한다. 영상은 Supabase를 대상으로 설치와 결과를 보여주고, 권리 문제와 접근 제한을 설명한 뒤 플랫폼 이전·소스 재구현·디자인 학습이라는 활용처로 마무리한다.

🕒 시간순 섹션별 상세정리

1. 주소 하나로 웹사이트를 재현하는 도구 소개

• 발표자는 기존 앱을 분석하고 원하는 기능을 더했던 경험을 소개한 뒤, 비슷한 작업을 웹사이트에도 적용하는 오픈소스를 제시한다. [00:32]
• 주소를 Claude Code 명령에 넣으면 화면 구성, 이미지, 폰트와 버튼 동작을 살펴보고 수정 가능한 코드로 다시 만든다고 보여준다. GitHub 스타는 영상 기준 3만 7천 개 이상이라고 보여준다. [00:54]
• 3월 확산 시작, 4월 말 스타 1만 3천 개, 6월 TypeScript 트렌딩 1위, 7월 중순 2만 8천 개 이상이라는 반응을 전해진다. 이어 Supabase 시연과 저작권 주의를 예고한다. [01:53]

2. 템플릿 구성과 네 단계 작업 방식

• 정식 명칭은 AI 웹사이트 클로너 템플릿이며, Next.js 프로젝트 틀에 Claude Code가 사용할 복제 명령이 포함된 형태라고 보여준다. 명령에는 대상 주소가 필요하다. [02:20]
• 첫 단계에서는 페이지 구성과 구현 위치를 정하고, 두 번째 단계에서는 데스크톱·모바일 화면을 스크롤하며 메뉴·탭·호버 반응을 관찰한다. 이미지·폰트·영상 파일도 함께 내려받는다고 보여준다. [02:56]
• 세 번째 단계에서는 Next.js·Tailwind 컴포넌트를 작성하고, 마지막 단계에서는 원본과 결과물을 같은 크기로 캡처해 차이를 수정하는 작업을 반복한다. [03:16]

3. 화면 재구현의 의미와 Supabase 선정 이유

• 원본 코드를 그대로 가져오기보다 화면에 보이는 것을 관찰해 새 코드로 구현하는 방식이라고 보여준다. 스크린샷을 참고해 사이트를 만드는 과정을 체계화한 도구로 보여준다. [04:00]
• 실험 대상으로 데이터베이스와 로그인 기능을 붙일 때 쓰는 Supabase를 선택한다. 발표자는 홈페이지 코드가 GitHub에 공개돼 있으며 Apache 라이선스로 제공된다고 보여준다. [04:32]
• robots.txt에서도 AI 봇 접근을 허용한다고 소개하며, 공개 코드와 접근 조건이 이번 실험에 적합하다고 판단한 이유를 드러낸다. [04:53]

4. 설치와 실행, 복제 시 지켜야 할 경계

• 저장소의 Quick Start 내용을 Claude Code에 붙여 넣어 설치한다. 시연에서는 특정 모델 설정을 선택하며, Node.js 24 이상과 에이전트의 브라우저 사용 설정이 필요하다고 안내한다. [05:36]
• Supabase 주소를 복제 명령에 입력하고 에이전트가 작업 순서를 제시하는 모습을 보여준다. 설치 후 세션을 다시 시작하는 절차도 언급한다. [05:57]
• 작업을 기다리며 피싱·사칭, 타인 디자인을 자신의 것으로 사용하는 행위, 이용약관 위반을 경고한다. Supabase와 고객사의 로고 권리도 별개라며 결과물은 공개하지 않고 로컬 학습용으로만 보겠다고 드러낸다. [06:56]

5. 재현 결과와 디자인 학습 활용

• 원본과 생성 사이트를 나란히 비교하며 상단 메뉴, 큰 문구와 중간 디자인이 매우 유사하다고 평가한다. 공개된 사이트라는 조건이 작업을 수월하게 했을 가능성도 언급한다. [07:28]
• 아이콘, 타이핑 효과와 마우스 반응을 보여주고, 작업 기록에서 브라우저 조작·스크린샷 촬영·사이트 리소스 다운로드가 이뤄졌음을 확인한다. [07:57]
• 높은 복제 성능의 악용 가능성을 경고하며, 비전공자가 마음에 드는 UI의 구조를 공부한 뒤 자신의 사이트에 적용하고 발전시키는 활용을 제안한다. [08:39]

6. 사이트 접근 제한과 Webshare 연결

• Supabase는 AI 봇 접근을 열어 둔 특수한 사례라고 보여준다. 다른 사이트는 에이전트의 클릭을 감지해 접근을 막을 수 있으므로 같은 결과가 보장되지 않는다고 드러낸다. [09:33]
• 프록시 서비스 Webshare를 소개하며 가입 시 무료 프록시 10개를 사용할 수 있다고 안내한다. 대시보드에서 프록시의 국가와 도시를 확인하는 모습을 보여준다. [10:14]
• MCP 서버 연결 방법을 소개하고, Claude Code용 명령 또는 Claude의 커스텀 커넥터에 서버 주소를 추가해 로그인·연결하는 흐름을 시연한다. [10:48]

7. 프록시 사용 시연과 유료 상품 소개

• 연결 후 사용 가능한 프록시의 국가와 도시 목록을 요청한다. 발표자는 IP 차단과 429 오류를 언급하며 프록시를 작업을 이어가는 수단으로 보여준다. [11:35]
• Supabase를 다시 복제하면서 미국 프록시 사용을 요청하고, 에이전트가 로스앤젤레스 프록시를 선택해 작업하는 모습을 보여준다. [12:00]
• 가정용 인터넷 주소를 사용하는 레지덴셜 프록시를 소개하고, 영상 기준 1GB당 3.5달러라는 가격과 월별 과금, 할인 코드를 안내한다. 로테이팅·스태틱 상품도 언급한다. [12:57]

8. 플랫폼 이전, 소스 재구현과 UI 학습

• 첫 활용처는 본인 사이트의 플랫폼 이전이다. WordPress나 Webflow에서 외부로 옮기기 어려운 사이트를 Next.js로 재구현하는 상황을 예로 든다. [13:22]
• 두 번째는 사이트가 운영 중이지만 원본 소스 코드가 없어 유지보수가 어려운 경우다. 세 번째는 잘 만든 레이아웃과 애니메이션을 분석해 자신의 제작 역량을 높이는 용도다. [13:50]
• 간격, 글자와 섹션 순서를 관찰하면 자신의 사이트를 설계할 때 방향을 잡는 데 도움이 된다고 보여준다. 그대로 복제해 자기 서비스처럼 공개하면 문제가 생길 수 있다고 다시 경고한다. [14:23]

9. 제작 문턱의 변화와 마무리

• 기존 결과물을 보고 자신의 취향에 맞게 재구현하는 문턱이 낮아졌다고 평가한다. 다른 사람도 유사 사이트를 쉽게 만들 수 있어 이용할 사이트를 고르는 일도 중요해졌다고 드러낸다. [14:44]
• 주소 하나로 Supabase 화면을 재현한 결과를 되짚고, 좋은 사이트를 먼저 공부한 뒤 자신의 내용으로 바꾸는 작업이 쉬워졌다는 메시지로 정리한다. [15:08]
• 저장소와 프록시 서비스 링크를 고정 댓글·설명란에 제공하겠다고 안내하고, 구독과 반응을 요청하며 영상을 마친다. [15:26]

🧾 결론

• 영상의 성과는 공개 웹 화면과 일부 상호작용을 재현한 사례다. 웹개발 전체나 서비스 내부 기능까지 대체했다는 근거는 제시되지 않는다.
• 단일 스크린샷을 참고하는 작업을 페이지 탐색·리소스 수집·비교 수정으로 체계화했다는 점이 핵심이다.
• 학습한 간격, 타이포그래피, 섹션 구성과 애니메이션을 자신의 콘텐츠와 설계에 적용하는 활용이 제안된다.
• 복제 정확도가 높아질수록 권리 확인과 원본 서비스 식별의 중요성도 커진다.

📈 투자·시사 포인트

• 제작 측면에서는 기존 사이트를 참고해 초기 화면을 구현하고 수정하는 부담이 줄어드는 흐름을 보여준다. 실제 비용 절감 폭이나 생산성 수치는 제시되지 않는다.
• 도구를 선택할 때 화면 재현력과 함께 생성 코드의 수정 가능성, 브라우저 접근 조건, 대상 사이트의 권리 관계를 평가할 필요가 있다.
• 에이전트의 웹 관찰이 작업 기반이므로 브라우저 연결과 프록시 같은 접근 인프라도 함께 등장한다. 영상의 서비스 소개만으로 수요 규모나 사업성을 판단하기는 어렵다.
• 유사 사이트를 만들기 쉬워지는 만큼 이용자는 접속한 사이트가 원래 서비스인지 더 주의해서 확인해야 한다.

⚠️ 불확실하거나 확인이 필요한 부분

• 높은 재현도는 Supabase 한 사례를 중심으로 제시된다. 다른 사이트, 로그인 이후 화면, 데이터 처리와 서비스 기능까지 같은 수준으로 구현되는지는 확인되지 않는다.
• GitHub 스타 3만 7천 개 이상, 월별 성장 수치와 트렌딩 순위는 영상 속 설명이다. 해당 연도, 집계 시점과 저장소 링크가 제공된 텍스트에 없어 현재 수치로 사용할 수 없다.
• Supabase 코드의 Apache 라이선스와 robots.txt 허용 여부는 발표자의 설명이다. 코드 공개나 봇 접근 허용을 로고·고객사 자산·콘텐츠 재사용에 대한 포괄적 허락으로 해석해서는 안 된다는 주의도 영상에 포함된다.
• 자막 기반 정리: 타임스탬프가 있는 자막을 기준으로 정리했으며, 고유명사·수치·인용은 원문 확인 필요 시 별도 검증한다.
• 영상 속 주장: 발표자의 해석·전망·비교는 확인된 외부 사실이 아니라 영상 속 주장으로 분리해 읽는다.
• 검증 필요: 수치, 기업 실적, 정책·시장 전망은 발행 전 최신 자료로 별도 검증이 필요하다.

✅ 액션 아이템

• 영상에서 안내한 저장소를 찾아 설치 요구사항, 복제 명령과 브라우저 연결 방법을 확인한다.
• 본인 소유이거나 실험 권한이 확인된 사이트를 대상으로 라이선스·이용약관·자산별 권리를 검토한다.
• 데스크톱과 모바일에서 메뉴, 탭, 호버 효과와 주요 화면을 비교해 재현 범위를 점검한다.
• 생성된 컴포넌트를 읽으며 간격, 글자 크기, 섹션 순서와 애니메이션 구조를 정리한다.

❓ 열린 질문

• 공개 코드와 봇 접근 허용이라는 조건이 없는 사이트에서도 어느 정도의 재현도를 얻을 수 있을까?
• 시각적으로 유사한 결과물이 실제 서비스로 유지보수하기 좋은 코드인지 어떻게 평가할 수 있을까?
• 본인 사이트를 이전하거나 소스를 복구할 때 화면 외 기능은 어디까지 별도 구현해야 할까?