MCP 서버로 AI 코딩 도구 통합하기
하나의 MCP 서버 백엔드 위에 Claude Code 플러그인을 추가해서, 어떤 AI 코딩 도구를 쓰든 동일한 팀 스킬 경험을 제공하게 된 과정입니다.
바쁘시면 이것만 읽어도 돼요:
MCP 서버 하나로 Claude Code, OpenCode, 직접 연결 세 가지 채널을 동시에 지원
기존에 OpenCode 플러그인만 있었는데, Claude Code 플러그인을 추가해서 도구 선택이 자유로워짐
핵심은 MCP 서버를 한 번 만들어두면 플러그인은 "연결 설정 + 훅"만 추가하면 되는 구조
UserPromptSubmit 훅으로 스킬 존재를 몰랐던 팀원도 자연스럽게 팀 가이드라인을 따르게 됨
MCP 서버 활용이 필요한 사람들
AI 코딩 도구에서 팀 공유 스킬/가이드를 운영하고 있는 분
Claude Code 플러그인을 직접 만들어보려는 분
MCP 서버를 여러 AI 도구에서 동시에 활용하고 싶은 분
기존 AI 도구의 문제점
저희 팀은 코드 리뷰, DB 스키마 참조, 리팩토링 가이드 같은 팀 스킬을 AI Toolkit이라는 내부 플랫폼에서 관리하고 있었습니다. MCP 서버를 통해 AI 코딩 도구에서 이 스킬들을 검색하고 사용할 수 있게 만들어뒀죠.
OpenCode 사용자에게는 이미 플러그인이 있었습니다. 설치하면 MCP 서버가 자동으로 연결되고, 작업을 시작할 때 관련 스킬을 자동으로 검색해서 적용해줬어요.
문제는 Claude Code 사용자였습니다. 플러그인이 없으니 claude mcp add 명령어로 직접 MCP 서버를 등록해야 했고, 스킬 자동 검색도 없었습니다. 도구마다 온보딩 경험이 달랐던 거죠.
> OpenCode: 플러그인 설치 한 줄이면 끝. 스킬 자동 검색까지.
> Claude Code: URL 복사해서 명령어 치고, 브라우저 로그인하고, 스킬은 알아서 찾아 써야 하고...
사용된 도구와 기술
Claude Code: 플러그인 개발 전 과정
모델: Claude Opus 4.6
MCP 서버: 자체 구축 (Next.js + Neon PostgreSQL + Gemini Embeddings)
MCP 서버와 플러그인 개발 과정
기존 구조 분석
시작 전 상황을 정리하면 이런 구조였습니다:
MCP 서버는 이미 잘 동작하고 있었으니, Claude Code 플러그인이 할 일은 명확했습니다:
MCP 서버 자동 연결
스킬 자동 검색 훅
Claude Code 플러그인 개발
Open optionswarp-runnable-command
Claude Code용 플러그인도 만들어줘. OpenCode처럼 MCP 자동 연결 + 스킬 자동 검색Claude Code에게 이렇게 요청했더니, plugin.json 파일 하나로 핵심이 해결됐습니다. mcpServers 필드에 MCP 서버 URL을 넣으면 플러그인 설치 시 자동으로 MCP 연결이 등록됩니다.
여기에 hooks 필드로 UserPromptSubmit 이벤트에 스킬 검색 스크립트를 연결했습니다. 사용자가 첫 메시지를 보내면 자동으로 팀 스킬을 검색해서, Claude에게 "관련 스킬이 있으니 참고해"라고 컨텍스트를 주입하는 방식입니다.
OpenCode 플러그인에서는 TypeScript로 MCP 클라이언트를 직접 구현해야 했는데, Claude Code 플러그인은 선언적으로 설정만 하면 되니 훨씬 간결했습니다.
스킬 자동 검색 기능 구현
Open optionswarp-runnable-command
매 세션 첫 프롬프트에서 자동으로 팀 스킬 검색하는 훅을 추가해줘가장 신경 쓴 부분입니다. 팀 스킬을 아무리 잘 만들어도, 팀원이 존재를 모르면 소용없으니까요.
작동 방식은 이렇습니다:
팀원이 Claude Code에서 아무 작업 요청을 보냄
UserPromptSubmit 훅이 트리거되어 프롬프트에서 키워드 추출
MCP 서버의 시맨틱 검색으로 관련 스킬 탐색
관련 스킬이 있으면 Claude에게 "이 스킬을 참고해서 작업해"라고 안내
세션당 1회만 실행되고, 15자 미만의 짧은 프롬프트(인사, 단순 명령)는 건너뛰도록 했습니다. 팀원 입장에서는 아무것도 설정하지 않았는데 알아서 팀 가이드라인이 적용되는 경험을 할 수 있습니다.
OAuth 2.1 인증 통합
인증도 중요한 포인트였습니다. Claude Code 플러그인, OpenCode 플러그인, MCP 직접 연결 — 세 가지 방법 모두 같은 OAuth 2.1 플로우를 탑니다.
플러그인을 설치하고 처음 MCP 도구를 호출하면 브라우저가 열리고, Google 계정으로 로그인하면 끝입니다. 토큰을 복사하거나 환경변수를 설정할 필요가 없어요.
다만 이 과정에서 한 가지 삽질이 있었습니다. OAuth discovery 엔드포인트(.well-known)에 CORS 헤더가 빠져 있어서 브라우저 로그인이 자동으로 안 열리는 문제가 있었는데, curl로 테스트하면 정상이라 원인을 찾는 데 시간이 걸렸습니다. MCP SDK가 fetch API로 호출하기 때문에 CORS preflight가 필요했던 거죠.
MCP 서버 통합의 결과
Before vs After
| 항목 | Before | After |
|:------|:--------|:-------|
| Claude Code 설정 | claude mcp add 수동 입력 | claude plugin install 원커맨드 |
| 스킬 자동 검색 | 없음 (수동 호출만) | UserPromptSubmit 훅으로 자동 |
| 도구 간 경험 차이 | OpenCode만 플러그인 지원 | Claude Code, OpenCode 동일 경험 |
| 인증 방식 | 동일 (OAuth 2.1) | 동일 (OAuth 2.1) |
최종 구조
어떤 도구를 쓰든 동일한 MCP 서버에 연결되고, 동일한 스킬을 검색하고, 동일한 OAuth 토큰으로 인증됩니다. 도구 선택이 자유로워졌습니다.
AI 활용 팁과 교훈
효과적인 접근법
MCP 서버를 먼저 만들어두면 플러그인은 "연결 껍데기"만 추가하면 된다 — Claude Code 플러그인은 plugin.json 설정 + 훅 스크립트가 전부입니다. 비즈니스 로직은 이미 MCP 서버에 있으니까요.
UserPromptSubmit 훅은 팀 컨벤션을 전파하는 가장 효과적인 방법 — 팀원에게 "이 스킬 써"라고 공지하는 것보다, 자동으로 검색해서 적용하는 게 훨씬 효과적입니다.
OpenCode에서 만든 경험이 Claude Code에 그대로 적용됐다 — 스킬 자동 검색이라는 컨셉을 OpenCode 플러그인에서 먼저 검증하고, Claude Code에서는 같은 컨셉을 플러그인 구조에 맞게 옮기기만 했습니다.
주의할 점
curl로 되는데 브라우저에서 안 되면 CORS를 의심하세요 — OAuth 엔드포인트가 서버 간 통신은 잘 되는데 MCP SDK(브라우저 fetch)에서 실패할 수 있습니다.
플러그인 배포 설정은 한 번에 맞추기 어렵습니다 — marketplace.json 형식, .gitignore 설정, plugin.json 필드 등 문서에 없는 부분이 있어서 시행착오가 필요할 수 있습니다.
MCP 서버의 확장 가능성
이 패턴은 "팀 스킬 공유" 외에도 다양하게 활용할 수 있습니다:
사내 API 문서 자동 참조: MCP 서버에 API 스펙을 넣어두면, 개발자가 코딩할 때 자동으로 관련 API를 찾아줌
코드 리뷰 가이드라인 자동 적용: PR을 작성할 때 팀 리뷰 기준을 자동으로 로드
온보딩 자동화: 새 팀원이 플러그인만 설치하면 팀의 모든 가이드라인이 자동으로 적용
핵심은 "MCP 서버 하나 + 도구별 플러그인 껍데기"라는 구조입니다. 새로운 AI 도구가 나와도 플러그인 만 추가하면 됩니다.
미래 계획
더 많은 AI 도구 지원: Cursor, Windsurf 등 MCP를 지원하는 다른 도구에도 같은 방식으로 플러그인을 확장할 예정입니다
스킬 추천 고도화: 사용 통계 기반으로 추천 순위를 개선하고, 시맨틱 검색의 정확도를 높여서 더 적합한 스킬이 먼저 노출되도록 할 계획입니다
