MCP로 프론트엔드 워크플로우 연결하기: GitHub·Figma·Playwright·Chrome DevTools 조합

Model Context Protocol(MCP)을 단순히 로컬 파일 읽기나 데이터베이스 조회 용도로만 쓰면 프론트엔드 개발에서 화면을 확인하는 단계가 빠진다. 디자인 시안 확인(Figma)부터 컴포넌트 코드 스캐폴딩(frontend-inspo-mcp), 실제 브라우저 렌더링 검증(Playwright), 런타임 콘솔·네트워크 디버깅(Chrome DevTools), 그리고 PR 생성 및 의존성 보안 점검(GitHub)까지 하나의 루프로 묶어야 에이전트가 화면 단위의 작업을 끝까지 완수할 수 있다. 이 글은 개정된 MCP 스펙의 핵심 변화와 함께 프론트엔드 실무에서 바로 쓸 수 있는 4종 핵심 서버 조합 및 보안 설정 절차를 다룬다.

2026년 7월 28일 개정 스펙 핵심: 스테이트리스 코어와 캐시 가능 카탈로그

MCP 아키텍처와 설정 가이드에 정리된 것처럼, 2026-07-28 개정 스펙은 초기 세션 중심 구조를 대규모 프로덕션에 맞게 재설계했다. 기존 스펙과의 구체적인 마이그레이션 차이는 MCP 2026-07-28 스펙 스테이트리스 마이그레이션 가이드에서 자세히 다루며, 프론트엔드 도구 연결 관점에서 알아두어야 할 핵심 변화는 다음 네 가지다.

• 스테이트리스 코어(Stateless Core): Streamable HTTP 전송에서 기존 Mcp-Session-Id 헤더와 initialize 핸드셰이크 강제가 제거되고, 매 요청이 _meta 필드(io.modelcontextprotocol/protocolVersion 등)에 버전과 클라이언트 역량을 담아 독립적으로 동작한다.
• 멀티 라운드트립 요청(Elicitation & Tasks): 도구 실행 도중 추가 파라미터나 OAuth 승인이 필요할 때 에이전트가 멈추지 않고 사용자에게 폼이나 URL 입력을 되묻는(input_required) 멀티 라운드트립 흐름을 공식 지원한다.
• 캐시 가능 응답(Cacheable Catalogs): tools/list, resources/list 응답에 캐시 힌트가 포함되어, 수십 개의 프론트엔드 도구를 연결해도 매 턴마다 도구 스키마 토큰을 중복 소모하지 않는다.
• 강화된 인증(RFC 9207 & CIMD): 원격 서버 연결 시 동적 클라이언트 등록 대신 Client Metadata Documents(CIMD)와 발급자 검증(Issuer Validation)을 적용해 토큰 탈취 위험을 낮추는 방향으로 바뀌었다.

프론트엔드 실무가 이 4종 조합(GitHub + Figma + Playwright + Chrome DevTools)부터 시작해야 하는 이유

공식 MCP 서버 15선 정리에서는 프론트엔드 엔지니어가 가장 먼저 세팅해야 할 필수 세트로 GitHub, Figma, Playwright, Chrome DevTools 네 가지를 꼽는다. 코딩 에이전트는 기본적으로 '코드 텍스트'만 볼 수 있고 '화면에 어떻게 그려지는지'는 볼 수 없는데, 이 4종 조합이 에이전트에게 눈과 손을 붙여주기 때문이다.

특히 공식 GitHub MCP 서버는 단순 이슈·PR 조회를 넘어 파일 내용 읽기, 커밋 히스토리 추적, 코드 검색을 지원하며, 2026년 5월 추가된 의존성 스캔(Dependency Scanning) 툴셋 퍼블릭 프리뷰를 통해 프론트엔드 npm 패키지의 취약점 알림까지 에이전트 안에서 바로 조회하고 패치 PR을 올릴 수 있다. 더 세부적인 GitHub 서버 초기 설정은 GitHub MCP 서버로 이슈·PR 워크플로우 연결하기를 참고하면 된다.

frontend-inspo-mcp로 UI 컴포넌트 레퍼런스 가져오기

디자인 시안이 따로 없는 사내 어드민이나 신규 랜딩 페이지를 만들 때는 에이전트가 기본 HTML 스타일로 화면을 짜지 않도록 frontend-inspo-mcp를 보조 서버로 추가할 수 있다.

