클로드 코드에 무조건 깔아야 하는 MCP 5개

클로드는 기본 상태에서 인터넷을 못 보고, 브라우저도 못 열고, 이미지도 못 만듭니다. 아는 것만 가지고 대답하니까 옛날 정보로 헛소리를 하는 겁니다. 이 자료는 그 구멍을 메워 주는 연결 도구 5개를 한 번에 설치하고, 진짜로 붙었는지 눈으로 확인하는 순서를 담았습니다.

⚡ 복사해서 바로 시작하는 프롬프트: 설치부터 검증까지 AI에게 맡기기

역할: MCP 서버 5개(Perplexity, Playwright, Firecrawl, Glif, Chrome DevTools)의 설치와 연결 검증을 맡는 담당
맥락: 이 컴퓨터에는 5개가 아직 설치되지 않았을 수 있고, 클로드 코드가 최신 정보를 못 찾거나 브라우저를 못 여는 상태입니다
입력: <운영체제와 셸, 예: macOS zsh>, <기술 스택, 예: Next.js 웹 프로젝트>, <목표 한 줄, 예: 클로드가 웹을 직접 보고 테스트까지 하게 만들고 싶다>
작업: 아래 네 단계를 순서대로 진행하세요.
1. 설치 여부 확인: `claude --version`과 `node --version`을 실행해 둘 다 버전이 나오는지 보세요. 이어서 `claude mcp list`를 실행해 perplexity, playwright, firecrawl, glif, chrome-devtools 중 이미 등록된 것이 있는지 확인하고, 이미 있으면 다시 추가하지 말고 상태만 보고하세요.
2. 미설치 시 설치: 없는 것만 골라서 아래 명령을 실행하세요. `claude mcp add playwright -- npx @playwright/mcp@latest`, `claude mcp add chrome-devtools -- npx chrome-devtools-mcp@latest`, `claude mcp add --transport http glif "https://glif.app/api/mcp"`. API 키가 필요한 두 개는 사용자에게 키를 먼저 받은 뒤 `claude mcp add perplexity --env PERPLEXITY_API_KEY="<사용자 키>" -- npx -y @perplexity-ai/mcp-server`와 `claude mcp add firecrawl --env FIRECRAWL_API_KEY="<사용자 키>" -- npx -y firecrawl-mcp`를 실행하세요. 키를 못 받으면 그 두 개는 건너뛰고 이유를 알려주세요.
3. 연결 검증: `claude mcp list`를 실행해 각 줄 끝에 무엇이 표시되는지 그대로 보고하세요. Connected가 아닌 항목은 원인을 찾아 고치세요. glif는 브라우저 로그인이 필요하므로 인증 대기 상태로 나오는 것이 정상이며, 사용자에게 로그인 방법을 안내하세요.
4. 마지막에 5개가 각각 무엇을 해 주고 앞으로 어떻게 쓰면 되는지, 개발을 처음 하는 사람도 이해할 수 있는 말로 5줄 이내로 설명하세요.
제약: API 키 값을 화면이나 로그에 출력하지 마세요. .env 파일을 읽거나 내용을 보여주지 마세요. 기존에 등록된 MCP 설정을 지우거나 덮어쓰지 마세요. 이미 설치된 항목은 중복 등록하지 마세요.
출력: 실제로 실행한 명령 목록, `claude mcp list`의 결과 그대로, 새로 등록된 서버 이름, 남아 있는 오류를 정리해 주세요.
검증: `claude mcp list`에서 playwright, chrome-devtools가 Connected로 보이고, 키를 넣은 perplexity와 firecrawl도 Connected로 보여야 합니다. 하나라도 실패하면 완료로 보고하지 말고 실패한 명령과 원인, 다음 조치를 알려주세요.

Quick Start

공식 사이트: playwright.dev/mcp · firecrawl.dev · glif.app/mcp · docs.perplexity.ai
공식 GitHub: microsoft/playwright-mcp · firecrawl/firecrawl-mcp-server · ChromeDevTools/chrome-devtools-mcp · perplexityai/modelcontextprotocol · glifxyz/glif-mcp-server

키가 필요 없는 3개부터 답니다. 터미널에 아래 블록을 통째로 붙여넣으세요.

claude mcp add playwright -- npx @playwright/mcp@latest
claude mcp add chrome-devtools -- npx chrome-devtools-mcp@latest
claude mcp add --transport http glif "https://glif.app/api/mcp"

성공하면 Added stdio MCP server playwright ...처럼 추가됐다는 줄이 하나씩 나옵니다.

제대로 붙었는지 확인하는 명령입니다.

claude mcp list

이름 옆에 ✔ Connected가 뜨면 연결된 겁니다. glif는 로그인 전이라 ! Needs authentication으로 나오는 게 정상입니다.

