🎭 Week 9 · Vibe Coding ②

리허설과 인터컴 — Plan 모드와 MCP, AI에게 더 잘 시키는 두 기둥

📅 2026년 5월 27일 ⏱️ 25-35분 소요 🎯 입문 (Week 8 후속)

📋 목차

🎭 도입: Week 8 복습 + 오늘의 비유 연장
🗺️ Plan 모드란? — "잠깐, 먼저 계획부터"
🚨 Plan 모드를 반드시 켜야 하는 5가지 이유
🛠️ Cursor의 Plan 모드 — 어떻게 생겼나
⌨️ Claude Code의 Plan 모드 — 어떻게 생겼나
🔌 MCP 다시 — Week 1 복습 + Vibe 코딩 맥락
🌐 대표 MCP 3종 (Filesystem · Playwright · Context7)
🧩 Plan 모드 + MCP를 합치면
❓ FAQ
🎓 핵심 요약

🎭 도입: Week 8 복습 + 오늘의 비유 연장

지난 주 Week 8에서 우리는 웹 서비스를 한 편의 공연으로 비유했어요. 무대(Frontend) + 백스테이지(Backend) + 무전기(API)가 모여 하나의 공연이 만들어진다고요.

그런데 좋은 공연 한 편이 무대 위로 올라가려면, 그 사이에 꼭 필요한 두 가지가 더 있어요.

   🎭 공연 전날 밤
   ┌──────────────────────────────────────────────┐
   │                                              │
   │   ① 리허설(Plan)을 안 하면?                  │
   │      → 본 공연에서 큐가 어긋나고, 배우가      │
   │        다른 동선으로 가서 부딪힘. 재앙.       │
   │                                              │
   │   ② 무대와 외부(자료실·소품샵·조명구)         │
   │      사이 인터컴(MCP)이 없으면?              │
   │      → 무대 위 배우가 외부에 손이 안 닿음.   │
   │        고립된 공연. 한정된 능력.              │
   │                                              │
   └──────────────────────────────────────────────┘

       오늘 두 가지: 리허설(Plan 모드) + 인터컴(MCP)

오늘 자료는 실무 핸즈온이 아니에요. 두 가지 개념을 손에 잡을 때까지 충분히 풀어볼 거예요. 다음 주 ③편부터 직접 만지면, 오늘 깐 기초 위에 곧장 결과물이 올라와요.

🎯 오늘의 한 줄: Plan 모드 = 리허설 (AI의 사고력 보강). MCP = 인터컴 (AI의 능력치 보강). 둘 다 켜야 공연이 안전하고 강력해져요.

🗺️ Plan 모드란? — "잠깐, 먼저 계획부터 보여줘"

Plan 모드는 한 줄로 정리하면 이래요.

💡 Plan 모드 = AI가 코드 작성 전에 "이렇게 하겠습니다"라는 단계별 계획을 먼저 한국어로 제시하고, 사용자가 OK 하면 그때 실행으로 들어가는 작동 방식.

🎬 일반 모드 vs Plan 모드 — 무대 위에 무슨 일이 일어나나

   ❌ 일반 모드 (Plan 없이 바로 실행)
   ───────────────────────────────────
   사용자: "회원가입 페이지 만들어줘"
                ↓
   AI: (바로 코딩 시작) → 100줄 작성
                ↓
   사용자: 결과물 받음 → 어? 내가 원하던 거랑 다른데?
                ↓
   ⚠️ 100줄 다시 검토 + 처음부터 다시 시키기 → 시간 낭비


   ✅ Plan 모드 (계획 먼저)
   ─────────────────────────
   사용자: "회원가입 페이지 만들어줘"
                ↓
   AI: 잠깐, 먼저 계획 보여줄게요:
       1. 폼 필드 — 이메일, 비밀번호, 이름
       2. 유효성 검사 — 이메일 형식, 비밀번호 길이
       3. 제출 버튼 → 백엔드 API로 전송
       4. 성공 시 환영 페이지 이동, 실패 시 에러 표시
       5. 모바일 반응형
                ↓
   사용자: 어? 4번에 "비밀번호 확인 입력칸"도 넣어줘
                ↓
   AI: 계획 수정. 좋습니다 → 실행
                ↓
   결과물 한 번에 정확하게 나옴 → 재작업 없음

