프론트엔드 개발자가 오늘 바로 설치해야 할 4가지 MCP

 

CodeDeck - 개발자를 위한 코드 학습 카드 뉴스

Claude나 Cursor를 사용한다면 이 4가지 MCP를 설치하세요

1. Context7: 최신 문서를 실시간으로 Claude에 제공 → API 환각 현상 차단
2. BrowserMCP: 실제 브라우저를 제어 (로그인 세션 그대로 유지)
3. Framelink: Figma → 코드 변환 (디자인 눈대중으로 짜는 시간 절약)
4. Shadcn MCP: shadcn/ui 컴포넌트를 문서 확인 없이 정확하게 생성

왜 이 글을 쓰는가

오후 3시. Claude에게 간단한 Next.js 미들웨어 함수를 요청합니다. Claude는 자신 있게 코드를 내놓지만, 사용된 API는 이미 deprecated(사용 중단)된 것입니다. 다음 20분은 디버깅 지옥에서 보냅니다.

또는: 로그인 플로우를 테스트해야 합니다. Playwright 문서를 열고, 테스트 스크립트를 작성하고, 셀렉터를 설정하고, 인증 토큰을 처리합니다. 30분이 날아갑니다.

또는: 디자이너가 Figma 링크를 보냅니다. 눈으로 대충 보면서 간격과 색상을 수동으로 옮기고, 제대로 했기를 바랍니다. 디자이너가 피드백을 보냅니다. 다시 수정합니다. 몇 시간이 날아갑니다.

MCP(Model Context Protocol) 서버가 이 모든 문제를 해결했습니다.

MCP란 무엇인가?

MCP는 AI가 외부 도구와 데이터에 접근할 수 있게 해주는 표준 프로토콜입니다. Claude가 "추측"하는 대신 "알고" 답할 수 있게 만들어줍니다.

프론트엔드 개발자에게 특히 유용한 이유:

• 프레임워크가 빠르게 진화: React 19, Next.js 15, Remix... API는 분기마다 바뀌는데 LLM 학습 데이터는 몇 달 뒤처집니다
• 디자인 핸드오프가 수동작업: Figma → 코드는 여전히 사람이 해야 하는 일
• 테스트에 컨텍스트 필요: 실제 세션, 쿠키, 인증 상태
• 컴포넌트 라이브러리 중요: shadcn/ui, Radix는 최신 prop 정보가 필요

---

MCP 1: Context7 - API 환각 현상 차단

문제 상황

Supabase를 사용 중입니다. Claude에게 실시간 구독 코드를 요청합니다:

const subscription = supabase
  .from('messages')
  .on('INSERT', payload => console.log(payload))
  .subscribe()

그럴듯해 보입니다. 하지만 on()은 Supabase v2에서 deprecated되었습니다. 올바른 문법은 .channel().on()입니다. 20분을 디버깅에 씁니다.

왜 이런 일이? LLM 학습 데이터는 과거 데이터입니다. Claude의 지식 컷오프는 2025년 1월인데, Next.js 15는 2024년 10월에 출시되었습니다. Claude가 아는 API는 이미 구식일 수 있습니다.

Context7의 해결책

최신 문서를 실시간으로 Claude의 컨텍스트에 주입합니다. 1,000개 이상의 라이브러리에서 현재 API를 가져와 과거 데이터가 아닌 최신 정보를 제공합니다.

설치 방법

Claude Code의 경우:

claude mcp add context7 -- npx @context7/mcp-server

설치 확인:

claude mcp list

Cursor의 경우:

~/.cursor/mcp.json 파일에 추가:

{
  "mcpServers": {
    "context7": {
      "command": "npx",
      "args": ["@context7/mcp-server"]
    }
  }
}

API 키 불필요. 첫 실행 시 npm 패키지 설치(~30초), 이후엔 즉시 실행됩니다.

언제 유용한가 (그리고 언제 아닌가)

최적:

• 빠르게 진화하는 프레임워크 (Next.js, React, Remix, Astro)
• 버전 간 breaking change가 있는 라이브러리 (Supabase, Prisma, tRPC)
• 문서가 잘 갖춰진 인기 도구 (Tailwind, shadcn, Radix)

한계:

• 약 1,000개의 인기 라이브러리만 커버 (마이너 패키지는 문서 없음)
• 심도 있는 문서 읽기를 대체하지 못함
• 토큰 사용 (간단한 쿼리엔 과함)

사용 예시

프롬프트: "Next.js 15 App Router에서 서버 액션으로 폼 제출 처리하는 코드 작성해줘"

→ Context7이 Next.js 15 최신 문서를 주입
→ Claude가 정확한 현재 API로 코드 생성

---

MCP 2: BrowserMCP - 실제 브라우저 자동화

문제 상황

결제 플로우를 테스트하려고 합니다. Claude에게 Playwright 테스트를 요청합니다:

const browser = await chromium.launch()
const page = await browser.newPage()
await page.goto('https://yourapp.com/checkout')