MCP 5개가 클로드에 붙는 전체 흐름

STEP 1. 준비물 확인: 2분

이 단계에서는 설치가 중간에 멈추지 않도록 필요한 프로그램 두 개가 있는지 먼저 봅니다. 하나라도 없으면 다음 단계에서 오류가 납니다.

용어: 터미널은 명령어를 글로 입력하는 검은 창입니다. macOS는 터미널 앱, Windows는 PowerShell을 쓰면 됩니다.

버전을 확인하는 명령입니다. 설치가 되어 있는지 보는 용도입니다.

claude --version
node --version

두 줄 모두 숫자가 나오면 준비 끝입니다. command not found가 나온 것만 아래에서 설치하세요.

클로드 코드가 없다면 공식 페이지에서 설치하고 로그인까지 마칩니다. Node.js가 없다면 nodejs.org에서 LTS 버전을 받으세요. 여기서 설치할 5개는 전부 Node.js 위에서 돕니다.

STEP 2. MCP가 뭔지 30초만 알기: 1분

이 단계는 설치 전에 딱 한 번만 읽으면 됩니다. 이걸 알아야 나중에 뭘 고쳐야 할지 감이 옵니다.

용어: MCP는 클로드를 바깥 도구에 연결해 주는 규격입니다. 콘센트 규격이라고 보면 됩니다. 클로드가 본체, MCP 서버가 거기 꽂는 플러그입니다.

클로드는 원래 자기가 배운 내용만 가지고 대답합니다. 인터넷을 못 보고, 브라우저를 못 열고, 이미지를 못 만듭니다. MCP 서버를 꽂으면 그때부터 클로드가 그 도구를 직접 씁니다.

아래 5개는 서로 겹치지 않습니다. 막는 구멍이 각각 다릅니다.

도구	채우는 구멍	키 필요
Perplexity	최신 정보: 실시간 웹 검색으로 대답합니다	필요
Playwright	브라우저 조작: 직접 클릭하고 입력하며 테스트합니다	불필요
Firecrawl	문서 수집: 사이트 통째로 긁어 대화창에 넣습니다	무료는 불필요
Glif	이미지·영상 생성: 수백 개 모델을 대신 골라 씁니다	로그인
Chrome DevTools	내 브라우저: 지금 보고 있는 화면을 같이 봅니다	불필요

5개가 각각 채우는 구멍

STEP 3. 키 없이 되는 3개 먼저 설치: 3분

이 단계에서는 회원가입이 필요 없는 3개를 먼저 붙입니다. 여기까지만 해도 클로드가 브라우저를 다룰 수 있게 됩니다.

Playwright를 등록하는 명령입니다. 클로드가 쓸 자동화 브라우저를 붙입니다.

claude mcp add playwright -- npx @playwright/mcp@latest

Added stdio MCP server playwright with command: npx @playwright/mcp@latest to local config가 나오면 성공입니다.

Chrome DevTools를 등록하는 명령입니다. 내가 쓰는 크롬을 붙입니다.

claude mcp add chrome-devtools -- npx chrome-devtools-mcp@latest

같은 모양으로 Added stdio MCP server chrome-devtools ...가 나옵니다.

Glif를 등록하는 명령입니다. 이건 내 컴퓨터에 설치하는 게 아니라 인터넷 주소에 연결하는 방식입니다.

claude mcp add --transport http glif "https://glif.app/api/mcp"

Added HTTP MCP server glif with URL: https://glif.app/api/mcp가 나오면 됩니다.

용어: 로컬(local) 설정은 지금 있는 폴더에서만 적용된다는 뜻입니다. 어느 폴더에서 쓰든 켜지게 하려면 명령 뒤에 --scope user를 붙이세요.

STEP 4. 키가 필요한 2개 설치: 5분

이 단계에서는 무료 회원가입 후 키를 받아 나머지 2개를 붙입니다. 이 두 개가 최신 정보와 문서 수집을 담당합니다.

용어: API 키는 서비스가 나를 알아보는 비밀번호 문자열입니다. 남에게 보여주면 안 되고, 화면 공유나 영상에도 노출하지 마세요.

먼저 perplexity.ai/settings/api에서 키를 만듭니다. 그 키를 아래 명령의 따옴표 안에 붙여넣고 실행하세요. Perplexity를 등록하는 명령입니다.

claude mcp add perplexity --env PERPLEXITY_API_KEY="여기에_내_키_붙여넣기" -- npx -y @perplexity-ai/mcp-server

Added stdio MCP server perplexity ...가 나오면 성공입니다.