🎭 비유: 본 공연 전 리허설

공연을 올리는 극단에서 리허설 없이 본 공연을 무대에 올리는 일은 없어요. 왜? 리허설에서 잡을 수 있는 실수를 본 공연에서 잡으면 100배 비싸기 때문이에요.

리허설에서 동선 충돌 발견 → 배우 자리만 옮기면 끝
본 공연에서 동선 충돌 발견 → 관객 앞에서 사고 발생, 환불·재공연·평판 손상

Plan 모드는 정확히 같은 일을 해줘요. AI가 "이렇게 만들겠습니다"를 먼저 한국어로 보여주고, 사용자가 한 번 검토할 기회를 주는 거예요. 비용은 5초, 효과는 5분~5시간 절약.

🚨 Plan 모드를 반드시 켜야 하는 5가지 이유

제목 그대로예요. Plan 모드는 선택이 아니라 기본 습관이어야 해요. 다섯 가지 이유를 하나씩 짚어볼게요.

① 큰 사고를 막아줌

잘못된 방향으로 100줄을 짠 다음에 발견하는 것보다, 5줄짜리 계획에서 잡는 것이 100배 쌉니다. 비전공자는 코드가 100줄이 되면 이미 검수할 엄두가 안 나죠. 그 전에 잡는 게 답이에요.

② AI의 오해를 일찍 발견

같은 한국어 문장도 AI가 다르게 해석할 수 있어요. "이쁘게 만들어줘"는 AI마다 다른 뜻으로 받아들이고, "회원가입"도 어떤 모델은 OAuth까지 자동 포함시키고 어떤 모델은 단순 폼만 만들어요. 계획을 먼저 보면 "내가 의도한 거랑 다르네"를 5초 만에 발견 가능.

③ 학습 효과

계획을 보면 "아, 이런 식으로 접근하는구나"가 자연스럽게 익혀져요. 코드는 외계어처럼 보여도 한국어 계획은 누구나 읽을 수 있어요. 비전공자가 Vibe 코딩으로 빠르게 성장하는 가장 큰 비결이 여기 있어요 — 매번 AI의 계획을 한 번씩 읽다 보면, 어느 순간부터 본인도 "이런 일에는 이런 단계가 필요하구나"가 머리에 잡혀요.

④ 검토 비용을 앞당김

끝나고 100줄 코드를 검토하는 것보다, 시작 전 5줄 한국어 계획을 검토하는 것이 압도적으로 빨라요. 시간으로 따지면 보통 20:1~50:1 차이가 나요.

⑤ 비전공자에게 가장 중요

이게 진짜 핵심이에요. 코드 검수는 비전공자에게 거의 불가능해요. 하지만 "이런 단계로 만들겠습니다"라는 한국어 계획은 누구나 검수 가능해요. 비전공자의 안전망이 바로 Plan 모드예요.

🚦 Plan 모드 안 켜는 건 안전벨트 안 매고 운전하는 것.
한 번 사고 나면 무엇이 부서졌는지 보는 데만 시간이 다 가요.

🛠️ Cursor의 Plan 모드 — 어떻게 생겼나

Cursor에서 Plan 모드는 화면 안에 토글(스위치) 형태로 제공돼요. 명칭이 버전마다 살짝 달라요 — "Plan Mode", "Agent Mode", 또는 "Composer"의 한 옵션. 본질은 같아요.

📍 어디서 켜나요

Cursor 우측 채팅창을 엶
채팅 입력칸 아래쪽 (또는 우측 상단)에 모드 선택 드롭다운/토글 위치
"Plan" 또는 "Plan first" 같은 옵션 선택
이제 채팅에 요청을 보내면, AI가 코드를 바로 짜지 않고 계획부터 텍스트로 제시

