클로드 코드 MCP 4개 설치법: Supabase·Vercel·크롬 개발자 도구·oh-my-claudecode

0. 계정 준비 순서

순서가 중요해요. 프로그램 → 계정 → 부품 순서로 하면 중간에 안 막혀요.

1. Node.js 설치 — nodejs.org에서 LTS 버전. 크롬 부품과 Vercel 부품이 이걸로 돌아가요. 확인: 터미널에 node -v 를 쳐서 숫자가 나오면 OK (18 이상)
2. 크롬 최신 버전 — 크롬 메뉴 › 도움말 › Chrome 정보에서 업데이트 확인
3. Bun 설치 (Vercel 부품용) — bun.sh 첫 화면에 있는 설치 명령 한 줄을 복사해서 터미널에 붙여넣기. 확인: bun -v
4. Supabase 계정 — supabase.com에서 가입하고 프로젝트를 하나 만들어 두기
5. Vercel 계정 — vercel.com에서 가입 (깃허브 계정으로 가입하면 나중에 연결이 편해요)
6. 클로드 코드를 켜고 아래 부품을 하나씩 설치

Node.js나 Bun 설치가 어려우면 클로드 코드한테 "내 컴퓨터에 Node.js LTS랑 Bun이 깔려 있는지 확인하고, 없으면 공식 사이트 안내대로 설치하는 법을 알려 줘"라고 하세요.

1. Supabase: 데이터베이스를 AI 창에서

한 줄로: 표 만들기, 데이터 꺼내 보기, 구조 바꾸기(마이그레이션), 엣지 함수 배포를 Supabase 관리 화면을 안 열고 클로드한테 시켜요.

왜 필요해요? 사이트에 회원·게시글·예약 같은 정보를 저장하려면 창고(데이터베이스)가 있어야 해요. 원래는 관리 화면에 들어가 버튼을 눌러야 했는데, 이 부품을 끼우면 클로드가 창고 열쇠를 들고 직접 정리해요.

사진: Claude 공식 마켓의 Supabase 페이지. 개발자 Supabase, 설치 수 118,617 (2026-10-26)

따라 하기

/plugin install supabase@claude-plugins-official

설치하고 처음 쓸 때 브라우저가 열리면 Supabase에 로그인하고 접근을 허용하세요.

처음 시켜 볼 문장

내 Supabase 프로젝트 목록을 보여 줘. 그다음 [프로젝트 이름]에 예약 정보를 저장할 표를 만들고 싶은데, 어떤 칸이 필요할지 먼저 제안해 줘. 내가 확인하기 전에는 만들지 마.

확인하는 법: 프로젝트 목록이 나오면 연결된 거예요.

막히면

• 예전에 Supabase MCP를 손으로 추가해 둔 적 있으면 지우세요. 같은 도구가 두 번 생겨요 (공식 안내).
• 다른 AI 도구에도 같이 깔고 싶으면 공식 문서의 한 줄 설치도 있어요: npx plugins add supabase-community/supabase-plugin

2. Vercel: "내 앱 올려 줘" 한마디로 배포

한 줄로: 만든 사이트를 인터넷에 올리고(배포), 올린 기록을 클로드 창에서 봐요.

왜 필요해요? 내 컴퓨터에서만 보이던 사이트를 다른 사람도 주소로 들어오게 하는 게 배포예요. 이삿짐을 트럭에 싣고 가게 문까지 열어 주는 일을 클로드가 해요.

영상 이후 바뀐 점 (2026-10-26): Vercel 공식 플러그인이 새 버전(vercel/vercel-plugin)으로 바뀌었어요. 설치 명령은 같은데, 명령어 이름과 필요한 것(Node.js 18+, Bun)이 달라졌어요. 아래는 새 버전 기준이에요.

따라 하기

/plugin install vercel@claude-plugins-official

설치하면 생기는 명령 4개예요. 입력칸에 /vercel 까지 치면 목록에 떠요 (화면에는 /vercel:deploy 나 /vercel-plugin:deploy 처럼 보여요).

명령 대신 말로 해도 돼요.

내 앱을 Vercel에 미리보기로 올려 줘. 올린 주소를 알려 주고, 오류가 나면 배포 기록을 보고 원인을 설명해 줘.

확인하는 법: 클로드가 알려 준 주소를 폰으로 열어 보세요. 열리면 성공이에요.

막히면

• Vercel 계정 연결: 처음에 Vercel 로그인과 팀 접근 허용을 하라고 나와요. 쓰려는 팀에 권한을 줘야 해요.
• 클로드가 Vercel CLI가 필요하다고 하면: npm install -g vercel 로 깔고 vercel login 으로 로그인하세요.
• 사용 통계: 이 플러그인은 기본으로 사용 통계를 보내요(입력한 글·파일 이름은 안 보낸다고 적혀 있어요). 끄려면 환경 변수 VERCEL_PLUGIN_TELEMETRY=off.

3. 크롬 개발자 도구: AI가 진짜 브라우저로 확인