다음은 firecrawl.dev/app/api-keys에서 키를 만듭니다. Firecrawl 키는 fc-로 시작합니다. Firecrawl을 등록하는 명령입니다.

claude mcp add firecrawl --env FIRECRAWL_API_KEY="fc-여기에_내_키_붙여넣기" -- npx -y firecrawl-mcp

Added stdio MCP server firecrawl ...가 나오면 됩니다.

가입이 귀찮으면 Firecrawl은 키 없이 붙일 수도 있습니다. 공식 무료 주소를 쓰는 방법이고, 대신 긁어오는 양에 제한이 걸립니다.

claude mcp add --transport http firecrawl "https://mcp.firecrawl.dev/v2/mcp"

이 무료 방식에서는 검색과 페이지 읽기만 됩니다. 사이트 전체 크롤링은 키를 넣어야 열립니다.

STEP 5. 진짜 붙었는지 확인: 2분

이 단계가 제일 중요합니다. 추가됐다는 메시지는 "등록만" 된 것이고, 실제로 통신이 되는지는 따로 봐야 합니다.

등록된 서버와 연결 상태를 한 번에 보는 명령입니다.

claude mcp list

아래처럼 이름 옆에 상태가 붙어서 나옵니다.

perplexity: npx -y @perplexity-ai/mcp-server - ✔ Connected
playwright: npx @playwright/mcp@latest - ✔ Connected
firecrawl: npx -y firecrawl-mcp - ✔ Connected
chrome-devtools: npx chrome-devtools-mcp@latest - ✔ Connected
glif: https://glif.app/api/mcp (HTTP) - ! Needs authentication

✔ Connected면 끝입니다. glif의 ! Needs authentication은 고장이 아니라 로그인을 아직 안 했다는 뜻입니다.

연결 확인 화면 읽는 법

Glif 로그인은 클로드 코드를 켠 뒤 안에서 /mcp를 치고 glif를 고르면 됩니다. 브라우저가 열리면 승인만 누르세요.

STEP 6. 5개를 실제로 써보기: 10분

이 단계에서는 각 도구를 한 번씩 굴려봅니다. 한 번 써봐야 언제 쓸지 감이 잡힙니다.

클로드 코드를 켜고 아래 문장을 그대로 붙여넣으세요. 도구를 지정하지 않아도 클로드가 알아서 골라 씁니다.

Perplexity로 Next.js 최신 버전에서 바뀐 점을 찾아서 3줄로 정리해줘. 출처 링크도 같이 줘.

최신 날짜가 섞인 답과 링크가 나오면 Perplexity가 도는 겁니다.

Playwright로 https://demo.playwright.dev/todomvc 를 열고 "장보기"를 추가한 다음, 목록에 잘 들어갔는지 확인해줘.

브라우저 창이 실제로 뜨고 글자가 입력되는 게 보입니다. 눈으로 보기 싫으면 나중에 --headless 옵션을 붙이면 됩니다.

Firecrawl로 https://docs.firecrawl.dev 문서를 긁어서 핵심 기능 목록만 뽑아줘.

페이지 내용이 정리된 글로 대화창에 들어옵니다.

Glif로 "노란 헬멧 쓴 게으른 로봇" 이미지를 만들어줘.

이미지 주소가 결과로 돌아옵니다. Glif는 요청을 받으면 번호표부터 주고 다 만들어지면 링크를 주는 방식이라, 클로드가 몇 초 기다렸다 가져옵니다.

Chrome DevTools로 지금 열려 있는 탭 목록을 보여주고, 첫 번째 탭에서 콘솔 에러가 있는지 확인해줘.

기본 설정에서는 클로드가 크롬을 새로 하나 띄웁니다. 내가 이미 켜둔 창을 그대로 보게 하려면 STEP 7을 보세요.

실제 사용 예시 4가지

STEP 7. 내가 보고 있는 탭을 클로드에게 보여주기: 5분

이 단계는 선택입니다. 로그인해둔 사이트나 작업 중인 화면을 그대로 보여주고 싶을 때만 하세요.

Chrome DevTools는 기본적으로 클로드 전용 크롬을 새로 엽니다. 내가 쓰던 창에 붙이려면 크롬에서 원격 연결을 먼저 켜야 합니다.

크롬 주소창에 아래를 입력하고 들어갑니다.

chrome://inspect/#remote-debugging

들어가면 연결을 허용할지 묻는 창이 뜹니다. 허용을 누르면 준비 끝입니다.

이제 기존에 등록한 걸 지우고 연결 옵션을 붙여 다시 등록합니다. 아래는 등록을 지우는 명령입니다.

claude mcp remove chrome-devtools

Removed MCP server chrome-devtools가 나옵니다. 이어서 내 크롬에 붙는 옵션으로 다시 등록하는 명령입니다.

