클로드(Claude) MCP

MCP(Model Context Protocol)란? Model Context Protocol (MCP)은 Anthropic Claude가 출시한 오픈소스 프로토콜로, AI 모델과 개발 환경 간의 통합된 컨텍스트 상호작용 표준을 구축하기 위한 것입니다. 표준화된 컨텍스트 정보 접근 방식을 제공함으로써, MCP는 AI 모델이 코드를 더 잘 이해하고 처리할 수 있게 하며, 개발자가 단일 표준을 통해 AI 애플리케이션과 다양한 데이터 소스를 연결할 수 있도록 합니다.

 

최근 AI 의 화두는 바이브 코딩(vibe coding)이다. 지금부터 그 준비를 하면서 정리를 진행 하고자 한다.

AI 모델은 클로드(Claude)를 선택 하였다.
인간 언어의 이해도, 특히 언어를 가리지 않고 이해도가 매우 뛰어나 한국어의 이해도또한 뛰어나고, 눈에 띄는 건 사람이 직접 작성한 것 같은 자연스럽고 가독성 높은 코드를 생성해내는 능력이 좋기에 클로드(Claude)를 선택 하겠다.
(Cursor 를 이용해야 XCode 개발이 가능하다는것 같은데, 일단 MCP 아키텍처를 공유 한다면 괜찮지 않을까?)

 

1. 준비

- 클로드 홈페이지에 회원 가입
- 클로드 데스크탑 PC 에 설치
- Node JS 설치

 

2. 설정

MAC 환경에 설치 했기에 MAC 기준으로 설명을 작성 하겠다. 간단한 웹 검색 MCP Server 를 설정하고 실행해 보겠다.

GitHub - jae-jae/g-search-mcp: A powerful MCP server for Google search that enables parallel searching with multiple keywords si

Claude > 설정 > 개발자 > 설정 편집 을 선택해서 claude_desktop_config.json 파일을 열고 아래의 스크립트를 넣는다.

{
  "mcpServers": {
    "g-search": {
      "command": "npx",
      "args": ["-y", "g-search-mcp"]
    }
  }
}

 

 

Claude 앱을 완전히 종료하고 다시 실행하면 망치 아이콘이 설정된걸 확인할수 있다.

그리고 질문을 하면!!! 에러가 난다.... 깃허브를 잘 읽어보면 "First time setup" 이 있다.
터미널을 열고 시킨대로 chromium 을 설치한다.

npx playwright install chromium

 

 

3. 테스트

이제 웹에서 검색 하도록 질문을 해보면 된다.

 

4. 결론

MCP 를 이용한 바이브 코딩(vibe coding)을 진행하려 했지만, iOS 개발에 사용할 MCP Server 는 적당한게 보이지 않는다...ㅠ
혹시 아는가... Apple이 열심히 개발해서 바이브 코딩(vibe coding)을 기본 기능으로 넣어줄지...
지금은 조금더 기다려 보자.

 

5. 목차

1. 클로드(Claude) MCP 2. MCP(Model Context Protocol) 3. Claude Vibe Coding 4. VS Code Vibe Coding (Claude)