Week 04 · AI 바이브 코딩
Claude를 내 일에 맞게 확장하는 두 가지 방법. 오늘은 실제 SKILL·MCP 파일을 직접 열어보고, 5개를 내 손으로 깝니다.
되짚기 · 3주차에서
3주차 STAGE 4. Claude에게 이렇게 말했습니다 —
그런데 — 그 'SKILL'이 대체 뭐였을까요? 어디서 왔고, 안에는 뭐가 들어있을까요?
오늘 그 뚜껑을 직접 엽니다.
Week 04 · 목표
🧩
SKILL이 뭔지
실제 SKILL.md 파일을 열어보고 — 비유 말고 진짜로 안다
🔌
MCP가 뭔지
실제 도구 코드를 열어보고 — 어떻게 외부와 닿는지 안다
⚖️
둘의 결정적 차이
SKILL ≠ MCP — 한 문장으로 설명할 수 있다
+1 보너스 실습 5개를 직접 설치 — SKILL 3개 frontend-design · impeccable · skill-creator + MCP 2개 Figma · 헌법
개론 · 큰 그림
그 빈칸 두 개를 채우는 것이 바로 오늘의 SKILL과 MCP입니다.
① 모르는 것 — 내 방식
우리 팀 규칙, 디자인 기준, 보고서 양식, 업무 절차…
"어떻게 해야 하는지"
→ 🧩 SKILL이 채웁니다
② 모르는 것 — 바깥 세상
실시간 데이터, 외부 도구, 우리 회사 DB, 오늘자 법령…
"닿을 수 없는 것"
→ 🔌 MCP가 채웁니다
SKILL = 머릿속 채우기 · MCP = 손발 늘리기
PART 01 · SKILL
정의 → 까보기 → 작동 원리 → 왜 필요한가 → 잘 만드는 법 → 설치 실습
SKILL · 1.1 · 정의
신입사원에게 "우리 회사 보고서는 이렇게 써" 하고 매뉴얼 한 권 건네는 것 — 그게 SKILL입니다.
📌 제작 — Anthropic · 지금은 개방형 표준. SKILL(Agent Skills)은 Anthropic이 처음 만들었고, 2025년 말 개방형 표준으로 공개됐습니다. 같은 SKILL.md 형식을 Claude Code뿐 아니라 Codex CLI·Gemini CLI·Cursor 등 여러 AI 코딩 도구가 지원해 — 한 번 만든 SKILL을 그대로 옮겨 쓸 수 있습니다.
SKILL · 1.2 · 🔍 직접 까보기 #1
3주차에 깐 그 SKILL. SKILL.md 한 장은 꼬리표 + 본문 딱 두 칸 — 안을 그대로 펼쳤습니다.
보세요 — 코드가 한 줄도 없습니다. 사람이 읽는 그냥 '글'. 윗칸 꼬리표(name+description)가 '언제'를, 아랫칸 본문이 '어떻게'를 가르칩니다. 평소엔 꼬리표(약 100단어)만 슬쩍 보다가, 관련 작업이 오면 본문을 펼칩니다 — 이 절약 방식은 곧 봅니다.
📂 이 파일은 어디에? SKILL을 설치하면 윈도우 기준 C:\Users\<내 사용자명>\.claude\skills\frontend-design\ 폴더에 들어갑니다 — 탐색기나 메모장으로 바로 열 수 있어요.
SKILL · 1.3 · 🔍 직접 까보기 #2
impeccable = AI티 나는 디자인('AI slop')을 없애는 SKILL. 폴더를 열면 —
/impeccable craft · critique · audit · polish — 상황별로 호출.📂 이 폴더는 어디에? 설치하면 윈도우 기준 C:\Users\<내 사용자명>\.claude\skills\impeccable\ 에 위 구조 그대로 생깁니다. 탐색기로 열어 직접 확인해 보세요.
SKILL · 1.4 · 작동 원리
백과사전 전권을 책상에 쌓아두지 않습니다. 목차만 보다가, 필요한 페이지만 펼치죠. SKILL도 똑같습니다 — 이걸 progressive disclosure라 부릅니다.
① 평소
꼬리표만
description ~100단어
② 관련 작업
SKILL.md 본문
매뉴얼 전체
③ 더 깊이
reference/그 파일만
딱 필요한 장(章)
효과 — SKILL을 100개 깔아도 Claude의 기억(컨텍스트 창)이 터지지 않습니다.
SKILL · 1.5 · 왜 필요한가
🔁
매번 다시 설명
보고서 형식·팀 규칙·디자인 기준을 — 대화할 때마다 처음부터 또 일러줘야 합니다.
🎲
들쭉날쭉한 결과
같은 일을 시켜도 그때그때 품질·형식이 달라집니다. 기준이 머릿속에 없으니까요.
😐
평범함에 머묾
고수의 기준을 빌릴 수 없어 무난하게만 — 디자인이라면 흔한 'AI slop'으로.
SKILL · 1.6 · 잘 만드는 법
Anthropic 공식 skill-creator SKILL을 분석해 정리한, 잘 작동하는 SKILL의 5원칙입니다.
Claude는 SKILL을 덜 쓰는 경향이 있다. 무엇을 하는지 + 언제 쓰는지를 구체적 상황·표현까지 description에 다 적어 트리거를 확실히 한다.
본문이 길어지면 reference/로 나누고 "언제 이 파일을 읽어라"는 포인터를 남긴다 (progressive disclosure).
요즘 LLM은 똑똑하다. 대문자 명령을 쌓기보다 이유를 설명하면 더 잘, 더 유연하게 따른다.
지시는 명령형 문장으로. Input → Output 같은 구체적 예시를 함께 두면 결과가 안정된다.
실제 사용자가 칠 법한 프롬프트 2~3개로 돌려보고, 결과를 보며 고친다 — 만족할 때까지 반복.
SKILL 만들기가 막막하면 — Claude Code에서 /skill-creator 를 부르면 이 과정을 같이 진행해 줍니다. 원칙 ③은 다음 두 장에서 자세히 봅니다.
SKILL · 1.7 · 깊이 보기 — 원칙 ③
SKILL 본문에 "NEVER ~" · "ALWAYS ~" 같은 대문자 명령을 쌓는 건 옛 방식입니다. 요즘 Claude에겐 규칙의 '이유'를 알려주는 게 더 잘 통합니다 — 왜 그럴까요?
🧭
처음 보는 상황도 판단
명령은 '적힌 경우'만 막습니다. 이유를 알면 비슷한 다른 함정도 스스로 피합니다.
🤝
유연하게 따름
규칙이 안 맞는 예외에서 무리하게 우기지 않고 합리적으로 판단합니다.
📌
더 안정적으로 지킴
'왜'가 붙은 규칙은 맥락이 생겨 — 대문자 명령보다 오히려 잘 지켜집니다.
✍️ 왜를 어떻게 쓰나 — 한 줄 공식
[이렇게 하라] — 왜냐면 — [안 하면 이런 문제가 생기니까]
핵심은 규칙이 막으려는 '나쁜 결과'를 한 문장으로 덧붙이는 것. 그 한 문장이 Claude에게 — 규칙을 글자 그대로가 아니라 의도대로 따를 기준을 줍니다.
SKILL · 1.8 · 깊이 보기 — 원칙 ③ 예시
왼쪽은 명령만, 오른쪽은 '왜'를 붙인 버전. 오른쪽이 Claude를 어떻게 더 똑똑하게 만드는지 보세요.
규칙은 점, 이유는 선 — 이유 한 문장이 비슷한 상황 여러 개를 한꺼번에 잡습니다.
SKILL · 1.9 · 🛠 실습 — 설치
frontend-design과 impeccable은 둘 다 디자인 SKILL이라 설치법도 거의 같습니다 — 채팅에 자연어 한 줄. 안 되면 아래 정확한 명령어로.
① frontend-design · Anthropic 공식
자연어 — "frontend-design SKILL 설치해줘"
안 되면:/plugin marketplace add anthropics/claude-plugins-official/plugin install frontend-design@claude-plugins-official
② impeccable · 서드파티
자연어 — "impeccable SKILL 설치해줘"
안 되면 (공식 마켓에 없음) 터미널에:npx skills add pbakaus/impeccable → AI 도구 자동 감지
왜 둘 다? frontend-design = 만들 때, impeccable = 만든 걸 진단·개선(/impeccable critique·polish). 겹쳐 쓰면 'AI slop' 없는 결과 — SKILL은 이렇게 포개 씁니다.
📂 출처 — frontend-design: github.com/anthropics/claude-plugins-official · impeccable: github.com/pbakaus/impeccable · 설치 위치 ~/.claude/skills/
SKILL · 1.10 · 🛠 실습 — 직접 만들기
남이 만든 걸 깔기만 하는 게 아닙니다. 나만의 SKILL = 폴더 + SKILL.md 한 장 — 두 가지 방법이 있습니다.
✍️ 방법 A · 손으로 — 5줄이면 끝
🤖 방법 B · skill-creator에게 맡기기
① 설치 — 위 한 줄. 안 되면 /plugin install skill-creator@claude-plugins-official
② 실행 — /skill-creator 입력.
③ 묻는 말에 답만 하면 — SKILL.md를 알아서 만들어 줍니다.
손으로도 5줄이면 완성, 어렵다면 skill-creator가 대신 만들어 줍니다. 이렇게 SKILL 3개(frontend-design·impeccable·skill-creator)를 갖췄습니다.
PART 02 · MCP
정의 → 안을 직접 까보기 → 작동 구조 → 왜 필요한가 → 설치 실습
MCP · 2.1 · 정의
Model Context Protocol — Anthropic이 2024년 11월 공개한 개방형 표준. 나라마다 콘센트가 다르면 어댑터 지옥이죠. MCP는 'AI ↔ 외부도구' 공용 규격입니다.
한 번 규격을 맞춰두면 — Figma · GitHub · 노션 · 데이터베이스 · 법령정보 가 모두 같은 방식으로 Claude에 '꽂힙니다'.
🌐 개방형 표준이라 — Claude만의 것이 아닙니다. OpenAI(ChatGPT·GPT)는 2025년 3월, Google(Gemini)은 2025년 4월 MCP 지원을 채택했습니다. 한 번 만든 MCP 서버는 여러 LLM에서 그대로 재사용됩니다.
핵심 대비 — SKILL이 '지식(글)'이라면, MCP는 '연결선'. Claude에게 새로운 손발을 달아줍니다.
MCP · 2.2 · 🔍 직접 까보기 #3
Figma 공식 MCP가 Claude에게 건네는 '도구' 하나 — 디자인 정보를 가져오는 도구의 정의를 펼쳤습니다.
SKILL은 '글'이었죠. MCP 도구는 '코드' — 진짜로 Figma 서버를 호출해 디자인을 가져옵니다.
MCP · 2.3 · 뜯어보기
방금 본 코드를 세 조각으로 나누면 —
.describe()로 각 칸을 사람 말로 설명해 둡니다.Figma MCP는 — 디자인 읽기·화면 캡처·코드 변환 같은 작업을 이렇게 도구 여러 개로 묶어 Claude에게 건넵니다.
MCP · 2.4 · 작동 구조
🧠
Claude
질문을 이해
🔌
MCP 서버
figma-mcp
🎨
Figma 서버
디자인 파일
1 사용자: "이 Figma 프레임 그대로 코드로 만들어줘"
2 Claude: get_design 도구를 호출
3 MCP 서버: Figma API에 실제 요청 → 디자인 데이터 받음
4 결과 정리 → Claude → 코드로 변환해 답변
Claude는 디자인을 '추측하지' 않습니다. 진짜 파일을 가져옵니다 — 그래서 화면과 똑같습니다.
MCP · 2.5 · 왜 필요한가
⏱️
실시간
오늘 개정된 법, 어제 친 커밋 — 학습 데이터엔 없습니다.
🗄️
내 데이터
우리 회사 DB·노션·캘린더 — Claude는 애초에 모릅니다.
🛡️
환각 방지
외부 DB로 교차검증하면 AI가 지어낸 가짜 정보를 잡아냅니다 — 잠시 뒤 설치할 헌법 MCP의 실제 기능입니다.
MCP가 없으면 '아는 것'만, 있으면 '알아보고' 답합니다.
MCP · 2.6 · 🛠 실습 — 설치 ①
Figma 공식 MCP. 설치하면 Claude가 Figma 디자인 파일을 직접 읽어 — 화면 그대로 코드로 옮깁니다.
채팅창에 "Figma MCP 설치해줘" — Anthropic 공식 마켓플레이스에 있어 보통 한 줄로 끝납니다.
/plugin marketplace add anthropics/claude-plugins-official/plugin install figma@claude-plugins-official
설치 후 Figma 계정 연결(로그인)을 한 번 하면 끝.
Figma 프레임 URL을 주고 "이 화면 그대로 코드로 만들어줘" → MCP가 디자인을 가져와 변환합니다.
PART 02에서 본 그 도구(get_design)가 — 지금 진짜로 Figma를 읽습니다.
MCP · 2.7 · 🛠 실습 — 설치 ②
open.law.go.kr → 'Open API 사용 신청' → 인증키(OC) 즉시 발급. (IP 승인 불필요)
/plugin marketplace add chrisryugj/korean-law-mcp/plugin install korean-law@korean-law-marketplace
설치 중 1번에서 발급한 OC 키를 입력합니다.
"헌법 제1조 알려줘" → MCP가 법제처에서 실시간으로 가져옵니다.
헌법 MCP는 오픈소스 — Figma 공식 MCP와 달리, 실제 도구 코드까지 GitHub에서 직접 열어볼 수 있습니다.
PART 03 · 핵심
오늘 가장 중요한 부분 — 한 문장으로 정리합니다
차이 · 3.1 · 한 문장
🧩 SKILL — 방법
그걸 어떻게 잘 쓸지 가르친다. (know-how)
🔌 MCP — 연결
데이터·도구에 닿게 해준다. (connectivity)
서로 경쟁하지 않습니다. 층(layer)이 다를 뿐입니다.
차이 · 3.2 · 비교표
| 🧩 SKILL | 🔌 MCP | |
|---|---|---|
| 한 마디 | 업무 매뉴얼 | 외부 연결선 |
| 무엇을 | 하는 '방법' — 지식 | 도구·데이터 '접근' |
| 형태 | SKILL.md — 사람이 읽는 글 | 서버 프로그램 — 코드 |
| 동작 | 오프라인, 외부 호출 ✕ | 실시간 외부 API 호출 ○ |
| 만들기 | 쉬움 — 5줄로 시작 | 어려움 — 서버 개발 필요 |
| 예시 | frontend-design, impeccable | 헌법 MCP, Figma, GitHub |
| 지원 범위 | 개방형 표준(Anthropic 시작) — Claude·Codex·Gemini 등 | 개방형 표준 — Claude·GPT·Gemini 등 |
| 토큰·비용 | 평소 거의 0 — 쓸 때만 토큰 차지 | 연결만 해도 도구목록이 상주 — 토큰=요금 누적 |
차이 · 3.3 · 메모리 관점
Claude의 '기억'(컨텍스트 창)은 한정돼 있습니다. SKILL과 MCP는 메모리에 머무는 방식이 정반대입니다.
🧩 SKILL — 필요할 때만 펼침
✅ 꼬리표(name+description)만 평소 상주 — 수십 토큰
⏏️ SKILL.md 본문은 발동될 때만 추가로 올라감
🚫 scripts/·assets/는 안 올라감 — 실행·산출에만 쓰임
📑 reference/는 그 작업에 필요한 파일만
🔌 MCP — 연결되면 목록째 상주
📥 서버가 연결되는 순간 모든 도구의 이름·설명·입력 형식이 메모리에 올라감
📄 서버 사용 안내문(instructions)도 함께 상주
⚠️ 도구가 많을수록 메모리 차지가 커짐
💡 일부 환경은 지연 로딩 — 이름만 띄우고 상세는 호출 직전 가져옴
한 줄 요약 — SKILL은 평소엔 거의 비어 있다(lazy), MCP는 연결되면 도구 목록을 들고 있다(resident).
💰 그리고 메모리는 곧 '돈'입니다. API 요금은 토큰 단위 — 컨텍스트 창에 올라간 만큼 매 호출마다 과금됩니다. SKILL은 안 쓰면 비용 거의 0, MCP는 연결만 해도 도구목록만큼 토큰이 계속 쌓입니다. 안 쓰는 MCP는 꺼두는 게 절약이에요.
Week 04 완료
🧩 SKILL = 업무 매뉴얼(글). Claude에게 '방법'을 가르친다.
🔌 MCP = 외부 연결선(코드). 도구·데이터에 '닿게' 한다.
⚖️ 함께 — MCP로 연결 + SKILL로 방법 = 내 일에 맞는 Claude.
SKILL은 '방법', MCP는 '연결' — 그리고 둘 다 토큰(=비용)을 의식하며 골라 쓰는 것.
AI 팀 교육 · Week 04 · SKILL & MCP — 무엇이고, 어떻게 쓰나
다음 시간 예고 · Week 05
오늘 만든 SKILL·MCP는 Claude의 '능력'이었습니다. 다음 주는 그 능력으로 다룰 '지식'을 어디에 어떻게 쌓을지 — 두 가지를 직접 설치합니다.
🪨
① Obsidian 설치 & 활용
[[ ]]) · 그래프뷰🤖
② LLM-WIKI 설치 & 동작
준비물 — 노트북. Obsidian만 미리 설치해 오면 다음 시간이 한결 수월합니다.
AI 팀 교육 · Week 05 예고 · Obsidian + LLM-WIKI