깔끔한 코드입니다. 하지만 결제는 로그인이 필요합니다. Playwright는 쿠키가 없는 새 브라우저를 실행합니다. 이제 로그인 스크립트, 2FA 처리, CAPTCHA 우회, 토큰 관리까지 해야 합니다.

또는 50개의 입사 지원서를 작성해야 합니다. 각각 폼, 업로드, 설문지가 있습니다. 스크립트를 작성할 수 있지만 스크래퍼는 차단됩니다. Cloudflare가 headless 브라우저를 감지합니다.

BrowserMCP의 해결책

지금 사용 중인 실제 브라우저를 자동화합니다. headless도, 새 프로필도 아닙니다.

특징:

• Chrome 확장 프로그램 + MCP 서버
• 현재 사용 중인 브라우저 제어
• 로그인 세션 그대로 사용
• 봇 탐지 우회
• 로컬에서 실행

설치 방법

1단계: Chrome 확장 프로그램

1. https://browsermcp.io/install 방문
2. "Add to Chrome" 클릭
3. 확장 프로그램 고정
4. 아이콘 클릭하여 특정 탭에서 제어 활성화

2단계: MCP 서버

Claude Code:

claude mcp add browsermcp -- npx @browsermcp/mcp@latest

Cursor (~/.cursor/mcp.json):

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

중요: BrowserMCP는 확장 프로그램을 활성화한 탭만 제어합니다.

실제 사용 사례

실제 세션으로 E2E 테스트:

시나리오: OAuth 로그인이 필요한 대시보드 테스트

기존 방식:
- 로그인 페이지로 이동
- OAuth 리다이렉트 처리
- 토큰 저장
- 요청에 주입

BrowserMCP 방식:
이미 로그인되어 있음

프롬프트: "대시보드의 '설정' 탭으로 이동해서 '알림 설정'이 
활성화되어 있는지 확인하고 스크린샷 찍어줘"

→ 현재 세션 사용, 인증 스크립트 불필요

인증된 콘텐츠 스크래핑:

프롬프트: "이 YouTube 동영상으로 이동해서 모든 댓글을 JSON으로 추출해줘"

→ 로그인된 세션 사용

사용 가능한 도구

• navigate: URL로 이동
• click: 요소 클릭
• type: 텍스트 입력
• screenshot: 화면 캡처
• snapshot: 접근성 트리 가져오기 (CSS 선택자 대신 레이블로 참조)
• get_console_logs: 콘솔 출력으로 디버그
• wait, hover, press_key: 전체 상호작용 툴킷

보안 주의사항

• 프로덕션 계정 절대 사용 금지 → 테스트 계정만 사용
• 비밀번호 하드코딩 금지 → 환경 변수 사용
• 권한이 있는 사이트만 사용

언제 사용해야 하나 (그리고 언제 아닌가)

최적:

• 인증 세션이 필요한 로컬 개발 테스트
• 로그인 상태에서 폼 자동화
• 접근 권한이 있는 콘텐츠 스크래핑
• 권한이 있는 사이트에서 봇 탐지 회피

부적합:

• CI/CD headless 파이프라인 (Playwright 직접 사용)
• 크로스 브라우저 테스트 (Chrome만 지원)
• 대규모 자동화 (개발 워크플로우용으로 설계됨)

---

MCP 3: Framelink Figma MCP - Figma에서 코드로 한 번에

문제 상황

디자이너가 Figma 링크를 보냅니다. 간격을 눈으로 확인하고, 색상 코드를 복사하고, 폰트 크기를 추정하고, 이미지를 스크린샷으로 찍습니다. CSS를 작성하고, 값을 조정하고, 새로고침합니다. 디자이너가 리뷰합니다: "패딩은 20px이 아니라 24px이어야 해요. 파란색도 틀렸어요."

다시 조정합니다. 반복합니다. 한 시간이 지나갑니다.

또는 스크린샷을 분석하는 디자인-코드 변환 도구를 사용합니다. 비슷한 것을 생성하지만 틀립니다—하드코딩된 너비, 인라인 스타일, 컴포넌트 구조 없음. 수동으로 코딩하는 것보다 수정하는 데 더 많은 시간이 걸립니다.

Framelink Figma MCP의 해결책

AI에게 실시간 Figma 디자인 데이터에 직접 접근할 수 있게 합니다.

Figma API에 연결하여 정확한 레이어 계층, 정밀한 스타일, 컴포넌트 메타데이터, 에셋 내보내기를 픽셀이 아닌 데이터로 가져옵니다. Figma 링크를 붙여넣으면 정확한 코드를 얻습니다.

설치 방법

1단계: Figma Personal Access Token 생성

1. Figma에서: 프로필 → 설정 → 보안 → Personal access tokens
2. 토큰 생성 및 복사

2단계: MCP 설정

Cursor (~/.cursor/mcp.json):

{
  "mcpServers": {
    "Framelink MCP for Figma": {
      "command": "npx",
      "args": ["-y", "figma-developer-mcp", "--figma-api-key=YOUR_KEY", "--stdio"]
    }
  }
}

