🎹바이브 코딩 마스터
Chapter 10

다양한 옵션 상세

MCP, Skills, Plugin, Sub Agent

각 옵션의 실제 설정 방법과 활용법을 플랫폼별로 상세하게 다룹니다.

30

Chapter 10: 다양한 옵션 상세 — MCP, Skills, Plugin, Sub Agent

이전 장에서 MCP의 기본 개념과 설정 방법을 배웠습니다. 이 장에서는 각 옵션의 심화 설정법플랫폼별 차이점을 상세하게 다룹니다. 이 옵션들을 제대로 이해하면, AI 코딩 도구를 단순한 코드 생성기가 아니라 통합 개발 파트너로 활용할 수 있습니다.

🎼 음악으로 비유하면

DAW의 기본 기능만으로도 곡을 만들 수 있지만, VST 플러그인, MIDI 라우팅, 매크로 컨트롤, 버스 전송 등을 활용하면 프로덕션 퀄리티가 완전히 달라집니다. 이 장은 DAW의 고급 라우팅과 플러그인 설정을 마스터하는 과정입니다.


10.1 MCP 서버 실습 — Filesystem과 Playwright

Filesystem MCP: AI의 손

Filesystem MCP는 AI가 파일 시스템을 직접 읽고 쓸 수 있게 해줍니다. 이것 없이는 AI에게 "이 파일 내용을 확인해봐"라고 할 수 없습니다.

🎼 음악으로 비유하면

Filesystem MCP는 DAW에서 하드디스크 레코딩 기능과 같습니다. 이 기능이 없으면 DAW가 오디오 파일을 읽거나 저장할 수 없죠. AI도 마찬가지로, Filesystem MCP 없이는 프로젝트의 코드 파일을 읽지 못합니다.

상세 설정법

.mcp.json (filesystem)json
ℹ️ 다중 경로 허용

args 배열에 여러 경로를 넣을 수 있습니다. 프로젝트 폴더와 문서 폴더를 동시에 허용하면, AI가 참고 자료를 읽으면서 코드를 수정할 수 있습니다. 단, **민감한 디렉토리(~/.ssh, ~/.env 등)**는 절대 포함하지 마세요.

AI에게 Filesystem을 활용시키는 프롬프트 예시

Filesystem 활용 프롬프트text

Playwright MCP: AI의 눈

Playwright MCP는 AI가 웹 브라우저를 직접 조작할 수 있게 해줍니다. 웹페이지를 열고, 스크린샷을 찍고, 버튼을 클릭할 수 있습니다.

🎼 음악으로 비유하면

Playwright MCP는 라이브 공연의 비디오 모니터와 같습니다. 무대 위에서 무슨 일이 벌어지는지 실시간으로 볼 수 있듯, AI가 브라우저에서 웹앱이 어떻게 보이는지 직접 확인할 수 있습니다.

.mcp.json (playwright)json

Playwright 활용 예시

Playwright 활용 프롬프트text
⚠️ Playwright 주의사항

Playwright MCP는 헤드리스 브라우저를 사용합니다. 서버 환경(모니터 없는 컴퓨터)에서도 동작하지만, 카메라 접근이 필요한 기능(MediaPipe 등)은 실제 브라우저에서 테스트해야 합니다. AI는 스크린샷으로 시각적 확인만 할 수 있습니다.


10.2 MCP가 해결하는 문제들

MCP 없이도 바이브 코딩은 가능하지만, MCP가 있으면 워크플로우가 근본적으로 달라집니다.

| 상황 | MCP 없이 | MCP 있으면 | |------|---------|-----------| | 파일 내용 확인 | 직접 복사해서 붙여넣기 | AI가 직접 읽음 | | 코드 수정 | AI 출력을 복사해서 파일에 붙여넣기 | AI가 직접 파일 수정 | | 웹 결과 확인 | 내가 스크린샷 찍어서 공유 | AI가 브라우저로 직접 확인 | | DB 데이터 확인 | 쿼리 결과를 복사해서 붙여넣기 | AI가 직접 DB 쿼리 | | 최신 문서 확인 | 내가 URL 내용을 복사 | AI가 fetch로 직접 읽음 |

🎼 음악으로 비유하면

MCP 없는 AI 코딩은 보면대 없이 연주하는 것과 같습니다. 연주자에게 악보를 한 소절씩 불러주는 대신, 보면대에 악보를 올려놓으면 연주자가 직접 보면서 연주할 수 있죠. MCP는 AI에게 보면대(파일), 모니터(브라우저), **메모장(메모리)**을 제공합니다.


10.3 Skills / Slash Commands — 프리셋 등록하기

Skills(Claude Code) 또는 Slash Commands는 자주 반복하는 작업을 단축 명령어로 등록하는 기능입니다.

🎼 음악으로 비유하면

Skills는 DAW의 프리셋과 같습니다. 매번 EQ, 컴프레서, 리버브를 하나씩 설정하는 대신, "보컬 체인 프리셋"을 불러오면 모든 설정이 한 번에 적용되죠. Skills는 "코드 리뷰해줘", "테스트 작성해줘" 같은 복잡한 지시를 한 단어로 실행합니다.

Claude Code에서 Skills 만들기

Claude Code에서는 .claude/commands/ 디렉토리에 마크다운 파일을 만들어 커스텀 슬래시 커맨드를 등록합니다:

