ditto.site

ditto: 어떤 웹사이트든 5분 만에 리얼 코드로 복제하는 결정론적 웹사이트 클로너

웹 개발 및 현대적인 앱 구축 환경에서 속도는 가장 중요한 경쟁력입니다. ditto는 개발자가 어떤 웹사이트든 단 5분 만에 깨끗하고 유지보수가 가능한 Next.js 또는 Vite 코드로 복제할 수 있게 해주는 오픈 소스 **결정론적 웹사이트 클로너(Deterministic Website Cloner)**입니다.

기존의 도구들이 AI 모델에 의존하여 불확실한 결과를 내놓는 것과 달리, ditto는 엄격한 결정론적 엔진을 기반으로 설계되어 매우 안정적이고 일관된 결과물을 보장합니다. 본 아티클에서는 ditto의 핵심 가치와 기능, 그리고 활용 사례를 심층적으로 살펴봅니다.

---

What's ditto?

ditto는 단순히 웹사이트의 겉모습을 베끼는 도구가 아닙니다. 특정 URL을 입력하면 해당 사이트의 DOM, 스타일, 모션 등을 정밀하게 분석하여 컴포넌트화된 실제 코드로 변환해 주는 강력한 솔루션입니다.

이 도구의 가장 큰 특징은 **결정론적(Deterministic)**이라는 점입니다. 많은 최신 도구들이 LLM(대규모 언어 모델)을 사용해 '행운을 빌며' 결과를 생성하는 방식이라면, ditto는 논리적이고 정교한 파이프라인을 통해 디자인 시스템, 토큰, 폰트, 인터랙션, 중단점(Breakpoints) 및 섹션을 정확하게 추출합니다.

ditto는 AI 앱 빌더에게 완벽한 첫 번째 단계가 되어줍니다. 새로운 고객에게 빈 화면(Blank Canvas) 대신 실제 코드로 이루어진 충실한 시작점을 제공할 수 있기 때문입니다.

---

주요 기능 (Features)

ditto는 단순한 복제를 넘어 개발자가 즉시 프로덕션에 투입할 수 있는 수준의 코드 품질을 제공하기 위해 다음과 같은 핵심 기능을 갖추고 있습니다.

1. 결정론적 엔진 (Deterministic Engine)

ditto는 높은 신뢰성을 자랑합니다.

• 결정론적 수치(Determinism): 100
• 충실도(Fidelity): 96
• 컴포넌트화(Componentized): 92
• 커버리지(Coverage): 88 이 지표들이 증명하듯, 사용자는 매번 빠르고 안정적이며 일관된 출력을 얻을 수 있습니다.

2. 유지보수가 용이한 코드 구조

ditto는 하나의 거대한 파일을 생성하지 않습니다. 반복되는 DOM을 컴포넌트로 분리하고, 깨끗한 영역을 섹션으로 승격시키며, 수정 가능한 콘텐츠 모델을 추출합니다.

• Framework: Next.js, Vite 지원
• Styling: Tailwind v4, CSS 지원
• Language: TypeScript 기반의 타입 안정성
• Structure: app/, components/, sections/ 등으로 정돈된 프로젝트 구조 제공

3. 포괄적인 자산 및 요소 추출

웹사이트를 구성하는 미세한 요소까지 모두 잡아냅니다.

• 인터랙션: 호버 및 포커스 상태, 드롭다운 메뉴, 아코디언
• 디자인 자산: 디자인 토큰, 웹 폰트, 호이스팅된 인라인 SVG
• SEO 및 메타데이터: JSON-LD 및 사이트맵 생성
• 모션: 선언적 모션(Declarative motion) 및 CSS 키프레임 추출

---

사용 방법 (How to Use)

ditto는 사용자의 빌드 방식에 맞춰 세 가지 진입점을 제공합니다. 모든 방식은 동일한 결정론적 엔진을 기반으로 작동합니다.

1. 오픈 소스 셀프 호스팅 (Open Source)

MIT 라이선스로 제공되는 코드를 자신의 머신에서 직접 실행할 수 있습니다.

gh repo clone ion-design/ditto.site
cd ditto.site && npm install
nm run clone -- https://example.com

2. REST API 활용

인프라 구축 없이 호스팅된 엔드포인트를 통해 URL을 POST 하고 결과를 받아볼 수 있습니다.

curl -X POST https://api.ditto.site/v1/clones \
  -H "Authorization: Bearer $DITTO_API_KEY" \
  -H "content-type: application/json" \
  -d '{"url":"https://example.com/",
       "options":{"mode":"single","framework":"next","styling":"tailwind"}}'

3. MCP 서버 (AI 에이전트 전용)

Claude, Cursor와 같은 AI 에이전트나 자체 빌더 루프에 ditto를 연동하여 에이전트에게 클로닝 도구를 부여할 수 있습니다.

{
  "mcpServers": {
    "ditto": {
      "url": "https://api.ditto.site/mcp",
      "headers": {
        "Authorization": "Bearer ${DITTO_API_KEY}"
      }
    }
  }
}

---

활용 사례 (Use Case)

• 빠른 프로토타이핑: 기존 사이트를 기반으로 새로운 기능을 빠르게 추가하고 싶을 때 사용합니다.
• 마이그레이션: 오래된 기술 스택의 사이트를 Next.js나 Vite, Tailwind 환경으로 현대화할 때 유용합니다.
• AI 앱 개발의 기초: AI 에이전트가 코드를 작성하기 위한 정확하고 실제적인 베이스 코드를 제공합니다.
• 디자인 시스템 구축: 기존 사이트에서 디자인 토큰과 폰트, 스타일을 추출하여 새로운 프로젝트의 디자인 시스템으로 활용합니다.

---

자주 묻는 질문 (FAQ)

Q: ditto의 가격은 얼마인가요? A: ditto는 MIT 라이선스 하에 무료로 제공됩니다. 직접 셀프 호스팅하거나 호스팅된 API를 자유롭게 이용할 수 있습니다.

Q: 생성된 코드는 수정하기 쉽나요? A: 네, ditto는 수정 가능한 시맨틱 데이터(content.ts)와 구조화된 컴포넌트, 섹션 파일을 생성하므로 일반적인 프로젝트처럼 쉽게 유지보수할 수 있습니다.

Q: 어떤 프레임워크를 지원하나요? A: 현재 Next.js와 Vite를 공식 지원하며, 스타일링은 Tailwind v4와 일반 CSS 중 선택할 수 있습니다.

Q: 복제 시 검색 엔진 최적화(SEO) 정보도 포함되나요? A: 예, ditto는 SEO 메타데이터는 물론 JSON-LD 및 사이트맵까지 함께 추출하여 출력물에 포함합니다.

---

ditto는 AI 빌드 시대에 필수적인 결정론적 클로너입니다. 불확실한 마법 대신 실제 작동하는 깨끗한 코드로 프로젝트를 시작하세요. 지금 바로 GitHub에서 스타를 누르거나 API 키를 발급받아 시작해 보십시오.