Claude Code for Front-end #3: MCP 서버로 Claude Code 능력 확장하기

프로덕션 레벨 개발을 위한 7가지 필수 MCP 서버 활용법

---

1️⃣ 들어가며

Claude Code를 쓰면서 이런 생각 해보신 적 있나요?

"음... React 공식 문서 찾아보고 돌아와야겠네"

"이 UI 컴포넌트 만드는 데 시간이 너무 오래 걸리는데..."

"코드베이스가 너무 커서 뭐가 어디 있는지 찾기도 힘들어"

저도 그랬습니다. Claude Code는 분명 강력한 도구인데, 뭔가 2% 부족한 느낌이었죠. 그 2%를 채워주는 게 바로 MCP 서버입니다.

실제로 저는 7개의 MCP 서버를 프로젝트에 도입한 후 개발 생산성이 3배 이상 향상되었습니다. 이 글에서는 그 경험을 바탕으로 실전에서 검증한 MCP 서버들과 활용법을 공유하고자 합니다.

---

2️⃣ MCP란 무엇인가?

기본 개념

MCP(Model Context Protocol)는 AI 모델과 외부 시스템 간 표준화된 통신 프로토콜입니다. Claude Code에 새로운 능력을 부여하는 플러그인 시스템으로 이해할 수 있습니다.

아키텍처 구조

MCP는 클라이언트-서버 구조로 동작하며, Claude Code가 클라이언트 역할을 수행합니다.

핵심 구성 요소:

1. Tools: 실행 가능한 함수 인터페이스
   • 명확한 입력 파라미터 스키마 정의
   • 구조화된 결과 반환
   • 에러 처리 및 재시도 로직 포함
2. Resources: 외부 데이터 소스 접근
   • 파일 시스템, 데이터베이스, API 엔드포인트
   • 읽기/쓰기 권한 설정
   • 캐싱 및 동기화 전략
3. Prompts: 재사용 가능한 프롬프트 템플릿
   • 파라미터화된 구조
   • 컨텍스트 주입 및 변수 치환

---

3️⃣ MCP 서버 설정 가이드

설정 파일 위치

Claude Code의 설정 파일은 기본적으로 프로젝트의 .claude 디렉토리에 있습니다.

하지만 2편에서와 같이 프로젝트에서만 사용하는 MCP가 아닌 전역적으로 사용하는 MCP는 ~/.claude.json 파일에 있습니다.

아래는 mcp를 세팅하는 파일의 예시입니다.

기본 설정 구조

// mcp.json 또는 ~/.claude.json
{
    "mcpServers": {
        "context7": {
            "command": "npx",
            "args": ["-y", "@upstash/context7-mcp@latest"]
        },
        "sequential-thinking": {
            "command": "npx",
            "args": ["-y", "@modelcontextprotocol/server-sequential-thinking"]
        },
        "magic": {
            "type": "stdio",
            "command": "npx",
            "args": ["@21st-dev/magic"],
            "env": {
                "TWENTYFIRST_API_KEY": ""
            }
        },
        "playwright": {
            "command": "npx",
            "args": ["@playwright/mcp@latest"]
        },
        "serena": {
            "command": "uvx",
            "args": ["--from", "git+https://github.com/oraios/serena", "serena", "start-mcp-server"]
        },
        "notion": {
            "type": "http",
            "url": "<https://mcp.notion.com/mcp>"
        },
        "figma": {
            "type": "http",
            "url": "<https://mcp.figma.com/mcp>"
        }
    }
}

---

4️⃣ 실전 MCP 서버 7종 실전 가이드

• 설치 방법 2가지 중 하나를 선택하여 설치합니다.
• 설치 방법은 각 서버의 공식 문서를 참고하면 더 자세한 내용을 확인할 수 있습니다.

1. Sequential-Thinking - 체계적 사고 엔진

복잡한 문제를 단계별로 분석하고 논리적으로 해결책을 도출해야 할 때, Sequential-Thinking MCP는 Claude의 사고 과정을 체계화하는 데 도움을 줍니다.

