인사이트리포트

들어가며

디자이너의 Figma 화면을 프론트엔드 코드로 완벽하게 옮기는 작업은 개발의 오랜 과제 중 하나다. 과거에도 AI를 활용해 디자인을 코드로 자동 변환하려는 시도들이 있었지만, 생성된 코드의 품질이 낮거나 반복적인 수작업이 필요해 실제 프로젝트에 바로 적용하기에는 한계가 있었다.

최근 이러한 상황에 변화를 줄 수 있는 ‘MCP(Model Context Protocol)’라는 기술이 주목받고 있다.

MCP는 AI 모델이 Figma와 같은 외부 도구 및 서비스와 직접 소통할 수 있도록 만들어진 오픈 소스 기반의 표준 통신 규약이다. 쉽게 말해, AI와 외부 도구를 연결하는 ‘공통 언어’가 생긴 셈이다.

이 MCP 기술을 활용해 개발된 ‘Figma MCP⁽¹⁾ ‘는 기존의 한계를 해결할 새로운 방법을 제시한다.

AI가 디자인을 이미지로 보고 추론하며 코드를 생성하던 방식에서 벗어나, Figma 디자인 파일이 가진 구조화된 메타데이터(레이아웃 정보, 컴포넌트 계층, 스타일 속성 등)를 직접 읽고 이해하여 코드를 생성할 수 있게 된 것이다.

이에 Figma의 디자인을 MCP를 통해 Gemini AI가 코드로 변환하는 전체 워크플로우가 실제 개발 효율성을 개선할 수 있는지, 고객 프로젝트에 직접 적용하여 그 실효성을 확인해 보았다.

본 리포트는 Figma MCP와 Gemini 2.5 Pro를 실제 프로젝트에 적용한 구체적인 과정을 다룬다. 그리고 이를 통해 달성한 정량적 성과와 실질적인 개발 효율성 개선 효과를 실증 데이터를 바탕으로 증명한다.

⁽¹⁾ 본 프로젝트 시작 당시에는 Figma의 공식 ‘Dev Mode MCP Server’가 출시 전이었기 때문에, 서드파티 도구인 ‘Framelink Figma MCP Server’를 사용했다.

AI 증강 개발의 핵심 기술 요소

본격적인 프로젝트 과정과 성과를 살펴보기 전에, 본 프로젝트에서 사용한 세 가지 핵심 기술 요소인 MCP, Cline, Gemini 2.5 Pro를 먼저 소개하고자 한다. 바로 이들 기술의 조합이 전체 워크플로우의 기반이 되기 때문이다.

MCP: AI와 도구를 잇는 표준 프로토콜

앞서 들어가며 부분에서 ‘공통 언어’라고 소개한 MCP가 어떻게 AI와 도구를 연결하는지, 그 구체적인 동작 원리와 아키텍처를 살펴보자

MCP의 동작 원리: 클라이언트-서버 구조

공식 문서에 따르면, MCP 아키텍처는 호스트, 클라이언트, 서버라는 세 가지 핵심 요소로 구성된다.

• 호스트 (Host):

사용자와 직접 상호작용할 수 있는 인터페이스를 제공하고, 여러 개의 Client들을 관리한다. Claude Desktop이나 Cursor 같은 프로그램이 여기에 해당하며, 우리 프로젝트에서는 ‘Cline’을 사용했다.

• 클라이언트 (Client):

호스트 애플리케이션 내에서, 특정 서버와 1:1로 연결을 유지하는 주체다. 우리 프로젝트에서는 ‘Cline’이 호스트 역할과 동시에 클라이언트 역할도 수행했다.

• 서버 (Server):

클라이언트에게 컨텍스트(정보), 도구(기능), 프롬프트 등을 제공한다. 우리 프로젝트에서는 ‘Figma MCP 서버’가 디자인 정보와 관련 기능을 제공하는 서버 역할을 한다.

