Figma MCP(Model Context Protocol)로 디자인을 코드로 : 바이브 코딩으로 웹과 모바일 결과 비교

2025년 5월 7일, Figma Config 2025 컨퍼런스에서 클릭 한 번으로 웹 퍼블리싱이 가능한 "Figma Sites"가 공개되었습니다. AI 시대에 발맞춘 이 혁신적인 기능은 많은 개발자와 디자이너들의 관심을 끌었지만, 아쉽게도 유료 사용자만 베타 기능에 접근할 수 있었습니다.

이 소식을 접한 후, 저는 대안을 찾아보았고 최근 주목받고 있는 MCP(Model Context Protocol)라는 기술이 눈에 들어왔습니다. 이 프로토콜을 활용하면 AI가 Figma 디자인 파일을 직접 분석해 코드로 변환할 수 있다고 합니다. 과연 이 기술이 실제로 얼마나 효과적일지 궁금했고, 특히 웹과 모바일 환경에서 각각 어떤 결과가 나올지 비교해보고 싶었습니다.

 

Figma MCP

MCP(Model Context Protocol)를 사용하면 AI 코딩 에이전트에게 Figma 디자인 데이터에 대한 직접적인 접근 권한을 부여할 수 있습니다. 이를 통해 AI는 디자인의 레이아웃, 스타일, 컴포넌트 구조 등을 정확하게 이해하고, 스크린샷을 붙여넣는 방식보다 훨씬 더 정확하게 디자인을 코드로 구현할 수 있습니다. 이 방식을 활용한 AI 기반 코딩(일명 '바이브 코딩')을 웹과 모바일 환경에서 테스트해보았습니다.

기본 작동 방식

코드 작성에 앞서 기본 작동 방식은 다음과 같습니다:

1. IDE의 채팅을 실행 (Cursor, Claude, Windsurf 등)
2. Figma 파일, 프레임 또는 그룹에 대한 링크 붙여넣기
3. AI에게 디자인 구현 요청
4. AI가 Figma에서 메타데이터(레이어 구조, 스타일, 속성 등)를 가져와 이를 분석하고 코드로 변환

설치 방법은 아래에서 확인할 수 있습니다.

https://github.com/GLips/Figma-Context-MCP

GitHub - GLips/Figma-Context-MCP: MCP server to provide Figma layout information to AI coding agents like Cursor

 

실험 세팅

이 실험에서는 두 가지 다른 디자인 템플릿을 사용했습니다. 두 템플릿 모두 Figma 커뮤니티에서 인기 있는 상위 템플릿 중에서 선정했습니다.

Android : https://www.figma.com/community/file/987218729121549341
React : https://www.figma.com/community/file/1138316365849534403

AI 모델로는 Claude 3.7 Sonnet을 기본으로 사용했고, 네이티브 환경에서는 추가로 Gemini 2.5 Pro와 Deepseek-r1도 테스트했습니다.

 

웹 (React) 바이브 코딩 결과

좌 : 디자인 해야하는 피그마 이미지 우 : Figma MCP를 사용한 코딩 결과

 

웹 환경에서의 변환 결과는 매우 인상적이었습니다. 전체적인 레이아웃과 디자인 요소들이 원본과 상당히 유사하게 구현되었습니다. 이미지나 아이콘 같은 리소스는 분석에서 제외하더라도, AI가 Tailwind CSS를 활용한 스타일링을 훌륭하게 해냈습니다.

- 주관적인 디자인 충실도 : 70 ~ 80% 수준으로 높은 편
- 사용한 프롬프트 횟수 : 총 12회

 

• 장점: 반응형 디자인 구현, 컴포넌트 구조 분리, 스타일 체계 일관성
• 아쉬운 점: Ads 섹션에 차량 이미지 일부 누락, Pick-Up 부분과 Footer 디자인에서 약간의 차이

 

 

