Claude MCP 추천 10가지: Claude 앱·Claude Code 연결 가이드

Claude가 똑똑한데도 노션 회의록, 오류 로그, 웹페이지 내용을 매번 복사해 붙여넣고 있나요?

프롬프트보다 연결의 문제일 수 있습니다. Claude는 기본 상태에서 내 Notion, GitHub, 데이터베이스에 임의로 접근할 수 없습니다. MCP를 연결하면 사용자가 허용한 서비스와 범위 안에서 정보를 확인하고 도구를 사용할 수 있습니다.

이 글에서는 MCP를 많이 나열하지 않습니다. 실무에서 활용도가 높은 10개를 골라 누구에게 필요한지, 어떻게 연결하는지, 첫 요청은 어떻게 해야 하는지까지 설명합니다.

먼저 답부터: 어떤 MCP를 골라야 하나요?

문서와 회의록은 Notion, 웹 조사는 Firecrawl, 화면 테스트는 Playwright가 잘 맞습니다. 바이브코딩 중 최신 문서가 필요하면 Context7, 데이터베이스는 Supabase, 배포 확인은 Vercel, 저장소 작업은 GitHub부터 살펴보세요.

처음에는 10개를 모두 설치하지 말고, 가장 자주 복사하거나 직접 확인하는 도구 하나를 고르는 것이 좋습니다. 데이터와 외부 서비스에 연결할 때는 읽기 전용과 최소 권한으로 시작하세요.

MCP가 무엇인가요?

MCP(Model Context Protocol)는 AI와 외부 도구가 연결되는 공통 규격입니다. USB-C 규격으로 여러 장치를 연결하듯, Claude가 서로 다른 서비스의 데이터와 기능을 일정한 방식으로 사용할 수 있게 합니다.

사용자 요청
   ↓
Claude
   ↓
MCP 연결
   ├─ Notion
   ├─ GitHub
   ├─ 브라우저
   └─ 데이터베이스

MCP를 연결한다고 Claude가 모든 자료를 마음대로 보는 것은 아닙니다. 로그인한 계정, 공유한 페이지, 선택한 프로젝트, 부여한 권한 안에서만 작동합니다.

MCP, Skill, Plugin, Connector의 차이

이 네 용어가 섞이면 설치 단계에서 혼란이 생깁니다.

Skill이 어떻게 일할지 알려준다면 MCP는 어떤 도구를 사용할지 연결합니다. Plugin은 MCP와 사용법을 함께 묶어 제공할 수 있고, Connector는 Claude 앱에서 원격 MCP를 연결하는 화면입니다.

Claude 앱과 Claude Code 중 어디에 연결할까요?

Claude 앱에서 원격 MCP 연결하기

1단계. Connectors 열기

Claude의 사이드바에서 Settings → Connectors로 이동합니다.

2단계. Custom Connector 추가하기

Add custom connector를 선택하고 서비스 이름과 공식 MCP 주소를 입력합니다.

3단계. 로그인과 권한 확인하기

브라우저 로그인 화면이 열리면 접근할 계정과 범위를 확인한 뒤 허용합니다.

4단계. 새 대화에서 테스트하기

처음에는 수정하지 말고 “접근 가능한 항목의 이름만 보여줘”처럼 읽기 요청부터 실행합니다.

Custom Connector는 원격 HTTP MCP에 적합합니다. npx로 실행하는 로컬 MCP는 Claude Desktop 설정 파일 또는 해당 서비스가 안내하는 설치 방식이 필요합니다.

Claude Code에서 MCP 연결하기

원격 MCP의 기본 형태입니다.

claude mcp add --transport http [이름] [MCP 주소]

내 컴퓨터에서 실행되는 로컬 MCP는 다음 형태를 사용합니다.

claude mcp add [이름] -- npx -y [패키지 이름]

연결 상태는 터미널 또는 Claude Code 안에서 확인할 수 있습니다.

claude mcp list

/mcp

