# Claude MCP 기반 피그마 디자인 자동화 기술 검증
**작성일**: 2025-01-29
**작성자**: [작성자명]
**문서 버전**: v1.0
---
## 1. 개요
### 목적
자연어 기반 피그마 제어(MCP) 기술을 통한 **배너 및 상세페이지 제작 공정 자동화** 가능성 검토
### 핵심 기술
| 구성 요소 | 역할 |
|-----------|------|
| Claude Code | 자연어 명령 해석 및 실행 |
| MCP (Model Context Protocol) | Claude ↔ 피그마 간 통신 프로토콜 |
| 자체 제작 피그마 플러그인 | 피그마 내부 API 실행 (도형/텍스트/이미지 생성) |
### 기술 구조
```
사용자 → Claude Code → MCP Server → Figma Plugin → Figma 캔버스
(자연어) (명령 해석) (명령 전달) (API 실행) (결과물)
```
---
## 2. 주요 테스트 항목 및 결과
자체 제작 플러그인을 통해 실제 업무(배너/상세페이지)에서 수행한 테스트 결과입니다.
| 테스트 케이스 | 수행 내용 | 결과 | 비고 |
|--------------|----------|------|------|
| **배너 프레임 생성** | 1200x628 사이즈 배너 프레임 자동 생성 | ✅ 성공 | 사이즈 자유롭게 지정 가능 |
| **텍스트 일괄 수정** | 프로모션 카피(예: "시즌 오프 50%") 일괄 변경 | ✅ 성공 | 레이어 탐색 및 수정 정확도 높음 |
| **스타일 가이드 적용** | 브랜드 컬러(Hex) 및 폰트 스타일 즉시 반영 | ✅ 성공 | 디자인 시스템 준수 확인 |
| **레이아웃 조정** | 배너 크기 변경(500x500 → 1080x1920) 및 요소 재배치 | ⚠️ 보통 | 복잡한 배치는 추가 프롬프트 필요 |
| **이미지 교체** | 특정 영역의 상품 누끼 이미지 교체 및 정렬 | ✅ 성공 | URL 기반 이미지 삽입 |
| **요소 삭제/이동** | 기존 요소 위치 변경 및 불필요 요소 제거 | ✅ 성공 | nodeId 기반 정확한 조작 |
### 테스트 명령어 예시
```
실제 테스트에 사용한 명령어:
"1200x628 사이즈 배너 만들어줘.
배경은 #FF6B6B,
중앙에 'NEW ARRIVAL' 텍스트 넣어줘"
→ Figma에 해당 배너 자동 생성됨
```
---
## 3. 생산성 비교 (Before vs. After)
배너 1개 제작 기준 소요 시간 비교:
### 기존 방식 (Manual)
```
피그마 실행 → 프레임 생성 → 배경 설정 → 텍스트 입력 →
이미지 배치 → 정렬 → 확인/수정
소요 시간: 약 10~15분
```
### MCP 자동화 방식 (AI)
```
Claude Code에 명령 입력:
"이번 시즌 신상으로 배너 만들어줘"
소요 시간: 약 1분 이내
```
### 효율성 비교표
| 항목 | 기존 방식 | MCP 자동화 | 개선율 |
|------|----------|-----------|--------|
| 배너 1개 제작 | 10~15분 | 1분 | **90% 단축** |
| 배너 10개 제작 | 100~150분 | 10분 | **90% 단축** |
| 텍스트 일괄 수정 | 5분 | 10초 | **97% 단축** |
| 컬러 변경 (10개) | 10분 | 30초 | **95% 단축** |
### 기대 효과
- **단순 반복 작업 시간 90% 이상 단축**
- 디자이너는 창의적 작업에 집중 가능
- 프로모션 긴급 대응 속도 향상
- 휴먼 에러 감소 (일관된 스타일 적용)
---
## 4. 현재 구현 기능
| 기능 | 상태 | 설명 |
|------|------|------|
| 프레임 생성 | ✅ 완료 | 배너/카드 틀 생성 |
| 사각형 생성 | ✅ 완료 | 배경, 버튼 등 |
| 텍스트 삽입 | ✅ 완료 | 제목, 본문, 가격 등 |
| 색상 변경 | ✅ 완료 | 브랜드 컬러 적용 |
| 위치 이동 | ✅ 완료 | 요소 재배치 |
| 요소 삭제 | ✅ 완료 | 불필요 요소 제거 |
| 이미지 삽입 | ✅ 완료 | URL 기반 상품 이미지 |
---
## 5. 향후 확장 가능 기능
| 기능 | 활용 시나리오 | 우선순위 |
|------|-------------|----------|
| 템플릿 저장/불러오기 | 자주 쓰는 배너 형식 재사용 | 높음 |
| Auto Layout | 요소 자동 정렬 | 높음 |
| 컴포넌트 생성 | 재사용 가능한 버튼/카드 | 중간 |
| 배치 내보내기 | PNG/JPG 자동 저장 | 높음 |
| DB 연동 | 상품 정보 자동 반영 | 높음 |
| 상세페이지 스킬 | 상품 DB → 상세페이지 자동 생성 | 높음 |
---
## 6. 제약사항 및 해결 방안
| 제약사항 | 현재 상태 | 해결 방안 |
|----------|----------|----------|
| 로컬 환경 전용 | 개인 PC에서만 동작 | 사내 서버에 MCP Server 배포 |
| Figma Desktop 필수 | 웹 버전 미지원 | Desktop 앱 사용 (현재 대부분 사용 중) |
| Plugin 실행 필요 | Plugin 창 열어둬야 함 | 작업 시에만 실행하는 운영 방식 |
---
## 7. 결론
### 검증 결과
| 항목 | 판정 |
|------|------|
| 기술적 실현 가능성 | ✅ **검증 완료** |
| 배너 자동화 적용 | ✅ **가능** |
| 상세페이지 자동화 | ⚠️ 추가 개발 필요 (이미지 삽입 등) |
| 실무 적용 가치 | ✅ **높음** (90% 시간 단축) |
### 제안 사항
| 단계 | 내용 |
|------|------|
| 1단계 | 현재 POC로 내부 테스트 진행 |
| 2단계 | 이미지 삽입/템플릿 기능 보완 |
| 3단계 | 파일럿 운영 (마케팅팀 일부) |
| 4단계 | 전사 확대 적용 검토 |
---
## 붙임. 기술 상세
### 시스템 구성도
```
┌─────────────┐ stdio ┌─────────────┐ HTTP ┌─────────────┐
│ Claude Code │ ◄────────────► │ MCP Server │ ◄───────────► │ Figma │
│ (AI 엔진) │ │ (Node.js) │ Polling │ Plugin │
└─────────────┘ └─────────────┘ └─────────────┘
│
▼
┌─────────────┐
│ Figma │
│ 캔버스 │
└─────────────┘
```
### 왜 자체 플러그인이 필요한가?
- 기존 Figma API: **읽기 전용** (생성/수정 불가)
- 자체 플러그인: Figma 내부 Plugin API 활용 → **실시간 생성/수정 가능**
---
*문의: [작성자명]*
