개발 실무

Claude Cowork에 Figma MCP 연결해서 카드뉴스 만들기

체리플랜 2026. 5. 21. 18:00
반응형

Claude가 Figma에서 개발 카드뉴스를 직접 만들어줬어요.

Notion MCP 연결한 건 "그럴 수 있겠지" 싶었어요. 구글 캘린더도 그랬어요.

근데 Figma MCP 연결하고 "개발 트렌드 카드뉴스 만들어줘"라고 했을 때 Figma 파일이 실제로 열리면서 디자인이 생성되는 걸 보고 잠깐 멈췄어요.

 

이게 된다고요?

7년차 프론트엔드 개발자인 저도, 티스토리 블로그 운영하면서 썸네일 만드는 게 항상 귀찮은 일이었어요. Canva 켜고, 텍스트 입력하고, 색 맞추고… 글 쓰는 것보다 썸네일 만드는 데 시간이 더 걸릴 때도 있었거든요.

근데 Claude가 Figma에서 바로 만들어준다는 건 생각도 못 했어요.

 


MCP가 뭔데요?

MCP는 Model Context Protocol의 약자예요. Anthropic이 만든 표준인데, 쉽게 말하면 Claude가 외부 툴에 직접 연결해서 조작할 수 있게 해주는 연결 규격이에요.

예전엔 Claude한테 "Figma 파일 만들어줘"라고 하면 코드나 설명만 줬어요. "이 코드를 Figma에 직접 붙여넣으세요" 하고요. 근데 MCP가 연결되면 달라요. Claude가 직접 Figma API를 호출해서 파일을 만들고, 컴포넌트를 배치하고, 텍스트를 넣어요. 사람이 중간에서 복붙하는 게 없어요.

  • Notion MCP: 생성한 글 초안을 Notion 페이지에 바로 저장
  • Google Calendar MCP: 콘텐츠 발행 일정 확인 및 등록
  • Figma MCP: 썸네일이나 카드뉴스 디자인 직접 생성

이 중에서 가장 놀라웠던 게 Figma예요.

Notion이나 Calendar는 "데이터 넣고 빼는" 느낌이라면, Figma는 실제로 "디자인을 만드는" 느낌이거든요.


Figma MCP 연결 방법

https://www.figma.com/ko-kr/

 

Figma | 협업을 위한 인터페이스 디자인 도구

Figma는 의미 있는 제품을 제작하는 선도적인 협업 디자인 플랫폼입니다. 디자인, 프로토타입, 제품을 더 빠르게 제작하고 모든 피드백을 한 곳에서 수집하세요.

www.figma.com

 

Claude Cowork에서 MCP 연결하는 건 생각보다 간단했어요. Figma API 토큰만 있으면 돼요.

1. Figma → 설정 → 계정 → Personal access tokens
2. 토큰 생성
3. Claude Cowork → 플러그인/MCP 설정 → Figma 연결
4. API 토큰 입력

실제로 써보니 연결 자체는 5분도 안 걸렸어요. 어려운 부분이 없었어요. 무료 플랜에서도 API 토큰 발급이 돼서 추가 결제 없이 연결할 수 있었어요.

단, Figma 무료 플랜에서는 편집 가능한 파일 수에 제한이 있어요. 드래프트 파일로 작업하면 되고, 실제로 이번 카드뉴스 작업도 드래프트로 했어요.



개발 카드뉴스를 만들어봤어요

테스트로 만들어본 건 개발 관련 카드뉴스예요. 티스토리 썸네일 용도로요.

Claude한테 이렇게 말했어요.

실제로 써보니 Figma 창에서 파일이 새로 생기고, 레이아웃이 잡히고, 텍스트가 들어가는 게 눈에 보였어요. 제가 Figma에서 한 것 없이요. 결과물이 바로 쓸 수 있는 완성도는 아니었어요. 폰트 크기 조정이나 세부 정렬이 좀 어긋나 있었거든요. 근데 뼈대 레이아웃이 잡혀 있어서 "이 정도면 조금만 손보면 되겠다"는 느낌이 들었어요.

Canva에서 처음부터 만드는 것보다 확실히 빨랐어요. 레이아웃 잡는 시간만 봐도 차이가 났어요.


솔직한 한계

완성도가 "바로 발행 가능" 수준은 아니에요.

Claude가 Figma 파일에서 자유롭게 디자인을 생성하는 건 맞는데, 세밀한 타이포그래피나 픽셀 단위 정렬은 직접 수정해야 했어요. 특히 한국어 폰트가 없으면 기본 폰트로 들어가서 어색할 수 있어요.

그리고 현재 Figma MCP가 지원하는 기능 범위가 무한정은 아니에요.

복잡한 컴포넌트나 프로토타입 연결까지는 아직 한계가 있어요.

저는 이걸 "완성 툴"이 아니라 "초안 생성 툴"로 보고 있어요.

레이아웃과 텍스트 배치를 Claude가 잡아주고, 세부 마감을 내가 하는 방식이요. 그 흐름으로 쓰면 시간이 꽤 줄어요.


마무리 — 이 조합의 가능성

솔직히 말하면, 지금 당장 Figma MCP가 모든 걸 해결해주진 않아요. 근데 방향은 맞다는 느낌이 강하게 들어요.

블로그 글 쓰고 → Claude가 썸네일 초안을 Figma에서 잡아주고 → 내가 마감만 하는 흐름. 그게 실제로 돌아간다는 걸 확인했어요. 처음에 "이게 된다고?" 했던 그 느낌이 아직도 남아 있어요.

 

반응형