• --transport http: 인터넷 주소에 있는 원격 MCP에 연결합니다.
• --scope project: 설정을 프로젝트의 .mcp.json에 저장해 팀과 공유합니다.
• --scope user: 여러 프로젝트에서 사용할 수 있게 사용자 범위에 저장합니다.
• --: 앞은 Claude 옵션, 뒤는 실제 MCP 서버를 실행할 명령이라는 구분입니다.

내게 필요한 MCP 고르는 방법

유명한 MCP부터 설치하지 말고 반복 작업부터 찾으세요.

1. 어떤 앱에서 자료를 가장 자주 복사해 오나요?
2. Claude가 직접 확인했으면 하는 화면은 무엇인가요?
3. 읽기만 필요하나요, 수정까지 필요한가요?
4. 개인정보나 운영 데이터가 포함되어 있나요?
5. 공식 서버 또는 신뢰할 수 있는 제공자인가요?

1. Notion — 문서와 데이터베이스 연결

회의록, 기획 문서, 할 일을 Notion에 쌓는다면 가장 먼저 체감하기 좋은 MCP입니다. 허용된 페이지를 읽고 검색하며, 권한이 있다면 페이지와 데이터베이스를 수정할 수도 있습니다.

Claude 앱

Connectors에서 Notion을 찾아 연결합니다. 목록에 없다면 Custom Connector에 다음 주소를 사용합니다.

https://mcp.notion.com/mcp

Claude Code

claude mcp add --transport http notion https://mcp.notion.com/mcp

Claude Code를 열고 /mcp에서 Notion을 선택한 뒤 브라우저 로그인을 완료합니다.

첫 테스트

현재 접근할 수 있는 Notion 페이지를 확인해줘.
페이지를 수정하지 말고 제목만 목록으로 정리해줘.

실전 요청

Notion에서 이번 주 회의록을 찾아줘.

다음 형식으로 정리해:
1. 결정된 내용
2. 담당자가 있는 할 일
3. 아직 결정되지 않은 내용
4. 다음 회의에서 확인할 질문

먼저 읽기만 하고, 내가 확인하기 전에는 페이지를 수정하지 마.

페이지가 보이지 않는다면 Notion에서 해당 페이지의 연결 또는 공유 범위를 확인하세요.

2. Figma — 디자인 시안을 구현 맥락으로 연결

Figma MCP는 선택한 프레임의 구조, 컴포넌트, 색상, 간격 같은 디자인 정보를 Claude에 전달합니다. 화면을 눈대중으로 따라 만드는 대신 실제 디자인 맥락을 기준으로 구현하고 비교할 수 있습니다.

Figma는 현재 대부분의 사용자에게 원격 MCP를 권장합니다. Claude Code에서는 공식 Plugin을 설치하면 MCP 설정과 Figma 작업용 Skill이 함께 추가됩니다.

claude plugin install figma@claude-plugins-official

Plugin 대신 원격 MCP만 직접 연결할 수도 있습니다.

claude mcp add --scope user --transport http figma https://mcp.figma.com/mcp

새 Claude Code 세션에서 /mcp를 열고 Figma 인증을 완료하세요.

특정 조직 환경에서 Figma Desktop의 로컬 서버가 필요하다면 Dev Mode에서 서버를 켠 뒤 다음 주소를 연결합니다.

claude mcp add --transport http figma-desktop http://127.0.0.1:3845/mcp

첫 테스트

Figma에서 선택한 프레임을 확인해줘.

아직 코드는 수정하지 말고 다음만 정리해:
- 화면 구조
- 사용된 색상
- 글자 크기
- 간격 규칙
- 반복되는 컴포넌트

실전 요청

선택한 Figma 프레임을 현재 프로젝트에 구현해줘.

조건:
- 기존 컴포넌트와 디자인 토큰을 먼저 확인할 것
- 새 컴포넌트보다 재사용 가능한 요소를 우선할 것
- 모바일과 데스크톱 레이아웃을 모두 반영할 것
- 구현 후 Figma와 다른 부분을 목록으로 정리할 것

Figma 요금제와 Dev Mode 사용 권한에 따라 제공 기능이 달라질 수 있습니다.

3. Playwright — 브라우저를 직접 조작하고 테스트

