AI 코딩 에이전트(Cursor, Claude Code, Windsurf, Codex)로 디자인에서 UI를 만들다 보면 대부분 같은 벽에 부딪힙니다. 채팅에 스크린샷을 넣으면 아주 단순한 컴포넌트까지는 괜찮지만, 실제 제품 수준으로 가면 금방 무너집니다. 에이전트는 추론하고, 그 추론은 틀리고, 사용자가 수정하고, 토큰이 소모되고, 결국 다시 손으로 만드는 흐름이 반복됩니다.
더 나은 파이프라인이 있습니다. 먼저 Codia AI로 스크린샷을 구조화된 Figma 파일로 변환하세요. 그다음 에이전트에 Figma MCP 서버를 연결합니다. 그러면 에이전트는 평면 이미지가 아니라 구조화된 레이아웃 데이터, Variables, 컴포넌트, 디자인 토큰을 읽습니다. 출력 품질은 올라가고, 반복 횟수는 줄며, 도구와 싸우는 느낌도 크게 줄어듭니다.
Codia Screenshot to Figma를 사용하면 스크린샷과 UI 이미지를 편집 가능한 Figma 레이어로 바꾼 뒤 리디자인, 비교, 핸드오프를 이어갈 수 있습니다.
Figma MCP 서버란 무엇인가요?
Figma MCP 서버는 Model Context Protocol을 지원하는 AI 에이전트와 Figma 파일을 연결해 주는 공식 다리입니다. Figma 파일, 컴포넌트, Variables, 디자인 토큰을 에이전트가 직접 읽을 수 있는 구조화된 데이터로 노출합니다. 스크린샷만 보고 전부 역추적하게 만들지 않습니다.
재구성 단계에서는 Codia Screenshot to Figma로 참고 이미지를 편집 가능한 레이어로 변환한 뒤 디자인을 다듬을 수 있습니다.
현재 MCP를 지원하는 편집기: VS Code, Cursor, Windsurf, Claude Code, Codex.
MCP가 해결하는 문제
Cursor나 Claude Code에 스크린샷을 붙여 넣고 "이걸 만들어 줘"라고 하면, 에이전트는 이렇게 움직입니다.
- 이미지에서 비전을 통해 내용을 봅니다
- 레이아웃 구조를 추측합니다
- 간격을 추측합니다
- 색상을 추측합니다
- 컴포넌트를 추측합니다
- 그 추측을 바탕으로 코드를 씁니다
이 모든 "추측"이 토큰 비용을 키우고 품질을 떨어뜨리는 지점입니다. 실제 디자인 파일은 이런 정보가 픽셀이 아니라 데이터로 들어 있습니다. MCP는 그 데이터를 노출합니다.
이 워크플로에서 Codia가 해결하는 문제
MCP는 Figma 파일이 있어야 유용합니다. 만들고 싶은 레퍼런스 UI의 스크린샷만 있고 Figma 파일이 없다면, MCP는 도와주지 못합니다. 다시 이미지를 붙여 넣어야 합니다.
Codia가 그 틈을 메웁니다. 스크린샷 → Codia → 구조화된 Figma 파일(Variables, Auto Layout, 이름 붙은 컴포넌트 포함) → MCP 준비 완료.
세 단계 파이프라인
1단계: Codia로 스크린샷 변환
레퍼런스 스크린샷, 즉 경쟁사 페이지, 영감용 이미지, 기존 프로덕션 화면을 Codia AI로 Figma로 변환합니다.
- Codia Figma 플러그인이나 웹 앱에 업로드합니다
- 변환을 실행합니다(깔끔한 풀스크린이면 약 10초)
- 결과를 Figma에서 엽니다
결과물은 실제 Frame, 실제 텍스트 레이어, 구조가 맞는 곳의 Auto Layout, 반복 요소용 컴포넌트를 갖습니다. 핵심은 구조가 있다는 점이고, MCP는 바로 그 구조를 읽습니다.
변환 자체에 대한 자세한 내용은 Screenshot to Figma: The Complete Guide를 참고하세요.
2단계: MCP용으로 Figma 파일 정리
MCP는 깔끔한 Figma 파일에 훨씬 더 잘 반응합니다. 5분만 투자하세요.
- 색상에 Variables를 적용합니다. 원시 hex 값은 에이전트에게 문자열만 주지만, Variables는 토큰을 줍니다. 그 결과 에이전트의 출력이 새로운 색을 만들어 내지 않고 당신의 디자인 시스템을 따릅니다.
- 반응형이어야 하는 모든 컨테이너에 Auto Layout이 제대로 들어갔는지 확인합니다. MCP는 이를 레이아웃이 어떻게 동작해야 하는지에 대한 이해로 바로 반영합니다.
- 컴포넌트 이름을 의미 있게 짓습니다.
Group 47이 아니라PrimaryButton,NavItem,PricingCard처럼요. 에이전트는 이 이름을 생성 코드에 사용합니다. - 반복 요소는 즉석 그룹이 아니라 컴포넌트로 묶습니다. MCP는 컴포넌트를 1급 개념으로 노출합니다.
Codia로 변환한 파일에서 시작한다면 이 작업의 대부분은 이미 되어 있습니다. 변환이 Auto Layout을 만들고, 요소에 이름을 붙이고, 반복 패턴을 묶어 주기 때문입니다. 5분 정리는 마감 작업에 가깝습니다.
3단계: MCP를 에디터에 연결하고 생성
선택한 에디터에 Figma MCP 서버를 설치하고 설정합니다. 공식 설정 가이드는 Figma MCP 서버 가이드입니다.
그다음 프롬프트에서 Figma 파일이나 선택 영역을 참조합니다.
"Figma 파일 [링크 또는 선택 ID]를 사용해 이 디자인과 정확히 일치하는 React 컴포넌트를 만들어 주세요. 디자인 시스템 Variables를 사용하고, 간격 토큰도 맞춰 주세요."
그러면 에이전트는 다음을 갖게 됩니다.
- 실제 레이어 계층
- Auto Layout에서 가져온 실제 간격 값
- Variables의 실제 색상 토큰
- 실제 컴포넌트 정의
- 선택 영역의 보조 스크린샷(시각 확인용)
이 출력은 그냥 "스크린샷을 붙여 넣는" 방식보다 디자인과 훨씬 더 가까워집니다.
이 파이프라인이 "스크린샷을 채팅에 붙여 넣기"보다 나은 이유
| 접근 방식 | 에이전트가 받는 정보 | 출력 품질 | 토큰 비용 |
|---|---|---|---|
| 채팅에 스크린샷 붙여 넣기 | 픽셀 + 프롬프트 | 낮음~중간, 추론이 많음 | 높음 - 수정이 많음 |
| Codia → MCP → 에이전트 | 구조화된 레이아웃 + Variables + 컴포넌트 + 스크린샷 | 중간~높음, 추론이 적음 | 낮음 - 수정이 적음 |
| Codia → MCP → 에이전트 + 정리된 Figma 파일 | 위 정보에 디자인 시스템 데이터까지 | 높음 | 가장 낮음 |
실무 영향도 큽니다. 이 파이프라인을 쓰는 팀은 스크린샷만으로 프롬프트를 던질 때보다 UI 생성 작업의 "수정해 주세요" 반복이 대략 50~70% 줄었다고 보고합니다. 토큰 소모도 그만큼 줄어듭니다.
Cursor에서 단계별로 해보기
Cursor를 기준으로 한 예시입니다.
- Figma에서 Codia로 생성한 파일을 열고 만들고 싶은 프레임을 선택합니다.
- Cursor에서 Figma MCP 서버를 설치합니다(Settings → MCP → Add Server).
- Cursor 채팅에서 이렇게 씁니다. "Figma MCP 서버를 사용해 내 Figma 파일의 선택된 프레임을 가져와서 디자인과 정확히 일치하는 React + Tailwind 컴포넌트를 만들어 주세요. Variables를 Tailwind 테마 토큰으로 사용하세요."
- 에이전트가 MCP 도구를 호출해 구조화된 데이터와 선택 영역의 스크린샷을 가져옵니다.
- 컴포넌트를 생성합니다. 첫 결과물은 스크린샷만 던졌을 때보다 훨씬 디자인에 가깝습니다.
- 같은 Figma 소스를 참조하면서 구체적인 수정 사항을 요청해 반복합니다.
Claude Code와 함께 쓰기
파이프라인은 같고 도구만 조금 다릅니다. Claude Code는 MCP를 기본 지원합니다. Figma MCP 서버 설치 방식도 동일합니다. 프롬프트 스타일도 같습니다.
이미 백엔드 작업에 Claude Code를 쓰고 있다면, Figma MCP 서버를 추가해 같은 에이전트로 Codia 변환 Figma 파일에서 UI를 만들 수 있습니다.
Windsurf와 함께 쓰기
마찬가지입니다. Windsurf의 MCP 지원 덕분에 Figma MCP 서버를 Cursor나 Claude Code와 같은 방식으로 연결할 수 있습니다.
흔한 함정
Variables 단계를 건너뛰는 것. Figma 파일에 raw hex 값만 있으면 MCP는 에이전트에게도 raw string만 돌려줍니다. 디자인 시스템 Variables를 적용해야 "대충 비슷한 브랜드 색"이 아니라 "정확한 브랜드 색"이 됩니다.
Auto Layout을 놓치는 것. Auto Layout이 없으면 MCP는 위치는 설명할 수 있어도 반응형 의도는 설명하지 못합니다. Auto Layout은 이를 "16px 간격의 flex row"처럼 에이전트가 바로 사용할 수 있는 정보로 바꿉니다.
한 번에 너무 많은 것을 요청하는 것. "대시보드 전체를 만들어 줘"는 너무 큽니다. "Figma 선택 영역과 일치하는 사이드바 컴포넌트를 만들어 줘"가 훨씬 잘 됩니다. 컴포넌트 단위로 만들고, 그다음 조립하세요.
Figma에서 정확히 선택하지 않는 것. MCP는 선택한 영역을 가져옵니다. 선택이 모호하면 컨텍스트도 모호해집니다. 정확한 프레임을 고르세요.
스크린샷 프롬프트와 MCP를 섞는 것. MCP를 쓸 수 있다면 그걸 쓰세요. MCP 참조와 스크린샷을 같이 붙여 넣지 마세요. 에이전트가 두 개의 진실 소스를 보고 더 편한 쪽을 택해 버릴 수 있습니다.
일회성 화면을 넘어서: 컴포넌트 라이브러리 만들기
이 파이프라인은 확장됩니다.
- 대표 스크린샷 묶음을 Codia로 변환합니다
- Figma 안에서 결과를 컴포넌트화합니다
- Variables와 디자인 시스템을 적용합니다
- MCP로 대응되는 코드 컴포넌트 라이브러리를 생성합니다
배치 변환이 필요하면 Visual Struct API를 사용하세요. 한 번에 최대 1,000개 이미지까지 처리할 수 있습니다.
이 파이프라인을 쓰면 안 되는 경우
- 단순한 버튼이나 아이콘. 가끔은 그냥 스크린샷을 에이전트에 붙여 넣는 편이 더 빠릅니다.
- 이미 Figma에 네이티브로 있는 디자인. Codia는 건너뛰고 바로 MCP로 가세요.
- 디자인 충실도가 중요하지 않은 코드 생성. "대충 비슷하면 된다" 수준이면 스크린샷 경로만으로도 충분할 수 있습니다.
FAQ
Figma MCP 서버는 유료인가요?
공식 Figma MCP 서버는 Figma 플랫폼의 일부입니다. MCP 제공 여부는 Figma 요금제에서 확인하세요.
에이전트는 실제 Figma 파일을 보나요, API만 보나요?
MCP 서버는 Figma 파일의 구조화된 데이터(레이어, 이름, 위치, Variables, 컴포넌트)를 에이전트에 제공하고, 선택 영역의 스크린샷도 시각 확인용으로 돌려줄 수 있습니다.
Codia로 만들지 않은 내 Figma 파일에도 쓸 수 있나요?
네. MCP는 구조가 잘 잡힌 Figma 파일이면 어떤 파일이든 동작합니다. Codia는 스크린샷만 있고 기존 Figma 소스가 없을 때의 다리 역할을 합니다.
변환한 Figma 파일이 지저분하면 어떻게 하나요?
5분만 정리하세요. 컴포넌트 이름을 붙이고, Variables를 적용하고, Auto Layout을 확인하면 됩니다. 에이전트 출력 품질은 파일 품질을 따라갑니다.
Cursor의 Auto / Claude / GPT 모델에서도 되나요?
네. MCP는 모델에 독립적이며, 서버가 현재 에디터가 쓰는 모델에 구조화된 데이터를 전달합니다.
Figma Make와는 어떻게 다른가요?
Figma Make는 Figma 안에서 프롬프트로 UI를 생성합니다. Codia + MCP 파이프라인은 Figma 파일을 디자인 소스로 사용해 Figma 밖에서 코드를 생성합니다. 도구도 다르고 결과물도 다릅니다.