안드로이드 네이티브 (Jetpack Compose) 바이브 코딩 결과

좌 : 피그마 디자인 우 : 모바일 빌드 결과 네

 

네이티브 환경에서의 결과는 웹보다 아쉬운 점이 많았습니다. 동일한 횟수의 프롬프트를 사용했을 때 구현 정도에 확연한 차이가 발생했습니다.

 

• 주관적 디자인 충실도: 약 60~70% 수준
• 사용한 프롬프트: 20회 이상
• 사용한 AI 모델: Claude 3.7 Sonnet, Gemini 2.5 Pro, Deepseek-r1 모두 시도
• 문제점: 배경 이미지 위치, 컴포넌트 크기, 트렌딩 코인 디자인 등에서 원본과 차이가 크고 수정이 많이 필요함

 

 

왜 웹이 네이트브보다 변환이 쉬울까?

실험 결과를 분석해보니 웹 환경에서의 변환이 네이티브보다 훨씬 더 성공적이었습니다. 이는 단순한 우연이 아니라 여러 구조적인 이유가 있습니다. (물론 제가 작성한 프롬프트 퀄리티의 차이도 존재할 수 있습니다)

첫째로, 표현 모델의 유사성이 큰 영향을 미쳤습니다. Figma의 디자인 시스템은 기본적으로 웹 기술을 기반으로 하고 있어서 Figma Auto Layout과 CSS의 Flexbox/Grid는 개념적으로 매우 유사합니다. 이 덕분에 디자인에서 코드로의 번역이 자연스럽게 이루어집니다. Jetpack Compose도 Row와 Column이라는 유사한 레이아웃 시스템을 제공하지만, 내부적인 구현 방식과 속성 매핑에 미묘한 차이가 있어 변환 과정에서 정확도가 다소 떨어지는 경우가 있었습니다.

둘째, 스타일링 시스템의 차이도 중요한 요소입니다. 웹에서는 CSS를 통해 모든 스타일 속성을 직관적이고 일관된 방식으로 적용할 수 있습니다. Jetpack Compose도 modifier 시스템을 통해 유사한 접근 방식을 제공하지만, 안드로이드 플랫폼 특유의 복잡성이 남아있어 디자인 의도를 정확히 구현하는 데 더 많은 조정이 필요했습니다.

셋째, 개발 도구와 생태계의 차이도 무시할 수 없습니다. 웹 환경은 오랜 시간 동안 디자인-코드 변환 도구들이 발전해왔습니다. Jetpack Compose는 비교적 새로운 프레임워크이고, Figma-to-Compose 변환 도구들도 등장하고 있지만, 아직 웹 도구들의 성숙도와 정확도에는 미치지 못하는 부분이 있었습니다. 최근에는 Google의 Relay나 Automotive Design for Compose 같은 도구들이 등장하며 이 격차를 줄이고 있습니다.

 

리소스 사용 효율성 비교

	웹(React)	네이티브(Jetpack Compose)
프롬프트 사용량	12회	20회 이상
개발 소요 시간	30분 미만	약 1시간
추가 작업 필요도	낮음	높음

 

결론 및 현업 적용 가능성

이번 실험을 통해 Figma MCP를 활용한 디자인-코드 변환은 웹 환경에서 상당히 실용적인 수준임을 확인했습니다. 특히 React와 Tailwind CSS 조합에서는 실무 적용 가능성이 높아 보입니다.

반면 네이티브(Jetpack Compose) 환경에서는 아직 기본 구조만 생성되고 세부 디자인 구현에 한계가 있어 실무에 바로 적용하기는 어려울 것 같습니다. 하지만 고급 프롬프트 전략과 여러 모델을 함께 사용하면 개선 가능성이 있습니다.

특히 웹 개발자라면 지금 바로 Figma MCP를 도입해 디자인-코드 변환 작업을 효율화할 수 있을 것 같습니다. 여러분도 한번 시도해보시길 권장합니다!