한 줄로: 클로드가 코드만 쓰고 끝내지 않고, 진짜 크롬을 열어서 오류 메시지(콘솔), 통신(네트워크), 화면 캡처, 속도를 직접 봐요.

왜 필요해요? 지금까지는 눈 감고 그림 그리는 것처럼 짜고 "아마 될 거예요" 했다면, 이제는 눈 뜨고 확인하면서 고쳐요.

사진: 구글 크롬 팀(ChromeDevTools) 공식 저장소. "control and inspect a live Chrome browser" (2026-10-26)

따라 하기 — 둘 중 하나만 하세요.

방법 A. 공식 마켓에서 (제일 쉬워요)

/plugin install chrome-devtools-mcp@claude-plugins-official

방법 B. 공식 저장소 안내대로 (부품 + 사용법 스킬까지)

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

방법 B는 설치 뒤 클로드 코드를 껐다 켜야 해요. /skills 에서 확인할 수 있어요.

연결선(MCP)만 원하면 터미널에서 claude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest 한 줄도 돼요. 이미 이렇게 깔았다면 플러그인으로 다시 깔기 전에 지우라고 공식 안내에 적혀 있어요.

처음 시켜 볼 문장 (공식 안내의 첫 문장을 우리말로)

https://developers.chrome.com 의 성능을 확인해 줘.

크롬이 열리고 성능 기록이 시작되면 된 거예요. 내 사이트에는 이렇게 쓰세요.

내 사이트 [주소]를 크롬으로 열어서 콘솔 오류와 실패한 네트워크 요청이 있는지 보고, 폰 크기 화면 캡처를 찍어 줘. 문제가 있으면 원인과 고칠 곳을 알려 줘.

막히면 / 주의

• AI가 브라우저 안의 내용을 다 볼 수 있어요. 로그인된 은행·메일 같은 건 열어 두지 마세요 (공식 주의 문구).
• 구글이 사용 통계를 기본으로 모아요. 끄려면 설정에 --no-usage-statistics 를 붙여요. 성능 도구는 실제 사용자 속도 자료를 가져오려고 주소를 구글 CrUX에 보낼 수 있어요 (--no-performance-crux 로 끔).
• 공식 지원은 구글 크롬뿐이에요. 다른 크로미움 브라우저는 보장 안 돼요.

4. oh-my-claudecode: 클로드 하나를 AI 팀으로

한 줄로: 설계·조사·디자인·테스트 같은 역할을 나눈 AI 직원 19명을 클로드 안에 두고, 팀 명령 하나로 계획 → 만들기 → 검증을 시켜요.

왜 필요해요? 혼자 다 하는 사람보다, 기획자·개발자·검수자가 나눠 맡으면 빠뜨리는 게 줄어요. 다만 이건 개인 개발자가 만든 공짜 부품이에요 (회사 공식 아님).

사진: oh-my-claudecode 저장소. MIT 라이선스, 별 40.3k (2026-10-25 녹화)

따라 하기 — 클로드 코드 입력칸에 한 줄씩 치세요. 두 줄을 한 번에 붙여넣으면 실패해요 (공식 안내).

/plugin marketplace add https://github.com/Yeachan-Heo/oh-my-claudecode

/plugin install oh-my-claudecode

/omc-setup

처음 시켜 볼 것

/team 3:executor "예약 페이지의 입력 오류 메시지를 전부 한국어로 바꾸고, 바꾼 뒤 확인까지 해 줘"

3:executor 는 실행 담당 3명이라는 뜻이에요. 팀은 계획 → 요구사항 → 실행 → 검증 → 고치기 순서로 돌아요.

막히면 / 주의

• 직원이 많을수록 클로드 구독 사용량도 많이 써요. 처음엔 작은 일부터 해 보세요.
• 명령이 너무 많아 보이면 /autopilot "만들 것" 하나만 써도 돼요.

용어 정리

체크리스트

• node -v 가 18 이상, 크롬 최신, bun -v 가 나온다
• Supabase·Vercel 가입했다
• Supabase 플러그인 설치 → 브라우저 로그인 → 프로젝트 목록이 보인다
• Vercel 플러그인 설치 → /vercel 치면 명령이 뜬다
• 크롬 부품 설치 → 성능 확인 문장에 크롬이 열린다
• oh-my-claudecode 는 한 줄씩 설치하고 /omc-setup 까지 했다
• 로그인된 중요한 사이트는 AI가 여는 크롬에 열어 두지 않는다

출처

• Claude 마켓 › Supabase, Supabase Docs › Plugins, supabase-community/supabase-plugin (2026-10-26 확인)
• vercel/vercel-plugin README (2026-10-26 확인)
• ChromeDevTools/chrome-devtools-mcp README·클라이언트 설정 안내 (2026-10-26 확인, Apache-2.0)
• Yeachan-Heo/oh-my-claudecode README (2026-10-26 확인, MIT)
• anthropics/claude-plugins-official 공식 마켓 목록 (2026-10-26 확인)