에이전트에게 디자인과 브라우저를 보여 주기, MCP로 Figma·Playwright·Chrome 연결하기

Claude Code는 기본적으로 파일을 읽고 쓰고, 터미널 명령을 실행할 수 있습니다. 그런데 프론트엔드 일의 절반은 디자인을 보고, 브라우저에서 확인하는 일입니다. 에이전트가 만든 화면을 제가 직접 열어서 캡처하고, 다시 설명하는 일을 몇 번 하다 보니 이 과정 자체를 맡길 방법이 없을까 싶었습니다.

그 답이 MCP였습니다. 이 글에서는 Figma, Playwright, Chrome을 MCP로 연결한 방법과 실제로 어디에 썼는지 정리해 보겠습니다.

1. MCP를 한 문단으로

MCP(Model Context Protocol)는 AI 애플리케이션이 외부 도구나 데이터에 연결되는 표준 규격입니다. MCP 서버가 "이런 도구가 있어"(이름, 설명, 입력 형식)를 알려 주면, 에이전트가 필요할 때 그 도구를 호출합니다. USB처럼 규격이 하나라서 서버를 한 번 만들어 두면 Claude Code든 Cursor든 같이 쓸 수 있습니다.

제가 쓰는 연결은 세 가지입니다. Figma로는 디자인 노드와 스타일, 스크린샷을 읽고, Playwright로는 브라우저를 열어서 클릭하고 입력하고, Chrome 연동으로는 지금 띄워 둔 탭을 그대로 확인합니다.

2. 연결하는 방법

Claude Code에서는 claude mcp add 명령으로 서버를 등록합니다.

# Playwright: 로컬에서 npx로 실행되는 서버
claude mcp add playwright -- npx @playwright/mcp@latest
 
# Figma: 원격(HTTP) 서버. 처음 쓸 때 브라우저에서 Figma 계정 인증
claude mcp add --transport http figma https://mcp.figma.com/mcp
 
# 등록된 서버 확인
claude mcp list

팀원과 같은 설정을 쓰고 싶으면 프로젝트 루트에 .mcp.json을 두면 됩니다.

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

3. 어디에 썼나

3-1. Figma 디자인과 화면을 px 단위로 맞춰 보기

사내 업무관리 시스템을 리디자인할 때 Figma에 있는 15개 화면을 코드로 옮겼습니다. 그리고 화면마다 px 단위로 디자인과 대조했습니다.

방법은 이렇습니다. 에이전트에게 Figma 프레임 링크를 주면 MCP로 레이아웃 구조(auto-layout, 간격, 색상 변수)를 읽습니다. 그다음 구현한 화면을 같은 폭으로 띄워서 스크린샷을 찍고, 둘을 나란히 놓고 차이를 뽑게 합니다.

> 이 Figma 프레임과 /tasks 화면을 1440px에서 비교해서,
  간격·폰트 크기·색이 다른 곳을 표로 정리해 줘. 고치기 전에 표부터 보여 줘.

여기서 "고치기 전에 표부터"라는 말을 꼭 붙입니다. 처음엔 이 말 없이 시켰더니, 접근성 때문에 일부러 대비를 높인 색까지 디자인대로 되돌려 버렸습니다. 차이 목록을 먼저 보고 의도한 차이는 걸러 낸 다음에 고치게 해야 합니다.

반대 방향으로도 씁니다. 스토리보드 문서를 주고 Figma 와이어프레임을 만들게 해서, 공공 사업 관제 화면(GIS 모니터링, 영상 모니터링, 상황관제, SOP, 사용자 관리) 초안을 빠르게 뽑은 적이 있습니다.

3-2. 운영 중인 솔루션 메뉴를 전부 돌아보게 하기

공공기관에 낼 RFP 기능 목록이 필요했던 적이 있습니다. 운영 중인 솔루션 메뉴가 꽤 많아서, 사람이 하나하나 캡처하면서 정리하면 하루는 걸릴 일이었습니다.

> Playwright로 <솔루션 주소>에 로그인한 뒤, 좌측 메뉴를 전부 순회해 줘.
  각 화면에서 제목, 주요 버튼, 입력 항목, 표의 컬럼을 뽑아서
  "대메뉴 > 소메뉴 > 기능" 3단계 표로 정리해 줘.

Playwright MCP는 스크린샷 대신 접근성 트리 스냅샷으로 화면을 읽습니다. 그래서 버튼 이름이나 표 헤더 같은 텍스트를 정확하게 뽑아 줍니다. 로그인처럼 비밀번호가 필요한 단계는 제가 직접 하고, 그다음 탐색과 정리만 맡겼습니다.

3-3. 띄워 둔 화면을 직접 확인하게 하기

Chrome 연동은 지금 개발 서버에 띄워 둔 화면을 에이전트가 직접 보고 확인할 때 씁니다. 다크 모드로 바꿔서 대비가 깨진 곳을 찾거나, 390px 폭에서 가로 스크롤이 생기는지 document.documentElement.scrollWidth로 확인하거나, 콘솔 에러를 읽는 식입니다.

이 블로그 첫 화면의 캐릭터도 이렇게 확인했습니다. 마우스를 x=100, 980, 1300, 1550 위치로 옮기면서 프레임 번호가 01, 26, 45, 56으로 계속 커지는지 봤습니다. 사람이 눈으로 봤으면 "대충 잘 따라오네" 하고 넘어갔을 부분입니다.

4. 써 보면서 알게 된 것

도구는 적게 켤수록 좋았습니다. 서버마다 도구 설명이 컨텍스트를 차지하기 때문에, 지금 작업에 필요한 서버만 켜 둡니다.

로그인, 결제, 실서비스 데이터를 바꾸는 일은 맡기지 않습니다. 에이전트가 할 수 있다고 해서 맡겨도 되는 건 아니더라고요.

그리고 확인과 수정을 나눠서 시킵니다. 한 번에 "보고 고쳐"라고 하면 의도한 차이까지 고쳐 버립니다. 목록을 먼저 받고, 승인하고, 그다음에 고치게 합니다.

마치며

MCP를 붙이고 나서 가장 크게 줄어든 건 제가 화면을 캡처해서 에이전트에게 설명하던 시간입니다. 아직 안 써 보셨다면 Playwright MCP 하나부터 붙여 보시길 권합니다. 설정이 제일 간단하고, 효과는 바로 보입니다.

다음 글에서는 에이전트가 만든 코드를 어떻게 믿을 수 있게 만드는지, 품질 게이트 이야기를 해 보겠습니다.