이 요약은 AI가 원문을 분석해 생성했습니다. 정확한 내용은 원문 기준으로 확인하세요.
TL;DR
Figma는 공식적인 사이드 프로젝트 제도가 없음에도 불구하고 MCP 서버를 개발하여 디자인 데이터를 AI 에이전트가 이해할 수 있는 형태로 변환하는 데 성공했다. C++ 장면 그래프를 LLM이 가장 잘 이해하는 React와 Tailwind 코드로 표현함으로써 픽셀 단위의 정확도를 확보했으며 이미지 전달 시 발생하는 컨텍스트 윈도우 병목 문제를 해결했다. 특히 단순 UI 생성을 넘어 Code Connect를 통해 기업 내부의 실제 컴포넌트를 연결함으로써 실무 적용성을 높였다. 수동 평가의 한계를 극복하기 위해 LLM 판정단을 도입하여 매주 수백 건의 벤치마크를 수행하며 제품을 고도화하고 있다.
챕터별 상세
20% 프로젝트의 시작
Figma에는 공식적인 20% 프로젝트 제도가 없었으나 Jesse Lumarie는 비디자이너가 Figma 데이터를 쉽게 가져올 수 있도록 주 1회 시간을 할애해 MCP 서버 개발을 시작했다. 이 사이드 프로젝트는 3개월 만에 Figma의 첫 번째 MCP 서버가 되었으며 출시 후 가장 빠르게 성장하는 제품 중 하나로 자리 잡았다. 초기에는 사내 데모에서 영감을 얻어 개발을 추진했으며 이는 디자인 도구와 개발 환경 사이의 장벽을 허무는 계기가 되었다.
MCP는 Anthropic에서 제안한 모델 컨텍스트 프로토콜로 AI가 외부 데이터에 접근하는 표준 방식을 정의한다.
불안정한 사양과 클라이언트 지원
개발 초기 단계에서 MCP 사양의 새로운 버전이 출시되면서 기존에 선택했던 전송 방식이 지원 중단되는 기술적 변화를 겪었다. 클라이언트마다 지원 수준이 일정하지 않아 호환성 매트릭스를 직접 관리해야 할 정도로 환경이 불안정했다. 이러한 변화 속에서도 개발을 지속하며 표준 사양의 변화에 유연하게 대응하는 구조를 구축했다.
장면 그래프의 세 가지 표현 방식
Figma의 캔버스는 C++ 기반의 장면 그래프로 구성되어 있어 이를 모델에 전달하기 위한 최적의 형식을 결정해야 했다. 연구 끝에 모델이 가장 많이 학습했을 것으로 추정되는 React와 Tailwind CSS 조합을 선택하여 캔버스 구조를 변환했다. 이 선택은 모델이 디자인 의도를 정확히 파악하고 픽셀 단위로 완벽한 결과물을 생성하는 데 결정적인 역할을 했다.
장면 그래프는 디자인 도구 내 객체들의 부모-자식 관계와 속성을 정의하는 트리 구조의 데이터이다.
이미지 기반 접근의 한계
이미지를 base64 인라인 데이터로 직접 전달하는 방식은 컨텍스트 윈도우 용량을 급격히 소모하여 데이터가 잘리는 문제를 야기했다. 텍스트 기반의 구조적 표현이 이미지보다 효율적임을 확인하고 시각적 정보 대신 코드 형태의 표현에 집중했다. 이를 통해 모델이 더 긴 디자인 맥락을 유지하면서도 정확한 UI 구조를 생성할 수 있게 되었다.
수동 평가에서 LLM 평가로의 전환
초기에는 스프레드시트를 활용해 2시간 동안 수동으로 평가를 진행했으나 이는 확장성이 없고 비효율적이라는 결론에 도달했다. 현재는 LLM 판정단을 도입하여 매주 수백 번의 자동화된 평가를 수행하는 시스템을 운영 중이다. 자동화된 평가 루프는 모델의 성능 변화를 즉각적으로 감지하고 개선 방향을 설정하는 핵심 지표가 되었다.
LLM Judge는 사람이 일일이 채점하기 힘든 대규모 데이터를 GPT-4와 같은 고성능 모델이 대신 평가하는 기법이다.
Code Connect와 기업용 컴포넌트
단순히 아름다운 UI를 생성하는 것을 넘어 기업은 자사의 접근성 및 국제화 기준이 적용된 실제 컴포넌트를 사용하길 원한다는 점을 파악했다. 이를 해결하기 위해 Code Connect를 활용하여 단순 마크업 대신 실제 컴포넌트에 대한 포인터를 전송하는 방식을 도입했다. 결과적으로 개발자는 생성된 코드에서 즉시 운영 환경에 적합한 라이브러리 컴포넌트를 사용할 수 있게 되었다.
Code Connect는 Figma 디자인과 실제 React 등의 코드 컴포넌트를 1:1로 매핑해주는 기능이다.
로컬 우선 배포와 미래 전망
보안과 데이터 프라이버시를 고려하여 로컬 서버 형태의 배포를 우선적으로 진행한 뒤 원격 환경으로 확장하는 전략을 취했다. 현재의 MCP 생태계는 아직 초기 단계에 머물러 있으며 향후 더 정교한 샘플링과 유도 기법이 필요함을 확인했다. Figma는 이러한 실험을 통해 디자인 데이터가 AI 에이전트의 핵심 컨텍스트로 작용하는 미래를 준비하고 있다.
용어 해설
- 모델 컨텍스트 프로토콜(MCP)
- — AI 모델이 로컬 데이터나 도구에 안전하게 접근할 수 있도록 돕는 개방형 표준이다. 클라이언트와 서버 간의 통신 규약을 정의하여 에이전트가 외부 정보를 효율적으로 가져오게 한다.
- 장면 그래프(Scene Graph)
- — 그래픽스에서 객체 간의 계층 구조를 나타내는 데이터 구조이다. Figma는 이를 C++로 관리하며 AI가 이해할 수 있도록 구조적 텍스트로 변환하는 과정이 필수적이다.
- 코드 커넥트(Code Connect)
- — Figma 디자인 요소를 실제 개발 코드 컴포넌트와 연결해주는 도구이다. AI가 단순한 그림이 아닌 실제 운영 환경의 라이브러리 컴포넌트를 호출할 수 있게 돕는다.
- LLM 판정단(LLM Judge)
- — 사람이 직접 평가하기 어려운 대량의 모델 출력물을 다른 고성능 LLM이 대신 평가하도록 하는 방식이다. 수동 평가 대비 수백 배 빠른 속도로 벤치마크를 수행할 수 있다.
언급된 리소스
AI 분석 전체 내용 보기
AI 요약 · 북마크 · 개인 피드 설정 — 무료
출처 · 인용 안내
원문 발행 2026. 08. 28.수집 2026. 08. 29.출처 타입 YOUTUBE
인용 시 "요약 출처: AI Trends (aitrends.kr)"를 표기하고, 사실 확인은 원문 보기 기준으로 진행해 주세요. 자세한 기준은 운영 정책을 참고해 주세요.