이 구조의 핵심은 ‘표준화’를 통한 재사용성에 있다. MCP 서버 하나만 구축하면, 여러 AI 클라이언트가 동일한 방식으로 접근해 기능을 재사용할 수 있기 때문이다. 이러한 ‘한 번 개발하면 어디서든 사용하는(write once, use everywhere)’ 구조가 바로 개발 효율성과 생태계 호환성을 높이는 비결이다.

Figma MCP는 어떻게 디자인을 ‘읽는가’?

그렇다면 Figma MCP는 구체적으로 어떻게 디자인의 구조적 정보를 LLM에게 전달하는 것일까? 이는 다음 2가지 핵심 도구를 통해 이루어진다.

1) get_figma_data 도구

Figma에서는 프레임, 컴포넌트, 텍스트, 도형 등 모든 디자인 요소를 ‘노드(Node)’ 라고 부른다. 이 노드들이 모여 하나의 화면 구조를 이룬다.

get_figma_data 도구는 바로 이 노드들의 계층 구조와 스타일 속성(크기, 색상, 폰트 등)을 추출하는 역할을 한다.

아래와 같은 파라미터를 사용하여 원하는 범위의 구조화된 메타데이터를 정밀하게 요청할 수 있다.

● fileKey: Figma 파일 전체를 가리키는 고유 웹 브라우저의 Figma 주소창(URL)에서 확인할 수 있다

● nodeId: 파일 내 특정 디자인 요소(레이어) 하나를 가리키는 고유 ID

2) download_figma_images 도구

디자인에 사용된 SVG, PNG 같은 이미지 Asset을 자동으로 다운로드하여 로컬 프로젝트 폴더에 저장한다. 이를 통해 코드 생성 시 이미지 경로를 즉시 활용할 수 있도록 돕는다.

Cline: 계획과 실행을 분리하는 AI 코딩 에이전트

Cline은 단순히 코드를 제안하는 보조 도구를 넘어, 개발자의 IDE에 통합되어 동작하는 자율적인 AI 코딩 에이전트다. 전체 프로젝트의 코드를 이해하고, 터미널 명령을 실행하며, 필요시에는 웹 브라우저를 직접 제어하여 실제 애플리케이션의 동작을 확인하는 등, 복잡하고 광범위한 개발 작업을 수행할 수 있다.

Cline의 가장 큰 특징은 이 모든 강력한 기능을 ‘계획(PLAN)’과 ‘실행(ACT)’으로 이어지는 워크플로우를 통해 수행한다는 점이다. AI가 자율적으로 작업을 수행하기 전에 먼저 구체적인 실행 계획을 제시하고 개발자의 승인을 받는다.

이처럼 AI의 강력한 실행 능력과 개발자의 정교한 통제력을 결합할 수 있다는 점이, 이번 프로젝트에서 결과물의 안정성과 예측 가능성을 확보하기 위해 Cline을 선택한 핵심적인 이유다.

Gemini 2.5 Pro: 방대한 컨텍스트를 이해하는 차세대 언어 모델

Gemini 2.5 Pro는 현 시점에서 Google의 가장 진보한 차세대 대규모 언어 모델(LLM)로, 텍스트뿐만 아니라 이미지, 오디오, 비디오까지 함께 이해하고 추론하는 멀티모달(multimodal) 기능을 갖추었다.

이 모델의 가장 큰 기술적 특징은 최대 800만 토큰에 달하는 방대한 Context Window이다. 이는 일반적인 소설책 수십 권에 해당하는 분량으로, AI가 프로젝트의 전체 코드베이스를 한 번에 파악하고, 처음부터 끝까지 일관된 맥락을 유지하며 작업할 수 있게 만든다. 또한, 한층 더 발전된 복합 추론 능력은 복잡한 요구 사항을 깊이 있게 이해하는 기반이 된다.

이러한 압도적인 정보 처리 능력은 곧바로 정교한 코드 생성 능력으로 이어진다.

웹 개발 능력 평가 리더보드 ‘WebDev Arena'(2025년 7월 기준)에서 1위를 차지하는 등, 검증된 코드 생성 성능이 바로 Gemini 2.5 Pro를 이번 프로젝트의 핵심 엔진으로 선택한 이유다.

