Claude Code에서 스킬, 에이전트, MCP 서버가 함께 작동하는 방법

    /
    8 분 소요
    Ing. Patrik Kelemen
    Claude Code에서 스킬, 에이전트, MCP 서버가 함께 작동하는 방법

    웹 개발을 위해 Claude Code가 스킬, 서브 에이전트, MCP 서버 연결을 통해 기능을 확장하는 방법을 이해하는 실용 가이드입니다.

    Namiru AI

    AI 고객 지원 당신의 웹사이트를 위한

    URL을 붙여넣으세요. 30초 만에 지원 에이전트를 받으세요.

    Claude Code에서 스킬, 에이전트, MCP 서버가 함께 작동하는 방법

    아마 이런 벽에 부딪혀본 적이 있을 겁니다. 전체 코드베이스를 AI 채팅에 붙여넣고, 자세한 프롬프트를 추가했는데... 쓸모없는 결과가 나오거나, 더 나쁘게는 모델이 50,000 토큰 전에 읽은 내용을 잊어버려서 존재하지 않는 함수 이름을 만들어내기 시작합니다.

    이것이 바로 컨텍스트 윈도우 문제입니다. 그리고 LLM에 더 많은 코드를 던진다고 해서 더 똑똑해지지 않는 이유입니다.

    Claude Code는 이를 다르게 해결합니다. 더 큰 컨텍스트 윈도우를 갖는 것이 아니라(물론 그것도 도움이 되지만), 가진 공간을 똑똑하게 사용하는 것입니다. 이를 위해 세 가지가 함께 작동합니다: 스킬, 서브 에이전트, 그리고 MCP 서버입니다.

    이 조각들이 어떻게 맞물리는지 보여드리겠습니다. 이것을 이해하면, AI와 싸우는 것을 멈추고 함께 작업하기 시작할 것입니다.

    컨텍스트 윈도우 문제

    제가 내재화하는 데 시간이 걸렸던 것이 있습니다. LLM은 실제로 긴 대화의 시작 부분을 여러분이 기대하는 방식으로 "기억"하지 않습니다. 컨텍스트 윈도우는 파일 캐비닛이라기보다는 스포트라이트에 가깝습니다. 더 많은 토큰을 추가할수록, 이전 콘텐츠는 덜 주목받습니다. 100,000 토큰의 코드를 붙여넣으면, 모델이 여러분의 질문에 도달할 때쯤에는 본질적으로 훑어보는 수준입니다.

    이것은 많은 좌절스러운 AI 행동을 설명합니다. 모델이 처음에는 똑똑해 보이다가 혼란스러워집니다. 이전에 말한 것을 잊어버립니다. "읽었지만" 명백히 기억하지 못한 파일의 세부 사항을 환각합니다.

    해결책은 더 큰 컨텍스트 윈도우가 아닙니다. 해결책은 그것이 필요하지 않게 만드는 것입니다.

    Claude Code가 실제로 생각하는 방법

    Claude Code는 에이전트입니다. 멋지게 들리지만, 단지 계획하고, 실행하고, 결과를 관찰하고, 반복할 수 있다는 의미입니다. "프로젝트의 실패하는 테스트를 고쳐줘"라고 요청하면, 전체 코드베이스를 한 번에 이해하려고 하지 않습니다. 대신, 집중된 단계로 작업합니다:

    1. 프로젝트 구조를 읽어 무엇이 어디에 있는지 이해
    2. 테스트를 실행하여 실제로 무엇이 실패하는지 확인
    3. 특정 실패하는 테스트와 그것이 테스트하는 코드를 살펴봄
    4. 수정 작업
    5. 테스트를 다시 실행
    6. 여전히 깨져 있으면 다른 것을 시도

    각 단계는 필요한 컨텍스트만 가지고 작업합니다. 에이전트는 본 모든 것의 원시 로그가 아니라, 학습한 것의 작업 요약을 유지합니다. 이것이 Claude Code가 컨텍스트 공간이 부족하지 않으면서 복잡한 버그에 대해 20번 반복할 수 있는 방법입니다.

    실제로 무언가를 디버깅하는 방법처럼 생각해보세요. 전체 코드베이스를 머릿속에 담고 있지 않습니다. 한 영역에 집중하고, 가설을 세우고, 테스트하고, 조정합니다. Claude Code도 같은 방식으로 작동합니다.

    서브 에이전트, 진짜 게임 체인저

    여기서 정말 흥미로워집니다. Claude Code는 서브 에이전트를 생성할 수 있습니다.

    서브 에이전트는 자체적인 깨끗한 컨텍스트 윈도우를 가진 별도의 Claude 인스턴스입니다. Claude Code에게 하나를 생성하고, 집중된 작업을 주고, 독립적으로 작업하게 하고, 발견한 것의 요약을 받을 수 있습니다. 서브 에이전트의 전체 컨텍스트는 메인 대화를 오염시키지 않습니다.

    이것은 엄청납니다. 하나의 에이전트가 모든 것을 담으려고 하는 대신:

    당신: "이 코드베이스를 보안 문제, 성능 문제, 테스트 커버리지에 대해 분석해줘"

    메인 에이전트가 서브 에이전트를 생성: ├── 서브 에이전트 1: 보안 분석 (자체 컨텍스트, 보안 관련 파일 읽기) ├── 서브 에이전트 2: 성능 검토 (자체 컨텍스트, 핫 패스에 집중)
    └── 서브 에이전트 3: 테스트 커버리지 (자체 컨텍스트, 테스트 파일 검사)

    각 서브 에이전트가 메인 에이전트에 요약 반환 메인 에이전트가 모든 것을 하나의 응답으로 종합

    서브 에이전트는 각각 수천 줄의 코드를 읽을 수 있습니다. 하지만 메인 에이전트는 그들의 압축된 발견 사항만 받습니다. 여러 영역에 걸쳐 깊은 분석을 받으면서도 메인 컨텍스트는 깨끗하게 유지됩니다.

    주니어 개발자에게 위임하는 것처럼 생각해보세요. 그들이 검토한 모든 줄을 읽을 필요가 없습니다. 그들의 결론과 발견한 위험 신호가 필요합니다. 서브 에이전트도 같은 방식으로 작동합니다.

    서브 에이전트를 실제로 사용하는 방법

    Claude Code에게 명시적으로 서브 에이전트를 생성하도록 요청할 수 있습니다:

    • "인증 모듈을 심층 분석하기 위해 서브 에이전트를 생성해줘"
    • "N+1 문제에 대해 모든 데이터베이스 쿼리를 검토하기 위해 서브 에이전트를 사용해줘"
    • "서브 에이전트가 테스트 파일을 살펴보고 커버리지 격차를 보고하게 해줘"

    서브 에이전트는 자체적인 새로운 컨텍스트를 얻고, 깊은 작업을 수행하고, 요약을 반환합니다. 메인 대화는 모든 원시 분석으로 부풀려지지 않습니다.

    이것은 특히 대규모 코드베이스에 강력합니다. Claude Code가 중간에 추적을 잃는 대신, 실제로 확장되는 집중된 분석을 얻습니다.

    스킬이 들어오는 곳

    그래서 Claude Code는 작업을 분해하고, 서브 에이전트를 생성하고, 집중된 단계로 작업할 수 있습니다. 하지만 특정 작업을 잘 수행하는 방법을 어떻게 알까요? 그것이 스킬이 들어오는 곳입니다.

    스킬은 Claude가 특정 유형의 작업을 다루기 전에 읽는 패키지화된 지침입니다. Claude Code에게 PowerPoint 프레젠테이션을 만들라고 요청하면, 먼저 /mnt/skills/public/pptx/SKILL.md의 스킬 파일을 읽습니다. 이 파일에는 모범 사례, 일반적인 함정, 실제로 작동하는 정확한 코드 패턴이 포함되어 있습니다.

    스킬은 일반적으로 다음을 포함합니다:

    • 자세한 지침이 담긴 SKILL.md 파일
    • 코드 템플릿과 예제
    • 알려진 제한 사항과 해결 방법
    • 출력 형식 사양

    핵심 통찰은 스킬이 필요할 때 로드된다는 것입니다. Claude는 Python을 디버깅할 때 PowerPoint 지침으로 컨텍스트 윈도우 공간을 낭비하지 않습니다. 필요할 때 관련 스킬을 로드하고, 작업에 그 전문 지식을 사용하고, 계속 진행합니다.

    이것은 도구와 다릅니다. 도구는 Claude가 데이터를 받기 위해 호출하는 함수입니다. web_searchbash_tool 같은 것들입니다. 스킬은 Claude가 문제에 접근하는 방식을 변경하는 지식 패키지입니다. 이 구분은 중요합니다. 도구는 시스템 프롬프트에서 토큰 비용이 발생하지만(더 많은 도구 = 코드를 위한 공간 감소), 스킬은 관련이 있을 때만 로드됩니다.

    측면도구스킬
    작동 방식함수 호출, 결과 받기지침 로드, 동작 수정
    토큰 비용항상 컨텍스트에 존재필요할 때 로드
    최적 용도개별 작업 (API 호출, 파일 작업)복잡한 워크플로우 (문서 생성)

    서브 에이전트도 스킬을 로드할 수 있습니다. 보안을 분석하는 서브 에이전트는 메인 대화를 어지럽히지 않고 보안 관련 스킬을 로드할 수 있습니다.

    반복 루프

    지속적으로 볼 수 있는 한 가지 패턴은 반복 루프입니다. Claude Code는 무언가를 생성하고, 작동하는지 확인하고, 올바를 때까지 문제를 수정합니다.

    1. 코드 생성
    2. 실행 (또는 린트, 또는 타입 체크)
    3. 작동하는지 확인
    4. 작동하지 않으면 오류를 분석하고 다시 시도
    5. 통과할 때까지 반복

    이것이 Claude Code가 단일 샷 프롬프트가 놓칠 버그를 수정할 수 있는 이유입니다. 단순히 코드를 생성하고 희망하는 것이 아닙니다. 자신의 작업을 테스트하고 실제 피드백에 응답합니다.

    Claude Code가 React 컴포넌트를 만들고 개발 서버를 실행하여 오류를 확인할 때, 이 루프를 사용하고 있습니다. 함수를 작성하고 테스트를 실행하여 작동하는지 확인할 때도 마찬가지입니다. 생성과 검증 단계가 함께 작동합니다.

    이것은 또한 Claude Code가 때때로 예상보다 오래 걸리는 이유를 설명합니다. 느린 것이 아닙니다. 철저한 것입니다. 테스트를 실행하고, 타입 오류를 확인하고, 실제로 작동할 때까지 반복합니다.

    MCP 서버, 외부 시스템에 연결

    지금까지 Claude Code가 어떻게 생각하는지(에이전트 단계, 서브 에이전트)와 무엇을 아는지(스킬)에 대해 이야기했습니다. 하지만 외부 시스템에 연결하는 것은 어떨까요? 그것이 MCP가 들어오는 곳입니다.

    Model Context Protocol은 Claude Code가 데이터베이스, GitHub, 파일 시스템, CI/CD 파이프라인, 그리고 거의 모든 것과 대화하는 방법입니다. MCP를 AI를 위한 USB-C로 생각하세요: 호환 가능한 AI 시스템이 호환 가능한 서비스에 연결할 수 있게 하는 표준 인터페이스입니다.

    MCP 서버는 세 가지 유형의 기능을 노출합니다:

    도구 - Claude가 호출할 수 있는 함수, 데이터베이스 쿼리나 풀 리퀘스트 생성 같은 것

    리소스 - Claude가 읽을 수 있는 데이터 소스, 파일 내용이나 데이터베이스 스키마 같은 것

    프롬프트 - 일반적인 상호작용을 위한 재사용 가능한 템플릿

    웹 개발을 위해 가장 유용한 MCP 서버는 다음을 포함합니다:

    • 파일시스템 서버 - 프로젝트의 파일 읽기 및 쓰기 (안전을 위해 샌드박스됨)
    • GitHub 서버 - 저장소, PR, 이슈, 워크플로우 관리
    • 데이터베이스 서버 - 자연어를 통해 PostgreSQL, MySQL, SQLite 쿼리

    TypeScript로 작성된 간단한 MCP 서버는 다음과 같습니다: typescript import { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js'; import { StdioServerTransport } from '@modelcontextprotocol/sdk/server/stdio.js';

    const server = new McpServer({ name: 'code-analyzer', version: '1.0.0' });

    server.registerTool( 'analyze_complexity', { description: 'Analyze cyclomatic complexity of a file', inputSchema: { filePath: { type: 'string' } } }, async ({ filePath }) => { const result = await analyzeFile(filePath); return { content: [{ type: 'text', text: JSON.stringify(result) }] }; } );

    const transport = new StdioServerTransport(); await server.connect(transport);

    MCP 서버의 힘은 서브 에이전트와 함께 작동하는 방식에서 나옵니다. 서브 에이전트는 MCP를 통해 데이터베이스를 쿼리하고, 수천 개의 행을 분석하고, 관련 발견 사항만 반환할 수 있습니다. 원시 데이터는 메인 컨텍스트에 닿지 않습니다.

    모두 함께 모으기

    실제 예를 살펴보겠습니다. Claude Code에게 "이 PR을 검토하고 데이터베이스 마이그레이션이 안전한지 확인해줘"라고 요청합니다.

    실제로 일어나는 일은 다음과 같습니다:

    1. 메인 에이전트가 코드 리뷰를 위한 관련 스킬 로드
    2. PR 변경 사항을 심층 분석하기 위해 서브 에이전트 생성
    3. 해당 서브 에이전트가 GitHub MCP 서버를 호출하여 PR 세부 정보 가져오기
    4. 다른 서브 에이전트가 마이그레이션 파일을 읽고 MCP를 통해 현재 데이터베이스 스키마 쿼리
    5. 서브 에이전트가 집중된 요약 반환: "마이그레이션이 인덱스를 추가, 안전해 보임" 또는 "경고: 여전히 참조되는 컬럼을 삭제함"
    6. 메인 에이전트가 서브 에이전트 발견 사항을 명확한 응답으로 종합

    무거운 작업이 자체 컨텍스트를 가진 서브 에이전트에서 어떻게 일어나는지 주목하세요. 메인 에이전트는 조율하고 요약합니다. 깊은 분석을 받으면서도 대화는 깨끗하게 유지됩니다.

    이것이 워크플로우에 중요한 이유

    이 아키텍처를 이해하면 Claude Code와 작업하는 방식이 바뀝니다:

    컨텍스트 윈도우와 싸우는 것을 멈춥니다. 서브 에이전트가 깊은 분석을 별도로 처리한다는 것을 깨닫고 나면, 전체 코드베이스를 메인 대화에 붙여넣으려고 하지 않습니다. 서브 에이전트가 무거운 읽기를 하도록 합니다.

    큰 작업에 명시적으로 서브 에이전트를 사용합니다. Claude Code가 알아낼 것을 기대하는 대신, 말해줍니다: "결제 모듈을 분석하기 위해 서브 에이전트를 사용해줘" 또는 "보안, 성능, 테스트 검토를 위해 서브 에이전트를 생성해줘." 아키텍처에 반대하는 대신 함께 작업하는 것입니다.

    일부 작업이 다른 작업보다 더 잘 작동하는 이유를 이해합니다. 서브 에이전트에 위임할 수 있는 작업은 훌륭하게 확장됩니다. 하나의 컨텍스트에서 지속적인 왕복이 필요한 작업은 더 빨리 한계에 부딪힙니다.

    반복 루프를 신뢰합니다. 버그를 수정할 때 Claude가 반복하도록 합니다. 실제로 코드를 실행하고 실패를 관찰함으로써 예상하지 못한 문제를 종종 발견할 것입니다. 첫 번째 시도 후에 중단하지 마세요.

    실용적인 팁

    큰 작업에 명시적으로 서브 에이전트를 요청하세요. "인증 시스템을 검토하기 위해 서브 에이전트를 생성해줘"가 Claude Code가 위임해야 한다는 것을 알아낼 것을 기대하는 것보다 더 잘 작동합니다.

    Claude가 먼저 스킬을 읽도록 하세요. 문서를 만들거나 특정 파일 형식으로 작업하는 경우, Claude는 시작하기 전에 관련 스킬 파일을 읽을 때 더 나은 성능을 발휘합니다.

    반복적인 통합을 위해 MCP 서버를 연결하세요. 데이터베이스 출력이나 GitHub PR 세부 정보를 프롬프트에 복사-붙여넣기하는 대신, 관련 MCP 서버를 연결하세요. Claude가 필요한 것을 정확히 가져옵니다.

    사용자 정의 도구를 만들기 전에 에코시스템을 확인하세요. MCP 에코시스템은 Stripe, Cloudflare, CI 시스템, 통합하고 싶은 대부분의 서비스를 다루는 5,000개 이상의 커뮤니티 서버로 성장했습니다. 누군가 이미 필요한 것을 만들었을 가능성이 있습니다.

    잘못되었을 때 피드백을 주세요. Claude Code가 잘못된 결과를 생성하면, 무엇이 잘못되었는지 말해주세요. 반복 루프는 여러분의 피드백에도 작동합니다.

    더 큰 그림

    MCP는 최근 Linux Foundation에 기부되었으며, OpenAI, Google, Microsoft가 지원 멤버로 합류했습니다. 이것은 프로토콜이 단순히 Anthropic의 것이 아니라 업계 표준 인프라가 되고 있다는 신호입니다.

    서브 에이전트(별도 컨텍스트에서의 병렬 작업), 스킬(필요할 때 로드되는 도메인 전문 지식), MCP 서버(외부 시스템에 대한 깨끗한 연결)의 조합은 현대 AI 코딩 어시스턴트가 실제로 작동하는 방식을 나타냅니다. 마법이 아닙니다. 실제 제약을 해결하는 좋은 아키텍처입니다.

    특히 서브 에이전트 패턴은 깊이 이해할 가치가 있습니다. 대규모 코드베이스에서 질식하는 AI와 확장되는 AI의 차이입니다. Claude Code에게 큰 것을 분석하라고 요청할 때, 모든 것을 하나의 컨텍스트에 채우고 기도하는 것이 아닙니다. 각각 깨끗한 컨텍스트를 가진 집중된 서브 에이전트에 위임하고, 그들의 발견 사항을 종합합니다.

    이러한 조각들을 이해하면 시스템에 반대하는 대신 함께 작업하는 데 도움이 됩니다. 더 나은 결과를 얻고, 더 적은 벽에 부딪히고, AI를 신뢰할 때와 수동으로 인수할 때를 알게 될 것입니다.

    제작 Namiru.ai - 웹사이트를 위한 플러그앤플레이 AI 채팅.

    Patrik Kelemen
    Author
    Ing. Patrik Kelemen
    Founder of Namiru.aiSlovakia, EU

    Senior software engineer with 10+ years of experience, specializing in AI chat widgets and automation. Building Namiru.ai to help businesses leverage AI without complexity.

    AI AgentsAngularReactNodeJSAWSAzure
    이 기사가 도움이 되셨나요?

    AI가 당신의 웹사이트

    URL을 붙여넣고 AI 에이전트가 몇 초 만에 활성화되는 것을 확인하세요.

    고객은 즉각적인 답변을 받고, 당신은 리드, 분석, 그리고 시간을 되찾습니다.

    신용카드 불필요

    Namiru.ai

    AI chat for your website