주요 기능

• 단계별 문제 분해: 복잡한 문제를 작은 단위로 나누어 순차적으로 해결
• 가설 검증: 여러 가능성을 검토하고 최적의 해결책 도출
• 사고 과정 추적: 각 단계의 추론 과정을 투명하게 공개

실전 활용

복잡한 버그 디버깅:

"이 React 컴포넌트에서 무한 리렌더링이 발생하는 원인을 단계별로 분석해줘"

Sequential-Thinking이 수행할 수 있는 분석 예시:

1. 컴포넌트 의존성 그래프 분석
2. useEffect 의존성 배열 검토
3. 상태 업데이트 패턴 확인
4. 부모-자식 컴포넌트 간 props 전달 추적
5. 최종 원인 특정 및 해결책 제시

아키텍처 설계:

"마이크로서비스 아키텍처로 전환하기 위한 단계별 마이그레이션 전략을 수립해줘"

설정 방법:

claude mcp add sequential-thinking npx @modelcontextprotocol/server-sequential-thinking

"sequential-thinking": {
  "command": "npx",
  "args": ["-y", "@modelcontextprotocol/server-sequential-thinking"]
},

---

2. Magic - UI 컴포넌트 생성 마법사

수천 개의 검증된 UI 패턴을 기반으로 프로덕션 레벨의 컴포넌트 생성을 지원합니다. 21st.dev의 방대한 컴포넌트 라이브러리를 활용합니다.

주요 기능

• 컴포넌트 생성: /ui 명령으로 즉시 UI 컴포넌트 생성
• 디자인 시스템 통합: 기존 디자인 시스템과 자연스럽게 통합
• 접근성 준수: WCAG 2.1 AA 기준 자동 적용
• 반응형 설계: 모든 디바이스에 최적화된 레이아웃

실전 활용

복잡한 폼 생성:

"/ui 다단계 회원가입 폼 with 유효성 검사"

생성되는 컴포넌트:

const MultiStepForm = () => {
    const [currentStep, setCurrentStep] = useState(0)
    const [formData, setFormData] = useState({
        // 구조화된 폼 데이터
    })

    // 유효성 검사 로직
    // 단계별 네비게이션
    // 접근성 속성 자동 적용
    // 에러 핸들링
}

대시보드 위젯:

"/ui 실시간 매출 차트 대시보드 카드"

설정 방법:

npx @21st-dev/cli@latest install <client> --api-key <key>

"magic": {
    "type": "stdio",
    "command": "npx",
    "args": ["@21st-dev/magic"],
    "env": {
        "TWENTYFIRST_API_KEY": ""
    }
},

---

3. Context7 - 최신 문서 실시간 참조

프레임워크와 라이브러리는 빠르게 변화합니다. Context7은 항상 최신 공식 문서를 참조하여 정확한 코드를 생성하는 데 도움을 줍니다.

주요 기능

• 실시간 문서 조회: 공식 문서의 최신 버전 자동 참조
• 버전별 API 지원: 특정 버전에 맞는 정확한 구현
• 마이그레이션 가이드: 버전 업그레이드 시 변경사항 안내

실전 활용

Next.js 15 최신 기능 활용:

"Next.js 15의 새로운 Partial Prerendering을 구현해줘"

Context7이 공식 문서를 참조하여:

• 최신 API 사용법 확인
• Breaking changes 체크
• Best practices 적용

React 19 신기능:

"React 19의 use() 훅을 활용한 데이터 페칭 구현"

설정 방법

claude mcp add context7 -- npx -y @upstash/context7-mcp

"context7": {
    "command": "npx",
    "args": ["-y", "@upstash/context7-mcp@latest"]
},

---

4. Serena - 프로젝트 메모리 시스템

대규모 코드베이스를 효과적으로 이해하고, 프로젝트 컨텍스트를 세션 간에 유지합니다. 심볼 수준의 코드 분석이 가능합니다.

주요 기능

