SiteMCP 사용 방법 및 모든 웹사이트를 MCP 서버로 전환하기

오늘날의 AI 주도 세계에서 대형 언어 모델(LLM)에 외부 지식을 제공하는 능력은 점점 더 중요해지고 있습니다. 개발자, 콘텐츠 제작자 또는 AI 애호가이든 간에 모델이 특정 정보를 접근할 수 있도록 하는 것은 응답을 극적으로 개선할 수 있습니다. SiteMCP에 주목해 보세요. 거의 모든 웹사이트를 모델 컨텍스트 프로토콜(MCP) 서버로 변환할 수 있게 해주는 혁신적인 도구로, Claude와 같은 AI 도우미가 웹 콘텐츠에 직접 접근하고 이를 참조할 수 있게 해줍니다.

SiteMCP란 무엇인가요?

SiteMCP는 전체 웹사이트를 가져와 MCP 서버로 변환하는 강력한 유틸리티입니다. ryoppippi에 의해 개발된 이 도구는 웹 콘텐츠와 AI 모델 간의 격차를 해소하여 웹사이트를 모델 컨텍스트 프로토콜 프레임워크를 통해 접근할 수 있도록 합니다. 본질적으로, LLM이 원래 MCP를 지원하지 않거나 특정 통합 방법을 제공하지 않는 웹사이트를 읽고 참조할 수 있게 해주는 솔루션입니다.

任意のサイトをMCP Serverに変えちゃうヤバいやつ作ったよ！https://t.co/MTYkdu1jjO pic.twitter.com/xHkb05eWF1
— ryoppippi (@ryoppippi) 2025년 4월 7일

크레딧: SiteMCP는 ryoppippi에 의해 만들어졌습니다. 그의 작업을 지원하고 최신 기능 및 개발 사항을 파악하기 위해 https://github.com/ryoppippi/sitemcp에서 그의 GitHub 프로젝트를 확인해 보세요.

모델 컨텍스트 프로토콜(MCP)이란 무엇인가요?

SiteMCP에 대해 더 깊이 들어가기 전에, MCP가 실제로 무엇인지 이해해 보겠습니다. MCP는 "모델 컨텍스트 프로토콜"의 약자로, AI 도우미가 외부 데이터 소스에 접근할 수 있도록 해주는 시스템입니다. 간단히 말하면, 이는 AI에게 "이 웹사이트를 읽어줘" 또는 "이 파일을 확인해줘"라고 말할 수 있게 하여 AI가 실제로 그 정보를 검색하고 처리하게 해주는 프로토콜입니다.

MCP는 AI 모델과 외부 지식 소스 간의 다리 역할을 하여 상호 작용을 더 정보에 기반하고 맥락적으로 관련성 있게 만듭니다. MCP가 없으면 AI 도우미는 학습한 정보에만 제한되며, 최신 개발 사항이나 참조하기 원하는 특정 콘텐츠를 놓칠 수 있습니다.

왜 SiteMCP가 중요한가요?

SiteMCP는 몇 가지 중요한 문제를 해결합니다:

제공되지 않은 정보에 접근할 수 있음: 많은 웹사이트가 MCP 서버나 AI 도구와의 호환성을 제공하지 않습니다. SiteMCP는 이러한 제한을 우회합니다.
토큰 소비 감소: 전체 웹사이트를 프롬프트로 제공하는 대신(소중한 토큰을 소모하는), SiteMCP는 AI가 필요할 때만 필요한 정보에 접근할 수 있게 해줍니다.
최신 정보: 빠르게 변화하는 기술과 라이브러리를 위해 가장 최신의 문서에 접근할 수 있습니다.
맞춤형 지식 베이스: 개인 웹사이트, 문서 또는 지식 기반을 AI 도우미가 접근할 수 있도록 만드세요.

SiteMCP 시작하기

설치 옵션

SiteMCP는 사용자의 선호도에 따라 유연한 설치 옵션을 제공합니다:

일회성 사용을 위한:

# 다음 중 하나를 선택하세요:
bunx sitemcp
npx sitemcp
pnpx sitemcp

전역 설치를 위한:

# 다음 중 하나를 선택하세요:
bun i -g sitemcp
npm i -g sitemcp
pnpm i -g sitemcp

기본 사용법

SiteMCP 사용법은 매우 간단합니다. 가장 기본적인 명령어 패턴은 다음과 같습니다:

