[요즘IT] 프론트엔드 개발자가 써본 "피그마 MCP"의 가능성과 한계

2025년 상반기에 피그마에서는 오픈 베타 버전을 발표하면서 새로운 기능을 추가했다. 바로 Figma MCP Server 기능이었다. 기능이 나온 이후 많은 개발자들이 이 기능을 써 보았고 이에 대한 후기가 나타나기 시작했다. 아직 베타 기능이라 부족한 부분도 있기는 하지만, 올 해 가장 큰 흐름 중 하나인 MCP의 등장에 피그마도 뒤쳐지지 않기 위해서 해당 기능을 출시한 것으로 보여진다. 이 글을 쓰는 시점인 2025년 10월에도 오픈 베타 버전이라 해당 기능이 정식 기능으로 출시될 지 여부는 모르지만, 디자이너와 개발자가 일하는 방식에도 큰 영향을 끼칠 중요한 기능이기에 이번 글을 작성하게 되었다.

1. 피그마 MCP에 대한 소개

피그마 MCP가 무엇인지 먼저 살펴보자. 피그마 공식 홈페이지에는 피그마 MCP 서버에 대해서 다음과 같이 설명을 하고 있다.

“The Figma MCP Server helps developers implement designs quickly and accurately by providing important context to AI agents that generate code from Figma design and Make files. The tools within Figma’s MCP Server bring additional context from Figma into your workflow, so your code doesn't just match your existing systems, but your design, too."

“피그마 MCP 서버는 피그마 디자인과 Make 파일로부터 코드를 생성하는 AI 에이전트에 중요한 컨텍스트를 제공함으로써, 개발자가 디자인을 빠르고 정확하게 구현할 수 있도록 돕는 서버이다. Figma MCP 서버에 포함된 도구들은 Figma의 추가적인 맥락을 워크플로우에 가져와, 코드가 기존 시스템에 만 맞는 것이 아니라 디자인에도 일치하도록 만들어 준다.”

쉽게 말하면 피그마 어플리케이션과 우리가 작성하는 코드(이 코드를 작성하는 AI 에이전트) 사이에 서버를 하나 두는 것이다. 현재는 로컬에서 개발 서버를 띄워서 사용할 수 있고, 그 서버가 피그마의 작업 컨텍스트를 가지고 디자인 작업물을 코드로 구현해 주는 개념이다. Figma-Context-MCP 라는 이름으로 깃허브에서 소스코드를 제공하고 있으며, 문서가 한국어로도 잘 작성되어 있어서 어렵지 않게 서버를 로컬에서 실행할 수 있다.

기존에 피그마에는 Dev 모드에서 디자인 결과물을 코드로 변환해주는 플러그인(e.g. Figma to Code, Anima 등)이 존재했다. 그런데 왜 피그마는 MCP를 또 만든걸까? 나도 그렇고 주변에 다른 개발자 동료들을 봐도 피그마에서 디자인 결과물을 일괄적으로 코드로 변환해 주는 플러그인은 잘 사용하지 않는다. 단순 프로토타입을 한 번 만들 때 정도가 아니라면 말이다. 그 이유는 현업에서 작성하는 코드는 보통 디자이너가 작성해 준 디자인 규칙 안에서 작성되기 때문이다. 색상, 컴포넌트, 길이 단위, 레이아웃 등 그냥 작성되는 것이 아니고 red-100, Button 컴포넌트, radius-200, Overlay 등과 같이 미리 작성된 규칙에 따라 다르게 작성된다. 이러한 규칙은 회사마다 다 다르고 보편적으로 사용하는 디자인 시스템(e.g. Material UI, Radix, Chakra UI 등)을 사용하는 곳도 있다. 기존에 플러그인들은 이러한 각각의 프로젝트마다 사용되는 “문맥(Context)”은 고려하지 않고 코드를 만들어 주었기에 개발자들의 필요를 온전하게 충족시켜 주지 못했다. 이러한 한계를 극복하기 위해서 MCP 기능을 추가한 것이 아닌가 생각한다.

 

2. 피그마 MCP의 동작 원리

피그마 MCP 사용 방법은 공식 문서에 자세하게 나와 있기에 하나씩 차근차근 따라 해 보면 어렵지 않게 사용해 볼 수 있을 것이다.