Claude Code:

claude mcp add framelink -- npx -y figma-developer-mcp --figma-api-key=YOUR_KEY --stdio

3단계: Figma 링크 복사

프레임/그룹 우클릭 → 링크 복사

4단계: 프롬프트

프롬프트: "이 Figma 링크의 히어로 섹션을 shadcn/ui와 
Tailwind를 사용해서 Next.js 컴포넌트로 만들어줘"

→ Framelink이 디자인 구조, 스타일, 에셋 가져오기
→ Claude가 정확한 간격, 색상, 레이아웃으로 컴포넌트 생성

AI는 이미지 다운로드 도구를 통해 PNG/SVG 에셋을 public/ 폴더로 자동 내보낼 수 있습니다. 수동 다운로드 불필요.

언제 유용한가 (그리고 언제 아닌가)

최적:

• 강한 비주얼 디자인의 랜딩 페이지
• 정의된 컴포넌트가 있는 대시보드 UI
• Figma 변수가 CSS 토큰에 매핑되는 디자인 시스템
• React/Next.js 프로젝트

한계:

• 픽셀 퍼펙트 아님 (70-90% 정확도)
• 인터랙티브 로직, 데이터 페칭, 복잡한 상태는 여전히 개발 작업 필요
• 과도한 사용 시 Figma API rate limit

---

MCP 4: Shadcn MCP - 정확한 컴포넌트 생성

문제 상황

shadcn/ui는 매우 인기 있습니다—Radix 기반에 Tailwind로 만든 복사-붙여넣기 컴포넌트. 하지만 AI는 prop과 패턴을 환각합니다.

Claude에게 shadcn Dialog를 요청합니다:

<Dialog open={isOpen} onClose={handleClose}>
  <DialogContent>
    <DialogTitle>설정</DialogTitle>
  </DialogContent>
</Dialog>

그럴듯해 보입니다. 하지만 shadcn Dialog는 onClose가 없습니다—onOpenChange입니다. 필수 래퍼 컴포넌트도 빠졌습니다. 10분을 디버깅에 씁니다.

Shadcn MCP의 해결책

AI를 shadcn/ui 레지스트리에 직접 연결합니다.

공식 MCP 서버로 shadcn/ui 레지스트리에 실시간 접근. 컴포넌트 탐색, 정확한 TypeScript 인터페이스 가져오기, 예제 확인, 자연어로 설치.

설치 방법

Claude Code:

claude mcp add --transport http shadcn https://www.shadcn.io/api/mcp

확인:

claude mcp list

Cursor (~/.cursor/mcp.json):

{
  "mcpServers": {
    "shadcn": {
      "url": "https://www.shadcn.io/api/mcp"
    }
  }
}

할 수 있는 것

탐색:

프롬프트: "shadcn 컴포넌트 전체 보여줘"
→ 실시간 레지스트리 반환

검사:

프롬프트: "Dialog 컴포넌트 상세 정보 보여줘"
→ 정확한 TypeScript props, 래퍼, 예제 반환

설치:

프롬프트: "button, dialog, card 컴포넌트 추가해줘"
→ 적절한 구조로 shadcn CLI 실행

빌드:

프롬프트: "shadcn Dialog 사용해서 내부에 폼이 있는 설정 다이얼로그 만들어줘"

결과:
<Dialog>
  <DialogTrigger asChild>
    <Button>설정 열기</Button>
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>설정</DialogTitle>
    </DialogHeader>
    <form onSubmit={handleSubmit}>
      {/* 폼 필드 */}
    </form>
  </DialogContent>
</Dialog>

다중 레지스트리 지원

components.json을 통해 여러 레지스트리 지원:

{
  "registries": {
    "shadcn": "https://ui.shadcn.com/r",
    "@acme": "https://registry.acme.com",
    "@internal": "https://internal.company.com/registry"
  }
}

프롬프트:

"@internal/custom-button과 shadcn Dialog를 사용해서 
확인 모달 만들어줘"

→ AI가 레지스트리 간 라우팅하여 내부 컴포넌트와 
   shadcn 기본 요소 혼합

---

결론

이 4가지 MCP는 프론트엔드 개발 워크플로우를 근본적으로 개선합니다:

1. Context7: 최신 API로 정확한 코드
2. BrowserMCP: 실제 세션으로 즉시 테스트
3. Framelink: 디자인을 정확한 코드로
4. Shadcn MCP: 올바른 컴포넌트 패턴

각 MCP는 특정 마찰점을 제거하고, AI가 추측이 아닌 정확한 정보로 작업할 수 있게 합니다.

시작하기

1. 가장 큰 고민거리를 선택하세요
2. 해당 MCP를 설치하세요
3. 하루 동안 사용해보세요
4. 얼마나 많은 시간을 절약했는지 확인하세요

MCP는 단순한 도구가 아니라 AI 보조 개발의 새로운 인프라입니다.