Claude MCP 설정 바꾸기 앱 - 제작

요즘 Claude Desktop으로 MCP 서버들을 붙여서 여러 자동화를 하고 있었습니다.

그런데 자동화마다 다른 MCP 서버를 붙이느랴 너무 힘이 들더군요;;

그래서 Vibe coding으로 Claude MCP 설정 바꾸는 앱을 하나 만들어 봤습니다.

아래 그림은 작동 예시입니다. ㅋㅋ

- 사용 동영상 링크 입니다.

https://imgur.com/a/YVOzeax

- 아이콘도 만들었습니다.

귀엽죠? ㅋㅋㅋ

dmg 실행파일로 만드는게 너무 힘들었습니다. (오류가 끝도 없이...)

이제 저는 이 앱으로 여러 MCP 서버들을 쉽게 관리 할 수 있을 듯 합니다.

물론 Claude Desktop 뿐 아니라 cusor MCP 도 같이 할 수 있겠죠.

파일 경로만 제가 다시 지정하면 되니깐요.

순수 재미로 한 프로젝트라 이렇게도 사용 할 수 있구나 라고 재미로만 봐주셨으면 좋겠습니다~

아래는 Cursor 로 작성 시킨 기능에 대한 간단한 설명입니다.

---
## Claude MCP Config Changer

Claude MCP Config Changer는 Claude MCP(Multi-Channel Platform) 설정 파일을 쉽게 관리하고 변경할 수 있는 데스크톱 애플리케이션입니다.

## 프로젝트 소개

이 애플리케이션은 다양한 Claude MCP 설정 프리셋을 저장하고 필요할 때 빠르게 적용할 수 있는 기능을 제공합니다. 설정 파일의 위치를 자동으로 감지하고, 사용자가 선호하는 설정을 프리셋으로 저장하여 쉽게 전환할 수 있습니다.

## 기술 스택

- 프레임워크: Electron, React
- 빌드 도구: Webpack
- 패키징 도구: electron-builder
- 주요 라이브러리: React Router

## 주요 기능

1. 설정 파일 자동 감지

- macOS, Linux 등 다양한 플랫폼에서 Claude 설정 파일 위치 자동 감지
- 사용자 정의 경로 지정 가능

2. 프리셋 관리

- 여러 설정 프리셋 저장 및 관리
- 프리셋 적용 시 자동 백업 기능

3. 사용자 친화적 인터페이스
- 직관적인 UI로 설정 관리 용이
- 설정 파일 내용 시각화

## 폴더 구조

```
claude-mcp-config-changer/
├── electron/ # Electron 메인 프로세스 코드
├── src/ # React 프론트엔드 코드
│ ├── components/ # UI 컴포넌트
│ └── pages/ # 페이지 컴포넌트
├── public/ # 정적 파일
├── build/ # 빌드 결과물
├── scripts/ # 유틸리티 스크립트
└── assets/ # 아이콘 등 리소스 파일
```

## 설치 및 실행 방법

### 개발 모드

```bash
# 종속성 설치
npm install

# 개발 모드 실행
npm start
```

### 패키지 빌드

```bash
# 패키지 빌드 (macOS)
npm run package
```

## 특징

- 안정적인 설정 관리: 설정 변경 시 자동 백업으로 실수 방지
- 다중 플랫폼 지원: macOS, Linux 등 다양한 환경에서 작동
- 사용자 설정 기억: 앱 재시작 시에도 마지막 사용 설정 유지
- 개발자 모드: F12 키로 개발자 도구 접근 가능

## 기술적 특징

- 프로덕션 안정성: 다양한 환경에서 리소스 경로 자동 감지 및 오류 처리
- 설정 파일 마이그레이션: 사용자 설정 위치 변경 시 자동 마이그레이션
- 상대 경로 자동 변환: 빌드 시 HTML/JS 참조 경로 자동 최적화
- 로깅 시스템: 문제 해결을 위한 통합 로깅 기능