1. 로컬에서 개발 MCP 서버를 실행하고 (e.g. http://127.0.0.1:3456/sse)
2. Cursor, VS Code 같은 IDE/AI Agent에서 MCP 서버 설정을 해준 뒤
3. 명령 프롬프트를 작성하면 된다. 예를 들면, 피그마의 어떤 레이어 링크를 복사해서 프롬프트에 붙여 넣은 뒤, react 코드로 구현해 달라고 하는 식으로 하면 된다.

피그마는 MCP 서버에서 HTTP + SSE(Server Sent Event) 방식으로 요청을 주고 받는다. 양방향 모델을 추구하지만, 웹소켓처럼 실시간으로 양방향을 필요로 하기 보다는 클라이언트에서 서버에 프롬프트 요청을 하나 보내면 (e.g. A 페이지의 피그마 레이어를 react 코드로 구현해줘), 서버에서 클라이언트로 스트리밍 형태로 푸시하는 방식이 효율적이다. 실제로 사용을 해보면 핸즈온이 매우 간단한데, HTTP 기반으로 통신하기 때문에 프록시/방화벽 환경에서도 제약이 적다는 장점이 있다. 폴링 방식의 경우 주기가 짧으면 오버헤드가 발생하기 쉬운데 SSE는 연결 1개로 이벤트를 푸시하기 때문에 폴링 대비 CPU/네트워크 낭비가 적다는 장점도 있다.

아래 그림은 MCP에서 SSE 방식 통신을 클라이언트와 서버가 어떻게 주고받는지를 나타낸 그림이다. 클라이언트는 IDE/AI Agent, 서버는 우리가 로컬에서 띄운 MCP 서버라고 생각하면 된다.

출처 :  https://modelcontextprotocol.io/specification/2024-11-05/basic/transports

 

3. 직접 업무에서 사용해 본 경험 소개

필자는 실무에서 피그마를 쓰고 있었고, 웹 프론트엔드 개발을 할 때 피그마 MCP를 사용해서 개발을 해 보았다. 처음에는 명령을 단순하게 작성했는데 예를 들면

“A 페이지를 react, typescript 기반의 코드로 작성해줘”

이렇게 명령을 했더니, 실무에서 쓸 수 없는 코드가 나왔다. 한 번 누군가 보여주기 위해서 만드는 코드로는 가능하지만, 지속적으로 발전시켜 나가기에는 적합하지 않은 결과물이었다.

그래서 컨벤션에 해당하는 문서를 추가로 작성해 주었다. 필자는 커서를 쓰고 있었는데, 커서는 .cursor/rules 하위에 .mdc 파일 형식으로 문서를 작성하면 커서가 그 문서를 읽고 이걸 바탕으로 코드를 짜 준다. 자세한 내용은 참고 문서를 통해 확인할 수 있다. 여기에 나는 우리 팀에서 사용하는 코딩 컨벤션이나 디자인 시스템, 아키텍처 등을 추가해 주었다. 이렇게 하니 조금 더 퀄리티가 좋아졌다. 

하지만, 그럼에도 여전히 현업 개발자가 짜는 코드 수준에는 조금 아쉬운 부분들이 보였다. 페이지 전체를 만들어 달라고 하면 디테일한 부분에서 조금씩 차이가 발생해서, 컴포넌트 단위로 요청하기도 했다. 그리고, 이미지나 아이콘 같은 경우는 못 불러오는 경우가 있는데, 확인을 해 보니 환경 설정에서 get_image를 활성화 시켜주어야 해당 이미지를 불러올 수가 있었다.

반응형 레이아웃도 피그마 MCP는 잘 만들어 주지 못했다. 이 경우는 오토 레이아웃을 사용해서 반응형 의도를 전달해야 한다. 이렇게 피그마 작업을 하는 부분에서도 신경을 써 주어야 하는 부분들이 많다. 그래서 바람직한 건 디자이너와 개발자가 같이 이 피그마 MCP를 써서 생산성을 높이자는 점에 합의하고 디자인 작업도 이에 맞춰서 잘 전달해 주는 것이다. 디자이너가 피그마 MCP에 적합하지 않게 기존에 작업하던 대로 한다면, 개발자가 아무리 프롬프트를 잘 작성해도 원하는 결과물을 얻는데 한계가 있을 수 있겠다는 생각이 들었다.

어느 정도 피그마에서 디자인 시안이 일관성있게 작업이 되었다면, 피그마 MCP를 통해 빠르게 초안 코드를 AI의 도움으로 만들고, 디테일한 부분을 사람이 완성하는 방식은 분명히 생산성이 올라간다. 하지만, 팀마다 상황이 다르고 피그마를 이에 맞게 쓰지 않는 경우도 있기에, 그러한 경우라면 피그마 MCP가 오히려 생산성을 떨어뜨릴 수도 있겠다는 생각이 들었다. 팀의 상황에 맞게 도입 여부를 결정하는 것이 중요할 것 같다.

 

마치며

이번 글에서는 피그마 MCP에 대한 소개와 동작 원리를 설명하고, 필자가 실무에서 사용하면서 느꼈던 점들을 작성해 보았다. 아직 오픈 베타 버전이고 기대했던 부분보다는 다소 아쉬운 점들도 많았지만, 그래도 디자이너와 개발자가 일하는 방식의 혁신적인 변화 중 하나로 남을 것이라는 점에는 동의한다. 만약 이렇게 디자인 도구에서 코드로 이어지는 작업이 점점 더 고도화되고 자동화가 된다면 프론트엔드 개발자의 역할이 바뀔 수도 있겠다는 생각도 들었다. 과거에는 화면을 의도대로 잘 구현하는 것이 중요한 역량이었다면, 이제는 그건 AI에게 맡기고 화면을 어떤 사용자 경험으로 배치할 것이며, 또 설계를 어떻게 할지에 대한 고민을 많이 할 것 같기도 하다. 지금 당장은 피그마 MCP가 큰 도움이 안 될 수도 있겠지만, 그럼에도 이러한 새로운 기능들을 잘 이해하고 기회가 될 때마다 조금씩 써 보는 것이 트렌드를 놓치지 않는 개발자로 나아갈 것이라는 생각을 하면서 이번 글을 마치고자 한다.

 

출처 : 요즘 IT

https://yozm.wishket.com/magazine/detail/3419/

프론트엔드 개발자가 써본 ‘피그마 MCP’의 가능성과 한계 | 요즘IT