MCP 기반 AI 증강 개발 워크플로우

지금까지 AI 증강 개발을 구성하는 MCP, Cline, 그리고 Gemini 2.5 Pro에 대해 각각 알아보았다. 그렇다면 이 세 가지 요소가 어떻게 Figma 디자인을 코드로 변환하는 하나의 워크플로우를 구성하는지 살펴보자.

이 워크플로우는 4개의 핵심 단계로 구성된다.

① Figma Design: 디자이너가 완성한 UI 디자인 파일

② MCP: Figma MCP가 디자인의 구조화된 메타데이터(레이아웃, 컴포넌트, 스타일)를 추출하여 AI에게 전달

③ AI Agent: Cline에서 Gemini 2.5 Pro 모델을 활용해 메타데이터를 분석하여 해당 디자인에 맞는 코드를 생성

④ Generated Code: 디자인 구조가 반영된 실행 가능한 프론트엔드 코드 완성

실증 프로젝트: AI 증강 개발 적용 사례와 성과

Figma to Code: 4단계 실행 프로세스

그렇다면 이 도구 조합을 활용하여, 실제 프로젝트에서 어떻게 Figma 디자인을 코드로 변환했을까?

실행 과정은 ①개발 환경 설정, ②디자인 메타데이터 추출, ③구현 계획 수립(PLAN 모드), ④코드 생성 및 통합 (ACT 모드) 4단계로 나누어 진다.

각 과정을 자세히 살펴보자.

1단계: 개발 환경 설정

1) VS Code에서 Cline 확장 설치

2) Cline MCP Marketplace에서 Figma MCP 설치

2단계: 디자인 메타데이터 추출

1) Figma 디자인 URL 복사

2) Cline에서 디자인 정보 추출 요청

3단계: 구현 계획 수립 (PLAN 모드)

먼저 Cline의 PLAN 모드를 통해 AI가 전체 개발 계획의 초안을 생성한다. 개발자는 이 초안을 바탕으로 다음과 같은 주요 항목들을 검토하고 수정하며 계획을 최종적으로 확정한다.

• 컴포넌트 구조 검토: AI가 제안한 컴포-넌트의 계층 구조와 데이터 흐름을 확인하고 개선한다.
• 기술 스택 명시: Vue 3, TypeScript 등 프로젝트에 사용할 특정 기술 스택을 명시하고 조정한다.
• 개발 우선순위 수정: 비즈니스 중요도에 따라 기능 개발의 우선순위를 재조정한다.
• 디자인 시스템 및 반응형 정책 구체화: 전체 디자인 시스템과의 일관성을 점검하고, 반응형 구현 방식을 구체화한다.

4단계: 코드 생성 및 통합 (ACT 모드)

Cline이 ACT 모드로 전환하여 실제 코드 생성을 시작한다.

ACT 모드에서 AI가 코드를 생성하는 동안, 개발자는 단순히 지켜보는 것을 넘어 코드의 최종 품질을 보장하기 위해 다음과 같은 사항을 지속적으로 검토하고 개선한다.

• 코드 품질 및 스타일링: 생성된 코드의 품질을 실시간으로 점검하고, 컴포넌트 네이밍 규칙과 CSS 스타일링 방식을 개선한다.
• 아키텍처 검증: 라우팅 구조와 상태 관리 로직이 올바른지 검증한다.
• 재사용성 최적화: 공통 컴포넌트의 재사용성을 높여 전체 코드의 효율성을 관리한다.

Cline의 PLAN/ACT 모드 전환 방식과 Gemini의 코드 생성 능력을 결합함으로써, 개발자는 디자인 시안을 코드로 옮기는 반복 작업의 부담을 크게 덜 수 있었다. 이러한 효율성 확보는 다음 장에서 다룰 구체적인 정량적 성과로 직접 이어졌다.

개발 성과 및 정량적 분석