Playwright MCP는 접근성 트리를 이용해 버튼을 누르고, 폼을 입력하고, 화면 이동을 확인합니다. “코드상으로는 맞다”를 넘어 실제 사용자 흐름이 작동하는지 확인할 때 유용합니다.

Node.js 18 이상이 필요합니다.

claude mcp add playwright npx @playwright/mcp@latest

Claude Desktop에서는 설정 파일의 mcpServers에 다음 구성을 추가할 수 있습니다.

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["@playwright/mcp@latest"]
    }
  }
}

첫 테스트

브라우저를 열고 내 사이트의 첫 화면을 확인해줘.
아무것도 입력하거나 제출하지 말고,
페이지 제목과 주요 버튼만 정리해줘.

실전 요청

회원가입 화면을 실제 사용자처럼 테스트해줘.

확인할 것:
1. 필수 입력값 안내
2. 잘못된 이메일 형식 처리
3. 비밀번호 조건
4. 모바일에서 버튼이 잘리는지
5. 완료 화면까지 이동할 수 있는지

테스트 데이터를 사용하고 실제 계정은 만들지 마.
발견한 문제를 우선순위대로 정리해줘.

로그인, 결제, 메시지 전송처럼 실제 상태가 바뀌는 작업은 실행 전에 승인을 받도록 요청하세요.

4. Supabase — 데이터베이스를 자연어로 확인

Supabase MCP는 테이블 구조와 데이터를 조회하고 개발 작업을 도울 수 있습니다. 공식 문서는 운영 환경보다 개발·테스트 프로젝트 사용을 권장합니다.

claude mcp add --scope project --transport http supabase "https://mcp.supabase.com/mcp"

처음에는 프로젝트 범위와 읽기 전용 옵션을 적용한 주소를 Supabase 공식 설정 화면에서 생성하는 방법을 권장합니다. 직접 구성한다면 다음 쿼리 옵션을 사용합니다.

https://mcp.supabase.com/mcp?project_ref=내_프로젝트_ID&read_only=true

첫 테스트

연결된 Supabase 프로젝트의 테이블 이름과 역할을 설명해줘.
데이터 내용은 조회하지 말고 구조만 확인해줘.

실전 요청

최근 30일 동안 가입한 사용자 수를 날짜별로 집계해줘.

조건:
- 읽기 전용으로 조회할 것
- 이메일과 이름 등 개인정보는 출력하지 말 것
- 실행할 쿼리를 먼저 보여줄 것
- 결과는 표로 정리할 것

5. Vercel — 배포 상태와 오류 확인

Vercel 공식 원격 MCP는 문서를 검색하고 프로젝트와 배포 상태를 확인하며 배포 로그를 분석합니다.

Claude 앱

Custom Connector에 다음 주소를 입력합니다.

https://mcp.vercel.com

Claude Code

claude mcp add --transport http vercel https://mcp.vercel.com

/mcp에서 브라우저 인증을 완료합니다.

실전 요청

최근 실패한 배포를 확인하고 원인을 분석해줘.

다음 순서로 알려줘:
1. 실패한 단계
2. 관련성이 높은 오류 로그
3. 예상 원인
4. 수정이 필요한 파일
5. 다시 배포하기 전 확인할 항목

내 승인 없이 설정을 바꾸거나 재배포하지 마.

Vercel MCP에는 연결한 사용자 계정과 같은 수준의 접근 권한이 적용될 수 있습니다. 공식 주소가 mcp.vercel.com인지 확인하세요.

6. Firecrawl — 웹페이지를 조사 자료로 변환

Firecrawl MCP는 웹페이지 검색, 내용 추출, 여러 페이지 조사에 적합합니다. 경쟁사 분석이나 자료 조사처럼 웹 콘텐츠를 반복해서 수집하는 사람에게 유용합니다.

Firecrawl은 API 키가 필요합니다. Claude Code에서는 키를 URL에 직접 넣기보다 환경변수로 전달하는 로컬 방식을 먼저 권장합니다.

claude mcp add firecrawl \
  --env FIRECRAWL_API_KEY=내_API_키 \
  -- npx -y firecrawl-mcp

