5단계
5단계 — Context7 · Figma MCP
2회 조회
목차
AI 가 내부 정보만 알면 한계가 명확해요. Context7 으로 라이브러리 최신 문서를, Figma MCP 로 디자인 파일을 끌어와 사실 기반 코딩을 합니다.
Context7 — 라이브러리 문서
LLM 이 학습한 시점 이후의 최신 문서 가 필요할 때 (Next.js 16, React 19 처럼).
설치:
claude mcp add context7 -- npx -y @upstash/context7-mcp
사용:
> Next.js 16 의 App Router 에서 metadata 객체 spec 알려줘 — context7 사용
Claude Code 가 자동으로 Context7 MCP 를 호출해 최신 공식 문서 를 가져와 답해요.
왜 필요한가
LLM 학습 데이터는 시점이 고정 — 새 버전 출시 후 며칠은 모르거나 옛날 정보 를 답할 수 있어요. Context7 은 실시간 문서 인덱스 를 갖고 있어 이 갭을 메워요.
Figma MCP — 디자인을 코드로
디자이너가 Figma 에 그려 둔 화면을 코드로 옮길 때.
claude mcp add figma -- npx -y @figma/mcp
> Figma 파일 abc123 의 LoginScreen frame 을 React 컴포넌트로 변환해 줘
Figma 에서 정확한 색상·여백·타이포그래피 토큰을 읽어 React 코드를 생성.
MCP 활용 패턴
여러 MCP 를 조합 하는 게 진짜 강해요.
> 1. Figma 의 ProductCard frame 을 보고
2. Context7 으로 Tailwind v4 의 최신 클래스 확인 후
3. components/ProductCard.tsx 를 만들어 줘
세 도구가 한 흐름으로 동작.
다른 유용한 MCP 5
@modelcontextprotocol/server-fetch— 임의 URL 의 페이지 가져오기@playwright/mcp— 브라우저 자동화 (DOM 검사·스크린샷)@modelcontextprotocol/server-postgres— PostgreSQL 직접 쿼리@modelcontextprotocol/server-memory— 영속 메모리mcp-server-google-calendar— 일정 조회
직접 해 보기
Context7 을 등록하고 "React 19 Compiler 의 안전한 hook 패턴 알려줘 — context7" 라고 물어 보세요. 최신 문서 인용이 답에 포함되면 성공.
더 깊이
다음 단계
마지막 6단계에서는 모든 도구를 워크플로 로 묶는 법을 배워요.