성과 측정 방법

단순히 AI가 생성한 코드의 양이 아닌, ‘프로젝트 최종 결과물에 살아남은 코드’의 실제 기여도를 측정하고자 했다. 이를 위해 커밋별 변경 라인 수가 아닌 Git Blame 방식을 사용했으며, 분석 대상 역시 node_modules 등 외부 라이브러리를 제외한 순수 프로젝트 소스 코드로 한정했다.

코드 라인별 기여자는 [AI], [Human] 커밋 태그로 분류했으며, [AI&Human] 태그가 붙은 코드는 기여도를 50:50으로 배분했다.

주요 성과

• 총 코드 라인: 21,262라인
• AI 생성 코드: 14,105라인 (66.3%)
• 개발자 작성 코드: 7,157라인 (33.7%)
• 목표 대비 성취도: 30% 목표 대비 220% 초과 달성

AI가 생성한 코드는 Figma에 정의된 컴포넌트 구조와 스타일 속성 등 디자인 명세(spec)를 기반으로 정확하게 구현되었다. AI가 디자인 명세와 일치하는 고품질 코드를 초기부터 생성해준 덕분에, 반복적인 UI 구현에 투입되던 개발 공수를 줄일 수 있었다. 결과적으로 개발자는 반복적인 UI 퍼블리싱 작업에서 벗어나, 더 중요한 비즈니스 로직과 사용자 경험 설계에 온전히 집중할 수 있었다.

마치며

본 리포트에서는 Figma MCP와 Gemini 2.5 Pro를 활용하여, 66.3%라는 AI 코드 기여도를 실제 프로젝트에서 달성한 과정과 성과를 살펴보았다. 이는 오랜 과제였던 디자인-코드 전환 프로세스에서 AI 협업 개발의 실질적 효과를 입증하는 구체적인 수치다.

중요한 것은 이 성과가 단순히 최신 도구를 사용했기 때문이 아니라는 점이다. ‘AI와의 협업 효율성’과 ‘코드 생성 성능’이라는 명확한 기준에 따른 도구 조합, 체계적인 4단계 실행 프로세스, 그리고 Git Blame 기반의 정밀한 성과 측정이 있었기에 가능했다.

물론, 이 새로운 개발 방식에도 현재 기술 수준에서의 명확한 한계와 해결해야할 과제는 존재한다.

예를 들면, AI는 ‘처음부터 새로 만드는(zero-to-one)’ 코드 생성에는 뛰어나지만, 기존 코드를 이해하고 수정하거나 리팩토링하는 작업에는 아직 취약한 모습을 보인다. 그리고 UI/UX 코드를 높은 수준으로 자동화하더라도, 서비스의 핵심인 복잡한 비즈니스 로직이나 상태 관리 로직은 여전히 개발자의 영역으로 남아있다.

이는 ‘완전 자동화’가 아니라 개발자의 역할이 ‘코더’에서 ‘설계자 및 코드 리뷰어’로 변화하는 과정에 가깝다. AI에게 명확한 방향을 제시하고 생성된 결과물을 검증하는 개발자의 역량이, 최종 결과물의 품질을 좌우하는 핵심 요소가 되는 것이다.

최근 Microsoft, OpenAI 등 주요 기술 기업들이 MCP 프로토콜 지원을 확대하면서, 이러한 개발 방식은 점차 업계의 표준이 될 것으로 예상된다. 이는 곧, 도구의 단순한 도입을 넘어 ‘어떻게 잘 활용할 것인가’에 대한 체계적인 방법론을 갖추는 것이 기업의 경쟁력이 됨을 의미한다.

이러한 가능성과 명확한 한계를 바탕으로, 이번 프로젝트로 검증된 개발 프로세스를 한 단계 더 발전시켜 나가고자 한다. 또한, 프로젝트 특성에 맞는 AI 도구 선택 기준과 단계별 체크포인트를 담은 구체적인 실무 가이드를 마련하여 향후 다양한 고객 프로젝트에 확대 적용할 것이다.