sitemcp https://example.com

이 명령어는 example.com의 전체 웹사이트를 가져와 MCP 서버를 생성합니다. 대형 사이트에서 더 나은 성능을 위해 동시성을 조정할 수 있습니다:

sitemcp https://example.com --concurrency 10

고급 구성 옵션

SiteMCP는 웹사이트가 처리되고 제공되는 방식을 미세 조정할 수 있는 여러 사용자 지정 옵션을 제공합니다:

도구 이름 전략

도구 이름 전략은 MCP 서버 이름이 생성되는 방식을 결정합니다. 이는 -t 또는 --tool-name-strategy 플래그를 사용하여 설정합니다:

# 도메인을 도구 이름으로 사용
sitemcp https://vite.dev -t domain

# 서브도메인을 도구 이름으로 사용
sitemcp https://react-tweet.vercel.app/ -t subdomain

# 경로 이름을 도구 이름으로 사용(기본값)
sitemcp https://ryoppippi.github.io/vite-plugin-favicons/ -t pathname
# 결과: indexOfVitePluginFavicons / getDocumentOfVitePluginFavicons

특정 페이지 일치

대형 웹사이트의 경우 가져올 페이지를 제한하고 싶을 수 있습니다. -m 또는 --match 플래그를 사용하면 패턴을 지정할 수 있습니다:

sitemcp https://vite.dev -m "/guide/**" "/blog/**"

이 명령어는 지정된 패턴과 일치하는 페이지만 가져오며, 처리 시간과 리소스를 절약합니다. 일치는 micromatch에 의해 지원되어 강력한 패턴 매칭 기능을 제공합니다.

콘텐츠 선택기

SiteMCP는 Mozilla의 가독성을 사용하여 웹 페이지에서 의미 있는 콘텐츠를 추출합니다. 그러나 때때로 이 자동 추출이 올바른 콘텐츠를 포착하지 못할 수 있습니다. 이러한 경우 CSS 선택기를 지정할 수 있습니다:

sitemcp https://vite.dev --content-selector ".content"

캐싱 메커니즘

SiteMCP는 기본적으로 ~/.cache/sitemcp에 가져온 페이지를 캐시하여 후속 실행 속도를 높입니다. 매번 새 콘텐츠가 필요하다면 캐싱을 비활성화할 수 있습니다:

sitemcp https://example.com --no-cache

SiteMCP를 MCP 클라이언트와 통합하기

SiteMCP의 진정한 힘은 MCP 호환 AI 클라이언트와 통합할 때 발휘됩니다. 인기 있는 AI 도우미인 Claude Desktop을 사용하여 이를 설정하는 방법을 살펴보겠습니다:

Claude Desktop 구성

Claude Desktop이 SiteMCP 서버를 사용하도록 구성하려면 구성 파일에 다음을 추가하십시오:

{
  "mcpServers": {
    "daisy-ui": {
      "command": "npx",
      "args": [
        "-y",
        "sitemcp",
        "https://daisyui.com",
        "-m",
        "/components/**"
      ]
    }
  }
}

이 구성은 Claude Desktop에게 "daisy-ui"라는 MCP 서버를 설정하여 DaisyUI 구성 요소 문서에 접근할 수 있게 하라고 지시합니다. Claude Desktop을 재시작하면 필요 시 SiteMCP 서버를 자동으로 실행합니다.

실용적인 사용 사례

라이브러리 문서 접근

SiteMCP의 가장 강력한 용도 중 하나는 AI 도우미에게 라이브러리 문서에 접근할 수 있게 해주는 것입니다:

{
  "mcpServers": {
    "svelte": {
      "command": "npx",
      "args": [
        "-y",
        "sitemcp@latest",
        "https://svelte.dev",
        "-m",
        "/docs/**"
      ]
    }
  }
}

이 구성은 AI가 최신 Svelte 문서를 참조할 수 있게 하여 코드 제안 및 설명이 AI가 학습 중에 배운 구식 정보가 아닌 현재 모범 사례를 반영하도록 합니다.

개인 웹사이트 통합

자신의 개인 웹사이트를 AI가 접근할 수 있도록 만들 수도 있습니다:

{
  "mcpServers": {
    "my-blog": {
      "command": "npx",
      "args": [
        "-y",
        "sitemcp@latest",
        "https://yourblog.com"
      ]
    }
  }
}