원격 MCP를 사용한다면 공식 대시보드에서 만든 키를 다음 주소에 포함합니다.

https://mcp.firecrawl.dev/내_API_키/v2/mcp

실전 요청

아래 경쟁사 페이지 3개를 각각 조사해줘.

[URL 1]
[URL 2]
[URL 3]

비교 항목:
- 주요 고객
- 핵심 기능
- 가격 구조
- 첫 화면의 메시지
- CTA
- 차별점

페이지에서 확인되지 않은 내용은 추측하지 말고
'확인되지 않음'이라고 표시해줘.
출처 URL과 확인 날짜도 남겨줘.

처음부터 사이트 전체를 수집하지 말고 필요한 페이지부터 시작하세요. 서비스 이용약관과 수집 대상 사이트의 정책도 확인해야 합니다.

7. shadcn — 최신 UI 컴포넌트 검색과 설치

shadcn MCP는 등록된 UI 컴포넌트와 블록을 검색하고 프로젝트에 설치합니다. 프로젝트의 components.json에 설정된 공개·사설 레지스트리를 사용할 수 있습니다.

프로젝트 폴더에서 실행합니다.

npx shadcn@latest mcp init --client claude

설정 후 Claude Code를 다시 시작하고 /mcp에서 shadcn이 연결됐는지 확인합니다.

직접 .mcp.json을 작성한다면 다음 형태입니다.

{
  "mcpServers": {
    "shadcn": {
      "command": "npx",
      "args": ["shadcn@latest", "mcp"]
    }
  }
}

실전 요청

현재 프로젝트에 로그인 폼을 만들어줘.

조건:
- shadcn 공식 컴포넌트를 우선 사용할 것
- 기존 디자인 토큰을 유지할 것
- 이메일과 비밀번호 오류 상태를 포함할 것
- 모바일에서도 입력하기 편하게 만들 것
- 설치한 컴포넌트와 수정한 파일을 정리할 것

components.json이 없다면 먼저 npx shadcn@latest init으로 프로젝트를 설정하세요.

8. Chrome DevTools — 느리고 깨지는 원인 진단

Playwright가 사용자의 클릭과 이동을 재현한다면 Chrome DevTools는 성능 기록, 네트워크 요청, 콘솔 오류를 분석합니다.

Claude Code에서는 Google이 안내하는 공식 Plugin 설치가 편리합니다.

/plugin marketplace add ChromeDevTools/chrome-devtools-mcp
/plugin install chrome-devtools-mcp@chrome-devtools-plugins

다른 MCP 클라이언트의 JSON 설정은 다음과 같습니다.

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["-y", "chrome-devtools-mcp@latest"]
    }
  }
}

실전 요청

모바일 환경을 기준으로 이 페이지의 성능을 진단해줘.

확인할 것:
- 가장 늦게 표시되는 주요 요소
- 용량이 큰 이미지와 스크립트
- 오래 걸리는 네트워크 요청
- 레이아웃이 움직이는 원인
- 수정 효과가 큰 순서

측정 결과와 추측을 구분해서 작성해줘.

9. Context7 — 최신 라이브러리 문서 연결

Context7은 React, Next.js, Prisma처럼 버전이 자주 바뀌는 라이브러리의 현재 문서를 찾아 Claude에 제공합니다.

Claude Code에서는 자동 설정이 가장 간단합니다.

npx ctx7 setup --claude

설정 과정에서 MCP 방식 또는 CLI와 Skill 방식을 선택할 수 있습니다. 수동으로 원격 MCP를 연결할 때는 API 키를 헤더로 전달합니다.

claude mcp add --scope user \
  --header "CONTEXT7_API_KEY: 내_API_키" \
  --transport http context7 https://mcp.context7.com/mcp

실전 요청

Context7의 최신 공식 문서를 기준으로
현재 프로젝트 버전에 맞는 예제를 작성해줘.

조건:
- 설치된 라이브러리 버전을 먼저 확인할 것
- 더 이상 권장되지 않는 API는 사용하지 말 것
- 참고한 문서 제목을 남길 것
- 코드 아래에 각 부분의 역할을 설명할 것

