UI 디자인 시스템 자동화 AI에이전트 : uSpec
우버의 AI 에이전트 기반 자동화 시스템:
uSpec을 소개합니다.
기술의 발전이 가속화됨에 따라 기업 내 디자인 시스템의 역할은 단순히 시각적 일관성을 유지하는 수준을 넘어 소프트웨어 개발 라이프사이클의 핵심 인프라로 자리 잡았다. 우버(Uber)는 수천 명의 엔지니어가 사용하는 방대한 규모의 베이스(Base) 디자인 시스템을 운영하고 있으며, 이 시스템의 성공적인 작동은 모든 구성 요소의 사양이 정확하고 완전하며 최신 상태를 유지하는지에 달려 있다. 하지만 기업의 규모가 커질수록 수백 개의 구성 요소에 대한 문서를 수동으로 관리하는 것은 물리적으로 불가능에 가까운 과제가 되었고, 우버는 이를 해결하기 위해 인공지능 에이전트 기반의 자동화 시스템인 uSpec을 도입했다.
uSpec은 단순한 자동화 도구를 넘어 인공지능이 목표를 이해하고 자율적으로 행동하는 에이전틱(Agentic) 시스템의 정수를 보여준다. 이 시스템은 코드 에디터인 커서(Cursor) 내의 인공지능 에이전트를 오픈소스인 피그마 콘솔 MCP(Figma Console MCP)를 통해 피그마(Figma)와 직접 연결하는 구조를 취한다. 이를 통해 에이전트는 실제 디자인 파일의 구성 요소와 하위 구조를 스스로 탐색하고, 디자이너가 제공한 추가적인 맥락 정보를 결합하여 단 몇 분 만에 완성된 사양 페이지를 피그마 내에 생성한다.
우버의 이러한 시도는 2026년 현재 인공지능이 단순한 보조 도구에서 동료 개발자 및 디자이너와 같은 역할을 수행하는 에이전트 기반 워크플로우로 진화했음을 상징한다. 실제로 우버 내부의 전체 코드 중 31%가 인공지능에 의해 작성되고 있으며, 전체 풀 리퀘스트(Pull Request)의 11%를 인공지능 에이전트가 직접 생성하고 있다는 통계는 이러한 변화의 속도를 여실히 보여준다. uSpec은 이러한 광범위한 인공지능 도입 전략 중에서도 디자인과 엔지니어링의 접점을 자동화함으로써 제품의 품질과 개발 속도를 동시에 높이는 핵심적인 역할을 수행하고 있다.
기업들이 디자인 시스템 구축에 있어서 겪었던 문제들
대규모 조직에서 디자인 시스템 문서를 관리하는 과정은 흔히 토일(Toil)이라 불리는 반복적이고 고된 수작업의 연속이었다. 우버의 분석에 따르면 엔지니어링 업무의 약 70%가 이러한 반복적인 유지보수 작업에 해당하며, 디자인 사양 작성 역시 예외는 아니다. 디자인 시스템이 확장됨에 따라 문서화는 그 자체로 하나의 전담 워크스트림이 되지만, 그럼에도 불구하고 실제 제품의 변화 속도를 따라잡지 못하는 병목 현상이 발생한다.
사양 문서가 실제 디자인과 일치하지 않게 될 때 발생하는 부작용은 치명적이다. 엔지니어는 명확한 정의가 아닌 주관적인 추측에 근거하여 코드를 작성하게 되고, 이는 곧 디자인 불일치와 심각한 기술 부채로 이어진다. 특히 우버와 같이 iOS(UIKit, SwiftUI), 안드로이드(XML, Compose), 웹(React), 고(Go), 서버 기반 UI(SDUI) 등 7개 이상의 구현 스택을 동시에 지원해야 하는 환경에서는 단일 구성 요소에 대한 사양을 모든 플랫폼에 맞춰 수동으로 작성하는 데만 몇 주의 시간이 소요되기도 한다.
기존의 방식은 디자이너가 피그마 레이어를 일일이 검사하고, 색상 값이나 간격 정보를 텍스트로 옮겨 적는 비효율적인 구조였다. 이 과정에서 전사 오류(Transcription Errors)가 빈번하게 발생하며, 플랫폼별로 다른 접근성 가이드라인이나 상태 변화를 빠짐없이 기록하는 것은 인간의 주의력 한계를 시험하는 작업이었다. 결과적으로 문서는 생성되는 순간부터 낡은 정보가 되기 일쑤였고, 개발자들은 디자인 시스템의 가치를 온전히 누리지 못한 채 파편화된 정보를 수집하는 데 많은 시간을 낭비해야 했다.
uSpec 시스템 작업 방식 :
Figma 링크에서 최종 사양 까지
uSpec은 기존의 복잡하고 지루한 사양 작성 프로세스를 혁신적으로 단축하여 단 두 단계의 명확한 과정으로 재정의했다. 이 워크플로우는 디자이너의 의도를 에이전트에게 전달하는 과정과 에이전트가 이를 실행하여 실질적인 결과물을 피그마에 렌더링하는 과정으로 나뉜다.
1단계: Figma 링크 및 컨텍스트 공유
작업의 시작은 매우 간단하다. 디자이너는 커서 인터페이스 내에서 특정 에이전트 스킬을 호출하고 작업 대상이 되는 피그마 구성 요소의 링크를 입력한다. 하지만 단순히 링크만 공유하는 것이 아니라, 디자인 파일 자체만으로는 충분히 설명되지 않는 중요한 맥락 정보를 함께 제공한다. 예를 들어 특정 변형(Variant)이 어떤 상태에서 활성화되는지, 혹은 플랫폼별로 다르게 적용되어야 하는 특별한 동작 방식이나 상호작용 논리에 대한 설명을 텍스트 형태로 덧붙인다.
이 단계에서 디자이너는 '작업자'가 아닌 '감독자' 혹은 '기술 리더'로서 기능한다. 에이전트에게 목표를 정의하고 필요한 배경 지식을 주입함으로써, 인공지능이 단순한 시각적 분석을 넘어 디자인 시스템의 의도를 정확히 파악할 수 있도록 돕는 것이다. 이는 과거에 상세 사양을 하나하나 타이핑하던 방식에서 벗어나, 고수준의 전략적 정보를 제공하는 방식으로 업무의 질이 전환되었음을 의미한다.
2단계: 에이전트가 Figma 파일을 읽고 사양을 렌더링합니다.
맥락 정보를 수신한 인공지능 에이전트는 피그마 콘솔 MCP를 통해 실시간으로 피그마 파일에 접속한다. 에이전트는 구성 요소의 전체 트리 구조를 크롤링하며 하위 구성 요소 간의 관계, 디자인 토큰, 변수, 그리고 스타일 시스템을 정밀하게 추출한다. 이때 에이전트는 단순한 이미지 픽셀 분석을 넘어 데이터 구조를 읽어내기 때문에, 디자이너가 변형(Variant) 대신 변수(Variable)를 사용했는지 여부나 슬롯 기반의 복합 구성을 정확하게 식별해낸다.
Cursor IDE에서 에이전트 스킬 프롬프트가 표시되고, 에이전트가 MCP를 통해 구성 요소 데이터를 추출한 후 완성된 사양을 Figma에 직접 렌더링데이터 분석이 완료되면 에이전트는 사전에 정의된 라이브러리에서 적절한 문서 템플릿을 불러온다. 이후 분석된 데이터를 바탕으로 텍스트 필드를 채우고, 색상 주석을 달며, 복잡한 속성 테이블을 구축하고, 구성 요소의 각 부분을 가리키는 숫자 마커를 배치한다. 이 모든 과정은 피그마 파일 내부에서 직접 수행되며, 중간 단계의 외부 출력물 없이 최종 결과물이 캔버스 위에 즉각적으로 렌더링된다. 결과적으로 수일이 걸리던 문서화 작업은 에이전트의 자율적인 판단과 실행을 통해 단 몇 분 만에 완료된다.
내부적인 시스템의 작동 원리
uSpec이 우버와 같은 대규모 엔터프라이즈 환경에서 성공적으로 작동할 수 있는 비결은 정교하게 설계된 내부 기술 아키텍처에 있다. 이는 크게 전문 지식을 담당하는 스킬 계층과 실제 환경과 소통하는 연결 계층으로 구분된다.
Architecture overview에이전트 스킬 인코딩 도메인 지식
uSpec의 에이전트는 일반적인 범용 지능만을 사용하는 것이 아니라, 특정 도메인 지식이 주입된 전문화된 '스킬(Skill)' 파일을 기반으로 움직인다. 각 스킬 파일은 사양 작성에 필요한 유효성 검사 규칙, 구조화된 스키마, 그리고 참조 문서를 포함하고 있다. 예를 들어 접근성 사양을 작성하는 스킬은 스크린 리더가 요소를 인식하는 방식에 집중하고, 색상 주석 스킬은 디자인 토큰 값의 정확한 매핑에 가중치를 둔다.
이러한 방식은 결과물의 일관성을 보장한다. 개별 디자이너의 작성 습관에 따라 문서의 형식이 달라지는 것이 아니라, 중앙에서 관리되는 스키마와 템플릿에 의해 문서의 구조가 강제로 정의되기 때문이다. 에이전트는 인코딩된 지식을 바탕으로 피그마의 내부 모델링 패턴을 깨끗한 API 문서 형태로 번역하며, 이 과정에서 인간이 저지를 수 있는 논리적 오류나 누락을 사전에 방지한다.
Figma Console MCP는 에이전트를 Figma에 연결
인공지능 에이전트가 피그마라는 외부 도구와 상호작용하기 위해서는 표준화된 인터페이스가 필요하며, uSpec은 이를 위해 앤스로픽(Anthropic)이 제안한 모델 컨텍스트 프로토콜(MCP)을 사용한다. 특히 사우스레프트(Southleft)에서 개발한 오픈소스 프로젝트인 피그마 콘솔 MCP는 에이전트에게 피그마 프로젝트 전체에 대한 전례 없는 가시성을 제공한다.
공식 피그마 MCP가 특정 구성 요소의 코드 생성에 최적화되어 있다면, 콘솔 MCP는 전체 디자인 시스템을 가공되지 않은 JSON 데이터 형태로 노출하여 에이전트가 시스템 전반의 맥락을 이해할 수 있게 한다. 이는 에이전트가 단순한 레이어 정보뿐만 아니라 디자인 토큰의 전체 계층 구조, 오토 레이아웃 설정, 타이포그래피 시스템 등을 아우르는 종합적인 판단을 내릴 수 있게 만드는 원동력이 된다.
에이전트가 Figma에서 직접 렌더링
uSpec의 가장 차별화된 지점은 인공지능이 생성한 결과를 피그마 외부에서 보여주는 것이 아니라, 피그마 내부에 직접 물리적으로 구현한다는 점이다. 이는 피그마 데스크톱 앱과 로컬 웹소켓(WebSocket)을 통해 연결되는 '데스크톱 브리지(Desktop Bridge)' 기술 덕분에 가능하다. 에이전트는 피그마의 플러그인 API를 호출하여 실시간으로 노드를 생성, 수정, 배치할 수 있는 쓰기(Write) 권한을 행사한다.
로컬 환경에서의 연결은 보안 측면에서도 매우 중요하다. 모든 파이프라인이 사용자의 로컬 머신에서 실행되므로, 기업의 민감한 독점 디자인 데이터가 외부 클라우드 서버나 서드파티 API로 전송되지 않는다. 우버와 같이 규제 준수와 데이터 보안을 최우선으로 하는 기업에게 이러한 로컬 기반의 에이전틱 워크플로우는 인공지능 기술을 도입하기 위한 필수적인 전제 조건이다.
기업에게 이런 디자인 시스템 자동화가 중요한 이유
디자인 시스템 자동화는 단순한 업무 편의를 넘어 비즈니스 경쟁력과 직결되는 여러 가지 핵심 가치를 제공한다. 가장 먼저 언급될 수 있는 이점은 압도적인 생산성 향상이다. 우버의 사례에서 보듯 수주가 걸리던 작업을 수분으로 단축함으로써 제품 개발 주기를 획기적으로 줄일 수 있다. 이는 시장 변화에 기민하게 대응해야 하는 엔터프라이즈 환경에서 강력한 우위를 점하게 한다.
두 번째는 품질의 상향 평준화와 일관성 유지다. 사람이 수동으로 작성하는 문서는 작성자의 숙련도나 컨디션에 따라 품질의 편차가 발생할 수밖에 없다. 하지만 자동화된 에이전트는 사전에 정의된 규칙과 스키마를 엄격히 준수하므로, 수백 개의 구성 요소에 대해 동일한 수준의 상세함과 정확도를 갖춘 사양서를 보장한다. 이는 개발 단계에서 발생하는 모호함을 제거하여 불필요한 커뮤니케이션 비용을 줄이고 최종 제품의 구현 품질을 높인다.
마지막으로 디자이너의 역할 재정립을 통한 인적 자원의 효율적 활용이다. 사양 작성과 같은 단순 반복 작업은 디자이너들에게 큰 업무적 부담이자 창의성을 저해하는 요인이었다. 이를 인공지능 에이전트에게 위임함으로써 디자이너들은 사용자 경험의 본질적인 문제를 해결하고, 더 복잡한 시스템 아키텍처를 설계하는 가치 있는 업무에 집중할 수 있게 된다.
Figma Console MCP가 중요한 이유
피그마 콘솔 MCP는 디자인 시스템을 정적인 파일에서 동적인 '살아있는 데이터 API'로 전환시키는 기술적 변곡점이다. 이 도구는 단순히 데이터를 읽어오는 것을 넘어 인공지능이 피그마의 기능을 직접 제어할 수 있게 함으로써 디자인 도구의 패러다임을 바꾼다.
무엇보다 중요한 점은 디자인과 코드 사이의 진정한 동기화를 가능하게 한다는 것이다. 콘솔 MCP를 통해 에이전트는 디자인 토큰과 변수를 CSS, 테일윈드(Tailwind), JSON 등 다양한 개발 형식으로 즉시 변환할 수 있으며, 이 과정에서 디자인 시스템의 규칙을 완벽하게 준수한다. 또한 피그마의 엔터프라이즈 플랜이 아니더라도 플러그인 API를 통해 변수 관리를 가능하게 하는 등 기술적 장벽을 낮추어 더 많은 조직이 고도화된 시스템 관리를 누릴 수 있게 한다.
또한 실시간 디버깅과 모니터링 기능은 디자인 시스템 관리자에게 강력한 통찰력을 제공한다. 에이전트는 피그마 내부의 콘솔 로그를 추적하고 오류를 분석하며, 시스템 전반의 토큰 사용 현황을 감사(Audit)할 수 있다. 이러한 기능은 수천 개의 구성 요소를 관리하는 대규모 라이브러리에서 발생할 수 있는 잠재적인 결함을 사전에 식별하고 수정하는 데 결정적인 도움을 준다.
UXUI 문서 작업을 넘어
데이터 시스템 구축과 관리 역량을 갖추자
인공지능 에이전트가 사양 작성을 자동화하는 시대에 UXUI 디자이너에게 요구되는 핵심 역량은 시각적 결과물 제작에서 '데이터 시스템 설계'로 급격히 이동하고 있다. 이제 디자이너는 단순히 화면을 그리는 것을 넘어, 인공지능이 디자인 의도를 정확히 이해하고 추론할 수 있도록 기계 판독 가능한 맥락을 설계하는 '맥락 엔지니어링(Context Engineering)' 능력을 갖추어야 한다.
미래의 디자이너는 디자인 시스템을 하나의 소프트웨어 제품이자 데이터 아키텍처로 바라보아야 한다. 구성 요소 간의 관계를 논리적으로 정의하고, 디자인 토큰에 의미론적 메타데이터를 부여하며, 인공지능 에이전트가 자율적으로 작업을 수행할 수 있도록 명확한 가이드라인과 제약 조건을 설정하는 능력이 필수적이다. 이는 디자인의 영역이 시각 예술을 넘어 시스템 공학 및 데이터 과학과 융합되고 있음을 시사한다.
결국 디자이너는 인공지능 에이전트를 관리하고 지휘하는 '시스템 오케스트레이터'로 진화하게 될 것이다. 반복적인 생산 작업은 에이전트에게 맡기고, 인간 디자이너는 비즈니스 목표에 부합하는 전략적 시스템 설계, 사용자 심리에 기반한 복잡한 인터랙션 정의, 그리고 인공지능이 생성한 결과물에 대한 최종적인 가치 판단과 윤리적 검토를 책임지는 역할을 수행해야 한다. 이러한 역량 변화를 수용하고 디자인을 데이터 시스템으로 다루는 법을 익히는 디자이너만이 기술 혁신의 물결 속에서 새로운 디자인 시대를 주도할 수 있을 것이다.
AI를 활용하여 UX/UI 디자인을 공부하고 AI디자인 자격증도 취득하고 싶다면?
https://onoffmix.com/ch/aidesign
AI를 활용하는 UXUI 디자이너들과 함께 소통하며 성장하고 싶다면?
AI를 활용한 UX/UI 디자인을 책으로 공부하고 싶다면?
AI 시대에 나만의 AI스타트업/비즈니스 시스템을 만들고 싶다면?