Insights
AI가 자동으로 큐레이션·번역·정리하는 기술 동향 피드입니다.
Perfect-Web-Clone은 Claude Code를 활용하여 웹사이트를 픽셀 단위로 복제하는 오픈 소스 멀티 에이전트 협업 시스템입니다. 단일 모델의 컨텍스트 제한과 환각 문제를 해결하기 위해 전문화된 에이전트들이 작업을 분배하여 수행하는 아키텍처를 제공합니다.
AI 자동 생성 콘텐츠
본 콘텐츠는 GitHub AI Coding Assistants의 원문을 AI가 자동으로 요약·번역·분석한 것입니다. 원 저작권은 원저작자에게 있으며, 정확한 내용은 반드시 원문을 확인해 주세요.
원문 바로가기오픈 소스 에이전트 협업 시스템 (Open Source Agent Co-work System)
웹 클로닝 (web cloning)을 위한 Claude Code. 40개 이상의 특화된 도구를 갖춘 수직적 AI 에이전트 (vertical AI agent).
English | 中文 | 日本語 | 한국어 | Español | Português | Deutsch | Français | Tiếng Việt
셀프 호스팅 (self-host)을 원하지 않으시나요? Claude Code에서 Perfect Web Clone 스킬을 직접 사용하세요.
진정한 AI 에이전트 — 단순히 LLM (Large Language Model)을 감싼 래퍼 (wrapper)가 아닙니다. 실제 도구를 활용한 멀티 에이전트 협업 (Multi-agent collaboration), 자기 수정 루프 (self-correction loops), 그리고 처음부터 프로덕션 수준의 코드를 구축할 수 있는 완전한 샌드박스 환경 (sandbox environment)을 제공합니다.
다른 도구들은 스크린샷을 보고 추측합니다. 우리는 실제 코드 (real code) — DOM, 스타일 (styles), 컴포넌트 (components), 상호작용 (interactions)을 추출합니다. 스크린샷 기반 도구로는 결코 달성할 수 없는 **픽셀 퍼펙트 클로닝 (Pixel-perfect cloning)**을 구현합니다.
이 전체 멀티 에이전트 시스템은 오픈 소스입니다. 이를 통해 배우고, 사용하고, 그 위에 구축해 나가세요.
단일 AI와 작업하는 것은 한 명의 동료에게 모든 일을 혼자 처리하라고 요청하는 것과 같습니다. 그들은 과부하에 걸리게 됩니다. 기존의 단일 모델 방식은 다음과 같은 한계에 부딪힙니다:
우리의 솔루션: 각자 가장 잘하는 일에 집중하는 동료들처럼, 전문화된 에이전트 팀이 함께 작동합니다. 불필요한 대화는 줄이고, 업무 완수 능력은 높였습니다.
우리는 시도해 보았습니다. 완전하게 추출된 JSON (complete extracted JSON) — 전체 DOM 트리, 모든 CSS 규칙, 모든 에셋 URL을 포함하더라도 단일 모델 도구는 어려움을 겪습니다:
핵심 문제는 200KB에 달하는 추출된 JSON이 실질적인 컨텍스트 제한을 초과한다는 점입니다. 설령 컨텍스트 안에 들어간다 하더라도, 너무 많은 정보로 인해 컨텍스트가 오염되면 단일 에이전트는 일관성을 유지할 수 없습니다. 해결책은 더 똑똑한 에이전트를 만드는 것이 아니라, 신뢰할 수 있는 워크플로우 (workflows)를 통한 **작업 분배 (task distribution)**입니다.
솔직한 한계: 복잡한 애니메이션을 완벽하게 추출하는 것은 여전히 어렵습니다. 하지만 이는 크롤러 (crawler)의 문제이지, 에이전트의 문제가 아닙니다. 멀티 에이전트 아키텍처 (multi-agent architecture) 자체는 웹 클로닝 그 이상의 것을 수행할 수 있습니다. 자동 리팩토링 (automated refactoring), 코드베이스 마이그레이션 (codebase migration), 문서 생성 (documentation generation), 또는 단일 에이전트가 처리하기에 너무 큰 모든 작업을 상상해 보십시오.
┌─────────────────────────────────────────────────────────┐
│ 멀티 에이전트 시스템 (Multi-Agent System) │
├─────────────────────────────────────────────────────────┤
...
이 패턴 — 에이전트 (Agent) + 도구 (Tools) + 샌드박스 (Sandbox) — 은 모든 AI 에이전트 제품에 재사용 가능합니다:
| 구성 요소 | 목적 | Nexting에서의 역할 |
|---|---|---|
| 메인 에이전트 (Main Agent) | 워크플로우를 조정하고 작업을 분배함 | 페이지 분석, 워커(worker) 생성, 결과 병합 |
| 워커 에이전트 (Worker Agents) | 제한된 권한으로 하위 작업을 실행함 | 섹션별 병렬 처리, 격리된 컨텍스트 |
| 도구 (Tools) | 에이전트가 호출할 수 있는 기능 | 파일 I/O, 브라우저 자동화 (Browser automation), API 호출 |
| 샌드박스 (Sandbox) | 안전한 실행 환경 | BoxLite - 임베디드 마이크로 VM (micro-VM) 런타임 |
BoxLite: AI 에이전트를 위한 하드웨어 수준의 격리된 마이크로 VM (micro-VM)입니다. 루트 권한 (root access)이 필요하지 않으며, 진정한 커널 격리 (kernel isolation)를 통해 OCI 컨테이너를 실행합니다. → github.com/boxlite-ai/boxlite
이 아키텍처로 무언가를 구축하고 계신가요? 질문이 있으신가요? 연락해 주세요:
Claude Agent SDK를 기반으로 구축되었습니다 — Claude Code와 동일한 기반입니다. 이것은 단순히 API 호출을 하는 챗봇이 아닙니다; 격리된 샌드박스 내에서 생각하고, 계획하고, 실행하며, 스스로 수정하는 **진정한 에이전트 (real agent)**입니다.
| 카테고리 | 도구 (Tools) | 목적 |
|---|---|---|
| 파일 작업 (File Operations) | read_file, write_file, edit_file, delete_file, rename_file, create_directory | 프로젝트 파일에 대한 CRUD (생성, 읽기, 수정, 삭제) 작업 |
| 검색 및 탐색 (Search & Discovery) | glob, grep, ls, search_in_file, search_in_project | 파일 및 콘텐츠 검색 (ripgrep 기반) |
| 작업 관리 (Task Management) | todo_read, todo_write, task, get_subagent_status | 진행 상황 추적 및 하위 에이전트 (sub-agent) 생성 |
| 시스템 실행 (System Execution) | bash, run_command, shell | 샌드박스 내에서 모든 명령 실행 |
| 네트워크 (Network) | web_fetch, web_search | URL 가져오기 및 웹 검색 |
| 터미널 (Terminal) | create_terminal, send_terminal_input, get_terminal_output, install_dependencies, start_dev_server | 다중 터미널 세션 관리 |
| 미리보기 (Preview) | take_screenshot, get_console_messages, get_preview_dom, get_preview_status | 라이브 미리보기 상태 검사 |
| 진단 (Diagnostics) | verify_changes, diagnose_preview_state, analyze_build_error, get_comprehensive_error_snapshot | 디버깅 및 검증 |
| 자가 치유 (Self-Healing) | start_healing_loop, verify_healing_progress, stop_healing_loop | 빌드 오류 자동 수정 |
| 소스 쿼리 (Source Query) | list_saved_sources, get_source_overview, query_source_json | 추출된 웹사이트 데이터 쿼리 |
┌─────────────────────────────────────────────────────────────────────────────┐
│ 프론트엔드 (Frontend) (localhost:3100) │
│ ┌─────────────────┐ ┌─────────────────┐ ┌─────────────────────────┐ │
...
이것이 ChatGPT/Claude 채팅과 다른 점은 무엇인가요?
지속적인 상태 (Persistent state): 에이전트가 전체 세션 동안 문맥 (context)을 기억합니다.
도구 체이닝 (Tool chaining): 인간의 개입 없이 10개 이상의 도구를 순차적으로 실행할 수 있습니다.
자가 수정 (Self-correction): 오류를 감지하고, 근본 원인을 진단하며, 자동으로 수정합니다.
라이브 미리보기 (Live preview): 단순히 코드만 보는 것이 아니라, 실제 Vite 개발 서버를 통해 렌더링된 실제 출력을 확인합니다.
대부분의 AI 클로닝 도구들은 페이지를 사진처럼 보고 코드를 추측합니다. 우리는 **실제 소스 (actual source)**를 읽습니다. 이것이 우리의 결과물이 대략적인 근사치가 아닌, 바로 사용 가능한 프로덕션 수준 (production-ready)인 이유입니다.
| 스크린샷 기반 도구 (Screenshot-Based Tools) | Nexting |
|---|---|
| AI가 픽셀을 해석 → 레이아웃 추측 | 실제 DOM 추출 → CSS 분석 |
| ... | |
| 전체 페이지 캡처 (Full Page Capture)- Playwright를 사용하여 완전한 DOM 구조, CSS 스타일 및 에셋(assets) 추출 | |
| 테마 감지 (Theme Detection)- 라이트 모드와 다크 모드 테마를 모두 자동으로 감지 및 캡처 | |
| 컴포넌트 분석 (Component Analysis)- AI 기반 컴포넌트 경계 감지 | |
| 기술 스택 분석 (Tech Stack Analysis)- 페이지에 사용된 프레임워크 및 라이브러리 식별 | |
| 에셋 추출 (Asset Extraction)- 이미지, 폰트 및 기타 리소스 다운로드 |
멀티 에이전트 아키텍처 (Multi-Agent Architecture)- 더 빠르고 정확한 결과를 위해 전문화된 에이전트들이 병렬로 작동
AI 코드 생성 (AI Code Generation)- Claude가 추출된 데이터를 바탕으로 프로덕션 수준 (production-ready)의 코드 생성
라이브 프리뷰 (Live Preview)- BoxLite 샌드박스를 통한 실시간 코드 프리뷰
프레임워크 지원 (Framework Support)- React, Next.js, Vue 또는 순수 HTML로 내보내기
전통적인 단일 모델 접근 방식은 복잡한 페이지에서 실패합니다. 이는 모델이 충분히 똑똑하지 않아서가 아니라, 작업 자체가 너무 크기 때문입니다. 우리의 멀티 에이전트 시스템은 **작업 분배 (task distribution)**를 통해 이 문제를 해결합니다:
| 에이전트 (Agent) | 책임 (Responsibility) |
|---|---|
| 메인 에이전트 (Main Agent) | 페이지를 분석하고, 작업을 하위 작업(subtasks)으로 나누며, 워커 에이전트(worker agents)를 생성하고, 이들의 결과물을 일관된 코드로 병합합니다. |
| 워커 에이전트 (Worker Agents) | 격리된 컨텍스트 (isolated context) 내에서 하위 작업을 병렬로 실행합니다. 각 워커는 범위가 지정된 권한과 집중된 책임을 가집니다. |
작동 원리: 하나의 에이전트가 200KB의 컨텍스트에 빠져 허우적거리는 대신, 워커들이 각각 관리 가능한 크기의 청크(chunks)를 처리합니다. 구조화된 워크플로우는 컨텍스트 오염 (context pollution)을 방지하고 최종 출력물 전반의 일관성을 보장합니다.
Cap table 및 지분 관리 플랫폼 클론
| 원본 (Original) | 복제본 (Replica) |
|---|---|
저장소 클론 (Clone the repository)
git clone https://github.com/ericshang98/perfect-web-clone.git
cd perfect-web-clone
백엔드 설정 (Backend Setup)
macOS / Linux
cd backend
# 환경 파일(environment file)을 복사하고 API 키를 추가하세요
cp ../.env.example .env
...
Windows
cd backend
# 환경 파일(environment file)을 복사하고 API 키를 추가하세요
copy ..\.env.example .env
...
프론트엔드 설정 (Frontend Setup)
cd frontend
# 의존성(dependencies) 설치
npm install
...
애플리케이션 실행 (Open the Application)
브라우저에서 http://localhost:3100 으로 이동하세요.
Extractor 페이지로 이동 - 추출할 URL을 입력합니다.
추출 옵션(viewport, theme 등)을 설정합니다.
Analyze를 클릭하여 추출을 시작합니다 - 완료되면 Save to Cache를 클릭하여 결과를 저장합니다.
Agent 페이지로 이동 - Sources 버튼을 클릭하여 소스 패널을 엽니다 - 캐시된 추출 결과(cached extraction)를 선택합니다.
AI와 채팅하여 코드를 생성합니다.
Agent가 코드를 작성하는 동안 실시간 미리보기(live preview)를 확인합니다.
nexting/
├── backend/ # Python FastAPI 백엔드
│ ├── cache/ # 추출 결과용 메모리 캐시(Memory cache)
...
| 엔드포인트 (Endpoint) | 메서드 (Method) | 설명 (Description) |
|---|---|---|
/api/extractor/extract | POST | 웹페이지 추출 시작 |
/api/extractor/status/{id} | GET | 추출 상태 폴링 (Poll) |
| 엔드포인트 (Endpoint) | 메서드 (Method) | 설명 (Description) |
|---|---|---|
/api/cache/store | POST | 추출 결과를 캐시에 저장 |
/api/cache/list | GET | 캐시된 추출 목록 조회 |
/api/cache/{id} | GET | 캐시된 추출 결과 가져오기 |
/api/cache/{id} | DELETE | 캐시된 추출 결과 삭제 |
| 엔드포인트 (Endpoint) | 메서드 (Method) | 설명 (Description) |
|---|---|---|
/api/agent/ws | WebSocket | AI 에이전트 통신 |
| 엔드포인트 (Endpoint) | 메서드 (Method) | 설명 (Description) |
|---|---|---|
/api/boxlite/* | Various | 백엔드 샌드박스 (sandbox) 환경 |
/api/boxlite-agent/* | Various | 에이전트 샌드박스 (sandbox) 작업 |
| 카테고리 (Category) | 기술 스택 (Technologies) |
|---|---|
| 프론트엔드 (Frontend) | Next.js 15, React 19, TailwindCSS 4, Shadcn/UI, Three.js |
| 백엔드 (Backend) | FastAPI, Python 3.8+, Playwright, WebSocket |
| AI | Claude (Anthropic API), 멀티 에이전트 아키텍처 (Multi-Agent Architecture) |
| 샌드박스 (Sandbox) | BoxLite |
| 스타일링 (Styling) | TailwindCSS, CSS Variables, 다크 모드 지원 (Dark Mode Support) |
기여(Contributions)를 환영합니다! 언제든지 Pull Request를 제출해 주세요.
git checkout -b feature/amazing-feature)git commit -m 'Add amazing feature')git push origin feature/amazing-feature)이 프로젝트는 MIT License를 따릅니다 - 자세한 내용은 LICENSE 파일을 참조하세요.