이 서버는 FreeFrontend, shadcn/ui, Magic UI, Aceternity UI, React Bits 등 실제 프로덕션에서 쓰이는 컴포넌트 카탈로그를 인덱싱해 두었다가, 에이전트가 필요한 레이아웃 패턴과 애니메이션 구현 코드를 검색해 컨텍스트로 가져오게 해준다.

단계별 통합 설정 절차 (.mcp.json)

1. 프로젝트 루트의 .mcp.json(또는 하네스별 MCP 설정 파일)에 4종 핵심 서버를 등록한다. frontend-inspo-mcp는 저장소의 설치 안내와 보안 문서를 검토한 뒤 필요할 때만 추가한다.
2. GitHub 토큰은 설정 파일에 하드코딩하지 않고 호스트 셸 환경 변수에서 주입받도록 구성한다. Figma 원격 서버는 OAuth로 인증한다.
3. 로컬 개발 서버를 띄운 상태에서 에이전트에게 Figma URL과 컴포넌트 레퍼런스를 지정해 구현 및 브라우저 검증 루프를 실행시킨다.

{
  "mcpServers": {
    "github": {
      "type": "http",
      "url": "https://api.githubcopilot.com/mcp/",
      "headers": {
        "Authorization": "Bearer ${GITHUB_PERSONAL_ACCESS_TOKEN}"
      }
    },
    "figma": {
      "type": "http",
      "url": "https://mcp.figma.com/mcp"
    },
    "playwright": {
      "command": "npx",
      "args": ["-y", "@playwright/mcp@latest", "--headless"]
    },
    "chrome-devtools": {
      "command": "npx",
      "args": ["-y", "chrome-devtools-mcp@latest"]
    }
  }
}

GitHub와 Figma는 벤더가 운영하는 원격 엔드포인트로 연결한 예시다. 설정 파일의 필드 이름은 하네스마다 다를 수 있으므로 사용하는 도구의 MCP 문서와 각 서버 README를 함께 확인한다.

4. 연결이 완료되면 아래와 같이 단일 프롬프트로 디자인 추출부터 런타임 에러 검증까지 지시한다.

1. @figma 서버로 https://www.figma.com/design/... 시안의 'PricingSection' 프레임 토큰과 간격을 읽어와줘.
2. 토글 애니메이션과 카드 보더 효과는 프로젝트의 shadcn/ui 컴포넌트를 기준으로 구현해줘.
3. 구현 후 @playwright 로 http://localhost:3000/pricing 에 접속해 모바일(375px)과 데스크톱(1440px) 스크린샷을 찍고, @chrome-devtools 로 콘솔 hydration 에러나 404 네트워크 요청이 없는지 확인해줘.

보안 주의사항: 2025년 5월 29일 아카이브된 구형 참조 서버 구분법

MCP 생태계에서 가장 흔히 발생하는 보안 실수는 이미 아카이브되어 보안 패치가 끊긴 구형 참조 서버 패키지를 그대로 설치하는 것이다.

초기 MCP 저장소(modelcontextprotocol/servers)에서 예제용으로 제공하던 원본 GitHub, Slack, PostgreSQL 참조 서버(@modelcontextprotocol/server-github, @modelcontextprotocol/server-slack, @modelcontextprotocol/server-postgres 등)는 2025년 5월 29일부로 공식 아카이브(Archived) 처리되었으며 더 이상 기능 업데이트나 보안 취약점 패치가 제공되지 않는다.

따라서 패키지를 설치하기 전에 반드시 아래 기준으로 공식 유지보수 여부를 확인해야 한다.

• 유지보수 주체 확인: @modelcontextprotocol/server-github(구형 아카이브) 대신 GitHub가 직접 관리하는 공식 서버(github/github-mcp-server)나 각 벤더가 공개한 공식 서버(@playwright/mcp, Figma 원격 MCP 서버 등)를 사용한다.
• OpenSSF 배지 및 보안 정책 점검: frontend-inspo-mcp 같은 커뮤니티 서버를 도입할 때는 저장소에 openssf-badge-answers.md나 SECURITY.md, 의존성 자동 업데이트(Dependabot), 입력값 검증(Path Traversal 및 명령어 인젝션 방어)이 명시되어 있는지 먼저 확인한다.