🎬 흐름 예시 (실제로 어떻게 보이나)

   👤 사용자 (Cursor 채팅창)
   ──────────────────────────
   "고객 문의 폼 만들어줘. 이름·이메일·문의 내용 받고
    제출하면 슬랙 #cs 채널로 알림 가게."

   🤖 AI (Plan 모드 ON)
   ───────────────────
   📋 계획:
   1. React 컴포넌트로 폼 만들기 (3개 필드)
   2. 유효성 검사 (이메일 형식·필수 입력)
   3. 제출 → /api/contact 엔드포인트로 POST
   4. 서버에서 Slack Webhook으로 #cs 채널 알림
   5. 성공/실패 사용자 피드백 표시

   진행할까요? (수정사항 있으면 알려주세요)

   👤 사용자
   ──────
   "4번에 첨부파일 업로드도 추가해줘"

   🤖 AI
   ────
   계획 갱신:
   4. 서버에서 ① 첨부 파일을 S3에 업로드
                ② Slack에 파일 링크와 함께 알림
   진행할까요?

   👤 사용자: "OK"

   🤖 AI: (이제 실제 코드 작성 시작)

버튼 명칭이 정확히 어디 있는지는 Cursor 버전이 자주 업데이트돼서 매번 달라요. "AI가 계획부터 보여주는 모드"를 찾으면 그게 Plan 모드예요.

⌨️ Claude Code의 Plan 모드 — 어떻게 생겼나

Claude Code는 터미널 기반이라 토글 버튼이 없어요. 대신 키보드 단축키와 명시 요청 두 가지로 진입해요.

📍 진입 방법

방법 1: 단축키 — 일반적으로 Shift+Tab을 누르면 Plan 모드와 일반 모드를 토글
방법 2: 명시 요청 — 그냥 메시지에 "Plan 모드로 검토해줘" 또는 "먼저 계획만 보여줘"라고 적어도 동작
방법 3: 자동 활성화 — 큰 변경·여러 파일 수정·새 기능 추가 같은 작업은 Claude Code가 알아서 Plan 모드로 들어감

🎬 흐름 예시

   👤 사용자 (Claude Code 터미널)
   ──────────────────────────────
   > 우리 회사 사이트에 다크 모드 추가해줘

   🤖 Claude Code (Plan 모드 자동 진입)
   ─────────────────────────────────
   📋 계획 작성 중...

   📋 다크 모드 추가 계획
   1. CSS 변수 정의 — light/dark 두 세트
   2. 에 data-theme 속성으로 모드 전환
   3. 로컬스토리지에 사용자 선택 저장
   4. 우측 상단에 토글 버튼 추가
   5. 시스템 설정(prefers-color-scheme) 자동 감지
   6. 모든 페이지 색상 토큰 점검

   이대로 진행할까요?  [ExitPlanMode]

   👤 사용자: 진행
   🤖 (실제 파일 수정 시작 — 위 6단계를 순서대로)

💡 메타 노트: 지금 여러분이 읽고 있는 이 AX팀 학습 노트 자료들도 모두 Plan 모드로 만들어졌어요. 매 회차마다 "이런 섹션·이런 비유로 가겠습니다"를 사용자(AX팀 운영자)가 먼저 검토하고, OK 사인 받은 다음에 실제 HTML이 작성된 거예요. 자료의 일관된 톤도 거기서 나와요.

🔌 MCP 다시 — Week 1 복습 + Vibe 코딩 맥락

Week 1에서 이미 한 번 다뤘던 개념이에요. 그때는 "AI 에이전트의 시대" 관점에서 짧게 짚었지만, 오늘은 Vibe 코딩 도구에서 실제로 어떻게 쓰는지 관점으로 다시 봐요.

📖 한 줄로 다시

💡 MCP (Model Context Protocol) = AI와 외부 도구·데이터를 연결하는 표준 약속. Anthropic이 2024년 11월에 오픈소스로 공개한 뒤, 지금은 OpenAI·Google·Microsoft 모두 채택한 업계 표준.

🔌 Week 1 비유 다시: AI를 위한 USB-C

