외부 도구 연결하기 (MCP)
AI 도구가 브라우저, 데이터베이스, GitHub 같은 외부 서비스를 직접 다루게 만드는 연결 방식
AI 도구의 손이 닿는 범위 넓히기
기본 상태의 AI 코딩 도구는 내 컴퓨터의 파일과 터미널만 다룹니다. 그래서 "Supabase 테이블 보고 알려줘"라고 하면 못 봅니다. "배포된 사이트 화면 확인해줘"도 못 합니다.
MCP(Model Context Protocol) 는 AI 도구에 외부 서비스를 "꽂는" 공통 규격입니다. USB처럼, 한 번 꽂으면 AI가 그 서비스를 직접 읽고 조작할 수 있게 됩니다.
입문자에게 유용한 연결 4가지
| 연결 | AI가 할 수 있게 되는 일 | 대체하는 수작업 |
|---|---|---|
| 브라우저 (Playwright 등) | 배포된 화면을 열고, 클릭하고, 캡처 | 내가 폰으로 확인하고 설명 |
| 데이터베이스 (Supabase, Postgres) | 테이블 구조 읽기, 데이터 조회, SQL 실행 | 대시보드 캡처해서 붙여넣기 |
| GitHub | 이슈 읽기, PR 만들기, 코드 검색 | 이슈 내용 복사해서 붙여넣기 |
| 문서/디자인 (Notion, Figma 등) | 기획 문서·디자인 시안 읽기 | 내용을 말로 옮겨 설명 |
연결하는 법 (공통 순서)
- 서비스의 MCP 서버 이름을 찾습니다. 대부분 공식 문서에 "MCP" 항목이 있고,
npx -y @서비스/mcp-server형태의 실행 명령이 있습니다. - AI 도구의 설정에 그 명령을 등록합니다. 도구마다
mcp add같은 명령이나 설정 파일(.mcp.json등)이 있습니다. - 서비스에 로그인하거나 API 키를 넣습니다. 키는 설정 파일에 직접 적지 말고 환경변수로.
- 도구를 재시작하고 "연결된 도구 목록 보여줘"로 확인합니다.
모르겠으면 AI에게 물어보면 됩니다:
"[도구 이름]에 Supabase MCP 서버를 연결하는 방법을 순서대로 알려줘. 내 OS는 macOS야."
연결 후 달라지는 요청
전:
"saved_menus 테이블에 이런 컬럼이 있어: id, name, ingredients, user_id, created_at. 최신순 목록 화면 만들어줘."
후:
"saved_menus 테이블 구조를 직접 확인하고 최신순 목록 화면 만들어줘."
전:
(폰으로 확인) "저장 버튼 누르면 하얗게 돼. 콘솔에는 이런 에러가…"
후:
"배포 주소에서 로그인 → 메뉴 저장 흐름을 브라우저로 직접 실행해보고 문제가 있으면 고쳐줘."
주의할 점
- 권한 범위: 데이터베이스 연결은 되도록 읽기 전용 키로 시작하세요. AI가 "테스트로 지워볼게요"를 하면 실제 데이터가 사라집니다.
- 비용: 브라우저 연결은 화면 캡처를 AI에 보내므로 토큰을 많이 씁니다. 필요할 때만.
- 너무 많이 꽂지 않기: 연결이 10개 넘으면 AI가 어떤 도구를 쓸지 헷갈려 오히려 느려집니다. 지금 프로젝트에 필요한 2~3개만.
- 규칙 파일에 적기: "데이터 조회는 Supabase MCP로 직접 확인한다, 삭제 SQL은 실행하지 않는다" 처럼 CLAUDE.md에 사용 규칙을 적어두면 일관됩니다.
다음 단계
연결이 익숙해지면 19강의 자동화와 만납니다. "매주 월요일 GitHub 이슈를 읽고 TODO.md를 갱신" 같은 작업이 스킬 + MCP 조합으로 가능해집니다.