• 심볼 탐색: 함수, 클래스, 변수를 정확하게 찾고 분석
• 프로젝트 메모리: 아키텍처 결정사항, 코딩 컨벤션 저장
• 의존성 추적: 코드 변경 시 영향받는 부분 자동 감지
• 리팩토링 지원: 안전한 심볼 이름 변경 및 이동

실전 활용

프로젝트 온보딩:

"/sc:load 프로젝트 구조와 주요 패턴을 분석해줘"

Serena가 수행하는 작업:

1. 프로젝트 구조 스캔
2. 주요 패턴 식별
3. 코딩 컨벤션 추출
4. 메모리에 저장

심볼 리팩토링 전체 예시:

Before:

// utils/api.ts
export function getUserData(id: string) {
    return fetch(`/api/users/${id}`)
}

// components/Profile.tsx
import { getUserData } from '@/utils/api'

export default function Profile({ userId }: { userId: string }) {
    const data = await getUserData(userId)
    return <div>{data.name}</div>
}

// components/Settings.tsx
import { getUserData } from '@/utils/api'

export default function Settings({ currentId }: { currentId: string }) {
    const user = await getUserData(currentId)
    return <div>{user.email}</div>
}

프롬프트:

"getUserData 함수를 fetchUserProfile로 모든 참조와 함께 변경해줘"

After (Serena 자동 리팩토링):

// utils/api.ts
export function fetchUserProfile(id: string) {
    return fetch(`/api/users/${id}`)
}

// components/Profile.tsx
import { fetchUserProfile } from '@/utils/api'

export default function Profile({ userId }: { userId: string }) {
    const data = await fetchUserProfile(userId)
    return <div>{data.name}</div>
}

// components/Settings.tsx
import { fetchUserProfile } from '@/utils/api'

export default function Settings({ currentId }: { currentId: string }) {
    const user = await fetchUserProfile(currentId)
    return <div>{user.email}</div>
}

✅ Serena가 자동으로 처리한 작업:

• 함수명 변경: getUserData → fetchUserProfile
• 모든 import 문 업데이트 (2개 파일)
• 모든 함수 호출 업데이트 (2개 파일)
• 타입 정의 일관성 유지
• 의존성 그래프 자동 분석

설정 방법

claude mcp add-json "serena" '{"command":"uvx","args":["--from","git+https://github.com/oraios/serena","start-mcp-server"]}'

"serena": {
    "command": "uvx",
    "args": ["--from", "git+https://github.com/oraios/serena", "serena", "start-mcp-server"]
},

---

5. Playwright - E2E 테스트 자동화

실제 브라우저에서 사용자 시나리오를 테스트하고, 시각적 회귀를 방지할 수 있습니다.

주요 기능

• 브라우저 자동화: Chrome, Firefox, Safari 지원
• 스크린샷 캡처: 시각적 회귀 테스트
• 네트워크 모킹: API 응답 시뮬레이션
• 접근성 테스트: WCAG 준수 자동 검증

실전 활용

사용자 플로우 테스트:

"결제 프로세스 전체 E2E 테스트 작성"

생성되는 테스트:

test("결제 플로우", async ({ page }) => {
    // 1. 상품 선택
    await page.goto("/products")
    await page.click('[data-testid="product-1"]')

    // 2. 장바구니 추가
    await page.click('button:has-text("장바구니 담기")')

    // 3. 결제 진행
    await page.goto("/checkout")
    await page.fill('[name="cardNumber"]', "4242424242424242")

    // 4. 결제 완료 확인
    await expect(page).toHaveURL("/order/complete")
})

설정 방법

claude mcp add playwright npx @playwright/mcp@latest

"playwright": {
    "command": "npx",
    "args": ["@playwright/mcp@latest"]
},

---

6. Figma MCP Server - 디자인과 코드의 완벽한 통합

베타 주의사항: Figma MCP 서버는 현재 오픈 베타 중입니다. 일부 기능이 제한될 수 있으며, 성능 이슈가 발생할 수 있습니다.

