Claude Code MCP로 UI 구현과 디버깅 자동화하기

들어가며

안녕하세요. 노머스 프론트엔드 개발자 지수민입니다.

이 글에서는 Claude Code에서 MCP(Model Context Protocol)를 활용한 경험을 공유하고자 합니다.

MCP란 무엇인지, 그리고 Figma MCP와 Chrome DevTools MCP를 실제로 어떻게 활용했는지 설명하겠습니다.

Claude Code란?

Claude Code는 코드베이스를 읽고 파일을 편집하며 명령을 실행하고 개발 도구와 통합할 수 있는 에이전트 기반 코딩 도구입니다. 터미널, IDE, 데스크톱 앱, 브라우저 환경에서 사용할 수 있습니다.

Claude Code는 기능 구현, 버그 수정, 개발 작업 자동화를 지원하는 AI 기반 코딩 어시스턴트입니다. 전체 코드베이스를 이해하고 여러 파일과 도구에 걸쳐 작업할 수 있습니다.

MCP란?

MCP(Model Context Protocol)는 AI 모델이 외부 도구, 데이터 소스, 서비스와 표준화된 방식으로 통신할 수 있도록 설계된 오픈 프로토콜입니다. 쉽게 말해, AI가 다양한 외부 시스템과 대화할 수 있는 공통 언어를 정의한 것입니다. MCP 서버는 특정 도구나 서비스의 기능을 AI가 사용할 수 있는 형태로 제공하고, Claude Code와 같은 MCP 클라이언트는 이 서버에 연결해 해당 기능을 직접 호출합니다.

Claude Code에 MCP를 설정하면 단순 코드 작성을 넘어선 자동화된 개발 워크플로우가 가능해집니다.

• 외부 데이터 연동: Jira, GitHub, Slack 등과 실시간으로 연동
• 직접적인 도구 사용: 데이터베이스 쿼리 실행, API 호출, 파일 시스템 접근 등을 직접 수행
• 생산성 증대: 복사/붙여넣기 없이, 코드베이스 전체를 이해하고 외부 정보까지 활용하여 버그 수정 및 기능 구현
• 확장성: 수백 개의 기존 MCP 서버를 활용하거나, 직접 만들어 연동할 수 있음

MCP 활용 사례

Figma MCP

Figma MCP는 Figma의 디자인 데이터를 MCP를 통해 Claude Code에 직접 연결해주는 도구입니다. Claude가 Figma 시안의 컴포넌트 구조, 스타일, 간격 정보를 직접 읽어 코드 생성에 활용할 수 있도록 해줍니다.

설치 및 활용 방법

1. 피그마 앱 MCP 서버 활성화

• 피그마 앱에서 개발자 모드 열기
• inspect 영역 → MCP server → Enable desktop MCP server 클릭

2. MCP 클라이언트 설정

# MCP 서버 추가
claude mcp add --transport http figma-desktop http://127.0.0.1:3845/mcp

# 연결 확인
claude mcp list

3. 메시지 보내기

• 선택 기반: 피그마 앱에서 프레임이나 레이어를 선택하고, Claude Code에게 현재 선택한 항목을 구현하도록 요청합니다.

• 링크 기반: 피그마에서 프레임이나 레이어의 링크를 복사하고, 해당 URL의 디자인을 구현하도록 요청합니다.

활용 결과

Figma MCP를 사용해 서비스 메인 페이지의 여러 영역을 직접 구현해보았습니다. 히어로 배너, 탭 메뉴, 상품 리스트 등 총 8개 영역을 수동 개발 방식과 비교하며 작업 시간을 측정했고, 약 41% 단축이라는 결과를 얻었습니다.

특히 반복적인 UI 구성, spacing 및 typography 적용, 카드 레이아웃 구성과 같은 영역에서 효과가 두드러졌습니다. 프롬프트 구성 방식에 따라 UI 구조를 잘 잡아주었고, 실제로 사용 가능한 수준의 컴포넌트가 생성되었습니다.