전자제품 충전기를 떠올려봐요. 옛날엔 휴대폰마다 다른 충전기를 따로 가지고 다녔어요. 지금은 USB-C 하나면 다 충전되죠. AI도 같은 일이 일어났어요.

   ❌ Before MCP
   ─────────────
   AI ──→ GitHub과 연결하려면 따로 개발
      ──→ Slack과 연결하려면 따로 개발
      ──→ 데이터베이스와 연결하려면 따로 개발
      ──→ 내 PC 파일과 연결하려면 따로 개발
   = 각 도구마다 다른 충전기 (지옥)


   ✅ After MCP
   ─────────────
   AI ──→ MCP ──→ GitHub
            ├──→ Slack
            ├──→ 데이터베이스
            └──→ 내 PC 파일
   = USB-C 하나로 모두 (천국)

🎭 비유 한 겹 더: MCP = 백스테이지 인터컴 회선

Week 8 공연 비유를 끌고 와볼게요. 백스테이지 무대 감독이 외부와 연락을 못 한다면 어떻게 될까요?

조명이 갑자기 꺼졌는데 조명구에 연락을 못 함 → 공연 중단
소품이 부족한데 소품샵에 주문을 못 보냄 → 즉흥 처리
대본이 갱신됐는데 자료실에서 새 대본을 못 받음 → 옛날 대사로 공연

MCP는 이 외부 연락망을 한 가지 표준 방식으로 통일해주는 인터컴 회선이에요. AI가 무엇을 할 수 있는지는 어떤 인터컴 회선(=MCP)이 연결되어 있는지에 따라 정해져요.

🌐 대표 MCP 3종 — 비전공자도 손에 잡힐 만한 것

MCP는 이미 수백 개 이상 만들어져 있어요. 그중에서 비전공자가 "아 이건 우리 팀에 진짜 쓸 만하겠다" 싶을 세 가지만 골랐어요.

난이도 ⭐⭐ · 가장 자주 쓰이는 MCP

① 📁 Filesystem MCP — 내 PC 폴더 열쇠 주기

비유: AI에게 회사 자료실 열쇠를 줌. 자료실에 들어가서 파일을 직접 읽고, 정리하고, 새 파일을 만들어 둘 수 있게 됨.

🎯 무엇을 할 수 있나

"내 보고서 폴더의 PDF 10개를 다 읽고 핵심만 요약해줘"
"이 엑셀 파일 5개를 합쳐서 새 시트로 만들어줘"
"내 PC 다운로드 폴더에서 작년 자료 찾아줘"
"이 폴더의 모든 .docx를 .md로 변환해줘"

⚠️ 주의할 점

권한 범위를 좁게 설정하기 — "내 디스크 전체" 같은 너무 넓은 권한은 위험. 특정 작업 폴더 하나만 열어주는 게 안전
읽기 전용으로 먼저 시작해보고, 익숙해지면 쓰기 권한 추가
회사 보안 정책에 따라 사내 데이터는 별도 검토 필요

난이도 ⭐⭐⭐ · 강력하지만 설정에 신경 필요

② 🌐 Playwright / Browser MCP — AI에게 웹브라우저 손 달기

비유: AI에게 "인터넷에서 직접 검색·클릭·캡처할 수 있는 손"을 달아줌. 사람이 마우스로 하는 일을 AI가 대신 함.

🎯 무엇을 할 수 있나

"이 웹사이트에 들어가서 가격표 정보 다 긁어줘"
"매일 아침 이 페이지 캡처해서 어제 대비 무엇이 바뀌었는지 비교해줘"
"내 사이트가 잘 작동하는지 자동으로 클릭해 보면서 점검해줘"
"경쟁사 상품 페이지 10개에서 후기 평점만 모아줘"

⚠️ 주의할 점

대량 자동화 시 사이트 측에서 차단될 수 있음 — 너무 빠르게·너무 자주 요청 안 하기
해당 사이트의 이용 약관(Terms of Service)에 자동화가 허용되는지 확인
로그인이 필요한 사이트는 인증 정보 관리 신중히

난이도 ⭐ · Vibe 코딩 실패 방지의 필수품

③ 📚 Context7 MCP — AI에게 최신 매뉴얼 책장 열어주기