Figma MCP 서버는 디자인 파일을 개발 워크플로우에 직접 통합하여, AI가 디자인 정보와 컨텍스트를 이해하고 코드를 생성할 수 있게 합니다. Model Context Protocol의 표준 인터페이스를 통해 데이터 소스와 AI 에이전트가 상호작용합니다.

사용 요구사항

• 플랜: Professional, Organization, Enterprise 플랜의 Dev 또는 Full 시트
• 지원 도구: MCP를 지원하는 코드 에디터 (VS Code, Cursor, Windsurf, Claude Code)

주요 기능

• 프레임에서 코드 생성: Figma 프레임을 선택하여 즉시 코드로 변환. 새로운 플로우 구축이나 앱 기능 반복 개발에 최적
• 디자인 컨텍스트 추출: 변수, 컴포넌트, 레이아웃 데이터를 IDE로 직접 가져오기. 디자인 시스템과 컴포넌트 기반 워크플로우에 특히 유용
• Make 리소스 검색: Make 파일에서 코드 리소스를 수집하여 LLM에 컨텍스트로 제공. 프로토타입에서 프로덕션 애플리케이션으로 전환 시 도움
• Code Connect로 일관성 유지: 실제 컴포넌트를 재사용하여 출력 품질 향상. 생성된 코드를 코드베이스와 일관되게 유지

연결 방법

Figma MCP 서버는 두 가지 방식으로 연결 가능합니다:

1. Remote MCP Server: Figma의 호스팅 엔드포인트에 직접 연결 (데스크톱 앱 불필요)
2. Local MCP Server: 로컬 머신의 Figma 데스크톱 앱을 통해 실행

Remote Server 설정 (Claude Code)

1. 터미널에서 다음 명령 실행:
2. claude mcp add --transport http figma <https://mcp.figma.com/mcp>
3. Claude에서 /mcp 입력하여 MCP 서버 관리 후 figma 선택
4. Authenticate 선택하여 인증 진행
5. Allow Access 클릭하여 권한 부여
6. Claude Code에서 Authentication successful. Connected to figma 메시지 확인
7. /mcp 명령으로 연결 상태 최종 확인

설정 코드 (Remote)

"figma": {
  "url": "https://mcp.figma.com/mcp",
  "type": "http"
}

실전 활용 예시

디자인 시스템 컴포넌트 동기화:

"Figma의 Button 컴포넌트를 모든 variant와 함께 React 코드로 변환"

디자인 토큰 추출:

"Figma에서 색상, 타이포그래피, 스페이싱 변수를 추출하여 CSS 변수로 변환"

프레임을 컴포넌트로 변환:

"선택한 Figma 프레임을 반응형 React 컴포넌트로 변환 (Tailwind CSS 사용)"

참고: Remote 서버는 점진적으로 배포 중입니다. MCP 클라이언트에서 0개의 도구가 표시되면 아직 액세스가 활성화되지 않은 것입니다.

---

7. Notion MCP - AI와 워크스페이스의 완벽한 연결

Notion MCP는 AI 도구가 Notion 워크스페이스에 안전하게 액세스할 수 있도록 하는 호스팅 서버입니다. Model Context Protocol(MCP) 오픈 표준을 통해 AI 어시스턴트가 Notion 워크스페이스와 상호작용할 수 있습니다. ChatGPT, Cursor, Claude 같은 인기 AI 어시스턴트와 원활하게 작동하도록 설계되었습니다.

왜 필요한가?

• 간편한 설정: OAuth를 통한 간단한 연결, 지원되는 AI 도구에서 원클릭 설치
• 전체 워크스페이스 액세스: AI 도구가 사용자와 동일하게 Notion 페이지를 읽고 쓸 수 있음
• AI 최적화: 효율적인 데이터 포맷팅으로 AI 에이전트를 위해 특별히 구축

주요 활용 사례