이것은 AI가 당신의 글쓰기 스타일, 과거 기사 또는 개인 문서를 참조할 수 있도록 하여 그들의 응답이 특정 맥락에 더 적합하게 만듭니다.

SiteMCP 작동 방식 이해하기

SiteMCP는 두 개의 똑똑한 서버 아키텍처를 통해 작동합니다:

인덱스 서버: 제목과 URL이 있는 사용 가능한 페이지 목록을 제공합니다.
문서 서버: 요청 시 특정 페이지의 실제 콘텐츠를 검색합니다.

이 접근 방식은 AI가 먼저 어떤 정보가 있을지 이해하고 필요한 정보를 선택적으로 검색할 수 있게 하여 한 번에 모든 정보를 제공하는 것과 비교할 때 토큰 사용을 상당히 줄입니다.

페이지가 특히 길 경우, SiteMCP는 신뢰할 수 있는 접근을 보장하기 위해 페이지 매김을 구현합니다. 일부 AI 모델은 매우 큰 문서에서 어려움을 겪을 수 있습니다.

일반 문제 해결

긴 도구 이름

일부 사용자는 특정 MCP 클라이언트에서 도구 이름이 64자 제한을 초과하는 문제를 겪었습니다. 최신 버전(v0.3.0 이상)은 이 문제를 해결했지만, 유사한 문제가 발생하면 최신 버전으로 업데이트하는 것이 좋습니다.

서버 통신 오류

JSONRPC 오류 {"jsonrpc":"2.0","id":XX,"error":{"code":-32601,"message":"Method not found"}} 같은 문제가 발생하면, SiteMCP의 최신 버전을 사용하고 있는지 확인하십시오. 이 버전에는 여러 MCP 클라이언트와의 호환성을 위한 수정 사항이 포함되어 있습니다.

성능 고려사항

매우 큰 웹사이트의 경우 가져올 페이지를 제한하기 위해 매치 매개변수를 사용하는 것을 고려하세요:

sitemcp https://large-documentation-site.com -m "/get-started/**" "/api/**"

이는 성능을 극적으로 개선하고 리소스 사용을 줄일 수 있습니다.

고급 SiteMCP 적용

맞춤형 지식 베이스 생성하기

기존 웹사이트 외에도 SiteMCP를 사용하여 로컬에서 제공되는 콘텐츠를 지목하며 맞춤형 지식 베이스를 생성할 수 있습니다:

# 먼저 로컬 문서를 제공하세요
npx serve ./my-docs

# 그런 다음 다른 터미널에서 그것으로부터 MCP 서버를 생성합니다
sitemcp http://localhost:3000

여러 지식 소스 결합하기

AI가 다양한 정보 소스에 접근할 수 있도록 MCP 클라이언트에 여러 SiteMCP 서버를 구성할 수 있습니다:

{
  "mcpServers": {
    "technical-docs": {
      "command": "npx",
      "args": ["-y", "sitemcp@latest", "https://docs.example.com"]
    },
    "company-blog": {
      "command": "npx",
      "args": ["-y", "sitemcp@latest", "https://blog.example.com"]
    }
  }
}

결론

SiteMCP는 AI 상호작용에서 가장 일반적인 문제 중 하나인 AI 모델에 특정 외부 지식을 제공하는 우아한 해결책을 제공합니다. 웹사이트를 MCP 서버로 변환함으로써 웹 콘텐츠와 AI 기능 간의 격차를 메워주며, 더 정보에 기반하고 정확하며 맥락적으로 관련성 있는 AI 응답을 가능하게 합니다.

문서에 대한 특정 접근을 제공하고자 하는 개발자이든, 자신의 작업을 AI가 참조하기를 원하는 콘텐츠 제작자이든, AI가 할 수 있는 것을 확장하려는 AI 애호가이든 간에 SiteMCP는 AI-인간 협력을 향상시키는 간단한 방법을 제공합니다.

AI 환경이 계속 발전함에 따라 웹 리소스와 AI 모델 간의 정보 흐름을 촉진하는 SiteMCP와 같은 도구는 점점 더 가치 있게 될 것입니다. SiteMCP를 숙달함으로써, 단순히 도구를 배우는 것이 아니라, 웹의 방대한 지식을 활용하여 AI 도우미가 더욱 유용하고 정확하며 맥락적으로 인식할 수 있도록 하는 새로운 AI 상호작용 패러다임을 수용하는 것입니다.