디자이너의 요청 한마디에 수십 개의 화면을 하나씩 찾아다니며 스타일을 수정해본 경험이 있으실 겁니다. 이번에는 Claude Code와 Figma MCP를 연결해 Figma 디자인 시스템을 직접 읽게 하고, 변경된 타이포그래피를 프로젝트에 반영해 보았습니다. 얼마나 정확하게 작업할 수 있었는지 실제 사례를 통해 살펴봅니다.
1. 배경: 디자인 시스템 변경은 힘들어요
Table.in은 Nuxt 3 기반의 서비스로 운영되고 있으며, 서비스가 추가되면서 화면 수와 컴포넌트 수가 지속적으로 증가했습니다.
특히 디자인 시스템 개편 과정에서 Typography 규칙이 변경되었는데, 기존 방식으로는 다음과 같은 어려움이 있었습니다.
- 수십 개의 화면에 흩어져 있는 텍스트 스타일 수정 필요
- text-sm, text-base, text-[17px] 등 다양한 방식으로 작성된 코드 존재
- 모바일, 태블릿, 데스크톱 반응형 규칙까지 함께 수정 필요
- 변경 누락 발생 가능성
디자인 시스템 자체를 수정하는 것은 어렵지 않았지만, 실제 서비스 화면에 변경사항을 반영하는 과정이 가장 많은 시간을 차지했습니다.
2. 기존 방식
기존에는 디자이너가 Figma를 수정하면 개발자가 다음 작업을 수행했습니다.
- 변경된 Typography 확인
- tailwind.config.ts 수정
- 관련 페이지 탐색
- 텍스트 스타일 직접 변경
- 반응형 확인
작은 변경이라도 수십 개 화면을 확인해야 했고, 누락이 발생하는 경우도 있었습니다.
3. 해결 전략: Claude Code + Figma MCP
이번에는 Claude Code와 Figma MCP를 활용해 작업 방식을 변경했습니다.
기술 스택
| 도구 | 역할 |
|---|---|
| Claude Code (Opus) | 코드 분석 및 수정 |
| Figma | 디자인 시스템 정보 제공 |
| Nuxt 3 | 서비스 프레임워크 |
| Tailwind CSS v4 | 디자인 시스템 적용 |
Figma MCP를 통해 Claude Code가 디자인 시스템을 직접 읽을 수 있도록 구성했습니다.
1 Figma MCP 활성화하기
- Figma Desktop app을 실행합니다.
- 공식문서(https://developers.figma.com/docs/figma-mcp-server/local-server-installation/)를 따라 Figma Desktop Server를 활성화합니다.
Claude Code에서 Figma MCP를 연결하면 다음과 같은 정보를 조회할 수 있습니다.
- Typography
- Color
- Spacing
- Component
- Design Token
특히 Typography 변경사항을 직접 분석할 수 있게 됩니다.
2 Figma MCP Claude Code에 연결하기
- Terminal 을 열고 아래 명령어를 입력합니다.
claude mcp add --transport http figma https://mcp.figma.com/mcp
- 바로 다음 터미널에 아래 명령어를 입력합니다.
claude
/mcp
- Authentication 인증을 진행합니다.
3 정상적으로 연결되었는지 확인하기
- Claude - Settings - Developer - 로컬 MCP 서버에 Figma가 running 중인지 확인
4 Claude Code Figma MCP 사용하기
디자인 시스템의 Typography 페이지 URL을 전달했습니다.
https://www.figma.com/design/...
그리고 다음과 같이 요청했습니다.
"figma 디자인 시스템 타이포그래피를 기준으로 프로젝트의 텍스트 스타일을 정리해줘."
추가로 다음 조건을 전달했습니다.
- tailwind.config.ts 우선 사용
- 기존 디자인 토큰 유지
- 반응형 Typography 적용
- 사용하지 않는 스타일 정리
4. 결과
Claude Code + Figma MCP의 핵심 기여
| 작업 | AI 기여도 | 설명 |
|---|---|---|
| Figma 디자인 시스템 분석
| ★★★★★ | Typography, Color, Spacing 토큰을 직접 분석
|
| Tailwind 설정 매핑
| ★★★★★ | Figma 토큰과 tailwind.config.ts를 비교 및 매핑
|
| 코드베이스 영향도 분석
| ★★★★ | 변경된 Typography가 사용되는 컴포넌트와 페이지 탐색
|
| UI 일괄 수정
| ★★★★★ | 수십 개 화면의 텍스트 스타일을 디자인 시스템 기준으로 교체
|
| 반응형 Typography 적용
| ★★★★ | 모바일/태블릿/데스크톱 대응 |
Figma MCP의 핵심 기여
| 작업 | 자동화 효과 |
|---|---|
| Typography 추출
| 디자인 시스템을 직접 읽어 최신 규칙 확보
|
| 디자인 토큰 조회
| Color, Font, Spacing 값 실시간 확인
|
| 반복 수정 감소
| 화면별 스타일 확인 작업 최소화
|
Typography 개편 작업 시간이 크게 단축되었습니다.
기존에는
- 디자인 확인
- 코드 검색
- 스타일 수정
를 반복해야 했습니다.
하지만 Claude Code + Figma MCP를 활용한 이후에는
- 디자인 분석
- 코드 수정
- 변경 내용 정리
까지 대부분 자동으로 수행할 수 있었습니다.
5. 배운점과 Tips
1. 디자인 시스템 문서화가 중요 - Typography 이름이 명확할수록 결과가 좋아집니다.
2. Tailwind 토큰화 필수 - 디자인 시스템을 Tailwind 토큰으로 관리하고 있다면 Claude Code가 훨씬 안정적으로 작업할 수 있습니다.
6. 마무리
과거에는 디자인 시스템 변경이 발생하면 개발자가 화면을 하나씩 찾아다니며 수정해야 했습니다.
이제는 Claude Code와 Figma MCP를 활용해 디자인 시스템을 직접 읽고, 변경사항을 실제 코드에 반영할 수 있게 되었습니다.
아직 최종 검수는 개발자의 역할이지만, 반복적인 스타일 수정 작업은 상당 부분 자동화할 수 있었습니다.
디자인 시스템을 운영하는 팀이라면 Claude Code + Figma MCP 조합을 한번쯤 시도해볼 만한 워크플로우라고 생각합니다.