• 문서 생성: 연구 및 프로젝트 데이터에서 PRD, 기술 스펙, 아키텍처 문서 생성
• 검색 및 답변: AI가 모든 Notion 및 연결된 워크스페이스 콘텐츠를 검색
• 작업 관리: 작업 설명에서 코드 스니펫 생성 및 프로젝트 상태 자동 업데이트
• 보고서 작성: 여러 소스에서 릴리즈 노트, 프로젝트 업데이트, 성과 보고서 생성
• 캠페인 계획: 포괄적인 브리프 생성 및 마케팅 채널 전반의 진행 상황 추적

설정 방법

claude mcp add --transport http notion <https://mcp.notion.com/mcp>

"notion": {
  "type": "http",
  "url": "<https://mcp.notion.com/mcp>"
}

실전 활용 예시

프로젝트 문서 자동 생성:

"이번 스프린트의 완료된 태스크를 기반으로 릴리즈 노트를 Notion에 작성"

기술 스펙 작성:

"코드베이스 분석 결과를 바탕으로 API 문서를 Notion에 생성"

회의록 정리:

"오늘 회의 내용을 정리해서 Notion 회의록 데이터베이스에 추가"

프로젝트 상태 업데이트:

"Git 커밋 기반으로 프로젝트 진행 상황을 Notion 대시보드에 업데이트"

---

5️⃣ 실전 워크플로우

풀스택 기능 개발 워크플로우

1. Figma: 디자인 컴포넌트 추출 및 동기화
   ↓
2. Magic: UI 컴포넌트 생성 및 보완
   ↓
3. Sequential-Thinking: 비즈니스 로직 설계
   ↓
4. Context7: 최신 API 패턴 확인
   ↓
5. Serena: 코드베이스 통합 및 리팩토링
   ↓
6. Playwright: E2E 테스트 작성
   ↓
7. Notion: 기능 문서화

대규모 리팩토링 워크플로우

1. Serena: 의존성 그래프 분석
   ↓
2. Sequential-Thinking: 리팩토링 전략 수립
   ↓
3. Context7: 새 API 마이그레이션 가이드
   ↓
4. Playwright: 회귀 테스트
   ↓
5. Notion: 변경사항 문서화

버그 수정 워크플로우

1. Sequential-Thinking: 버그 원인 분석
   ↓
2. Serena: 영향 범위 파악
   ↓
3. Context7: 올바른 해결책 확인
   ↓
4. Playwright: 버그 재현 테스트
   ↓
5. Notion: 버그 리포트 작성

---

6️⃣ 단계별 추천

입문자를 위한 시작 순서

1. Context7 설치: 최신 문서 참조를 위한 기본 도구
2. Magic 설치: UI 컴포넌트 생성
3. Playwright 설치: 테스트 자동화

중급자 확장 패키지

1. Serena 추가: 프로젝트 메모리 관리
2. Sequential-Thinking 추가: 복잡한 문제 해결
3. Notion 연동: 문서화 시스템

고급 사용자를 위한 확장

1. Figma: 디자인 시스템 통합
2. 추가 MCP 서버 탐색 및 커스터마이징
3. 모든 MCP 조합 최적화

---

7️⃣ 마무리하며

이 7개의 핵심 MCP 서버는 제가 실제 프로덕션 환경에서 검증한 조합입니다. 각 서버는 특정 영역에서 Claude Code의 능력을 향상시키며, 함께 사용했을 때 시너지 효과를 발휘할 수 있습니다.

핵심 메시지

1. 점진적 도입: 모든 MCP를 한 번에 설치하기보다는 필요에 따라 추가하세요
2. 워크플로우 중심: 자신의 개발 패턴에 맞는 MCP를 선택하세요
3. 조합의 힘: 단일 MCP보다 적절한 조합이 더 효과적일 수 있습니다

실전 팁

• Sequential-Thinking + Serena = 체계적인 코드 분석
• Magic + Figma = 디자인 시스템 자동화
• Context7 + Notion = 최신 문서 관리 체계
• Serena + Playwright = 리팩토링 후 자동 검증

Claude Code를 단순한 코드 보조 도구가 아닌, 실제 팀의 일원으로 활용할 수 있는 단계로 나아가 보세요.!

---