Skills 설정bash

이제 Claude Code에서 /review라고 입력하면 위 지시가 자동으로 실행됩니다.

음악 프로젝트에 유용한 Skills 예시

음악 프로젝트 Skillsmarkdown

10.4 Plugin — 외부 도구 통합

Plugin은 MCP보다 더 넓은 개념으로, AI 코딩 도구에 외부 서비스나 도구를 통합하는 방식입니다. Codex CLI의 경우 플러그인 시스템을 통해 기능을 확장할 수 있습니다.

🎼 음악으로 비유하면

Plugin은 DAW의 VST/AU 플러그인과 정확히 같은 개념입니다. DAW 자체에는 기본 이펙트가 있지만, Serum(신디사이저), FabFilter(EQ), Valhalla(리버브) 같은 서드파티 플러그인을 설치하면 사운드 팔레트가 무한히 확장됩니다.

Plugin과 MCP의 차이

| 구분 | MCP | Plugin | |------|-----|--------| | 표준화 | 표준 프로토콜 (어디서든 호환) | 플랫폼별 고유 방식 | | 설치 | JSON 설정 파일로 간단 등록 | 각 플랫폼의 마켓플레이스에서 설치 | | 범위 | 파일, 브라우저, DB 등 로컬 리소스 | 클라우드 서비스, 외부 API 등 | | 예시 | filesystem, playwright | GitHub 연동, Jira 통합 |


10.5 Sub Agent — 작업 분할 처리

Sub Agent는 복잡한 작업을 여러 개의 독립적인 작업으로 분할하여 처리하는 방식입니다. 메인 AI가 "프로젝트 매니저" 역할을 하고, 각 세부 작업을 별도의 AI 세션에 위임합니다.

🎼 음악으로 비유하면

Sub Agent는 오케스트라의 파트 리더 시스템과 같습니다. 지휘자(메인 AI)가 전체 구조를 관리하면서, "현악 파트 연습은 콘서트마스터에게", "타악기 파트는 수석 타악기 주자에게" 위임하는 것입니다. 각 파트 리더는 자기 영역에 집중하고, 결과를 지휘자에게 보고합니다.

Sub Agent 활용 시나리오

우리의 MediaPipe 프로젝트에서 Sub Agent가 유용한 경우:

Sub Agent 패턴 프롬프트text
ℹ️ Sub Agent 지원 현황

2025년 기준, Claude Code는 Sub Agent를 내부적으로 활용하며 (Task 도구), Codex CLI도 유사한 기능을 제공합니다. Gemini CLI는 아직 공식 Sub Agent 기능이 제한적입니다. 각 플랫폼의 업데이트를 주시하세요.


10.6 플랫폼별 MCP 설정 비교

세 플랫폼의 MCP 설정 방식을 비교해봅시다:

Claude Code

Claude Code .mcp.jsonjson

Codex CLI

Codex CLI MCP 설정json

Gemini CLI

Gemini CLI MCP 설정json

10.7 실전 조합: 모든 옵션을 함께 사용하기

지금까지 배운 모든 옵션을 우리 MediaPipe 프로젝트에 적용해봅시다:

MCP 설정 — 기반 인프라

filesystem으로 코드를 읽고 쓰고, playwright로 결과를 확인하고, fetch로 문서를 가져옵니다.

AGENTS.md — 프로젝트 맥락 주입

기술 스택, 코딩 규칙, 디렉토리 구조를 명시합니다.

Skills — 반복 작업 자동화

/review, /osc-test, /mediapipe-debug 등을 등록합니다.

Plan Mode — 구조 설계

구현 전에 전체 아키텍처를 AI와 논의합니다.

Sub Agent — 병렬 개발

독립적인 모듈(hand-tracker, osc-sender, ui-controller)을 분할 처리합니다.

🎼 음악으로 비유하면

이 모든 것을 조합하면, 마치 풀 스펙 프로덕션 스튜디오를 갖춘 것과 같습니다. DAW(AI)에 오디오 인터페이스(MCP)를 연결하고, 악보(AGENTS.md)를 준비하고, 프리셋(Skills)을 로드하고, 편곡 스케치(Plan Mode)를 하고, 각 파트(Sub Agent)를 녹음하는 전체 워크플로우입니다.

💡 이 장의 핵심

모든 옵션을 처음부터 다 설정할 필요는 없습니다. MCP filesystem + AGENTS.md만으로도 충분히 시작할 수 있습니다. 나머지는 필요할 때 하나씩 추가하세요. 처음부터 DAW의 모든 플러그인을 로드하면 부팅이 느려지듯, 필요한 것만 가볍게 시작하는 게 좋습니다.


10.8 실습 과제

  1. .mcp.jsonfilesystemplaywright를 함께 설정하고, AI에게 "index.html 파일을 읽어줘"라고 요청해보세요
  2. .claude/commands/에 자신만의 커스텀 슬래시 커맨드를 하나 만들어보세요
  3. Plan Mode로 "MediaPipe 손 추적 웹앱"의 전체 구조를 AI와 논의해보세요 (코드 작성 금지!)
  4. 세 플랫폼(Codex, Claude, Gemini) 중 하나를 선택하여, 해당 플랫폼의 MCP 설정을 완성해보세요