ditto.site
ditto.site는 오픈 소스, MIT 라이선스의 결정론적 웹사이트 클로너로, LLM 추측에 의존하지 않고 모든 공개 URL을 깨끗하고 컴포넌트화된 Next.js 또는 Vite 코드로 변환합니다. 일반적으로 약 5분 정도 소요됩니다.
https://ditto.site/?ref=producthunt&utm_source=aipure
제품 정보
업데이트됨:Jul 23, 2026
ditto.site이란?
ditto.site는 대상 페이지가 브라우저에서 렌더링하는 내용을 기반으로 자체 포함된 TypeScript 웹 앱을 생성하는 결정론적 "웹사이트-코드" 도구입니다. 사이트의 소스 저장소에 액세스할 필요 없이 공개 URL을 제공하면 ditto는 구조화된 구성 요소와 스타일링(예: Tailwind)을 포함하는 유지보수 가능한 프로젝트(Next.js 또는 Vite)를 출력합니다. 이 프로젝트는 오픈 소스(MIT)이며 자체 호스팅, 호스팅된 REST API 또는 에이전트 워크플로우용으로 설계된 MCP 서버를 통해 사용할 수 있습니다. ditto.site는 일관되고 안정적인 출력을 강조하며 대상 콘텐츠를 검사, 복사, 변환 및 운영할 권한이 있는 경우에만 사용하도록 고안되었습니다.
ditto.site의 주요 기능
ditto.site는 오픈 소스 MIT 라이선스의 결정론적 웹사이트 클로너로, 공개 URL을 자체 포함되고 유지보수 가능한 TypeScript 웹 앱(Next.js 또는 Vite)으로 몇 분 안에 변환합니다. LLM 기반의 추측 대신, 브라우저에서 페이지가 렌더링하는 것을 캡처하는 안정적인 파이프라인을 실행한 다음, 추출된 디자인 시스템(토큰, 글꼴, 중단점), 상호 작용(호버/포커스, 드롭다운, 아코디언, 모션) 및 프로덕션 친화적인 SEO 아티팩트(메타데이터, JSON-LD, 사이트맵)를 포함하는 깔끔하고 구성 요소화된 코드를 생성합니다. 자체 호스팅 오픈 소스 도구, 호스팅된 REST API 또는 에이전트 워크플로우를 위한 MCP 서버를 통해 사용할 수 있습니다.
결정론적 복제 파이프라인: 비결정론적 LLM 해석에 의존하지 않고 빠르고 안정적이며 반복 가능한 출력(캡처 → 생성 → 검증)을 생성합니다.
URL-to-앱 코드 생성: 공개 웹페이지를 브라우저에서 페이지가 렌더링하는 것을 기반으로 하는 새로운 자체 포함 TypeScript 프로젝트로 변환합니다. 원본 소스 저장소가 필요하지 않습니다.
프레임워크 출력: Next.js 또는 Vite: 스택 및 배포 요구 사항에 따라 Next.js 또는 Vite를 선택하여 실행하고 확장할 수 있는 실제 애플리케이션 스캐폴드를 내보냅니다.
유지보수 가능하고 구성 요소화된 코드: 반복되는 DOM을 구성 요소로 분할하고, 영역을 섹션으로 올리고, 편집 가능한 콘텐츠 모델을 추출하여 “하나의 거대한 파일”을 피합니다.
디자인 시스템 추출: 토큰, 글꼴, 중단점, 레이아웃 구조 및 모션/상호 작용을 추출하여 스타일링을 편집 가능하게 유지하면서 모양과 느낌을 보존합니다.
다중 통합 경로 (OSS, API, MCP): 로컬에서 실행/자체 호스팅(MIT), 호스팅된 REST API를 호출하여 작업을 대기열에 넣고 폴링하며 결과를 다운로드하거나, MCP 서버를 통해 에이전트에 복제를 도구로 노출합니다.
ditto.site의 사용 사례
에이전시 또는 스튜디오 재구축/마이그레이션: 기존 마케팅 사이트를 깔끔한 Next.js/Vite 코드로 재구축하여 재설계, 성능 작업 또는 CMS 통합을 위한 시작점으로 활용합니다.
경쟁/시장 조사 프로토타이핑: 레이아웃 패턴, IA 및 디자인 시스템을 연구하기 위해 공개적으로 액세스 가능한 페이지(검사/변환 권한이 있는 경우)의 충실하고 편집 가능한 복제본을 생성합니다.
AI 앱 빌더 온보딩 템플릿: 새로운 고객에게 현재 사이트와 일치하는 실제 코드 기준선을 제공하여 빈 캔버스 문제를 유지보수 가능한 시작 프로젝트로 대체합니다.
“렌더링된 진실”로부터의 엔지니어링 핸드오프: 원본 소스를 사용할 수 없는 경우, 렌더링된 페이지에서 작동하는 코드베이스를 생성하여 내부 문서화, 리팩토링 또는 현대화를 가속화합니다.
에이전트 지원 사이트 생성 워크플로우: MCP를 통해 ditto를 Claude/Cursor/사용자 지정 에이전트에 연결하여 자동화된 빌드 루프가 실제 프로젝트를 복제, 수정 및 반복할 수 있도록 합니다.
SEO 준비된 사이트 복제 기준선: 생성된 메타데이터, JSON-LD 및 사이트맵을 추가 최적화 전에 SEO를 보존하는 재구축의 기반으로 사용합니다.
장점
반복 가능한 워크플로우 및 자동화에 적합한 결정론적이고 일관된 출력.
평면 HTML 덤프가 아닌 유지보수 가능하고 구성 요소화된 Next.js/Vite TypeScript 프로젝트를 생성합니다.
유연한 사용: 자체 호스팅 오픈 소스, 호스팅된 REST API 또는 에이전트 도구를 위한 MCP.
디자인 토큰, 상호 작용 및 SEO 아티팩트를 추출하여 충실도를 보존하고 반복을 가속화합니다.
단점
대상 콘텐츠를 검사/복사/변환할 권한이 있는 경우에만 적합합니다. 오용은 법적/윤리적 문제를 야기할 수 있습니다.
출력 충실도는 렌더링된 페이지에서 캡처할 수 있는 것으로 제한됩니다. 복잡한 앱 로직/백엔드는 본질적으로 재구성되지 않습니다.
동적 콘텐츠, 인증 흐름 또는 사이트별 통합을 위해 수동 정리 또는 조정이 필요할 수 있습니다.
ditto.site 사용 방법
1) Ditto 사용 방식 선택: Ditto는 동일한 결정론적 엔진을 사용하는 세 가지 진입점을 제공합니다: (a) 오픈 소스 자체 호스팅(전체 파이프라인을 로컬에서 실행), (b) 호스팅된 REST API(URL을 POST하고 작업 상태를 폴링한 다음 출력을 다운로드), 또는 (c) MCP 서버(Ditto를 Claude/Cursor와 같은 에이전트에 연결).
2) 호스팅된 REST API를 통해 Ditto 사용 (가장 빠른 경로): https://www.ditto.site/api-key로 이동하여 API 키를 받으세요. 호스팅된 엔드포인트를 사용하여 공개 URL을 제출한 다음 작업이 완료될 때까지 폴링하고 마지막으로 생성된 프로젝트(기본적으로 Next.js App Router 또는 요청 시 Vite React)를 가져옵니다.
3) MCP를 통해 Ditto 사용 (에이전트 워크플로우용): API 키를 받은 다음 MCP URL과 Bearer 토큰을 사용하여 에이전트/클라이언트 구성에 Ditto를 MCP 서버로 추가합니다. 예시 구성: { "mcpServers": { "ditto": { "url": "https://api.ditto.site/mcp", "headers": { "Authorization": "Bearer ${DITTO_API_KEY}" } } } }
4) Ditto 자체 호스팅 (파이프라인을 로컬에서 실행): 오픈 소스 저장소를 복제하고 종속성을 설치합니다: `gh repo clone ion-design/ditto.site` 다음 `cd ditto.site && npm install`.
5) URL에 대해 로컬 복제 작업 실행: 저장소에서 복제 명령을 실행하고 대상 URL을 전달합니다: `npm run clone -- https://example.com` (복제할 권한이 있는 사이트로 대체).
6) Ditto의 복제 출력을 디스크의 프로젝트로 변환 (압축 해제): 체크아웃된 저장소에서 공식 압축 해제기를 사용합니다: `npm run unpack -- <clone.json|-> <out-dir>`. 이렇게 하면 텍스트 파일이 작성되고 이진 자산이 구체화됩니다(인라인 base64 또는 $DITTO_API_URL / $DITTO_API_KEY를 통해 가져옴).
7) 생성된 앱 열기 및 빌드: 편집기에서 출력 디렉토리를 엽니다. Ditto는 추출된 토큰/디자인 시스템, 글꼴, 상호 작용, 모션, 중단점 및 섹션을 포함하여 컴포넌트화된 코드(하나의 거대한 파일이 아님)가 있는 실제 TypeScript 프로젝트를 내보냅니다.
8) Ditto가 캡처하는 내용 (및 놓칠 수 있는 내용) 알기: Ditto는 스냅샷 시점에 브라우저가 실제로 렌더링한 내용을 캡처합니다. 나중에 로드되는 콘텐츠(무한 스크롤, 지연 로드된 이미지 또는 상호 작용으로 트리거된 콘텐츠)는 포함되지 않을 수 있습니다. 복제하기 전에 원하는 콘텐츠가 표시되는지 확인하세요.
9) 사용 및 권리 모범 사례 준수: Ditto는 학습, 프로토타이핑 및 승인된 사용 사례를 위한 것입니다. 귀하는 저작권, 서비스 약관 및 IP를 존중하면서 모든 페이지에서 코드를 복제하고 사용할 권리가 있는지 확인할 책임이 있습니다.
ditto.site 자주 묻는 질문
ditto.site는 공개 URL을 브라우저에서 페이지가 렌더링하는 것을 기반으로 깔끔하고 컴포넌트화된 코드베이스(Next.js 또는 Vite)로 변환하는 오픈 소스 결정론적 웹사이트 클로너입니다.
ditto.site와(과) 유사한 최신 AI 도구
GPT Easy Web
GPT Easy Web은 사용자가 코딩 지식 없이 자연어 상호작용과 자동화 도구를 통해 웹사이트를 쉽게 구축, 사용자화 및 관리할 수 있도록 하는 사용자 친화적인 AI 기반 플랫폼입니다.
AI Website Tool
AI 웹사이트 도구는 몇 번의 클릭만으로 비즈니스 중심의 복사, 맞춤 비주얼 및 반응형 디자인을 자동으로 생성하여 몇 분 만에 전문 웹사이트를 만드는 AI 기반 웹사이트 빌더입니다.
Softgen
Softgen.ai는 사용자가 코딩 요구 사항 없이 아이디어를 기능적인 웹 애플리케이션으로 변환할 수 있도록 하는 AI 기반 풀스택 프로젝트 생성 플랫폼입니다.
Webifier
Webifier는 텍스트 프롬프트를 NextJS14, TailwindCSS 및 Shadcn 구성 요소를 사용하여 완전한 기능을 갖춘 React 랜딩 페이지로 변환하는 AI 기반 도구입니다.
ditto.site와(과) 유사한 인기 AI 도구
Adobe Express
Adobe Express는 전문적으로 디자인된 템플릿과 자산을 사용하여 멋진 소셜 게시물, 이미지, 비디오, 전단지 등을 쉽게 만들 수 있는 올인원 AI 기반 콘텐츠 제작 앱입니다.
Hostinger
Hostinger는 간단한 채팅 인터페이스를 통해 코딩 없이도 누구나 사용자 지정 웹 앱과 웹사이트를 구축, 편집 및 게시할 수 있도록 지원하는 Horizons와 같은 AI 기반 도구를 제공하는 웹 호스팅 및 도메인 서비스 제공업체입니다.
GPT Engineer
GPT 엔지니어는 누구나 AI 엔지니어와 채팅하여 웹 애플리케이션을 구축할 수 있도록 하는 AI 기반 소프트웨어 개발 도구입니다.
Manus Shopify Connector
Manus Shopify Connector를 사용하면 OAuth 범위 액세스 및 Shopify 결제를 통해 Shopify API를 사용하여 단일 채팅에서 Shopify 기반 상점 전면을 구축하고 카탈로그를 관리하며 데이터 기반 캠페인을 생성할 수 있습니다.