📌 MCP란?
👩🏻💻 요약
- Model Context Protocol의 약자
- Model: AI 모델 (예: ChatGPT, Claude 같은 LLM)
- Context: 모델이 이해하고 응답을 잘 하기 위해 참고하는 정보
- Protocol: 약속된 방법이나 규칙
즉, “AI가 무슨 정보를 참고하면서, 어떤 방식으로 작동할지 정리한 룰”
💡 AI에게 이전에 했던 같은말 반복하지 않게 도와주는 설명서구나!
AI가 똑똑하긴 한데, 문맥(Context)을 잘 줘야 실수 없이 똑똑하게 행동할 수 있다.
예를 들어,
"이 코드를 리팩토링 해줘"라고 했을 때
이게 리액트 코드인지, 백엔드인지, 어떤 파일 구조인지 모르면 실수할 수 있기 때문.
그래서 프롬프트의 문맥 정보 (컨텍스트) 를 미리 AI한테 알려주는 구조가 필요함
→ 그걸 MCP가 담당하는 것!
👩🏻💻 MCP에 대한 오해
✅ MCP는 모듈이 아니다. “명세(규약)”다.
| 구분 | 설명 |
|---|---|
| 모듈 | ❌ 아닙니다. npm install mcp 같은 건 존재하지 않아요. |
| 라이브러리 | ❌ 아니에요. 실행되는 코드 덩어리가 아닙니다. |
| 프로토콜 | ✅ 맞습니다. “AI가 참고할 개발 문맥(Context)을 정의한 설정 파일”이에요. |
MCP는 mcp.json이라는 단순한 JSON 파일 형태로 존재하며, 우리가 어떤 프레임워크, 스타일, 상태관리 툴을 쓰는지를 정의해주는 역할을 해요.
이걸 기반으로 AI는 "아, 이 사람은 Next.js + Tailwind + Zustand를 사용하는구나!" 라고 이해하죠.
👩🏻💻 MCP의 예시
{
"framework": "Next.js",
"language": "TypeScript",
"styling": "Tailwind CSS",
"design_system": "Shadcn UI",
"state_management": "Zustand",
"form_library": "react-hook-form"
}-> 이런 식으로 작성해두면, Cursor나 Codeium 같은 도구가 코드를 생성할 때 이 설정을 참고해서 더 정확한 결과물을 만들어줍니다.
// 이전: 명시적으로 알려줘야 함
"src/components/ui/button.tsx 파일처럼 shadcn 스타일로 button 만들어줘"
↓ 자동 MCP 추론 덕분에 ↓
// 이후: 간단히만 요청해도 됨
"로그인 버튼 만들어줘" → MCP에 정의된 스타일, 구조, 디자인 시스템을 자동 반영👩🏻💻 MCP와 공통 컴포넌트의 차이점
"공통 컴포넌트도 폴더에 잘 정리해두면 되는데, 굳이 MCP가 필요한 이유가 뭔가요?"
| 구분 | MCP | 공통 컴포넌트 |
|---|---|---|
| 역할 | AI가 참고할 개발 환경/스타일 정보 | 직접 사용하는 재사용 컴포넌트 코드 |
| 생성 여부 | ✅ 설정만으로도 코드 생성 가능 | ❌ AI가 직접 코드를 생성하진 않음 |
| Cursor에서 자동 인식 | ✅ 자동 인식 | ❌ 명시적으로 지시해야 함 |
| 실행 가능 여부 | ❌ 실행 불가, 단지 설정 파일 | ✅ 실제 실행되는 코드 |
-> 즉, MCP는 코드 생성의 기준점이고,
공통 컴포넌트는 만들어진 결과물이에요. 둘은 역할이 완전히 다릅니다.
✨ 실전 팁
mcp.json은 보통 프로젝트 루트나 dev-helper/ 폴더 등에 두고, 다음처럼 구성합니다:
{
"framework": "Next.js",
"language": "TypeScript",
"styling": "Tailwind CSS",
"design_system": "Shadcn UI"
}그리고 Cursor에서 이렇게 명령해보세요:
Shadcn UI 기반 모달 컴포넌트를 만들어줘.
react-hook-form과 연동해서 이름/이메일/비밀번호 입력 필드 포함해줘.그럼 AI가 알아서 프로젝트 환경에 딱 맞게 컴포넌트를 생성해줍니다.
📌 결론
MCP는 실행되는 코드가 아닌, AI가 참고하는 문맥 정보를 담은 JSON 파일입니다.
이걸 기반으로 Cursor AI 같은 도구가 자동으로 프레임워크에 맞는 코드 스타일과 구조를 생성해줍니다.
반면, 우리가 만든 공통 컴포넌트는 AI가 자동으로 불러오진 않으며, 명시적으로 불러달라고 해야 참조합니다.
2️⃣ 연결 프로토콜로서의 MCP
클라이언트와 로컬 서비스 간의 보안 연결을 가능하게 하는 프로토콜!
ex) Claud, Figma 데스크톱 앱 등
