# 기본 구문
claude mcp add <name> <command> [args...]
# 예시: 로컬 서버 추가
claude mcp add my-server -e API_KEY=123 -- /path/to/server arg1 arg2
2. MCP SSE 서버 추가
# 기본 구문
claude mcp add --transport sse <name> <url>
# 예시: SSE 서버 추가
claude mcp add --transport sse sse-server https://example.com/sse-endpoint
# 예시: 사용자 정의 헤더가 있는 SSE 서버 추가
claude mcp add --transport sse api-server https://api.example.com/mcp -e X-API-Key=your-key
3. MCP HTTP 서버 추가
# 기본 구문
claude mcp add --transport http <name> <url>
# 예시: 스트리밍 가능한 HTTP 서버 추가
claude mcp add --transport http http-server https://example.com/mcp
# 예시: 인증 헤더가 있는 HTTP 서버 추가
claude mcp add --transport http secure-server https://api.example.com/mcp -e Authorization="Bearer your-token"
Context7 MCP를 설치하면 개발 프레임워크의 최신 공식 문서를 참조할 수 있습니다.
claude mcp add context7 -- npx -y @upstash/context7-mcp
2.MCP SSE 서버 추가
claude mcp add --transport sse context7 https://mcp.context7.com/sse
3.MCP HTTP 서버 추가
claude mcp add --transport http context7 https://mcp.context7.com/mcp
MCP 서버 관리하기
아래와 같은 command로 서버를 관리할 수 있습니다.
# 구성된 모든 서버 목록 표시
claude mcp list
# 특정 서버의 세부 정보 가져오기
claude mcp get my-server
# 서버 제거
claude mcp remove my-server
context7 설치 후 claude code에서 아래 명령어를 입력하면 다음과 같이 설치된 MCP를 확인할 수 있습니다.
/mcp list
MCP 서버 범위 설정
MCP는 local, project, user의 3가지 범위로 추가가 가능합니다.
이 범위는 어디에서 누가 사용을 할 수 있는가를 설정하는 것입니다.
-s 옵션을 사용하면 범위 설정이 가능합니다.
예를 들면,
claude mcp add --transport http context7 -s local https://mcp.context7.com/mcp
1. local
로컬 범위 서버는 기본 구성 수준을 나타내며 프로젝트별 사용자 설정에 저장됩니다. 이러한 서버는 사용자에게만 비공개로 유지되며 현재 프로젝트 디렉터리 내에서 작업할 때만 액세스할 수 있습니다. 이 범위는 개인 개발 서버, 실험적 구성 또는 공유되어서는 안 되는 민감한 자격 증명이 포함된 서버에 이상적입니다.
2. project
프로젝트 범위 서버는 프로젝트 루트 디렉터리의.mcp.json파일에 구성을 저장하여 팀 협업을 가능하게 합니다. 이 파일은 버전 제어에 체크인되도록 설계되어 모든 팀 구성원이 동일한 MCP 도구와 서비스에 액세스할 수 있도록 보장합니다. 프로젝트 범위 서버를 추가하면 Claude Code가 자동으로 이 파일을 생성하거나 적절한 구성 구조로 업데이트합니다.
3. user
사용자 범위 서버는 프로젝트 간 접근성을 제공하여 사용자 계정에 비공개로 유지하면서 설치된 컴퓨터의 모든 프로젝트에서 사용할 수 있게 합니다. 이 범위는 개인 유틸리티 서버, 개발 도구 또는 다양한 프로젝트에서 자주 사용하는 서비스에 적합합니다.
주요 MCP 서버 리스트
MCP 서버는 주로 Github을 통해 설치 방법을 공유하고 있습니다.
Context7
Context7 MCP는 LLM이 최신 문서와 코드 예제를 실시간으로 읽고 이해할 수 있도록 돕는 도구입니다. 이 도구를 사용하면 프롬프트에 "use context7"만 추가하는 것만으로 AI가 최신 공식 문서와 코드 예제를 자동으로 연결하여 답변을 생성할 수 있습니다.
Firecrawl MCP를 사용하여 다음 URL의 콘텐츠를 스크랩하고,
프로젝트 /documentation 폴더에 LLM.txt 파일을 생성해줘.
https://codegear.info
MCP 사용방법
Playwright MCP를 사용해서 e2e 테스트를 진행해 봅니다.
e2e 테스트는 end to end의 약자로 시스템이 사용자 관점에서 처음부터 끝까지 올바르게 작동하는지 확인하는 테스트 방법입니다. 즉, 실제 사용자가 애플리케이션을 사용하는 것처럼 모든 구성 요소(데이터베이스, 프런트엔드, 백엔드, 네트워크 등)가 제대로 통합되어 기능하는지 검증하는 테스트입니다.
playwirght는 내부적으로 크로미움(오픈소스 웹브라우저)을 실행해서 페이지 요소들을 확인할 수 있습니다.
클로드 코드에서 아래 프롬프트를 입력합니다.
playwright mcp를 사용해서 메인 화면이 정상적으로 오픈되는지 확인하는 e2e 테스트를 만들어줘
우선 VSCode를 실행하고, frontend와 backend의 상위 폴더인 codegear 폴더를 열어줍니다.
README.md
README.md 파일을 만들고 아래와 같이 작성합니다.
## 프로젝트 정의
- 이 프로젝트는 CodeGear의 유튜브 채널을 홍보하는 사이트 개발을 위해 만들어졌다.
- 이 프로젝트는 frontend와 backend로 구성되어 있다.
- /frontend 폴더는 next.js 기반의 프론트엔드 프로젝트이다.
- /backend 폴더는 nest.js 기반의 백엔드 프로젝트이다.
Claude 실행
터미널에claude를 입력합니다.
Claude 초기화
/init 명령으로 프로젝트를 초기화 합니다.
초기화가 완료되면 CLAUDE.md 파일이 생성됩니다.
구글 로그인 기능 추가
아래와 같은 프롬프트를 입력합니다.
구글 로그인 기능을 추가하려고 하는데 백엔드와 프론트엔드로 나누어서 각각 필요한 기능들을 추가해줘.
이렇게 하면 클로드코드가 frontend와 backend에 필요한 코드들을 생성하고 테스트까지 진행을 하게됩니다.
구글 로그인 기능 테스트
다음과 같은 순서로 테스트를 진행합니다.
프로그램 실행하기
프론트엔드 실행
frontend 폴더에서 "npm run dev" 를 실행합니다.
백엔드 실행
backend 폴더에서 "npm run start:dev"를 실행합니다.
브라우저에서 확인하기
브라우저 주소창에 http://localhost:3001을 입력하면 아래와 같은 화면이 보입니다.
우측 상단의 Google로 로그인 버튼을 클릭합니다.
로그인 하려는 계정을 클릭합니다.
CodeGear 서비스 로그인 안내창에서 "계속" 버튼을 클릭하면 로그인이 완료되고 로그인한 사용자 정보가 표시됩니다.
이 프로젝트 아키텍처는 실서비스에 사용할 수 있는 구조입니다.
백엔드와 프론트엔드로 나누어져 있어서 전문적인 서비스를 개발하는데 사용 가능합니다.
이 기반위에 여러가지 필요한 설정과 기능들을 추가해서 여러분의 서비스를 개발하시면 됩니다.
다른 부분은 프레임워크, Database 연동 등이 다르므로 requirement.md를 그에 맞게 작성하시면 됩니다.
requirement.md 예시
### 1. **개발 목적 및 대상 사용자**
- **사이트 목적:** 이 사이트는 codegear.info의 backend API 서비스를 담당한다
### 2. **프레임워크**
- Node.js 기반 프레임워크인 **Nest.js**를 사용한다.
- Database는 **MySQL**을 사용한다.
- Nest.js에서 ORM은 **TypeORM**을 사용한다.
### 3. **아키텍처 요구사항**
- **Swagger** 를 사용해서 API 테스트를 용이하게 한다.
- **컴포넌트** 기능을 최대한 활용할 것.
- **에러 핸들링:** API 에러 발생 시 어떻게 HTTP 상태 코드와 에러 메시지를 전달한다 (예: `{ "statusCode": 400, "message": "Bad Request" }`)
- **인증 및 인가:** Admin 사용자의 로그인 방식은 구글 로그인을 사용한다. 구글 로그인은 백엔드와 프론트에서 처리해야 할 부분을 나누어 처리하도록 한다. JWT 토큰 방식을 사용한다. Role은 normal 과 admin 두개만 사용한다.
- **배포 환경:** 로컬에서 개발 밑 테스트 후 운영 환경에 배포한다.
### 4. **구현계획**
- 한번에 사이트를 완성하지 말고, **단계별 계획**을 세워서 만들것.
- **plan.md**에 계획 내용을 작성해서 저장해서 실제 구현시 사용할것.
- **버전 관리:** Git을 사용하고 github의 repository를 사용한다.
### 5. **언어**
- 답변은 한국어로 할것
맥에서는 터미널을 윈도우에서는 WSL(Windows Subsystem for Linux)을 사용합니다.
클로드 코드, 제미나이 CLI 등
IDE(통합개발환경) 플러그인 형태
대부분 Visual Studio Code를 플러그인 형태로 제공되어 IDE에 설치 후 사용합니다.
Cursor, Windsurf, Cline AI, RooCode AI, Github Copilot 등
Web Service
웹사이트에 로그인 해서 사용합니다.
구글 AI Studio, v0.dev, Replit 등
개인적으로 Web Service는 잘 사용을 하지 않습니다. 회사에서 개발할때는 Code Base에서 수정을 하거나, 기능을 추가하는 경우가 많다보니 적합하지 않아서 입니다.
AI로 개발을 잘 하는 방법
AI로 개발을 할때 중요한 것은 AI에게 어떻게 지시를 하는가 입니다.
지시하는 사람이 얼마나 구체적이고, 명확하게 지시를 하는가에 따라 결과물이 달라집니다.
AI가 연속성을 가지고 개발을 잘 진행하게 하려면 다음과 같은 방법을 사용하세요.
요구사항을 명확하게 알려줄것.
처음부터 끝까지 모든것을 한번에 요청하지 말것
개발을 단계별로 나누어서 진행할 수 있도록 AI가 직접 계획을 수립하게 지시할 것.
계획에 따라 순차적으로 진행을 하되 반드시 소스 검토와 테스트를 할 것.
처음 소스가 만들어지만 그 이후에는 작은 기능을 하나씩 붙여 나갈것.
프론트엔드 개발하기
프론트엔드 개발을 하기 위해서 다음과 같은 요구사항 문서를 작성합니다.
저는 주로 마크다운 문법을 사용하는 옵시디언을 이용해 문서를 만듭니다.
다음은 codegear.info 프론트엔드 개발을 위한 requirement-frontend.md 문서입니다.
### 1. **사이트 목적 및 대상 사용자**
- **사이트 목적:** 이 사이트는 AI 특히 프로그램 개발과 관련된 AI 기술을 소개하는 CodeGear의 유튜브와 블로그를 소개 및 홍보하기 위한 것
- **대상 사용자:** AI에 관심이 있는 개발자가 주 고객층임
- _왜 필요한가?_ AI 관련된 정보는 많이 있지만, 개발자에게 꼭 필요한 정보는 찾기 힘든면이 있음. 이러한 대상 사용자의 니즈를 충족시키기 위해, 사이트는 **전문적이고 실용적인 정보**를 명확하고 효율적으로 전달하는 데 중점을 두어야 함.
### 2. **주요 기능 및 페이지 구성**
- **필수 페이지:**
- **홈 (Landing Page):** 방문자에게 첫인상을 주고 핵심 메시지를 전달하는 페이지. 아래 유튜브 인기 영상 3개를 중앙에 사이트 임베드 해서 보여줄것.
- Cursor AI 대체, 무료 오픈소스 Cline AI 쓸만할까?
- https://youtu.be/AWWNCGXFTfw?si=uTh_TlM9oO826l8w
- AI로 [유튜브 요약+노트 저장] 자동화하는 법 - MCP+Obsidian+Cline+Gemini
- https://youtu.be/XXurwjs307s?si=n4YYvbEYv4T49Xsj
- n8n(AI워크플로우자동화) AWS 셀프호스팅 방법
- https://youtu.be/rZnBHanWiZg?si=Q7XNIaNB7TJO7Aoc
- **소개/About:** 유튜브와 블로그에 대한 정보.
- 유튜브 채널 : https://www.youtube.com/@codegear-21
- 블로그 : https://codegear.tistory.com/
- **기능:**
- **반응형 디자인:** 모바일, 태블릿, 데스크톱 등 다양한 기기에서 잘 보이도록.
- **디자인**: Clean & Modern Minimalism과 Bold & Expressive Typography를 적절히 사용할것.
- **다크 모드**: 다크모드, 라이트모드, 시스템 모드를 선택할 수 있도록.
- **간단한 애니메이션/인터랙션:** 사용자 경험을 향상시킬 수 있는 요소 (스크롤 애니메이션, 호버 효과 등).
- **SEO 친화적:** 검색 엔진에 노출이 잘 되도록 기본적인 메타태그 설정 등.
### 3. **콘텐츠 요구사항**
- **이미지 or 비디오:** 저작권에 위배되지 않도록 https://pixabay.com 에서 적절한것을 사용할 것.
- **아이콘:** Heroicons 아이콘 팩을 사용할것.
### 4. **성능 및 접근성**
- **로딩 속도:** 빠른 페이지 로딩 속도 (Core Web Vitals 고려).
- **접근성 (Accessibility):** 시각 장애인 등 다양한 사용자를 위한 웹 접근성 고려 (ARIA 속성, 키보드 내비게이션 등)
### 5. **구현계획**
- 한번에 사이트를 완성하지 말고, 단계별 계획을 세워서 만들것.
- plan.md에 계획 내용을 작성해서 저장해서 실제 구현시 사용할것.
### 6. **프레임워크**
- 프레임워크는 next.js 로 만들것.
- 컴포넌트 기능을 최대한 활용할 것.
### 7. **언어**
- 답변은 한국어로 할것
###, ** 등의 기호가 들어가 있는데, 마크다운 에디터를 사용하면 아래와 같이 보이게 됩니다.
AI 코드 어시스턴트에게 개발 요청하기
지난 개요에서 설명한 폴더 구조는 다음과 같습니다.
이제 requirement.md를 이용해서 개발을 요청해 보겠습니다.
프론트엔드 폴더에 requirement.md를 복사합니다.
프론트엔드 폴더에서 에디터를 열고 AI에게 개발 요청을 합니다.
IDE 기반의 어시스턴트는 Roo Code AI를 사용했습니다.
RooCode AI의 경우 Architect 모드로 시작 하였고, 계획이 수립되면 Code 모드로 변경하였습니다.
터미널 기반은 클로드 코드를 사용하였습니다.
VSCode에 클로드코드 플러그인을 설치하면 좀 더 편하게 하실 수 있습니다.
두 케이스 모두 아래와 같이 입력하면 프로젝트를 생성합니다.
requirement.md를 분석해서 구현 plan을 수립해줘
중간에 진행 여부를 묻는 과정이 있는데, 지금과 같이 프로젝트를 생성하고 특별한 로직이 들어가지 않을 경우는 Auto 모드로 진행을 해도 괜찮습니다.