claude mcp add chrome-devtools -- npx chrome-devtools-mcp@latest --autoConnect

다시 claude mcp list로 ✔ Connected를 확인하세요. 이제 클로드가 내가 열어둔 탭을 그대로 읽습니다.

용어: 원격 디버깅은 브라우저가 바깥 프로그램의 조작을 허용하는 모드입니다. 켜두면 클로드가 그 창을 볼 수 있으니, 민감한 탭은 닫고 쓰세요.

STEP 8. 5개를 엮어서 한 번에 굴리기: 10분

이 단계에서는 도구를 조합합니다. 한 개씩 쓰는 것보다 여기서 차이가 크게 벌어집니다.

아래 문장을 그대로 붙여넣으세요. 정보 찾기부터 코드 작성, 화면 테스트까지 한 번에 도는 흐름입니다.

1. Perplexity로 <내가 쓰는 라이브러리 이름>의 최신 사용법을 찾아줘.
2. Firecrawl로 그 공식 문서 페이지를 긁어서 실제 코드 예시를 가져와.
3. 그 내용대로 우리 프로젝트에 기능을 구현해줘.
4. Playwright로 브라우저를 열어 그 기능이 실제로 되는지 눌러보고, 안 되면 고쳐줘.

클로드가 검색하고, 문서를 읽고, 코드를 쓰고, 브라우저로 확인하는 순서로 움직입니다.

콘텐츠를 만들 때 쓰는 조합입니다. 다른 사람 페이지를 참고해 이미지까지 뽑는 흐름입니다.

1. Firecrawl로 <참고할 사이트 주소> 를 긁어서 어떤 문구를 쓰는지 정리해줘.
2. 그 톤에 맞춰 내 서비스 소개 문구를 5개 써줘.
3. Glif로 그중 제일 나은 문구에 어울리는 대표 이미지를 만들어줘.

문구와 이미지 링크가 같이 나옵니다.

FAQ

command not found: claude가 나옵니다. 클로드 코드가 아직 설치되지 않았거나 설치 후 터미널을 다시 열지 않은 경우입니다. 공식 페이지에서 설치하고 터미널을 완전히 닫았다가 다시 여세요.

claude mcp list에서 ✘ Failed to connect가 뜹니다. 대부분 키가 틀렸거나 따옴표가 빠진 경우입니다. claude mcp remove <이름>으로 지우고 STEP 4를 다시 하세요. 키를 붙여넣을 때 앞뒤 공백이 섞이지 않았는지 확인하세요.

Playwright가 브라우저를 못 엽니다. 브라우저 파일이 아직 안 받아진 경우입니다. 터미널에서 npx playwright install chrome을 한 번 실행한 뒤 다시 시도하세요.

다른 폴더로 가니까 MCP가 사라졌습니다. 기본값이 로컬(local) 설정이라 그 폴더에서만 켜집니다. claude mcp add 명령 뒤에 --scope user를 붙여 다시 등록하면 모든 폴더에서 켜집니다.

Glif가 계속 Needs authentication입니다. 로그인이 안 끝난 상태입니다. 클로드 코드 안에서 /mcp를 치고 glif를 선택해 브라우저 승인까지 마치세요. 예전에 쓰던 npx @glifxyz/glif-mcp-server와 토큰 방식은 지금 중단됐으니 위 주소 방식으로 등록해야 합니다.

5개 다 깔면 느려지지 않나요? 쓰지 않는 서버는 대기만 하므로 체감 속도에는 큰 영향이 없습니다. 다만 클로드가 도구 목록을 매번 읽으니, 안 쓰는 건 claude mcp remove <이름>으로 정리해 두는 편이 깔끔합니다.

공식 자료

Perplexity MCP 문서: docs.perplexity.ai MCP Server
Perplexity MCP 저장소: perplexityai/modelcontextprotocol
Playwright MCP 문서: playwright.dev/mcp
Playwright MCP 저장소: microsoft/playwright-mcp
Firecrawl MCP 문서: docs.firecrawl.dev/mcp-server
Firecrawl MCP 저장소: firecrawl/firecrawl-mcp-server
Glif MCP 설치 페이지: glif.app/mcp
Glif MCP 저장소: glifxyz/glif-mcp-server
Chrome DevTools MCP 저장소: ChromeDevTools/chrome-devtools-mcp
Chrome DevTools 에이전트 가이드: developer.chrome.com

이 자료가 도움됐다면

이런 AI 활용 자료를 인스타그램에 계속 올리고 있습니다.

: 다음 자료를 가장 먼저 받아볼 수 있습니다
따라 하다 막힌 부분은 릴스 댓글로 남겨주세요. 다음 자료를 만들 때 참고합니다