UI 구현 속도가 높아지니 코드 구조나 품질을 더 신경 쓰고, 다른 고민에 집중할 수 있는 여유가 생겼습니다.

다만, 공통 컴포넌트를 재사용하지 않고 항상 새로 만드는 경향이 있어 프롬프트로 명확히 지시하는 것이 중요했습니다. 복잡한 상태 처리나 정교한 인터랙션 구현은 여전히 개발자의 판단과 수작업 보완이 필요했습니다.

Chrome DevTools MCP

Chrome DevTools MCP는 Chrome 브라우저의 DevTools 기능을 MCP를 통해 Claude Code에서 직접 사용할 수 있도록 해주는 도구입니다.

Claude가 실제 브라우저를 열어 페이지를 조작하고, Console, Network, Performance 데이터를 수집하여 분석할 수 있습니다. 사람이 DevTools를 사용하는 것과 거의 동일한 수준으로 페이지 상태를 확인할 수 있습니다.

설치 및 활용 방법

# MCP 서버 추가
claude mcp add chrome-devtools -- npx chrome-devtools-mcp@latest

# 연결 확인
claude mcp list

Chrome DevTools MCP는 특정 페이지를 지정하고 분석을 요청하는 방식으로 사용할 수 있습니다.

예를 들어 로컬 환경에서 발생하는 오류를 확인할 때는 다음과 같이 요청할 수 있습니다.

localhost:4321 에서 input 클릭 후 발생하는 에러 확인하고 원인 분석해줘

성능 분석을 요청할 수도 있습니다.

http://localhost:4321/... 페이지 성능 측정하고 느린 원인 분석해줘

이처럼 URL과 분석 목적을 함께 전달하면 Claude가 브라우저 동작을 재현하고 DevTools 데이터를 수집하여 결과를 제공합니다.

활용 결과

Claude가 DevTools MCP를 통해 Performance 추적을 실행하고 LCP, CLS와 같은 Core Web Vitals 지표를 분석한 뒤 페이지 로딩이 느려지는 원인과 개선 방법을 함께 제안했습니다. 큰 리소스 파일이나 렌더링 지연 구간을 식별하여 병목 지점을 빠르게 파악할 수 있었습니다.

또한 Console 에러와 Network 요청 흐름을 함께 분석하여 API 요청 실패나 브라우저 오류의 원인을 찾는 데에도 활용할 수 있었습니다. 특정 동작에서만 발생하는 문제의 경우 Claude가 브라우저 동작을 재현하면서 DevTools 데이터를 수집해 분석하기 때문에, 기존보다 문제를 재현하고 원인을 찾는 과정이 훨씬 단순해졌습니다.

기존에는 DevTools를 열어 Console, Network, Performance 탭을 각각 확인해야 했지만, Chrome DevTools MCP를 사용하면 이러한 과정이 대화 한 번으로 정리된 결과로 제공되었습니다.

마치며

Figma MCP와 Chrome DevTools MCP를 직접 사용해보면서 공통적으로 느낀 부분은 개발자가 반복적으로 처리해왔던 작업들을 AI에게 위임할 수 있게 해준다는 것입니다.

Figma MCP를 사용하면서 UI 구현 시간을 단축할 수 있었고, Chrome DevTools MCP를 통해서는 브라우저 디버깅과 성능 분석 과정을 한 번의 요청으로 처리할 수 있었습니다. 두 도구 모두 단순한 자동화를 넘어 실제 개발 과정에서 충분히 활용할 수 있는 수준이라고 느꼈습니다. 반복적인 작업을 줄이면서 코드 구조나 품질, 사용자 경험과 같은 부분에 더 집중할 수 있게 되었습니다.

앞으로도 다양한 MCP를 직접 사용해보면서 개발 과정에 어떻게 활용할 수 있을지 계속 탐색해볼 생각입니다.

감사합니다.