디자인시스템이 AI를 만났을 때 2 - 바이브 디자인
디자인시스템으로 Figma에 직접 그려주는 MCP
1편에서는 개발자들이 MCP(Model Context Protocol)를 통해 마크업 작업의 70~80%를 자동화한 이야기를 들려드렸어요. 이번에는 그 과정에서 마주한 새로운 고민과 해결책을 나눠보려고 해요.
개발자들의 작업 변화가 궁금하다면 : https://brunch.co.kr/@8a0100de7ca0488/13
AI를 도입했는데, 디자이너는 왜 더 바빠졌을까?
Stack MCP를 도입하고 나서 개발 속도는 정말 빨라졌어요. "이 화면 구현해줘"라고 말하면 디자인 시스템 기반으로 코드가 만들어지고, 실제 구현까지 빠르게 이어졌거든요.
그런데 예상 못 한 문제가 생겼어요. 개발이 빨라진 만큼 다음 태스크가 쉴 새 없이 쌓여갔고, 디자이너들은 오히려 깊게 고민할 여유를 잃어가고 있었어요.
디자인팀 주간 회고에서도 이런 목소리가 나왔어요.
"디자인을 충분히 고민할 시간이 없어요"
"디자인 단계가 병목이 되고 있어요"
디자이너도 Stack MCP로 디자인 시스템 기반의 코드 프로토타입을 만들 수 있었지만, 디자인 프로세스를 완전히 대체하기엔 한계가 있었어요.
디자인은 한 번에 정답을 찾기보다는, A안/B안/C안을 나란히 놓고 비교하며 간격과 위계, 시각적 밸런스를 조정하는 과정을 통해 더 좋은 솔루션을 만들 수 있어요. 코드 프로토타입은 빠르게 결과물을 확인하기엔 좋지만, 여러 레이아웃을 이리저리 바꿔가며 비교하기엔 너무 무거웠어요.
아직 디자이너가 가장 창의적이고 효율적으로 일하기 위한 공간은 피그마라고 생각했고, 피그마 안에서 AI를 쓸 수 있는 방법을 찾기 시작했어요.
그렇게 만든 것이 Stack Canvas예요.
Stack Canvas를 소개합니다
팀스파르타의 토큰, 타이포그래피, 컴포넌트 규칙까지 학습한 AI가 Figma 캔버스 위에 바로 라이브러리 인스턴스로 배치해주는 도구예요.
다른 AI 디자인 도구들과 가장 다른 점은, 단순히 비슷하게 그려주는 게 아니라 실제 Stack 디자인 시스템 라이브러리의 컴포넌트를 직접 꺼내 쓴다는 거예요. 대표적인 기능 2가지를 소개할게요.
실제로 Stack Canvas 를 사용해서 만든 화면입니다.① 말로 설명하면, Figma에 그려줘요
"팀스파르타 스타일로 비행기 예약 화면 디자인해줘"라고 요청했어요. Stack의 라이브러리 정보를 이미 학습하고 있기 때문에, 별도 수정 없이 디자인 시스템 컴포넌트로 바로 UI를 만들어요. 모바일, PC 각각 한 벌을 작업하는 데 대략 4분 정도 소요돼요.
처음 기능을 설계할 때, 빈 화면 앞에서 고민하는 대신 초안부터 빠르게 만들어서 "이 방향이 맞나?"를 논의할 수 있어요. 초안이 생기면 기준이 생기고, 기준이 생기면 피드백이 빨라지거든요.
또 팀스파르타에서는 Stack Canvas를 워크플로우에 맞게 정의해둔 Claude Skill과 함께 사용하고 있어요. 예를 들어 stack-figma-designer 스킬은 "화면의 목적"만 입력하면 사용자 예상 행동부터 정보 위계, 비주얼 디자인까지 자동으로 설계해요.
② 프로토타입을 Stack 컴포넌트로 변환해줘요
코드로 직접 프로토타입을 만든 경우, 이미지나 링크를 붙여넣고 "이걸 Stack 컴포넌트로 바꿔줘"라고 하면, 같은 레이아웃과 정보 구조를 유지한 채 Stack 컴포넌트로 다시 구성해줘요. 프로토타입 이후에도 피그마에서 추가 작업이 필요한 상황을 고려했어요.
어떻게 동작하는 건가요?
Stack Canvas는 MCP 서버와 Figma 플러그인, 크게 2가지로 구성돼요.
MCP 서버는 피그마 라이브러리의 컬러, 타이포, 컴포넌트 variant 정보를 미리 보유하고 있어요. AI가 "Button 만들어줘"라고 하면, 어떤 ComponentSet Key를 쓰고, 어떤 토큰을 적용하고, 어떤 타이포그래피를 쓸지 판단하는 역할이에요.
Figma 플러그인은 MCP에서 받은 명령을 Figma Plugin API로 실행해서, 실제로 컴포넌트를 놓고 색을 칠하고 레이아웃을 잡아요.
팀 내에서 나온 아이디어를 바탕으로, 디자이너가 단 4일 만에 직접 구현했어요.
앞으로의 계획: 그리는 도구를 넘어, 함께 고민하는 파트너로
앞으로는 AI가 단순히 결과물을 만드는 것을 넘어서, 디자이너의 판단 과정까지 함께하는 방향으로 발전시키고 싶어요.
예를 들어 "이 화면은 이런 방향으로도 설계할 수 있어요"라고 여러 가능성을 먼저 제안하거나, 카피가 상황에 맞는지, 플로우에서 빠진 케이스는 없는지까지 함께 검토해주는 식으로요.
그리고 또 하나 중요한 목표는, 단순히 디자인 시스템을 사용하는 것을 넘어서 더 팀스파르타답게 사용하는 것이에요. 팀스파르타의 주요 타겟을 이해하고, 간격과 정보 위계, 말투 같은 기준까지 더 높은 완성도를 낼 수 있도록 학습시키려고 해요.
팀스파르타 디자인팀은 디자이너가, 그리고 한 조직이 어떤 방식으로 AI를 다루는 것이 좋을지 깊이 고민하고 다양한 시도를 하고 있어요. AI와 함께 제품의 문법을 새로 써나가는 팀스파르타의 여정을 지켜봐 주세요.
FAQ
Q. 1편에서 소개한 Stack MCP와 뭐가 다른가요?
공통점은 두 MCP 모두 Stack 디자인 시스템을 사용해서 구현한다는 것이에요. 1편에서 소개한 Stack MCP는 결과물이 코드로 나와요. 이번 편에서 소개한 Stack Canvas MCP는 Figma에 결과물을 만들어요.
Q. Figma MCP랑 뭐가 다른가요?
2026년 3월 24일에 업데이트된 Figma MCP도 라이브러리 컴포넌트를 꺼내 쓸 수 있어요. 하지만 매번 "이 컴포넌트 어디 있지?" 하고 찾는 과정부터 시작하기 때문에 더 오래 걸려요. Stack Canvas는 팀스파르타 디자인 시스템 규칙과 라이브러리 정보를 이미 알고 있어서, 더 빠르게 원하는 결과물을 만들 수 있어요.
by 조정한, 프로덕트 디자이너