GUIDE · Claude MCP

웹 MCP 3개 설치 가이드

읽는 데 6분2026-10-03 공개

웹을 개발할 때 브라우저에서 버튼을 눌러 보는 일, 페이지 본문을 읽는 일, 라이브러리 문서를 찾는 일은 서로 다릅니다. 이 가이드는 Playwright·Fetch·Context7을 클로드 코드 프로젝트에 연결하고 각 도구의 응답을 확인하는 설치 명령과 예제를 정리했습니다.

Quick Start

MCP 서버는 클라이언트가 호출할 수 있는 도구를 제공합니다. Playwright는 브라우저를 조작하고, Fetch는 URL의 본문을 가져오고, Context7은 라이브러리 문서를 검색합니다. 작업에 맞는 서버를 골라 연결하면 어떤 응답을 확인해야 할지도 분명해집니다.

STEP 1에서 빈 연습 프로젝트를 준비합니다.
STEP 2~3에서 브라우저 조작과 본문 수집을 확인합니다.
STEP 4에서 라이브러리 이름을 찾고 문서 예제를 조회합니다.

STEP 1 · 2분연습 프로젝트를 준비한다

Node.js·uv·Claude Code를 준비하고 빈 폴더에서 시작합니다. 프로젝트 범위로 서버를 등록하면 현재 폴더의 .mcp.json에 설정이 기록됩니다. 연습용 앱과 공개 예제 페이지로 연결을 확인합니다.

⚡ 01 · 연습 폴더

mkdir web-mcp-practice
cd web-mcp-practice

성공하면 현재 작업 위치가 web-mcp-practice로 바뀝니다. 서버를 추가한 뒤 Claude Code에서 /mcp를 열어 등록 상태를 확인하고, 사용할 서버와 확인할 동작을 구체적으로 지정합니다.

STEP 2 · 2분Playwright로 버튼 동작을 확인한다

Playwright MCP는 웹 페이지의 접근성 구조를 읽고 요소를 찾아 조작하는 도구를 제공합니다. 먼저 테스트 페이지를 연 뒤 스냅샷에서 버튼을 식별하고 클릭합니다. 클릭 이후의 상태를 다시 읽어야 동작 여부를 확인할 수 있습니다.

⚡ 02 · Playwright 등록

claude mcp add --scope project playwright -- npx -y @playwright/mcp@latest --headless

실제 결과: 가상 카운터 페이지에서 browser_navigate로 페이지를 열고 browser_click으로 Add one 버튼을 눌렀습니다. 클릭 전 숫자는 0, 이후 스냅샷 숫자는 1이었습니다. 설치된 버전의 도구 인자는 도구 목록의 스키마를 기준으로 사용합니다.

STEP 3 · 2분Fetch로 URL의 본문을 읽는다

Fetch 서버는 공개 URL을 받아 페이지 내용을 텍스트로 돌려주는 도구를 제공합니다. 브라우저 버튼 조작이 필요하지 않고 페이지의 글을 읽으려는 상황에 사용합니다. 읽을 주소와 필요한 본문 길이를 함께 지정합니다.

⚡ 03 · Fetch 등록

claude mcp add --scope project fetch -- uvx mcp-server-fetch

실제 결과: 문서용 예제 도메인을 fetch 도구에 전달해 문서 예시용 도메인이라는 설명을 텍스트 응답으로 받았습니다. 읽어 온 내용의 출처 URL을 함께 보관하면 원문을 다시 확인할 수 있습니다.

STEP 4 · 2분Context7으로 개발 문서를 찾는다

Context7은 라이브러리 이름을 식별자로 바꾸는 resolve-library-id와 해당 라이브러리의 문서를 가져오는 query-docs를 제공합니다. 먼저 찾으려는 라이브러리와 질문을 전달하고, 반환된 식별자를 다음 조회에 사용합니다.

⚡ 04 · Context7 등록

claude mcp add --scope project context7 -- npx -y @upstash/context7-mcp

위 명령은 이번에 API 키 없이 실행한 형태입니다. Context7 공식 README는 npx ctx7 setup(OAuth로 키 생성)을 기본 설치로 안내하고, 수동 설치 문서의 Claude Code 명령은 끝에 --api-key YOUR_API_KEY를 붙입니다. 키는 context7.com에서 발급합니다.

⚡ 05 · 문서 조회

Context7으로 Vue의 Composition API에서 ref를 사용한 카운터 예제를 찾아줘. 먼저 라이브러리 식별자를 확인하고 문서 링크와 코드 예제를 함께 보여줘.

실제 결과: Vue 검색에서 /websites/vuejs 식별자를 얻었고, 이어진 조회에서 ref 상태와 버튼 클릭 예제, Vue 문서 링크를 받았습니다. 링크의 함수명과 사용하는 라이브러리 버전을 대조한 뒤 프로젝트에 적용합니다.

알아 둘 한계

확인 기준은 2026년 10월 3일입니다. 세 서버는 임시 프로젝트에 등록하고 MCP SDK로 직접 호출했습니다. Claude 모델의 자율 도구 선택 대화는 검증하지 않았습니다.
Context7은 이번 조회에서 API 키 없이 검색과 문서 응답을 받았습니다. 공식 안내는 높은 호출 한도를 위한 키를 권장합니다. 무키 접근·호출 한도가 계속 유지된다고 보장하지 않습니다. OAuth 설정과 계정 생성은 수행하지 않았습니다.
Fetch가 모든 사이트나 로그인 페이지를 읽는다고 보장하지 않습니다. Playwright는 설치된 브라우저 실행 환경이 필요하며 예제 검증에는 격리된 Chrome을 사용했습니다.
영상은 공식 페이지와 편집 그래픽입니다. 설치 명령은 짧은 인셋으로 표시하고 실제 도구 응답은 검증 근거로 보존했습니다. 단계별 분 표기는 실습 계획이며 실측 완료 시간이 아닙니다.

FAQ

셋 중 하나만 연결해도 되나요? 그렇습니다. 버튼 동작은 Playwright, 본문 읽기는 Fetch, 개발 문서는 Context7부터 선택합니다.

문서 예제대로 쓰면 반드시 작동하나요? 사용하는 버전과 프로젝트 구성을 대조하고 작은 예제로 실행해 확인해야 합니다. 문서 조회가 테스트를 대신하지는 않습니다.

공식 참고 자료

설치 명령과 도구 응답은 2026년 10월 3일에 직접 실행해 확인한 내용입니다.

AI 수익화 정보는 카톡방에 먼저 올립니다 새 자료도 카톡방에 먼저 풀고, 막히는 부분은 거기서 바로 물어보실 수 있습니다. 카톡방 들어가기 →