비유: AI에게 "오늘자 라이브러리 매뉴얼 책장 열쇠"를 줌. AI의 머릿속에 있는 옛날 지식이 아니라, 오늘 현재의 공식 문서를 참조해서 코드를 만들게 됨.

🤔 왜 이게 필요한가요?

AI 모델은 학습이 끝난 시점까지의 지식만 가지고 있어요. 예를 들어 2025년에 학습이 끝난 모델은 2026년에 나온 라이브러리 새 버전은 몰라요. 그런데 비전공자는 이걸 모르고 "Streamlit으로 만들어줘"라고 시키면, AI가 옛날 방식으로 코드를 짜서 지금 안 돌아가는 결과물이 나와요.

Context7 MCP는 이 문제를 해결해요. AI가 코드를 짤 때 자동으로 해당 라이브러리의 최신 공식 문서를 가져와서 참고하게 만들어줘요.

🎯 무엇을 할 수 있나

"지금 Streamlit 최신 버전 문서 참고해서 대시보드 만들어줘"
"Next.js 15의 새 기능(Server Actions)으로 폼 처리 코드 짜줘"
"이 라이브러리의 v3 API로 마이그레이션해줘 (Context7로 v3 문서 확인하면서)"

🌟 왜 비전공자에게 특히 중요한가

Vibe 코딩의 가장 흔한 실패 패턴이 "AI가 옛날 방식으로 짜서 동작 안 함 → 비전공자는 왜 안 되는지 영문을 모름 → 좌절"이에요. Context7가 이 첫 단추부터 막아줘요. 한 번 설정해두면 "오늘자 문서 기준으로 만들어 주세요"가 자동으로 보장돼요.

📊 3종 한눈에 비교

MCP	기본 비유	비전공자 적합도	주의도
📁 Filesystem	회사 자료실 열쇠	⭐⭐⭐⭐	⚠️⚠️ (권한 범위)
🌐 Playwright	인터넷 다루는 손	⭐⭐⭐	⚠️⚠️ (사이트 차단)
📚 Context7	최신 매뉴얼 책장	⭐⭐⭐⭐⭐	⚠️ (특별한 위험 없음)

🎯 비전공자 추천 시작 순서: Context7부터(위험 없음 + 효과 큼) → Filesystem(특정 폴더 한정) → 익숙해지면 Playwright. 한 번에 다 켜지 말고 하나씩 추가하세요.

🧩 Plan 모드 + MCP를 합치면

이 둘을 한 자료에 묶은 이유가 여기에 있어요. 둘은 짝이에요.

   🧠 Plan 모드 = AI의 머리 (사고력)
   ──────────────────────────────────
   "이렇게 만들 거예요" 계획 먼저 제시
   사용자가 검수·승인하면 진행


   🦾 MCP = AI의 손과 팔 (능력치)
   ──────────────────────────────
   외부 자료·도구·웹사이트에 직접 접근
   "현장을 보고" 코드를 만들 수 있음


   🎭 둘 다 켜면 = 완전한 무대 운영
   ────────────────────────────────
   1️⃣ AI가 MCP로 현장을 봄
       (자료 폴더 읽고, 최신 문서 확인하고, 사이트 캡처)
   2️⃣ AI가 본 것을 바탕으로 계획을 세움 (Plan 모드)
   3️⃣ 사용자가 한국어 계획을 검수하고 승인
   4️⃣ AI가 실제로 만들어냄 (MCP로 파일 작성·외부 호출)

   = 리허설(Plan) + 인터컴(MCP) = 공연 성공률 압도적

🎯 실전 시나리오 한 장면

예를 들어 "우리 회사 보고서 폴더의 작년 자료를 다 분석해서 올해 트렌드 대시보드 만들어줘"라고 시켰을 때, 두 가지가 동시에 작동하는 모습이에요.

📁 Filesystem MCP가 작년 보고서 폴더를 읽음
📚 Context7 MCP가 Streamlit 최신 문서를 가져옴
🗺️ Plan 모드가 "보고서 12개 발견, 카테고리 4개 도출, 각 카테고리별 그래프 + 종합 요약 페이지" 계획 제시
👤 사용자가 한국어 계획 검토 → "카테고리 4개 말고 3개로 합치자" 수정
✅ 사용자 승인 → AI가 실제 Streamlit 대시보드 작성 → 완성

