Aside MCP — Claude 능력 확장하기

MCP가 뭔가요?

MCP(Model Context Protocol) 는 Claude에게 새로운 "손"을 달아주는 표준 규격입니다.

기본 Claude Code는 프로젝트 폴더 안의 파일만 다룹니다. MCP를 연결하면:

MCP 서버	Claude가 할 수 있게 되는 것
웹 검색	최신 정보를 찾아 홈페이지 글에 반영
브라우저 자동화	Vercel·DNS 설정 페이지를 직접 클릭
파일 시스템 확장	프로젝트 외부 폴더 접근·백업
이미지 생성	홈페이지용 이미지를 AI로 생성
캘린더·노션	영업 일정을 홈페이지에 자동 반영

Claude Code 앱 오른쪽 Aside 패널 → MCP 탭에서 연결된 서버 목록과 상태를 확인할 수 있습니다.

---

MCP 설정 방법

Claude Code 앱에서 MCP 서버를 추가하는 방법은 두 가지입니다.

방법 1 — 앱 UI (추천)

1. Claude Code 앱 → 왼쪽 하단 설정(⚙) 또는 메뉴 → MCP Servers
2. + Add Server 클릭
3. 서버 이름·명령어 입력 → Save
4. Aside 패널 MCP 탭에서 연결 상태(초록 점) 확인

방법 2 — 설정 파일 직접 편집

Claude Code 앱은 ~/.claude/claude_desktop_config.json (또는 앱 설정 폴더)에 MCP 설정을 저장합니다.

Claude Code 대화창에:

---

홈페이지 운영에 유용한 MCP 3가지

1. 웹 검색 MCP (Brave Search / Tavily)

용도: 경쟁 홈페이지 분석, 최신 트렌드 반영, 가격 조사

설치:

활용 예:

---

2. 브라우저 자동화 MCP (Playwright)

용도: Vercel·DNS 화면 자동 조작, 홈페이지 자동 테스트, 폼 자동 입력

[!NOTE] 13강 Aside Browser Computer Use와 비슷하지만, MCP Playwright는 헤드리스 브라우저(화면 없이 백그라운드에서 동작)라 더 빠르고 반복 자동화에 유리합니다.

설치:

활용 예:

---

3. 파일 시스템 MCP

용도: 프로젝트 폴더 외부 파일 접근, 자동 백업, 이미지 일괄 처리

설치:

활용 예:

---

Aside 패널에서 MCP 확인하기

앱 오른쪽 Aside 패널 → MCP 탭:

● Brave Search      연결됨
● Playwright        연결됨
● Filesystem        연결됨
○ [비활성 서버]      연결 끊김

• 초록(●): 정상 동작
• 회색(○): 비활성 또는 오류 → 서버 설정 재확인

Claude Code 대화창에서 / tools 또는 @ 를 입력하면 지금 사용 가능한 MCP 도구 목록이 나옵니다.

---

실전 활용 — 홈페이지 주간 관리 루틴

MCP를 모두 연결한 뒤 이런 요청이 가능해집니다:

---

오늘의 실습 체크