단순히 use context7만 붙이기보다 라이브러리 이름, 버전, 해결할 문제를 함께 알려주세요.

10. GitHub — 이슈·PR·Actions 연결

GitHub 공식 MCP는 저장소 내용, 이슈, Pull Request, GitHub Actions 등을 Claude와 연결합니다.

가장 간단한 공식 로컬 방식은 Docker와 브라우저 OAuth를 사용합니다.

claude mcp add github \
  -e GITHUB_OAUTH_CALLBACK_PORT=8085 \
  -- docker run -i --rm \
  -p 127.0.0.1:8085:8085 \
  -e GITHUB_OAUTH_CALLBACK_PORT \
  ghcr.io/github/github-mcp-server

Docker 없이 원격 서버에 연결하려면 GitHub Personal Access Token이 필요합니다. 토큰을 명령에 직접 남기지 말고 환경변수나 안전한 비밀 저장소를 사용하세요.

실전 요청

이 저장소의 열린 이슈를 확인해줘.

다음 기준으로 정리해:
- 버그
- 기능 요청
- 문서 작업
- 추가 정보가 필요한 이슈

각 이슈의 우선순위와 판단 이유를 설명하되,
내 승인 없이 이슈를 수정하거나 PR을 만들지 마.

GitHub는 repos, issues, pull_requests, actions처럼 필요한 도구 그룹만 허용할 수 있습니다. 사용하지 않는 기능을 줄이면 권한과 도구 선택이 더 명확해집니다.

처음에는 이 조합으로 시작하세요

표에 있는 도구를 한꺼번에 설치할 필요는 없습니다. 가장 자주 복사하거나 직접 확인하는 작업 하나를 골라 일주일 동안 사용해 보세요.

MCP를 안전하게 사용하는 네 가지 원칙

1. 필요한 범위만 허용하세요

Notion 전체 대신 필요한 페이지, Supabase 전체 계정 대신 개발 프로젝트처럼 접근 범위를 줄입니다.

2. 읽기 전용으로 시작하세요

처음부터 수정과 배포 권한을 주지 않습니다. 특히 데이터베이스는 읽기 전용과 프로젝트 범위를 함께 설정하세요.

3. 읽기와 실행을 분리하세요

다음 요청을 기본 안전 프롬프트로 활용할 수 있습니다.

먼저 현재 상태를 읽고 분석해줘.
변경할 내용을 목록으로 보여준 뒤 내 승인을 기다려줘.
승인 전에는 파일, 데이터, 설정을 수정하지 마.

4. 민감 정보를 프롬프트에 넣지 마세요

비밀번호, API 키, 결제 정보, 고객 개인정보를 대화에 직접 붙여넣지 않습니다. 공식 OAuth와 환경변수, 비밀 저장 기능을 사용하세요.

연결이 안 될 때 확인하세요

최종 체크리스트

MCP를 연결하기 전 확인하세요.

□ 반복해서 사용하는 앱을 기준으로 MCP를 골랐나요?
□ 공식 서버나 신뢰할 수 있는 제공자인가요?
□ Claude 앱과 Claude Code 중 사용할 환경을 정했나요?
□ 로그인할 때 접근 범위를 확인했나요?
□ 데이터 도구는 개발 환경과 읽기 전용으로 시작했나요?
□ 첫 테스트에서는 조회만 요청했나요?
□ 수정·배포·전송은 승인 후 실행하도록 했나요?
□ 사용하지 않는 연결과 권한을 해제했나요?

MCP의 핵심은 Claude에 많은 도구를 붙이는 것이 아닙니다. 사람이 반복해서 하던 앱 사이의 이동을 줄이고, 필요한 정보를 확인한 뒤 다음 작업까지 자연스럽게 이어지게 만드는 것입니다.

오늘은 10개를 모두 설치하지 마세요. 이번 주에 가장 많이 복사했던 자료가 있는 도구 하나만 연결해 보세요. 그것만으로도 Claude를 사용하는 방식이 달라집니다.