이 한 흐름이 30분 이내에 끝나요. 비전공자 혼자서요.

❓ FAQ

Q1. Plan 모드 켜면 시간이 더 걸리지 않나요?

표면적으로는 그래 보여요 — 계획 작성에 5~10초 더 걸리니까요. 하지만 전체 시간은 압도적으로 줄어요. 잘못된 방향으로 코드 100줄 짠 뒤 재작업하는 시간 vs 시작 전에 5줄 계획 검토하는 시간을 비교해보면 명확해요. 익숙해지면 "Plan 없이는 불안해서 못 한다"가 자연스럽게 돼요.

Q2. MCP는 어떻게 설치하나요?

도구마다 달라요. 가볍게 안내만 — Cursor는 설정 > Tools & Integrations > MCP에서 GUI로 추가, Claude Code는 claude mcp add 같은 명령어로 추가. 구체적 설치 과정은 시리즈 ③(다음 회차)에서 직접 만져보면서 다룰 예정이에요.

Q3. Plan 모드만 잘 쓰면 MCP 없이도 가능한가요?

✅ 작은 일은 가능해요. "버튼 하나 만들어줘"처럼 외부 데이터·도구가 필요 없는 작업은 Plan 모드만으로 충분. 외부 자료·웹사이트·실제 파일에 손이 닿아야 하는 순간 MCP가 필수가 돼요. 일이 커질수록 MCP 의존도가 커져요.

Q4. MCP가 보안적으로 안전한가요?

⚠️ 설정에 따라 다름. MCP 자체는 표준 프로토콜이지만, 어떤 권한을 줬는지가 핵심이에요. 처음엔 항상 읽기 전용 + 특정 폴더만으로 좁게 시작하세요. 익숙해지면 점진적으로 확장. 회사 민감 데이터(고객정보·계약서·내부 보고서)는 별도 검토가 필요하고, 잘 모를 때는 IT 보안팀과 상의가 안전한 길이에요.

🎓 핵심 요약

오늘 자료를 한 장으로 정리하면 이래요.

Plan 모드 = 리허설. AI가 코드 작성 전에 단계별 계획을 먼저 한국어로 제시하고, 사용자 승인 후 실행하는 작동 방식.
Plan 모드를 반드시 켜야 하는 이유 5가지 — ① 큰 사고 방지 ② AI 오해 조기 발견 ③ 학습 효과 ④ 검토 비용 앞당김 ⑤ 비전공자의 안전망.
도구별 진입 — Cursor: 채팅창 토글 / Claude Code: Shift+Tab 또는 명시 요청 또는 자동 활성화.
MCP = 인터컴. AI와 외부 도구·데이터를 연결하는 표준. Week 1의 "AI를 위한 USB-C" 비유 복습.
대표 MCP 3종 — 📁 Filesystem(자료실 열쇠) · 🌐 Playwright(인터넷 손) · 📚 Context7(최신 매뉴얼 책장). 비전공자는 Context7부터 시작 권장.
둘이 짝 — Plan = 머리(사고력) / MCP = 손과 팔(능력치). 둘 다 켜야 완전한 공연.

🎭 한 줄 마무리: 오늘 배운 두 가지는 "AI를 안전하고 강력하게 쓰는 양 기둥"이에요. 리허설 없는 공연은 사고로, 인터컴 없는 무대는 고립으로 가요. 둘 다 켜는 게 비전공자 Vibe 코딩의 출발선이에요.

이번 자료까지가 Vibe 코딩 시리즈 ② 개념편이에요. 다음 ③편부터는 직접 Cursor와 Claude Code를 켜고, 오늘 배운 Plan 모드와 MCP를 실제로 만져보면서 첫 결과물을 만들어볼 거예요. 시리즈가 끝날 때쯤이면 "내 업무용 도구는 직접 만든다"가 자연스럽게 손에 잡혀 있을 거예요.

🎭 수고하셨습니다!
다음 주, 무대에 첫 조명을 켜러 가볼까요?