피그마(Figma, UI/UX 디자인 협업 도구)가 캔버스 위에서 직접 동작하며 디자인 시스템을 제어하는 전용 '디자인 에이전트'를 공개했다. 이번 에이전트는 컴포넌트, 토큰, 표준 등 디자인 시스템의 컨텍스트를 깊이 이해하도록 파인튜닝되어, 단순한 이미지 생성이 아니라 실제 Figma 파일 편집에 최적화된 결과물을 만들어낸다.

특히 디자이너가 도구를 전환할 필요 없이 캔버스 어디서나 프롬프트를 입력하고, AI가 작업하는 동안 사용자가 동시에 편집할 수 있는 실시간 협업 환경을 제공하는 것이 핵심이다. 이는 AI 생성물과 수동 조작 사이의 단절을 없애 '속도'와 '정밀성'을 동시에 확보하려는 시도로 풀이된다. 해당 기능은 향후 몇 주에 걸쳐 Professional, Organization, Enterprise 플랜의 Full seat 사용자를 대상으로 베타 출시될 예정이며, 베타 기간에는 별도의 크레딧 소모 없이 이용 가능하다.

병렬 프롬프트와 실시간 편집으로 구현하는 '탐색의 확장'

디자이너가 AI와 협업할 때 겪던 가장 큰 병목은 도구를 옮겨 다니며 프롬프트를 입력하고 결과물을 다시 캔버스로 가져오는 과정이었다. 이번 업데이트의 핵심은 AI 에이전트를 캔버스 내부에 상주시킨 뒤 사용자와 동시에 편집할 수 있게 만든 점이다. 특히 병렬 프롬프트(parallel prompt, 하나의 요청으로 여러 개의 시안을 동시에 생성하는 기능)를 통해 다수의 아이디어를 한 화면에서 즉시 비교할 수 있다. 쉽게 말하면 AI가 옆에서 여러 장의 스케치를 동시에 그려내고, 디자이너는 그중 마음에 드는 것을 골라 즉시 수정하는 방식이다. 에이전트가 레이어를 생성하는 동안 사용자가 동시에 다른 부분을 편집할 수 있어 AI의 생성 속도와 인간의 정밀한 제어권을 모두 확보한 멀티플레이어 구조를 완성했다.

디자인 탐색의 과정은 넓게 가기와 깊게 가기라는 두 가지 축으로 작동한다. 넓게 가기(Go wide)는 동일한 문제에 대해 서로 다른 스타일적 접근이나 정보 아키텍처(IA, 정보의 구조와 설계)를 빠르게 생성하는 단계다. 예를 들어 비즈니스 목표에 따라 최적화된 여러 개의 체크아웃 플로우를 동시에 만들어 비교하는 식이다. 비유하자면 정답을 확정하기 전 최대한 많은 가능성을 테이블 위에 펼쳐놓고 비교하는 브레인스토밍과 같다. 반면 깊게 가기(Go deep)는 선택한 하나의 방향을 정밀하게 다듬는 과정이다. 이때 @멘션을 사용해 특정 토큰(token, 색상이나 간격 같은 디자인 시스템의 최소 단위 값)이나 변수, 컴포넌트를 직접 지정하면 AI가 시스템의 정합성을 유지하며 세밀하게 제어한다. 이는 디자인 시스템의 복잡한 규칙을 일일이 기억하지 않고도 단축키처럼 빠르게 적용하는 효과를 준다.

단순 반복 작업인 잡무 자동화는 AI가 캔버스의 컨텍스트를 읽을 수 있기에 가능하다. 변수 이름을 일괄적으로 변경하거나 여러 화면에 흩어진 동일 컴포넌트를 한꺼번에 교체하는 작업이 대표적이다. 또한 텍스트 채우기용 가짜 문구인 lorem ipsum을 실제 콘텐츠로 빠르게 교체하거나, 수동으로 대비를 조정하지 않고도 전체 화면을 다크모드로 전환할 수 있다. 디자인 시스템 운영자라면 라이브러리 전반의 설명이나 태그를 일괄 업데이트하고 네이밍 컨벤션(naming convention, 명명 규칙)을 표준화하는 작업에 활용할 수 있다. AI가 단순 노동을 처리하는 동안 디자이너는 더 본질적인 설계와 사용자 경험의 의사결정에 집중하는 구조로 작업 흐름이 바뀐다.

이러한 사용자 경험의 혁신은 단순히 기능의 추가가 아니라, AI가 작업 환경에 개입하는 구조적 설계의 변화에서 비롯된다.

캔버스 내장 에이전트와 MCP 서버의 명확한 역할 분담

이번 업데이트에서 가장 눈에 띄는 변화는 AI가 작업에 개입하는 방식의 이원화입니다. 피그마(Figma) 캔버스 내부에 상주하는 전용 에이전트와 외부 데이터를 연결하는 MCP(Model Context Protocol) 서버가 각자의 영역에서 협업하는 구조입니다. 쉽게 말하면, 캔버스 에이전트는 디자인 시스템이라는 설계도를 완벽히 숙지한 채 캔버스 위에서 손을 보태는 현장 작업자이고, MCP 서버는 코드와 디자인이라는 서로 다른 언어를 번역해 전달하는 가교 역할을 수행합니다.

캔버스 에이전트는 피그마 파일의 구조와 디자인 시스템의 규칙을 직접 이해합니다. 별도의 설정이나 창 전환 없이도 캔버스 안에서 바로 명령을 내릴 수 있습니다. 사용자는 에이전트가 실시간으로 레이어를 생성하거나 수정하는 동안에도 직접 디자인을 만지며 통제권을 유지할 수 있습니다. 이는 기존의 서드파티 AI 도구들이 캔버스 외부에서 결과물만 툭 던져주던 방식과는 근본적으로 다릅니다.

반면 MCP 서버는 코드와 디자인 사이의 물류 센터와 같습니다. 코드에서 디자인으로 데이터를 가져오는 풀(pull) 방식이나, 디자인을 다시 코드로 보내는 푸시(push) 워크플로우를 전담합니다. 특히 피그마 메이크(Figma Make)와 연계될 때 이 구조는 더욱 강력해집니다. 디자인 레이어를 생성해 의도를 명확히 한 뒤, 이를 메이크로 보내 코드 레이어로 변환하고 다시 피그마에 임베드하는 순환 구조를 완성합니다. 마치 레고 블록을 설계도에 맞춰 조립하고, 다시 이를 디지털 도면으로 옮겨 검증하는 과정과 비슷합니다.

이러한 체계는 피드백을 처리하는 방식에서도 차이를 보입니다. 캔버스 에이전트는 파일 내부에 쌓인 코멘트 스레드를 실시간으로 읽어 들입니다. 단순히 내용을 요약하는 것을 넘어, 매출 지표를 중시하는 VP(부사장)와 같은 특정 이해관계자의 관점에서 디자인을 비판적으로 검토하게 할 수도 있습니다. 이는 외부 도구가 파일의 맥락을 파악하기 위해 긴 시간을 들여 데이터를 동기화해야 했던 과거의 비효율을 완전히 제거한 것입니다.

도입 전 체크해야 할 실무 활용 가이드

아이디어 확장 단계와 정밀 구현 단계를 전략적으로 구분해 도구를 활용해야 한다. 초기 기획처럼 정답이 없는 상태에서는 '넓게 가기' 전략을 채택해 병렬 프롬프트로 최대한 많은 시안을 펼쳐놓고 비교함으로써 사고의 경직성을 방지하는 것이 효율적이다. 반면 이미 확정된 디자인 시스템의 규칙을 준수해야 하는 고도화 단계라면, @멘션을 통해 AI의 임의 판단을 제한하고 정합성을 높이는 '깊은 접근' 방식을 통해 설계의 완성도를 높여야 한다.

작업의 성격이 캔버스 내부의 효율화인지 외부 시스템과의 연동인지에 따라 워크플로우를 달리 설계해야 한다. 레이어 정리나 단순 반복 작업 같은 내부 최적화는 캔버스 에이전트와 실시간으로 호흡하며 즉석에서 수정하는 방식이 유리하다. 하지만 디자인 결과물을 실제 코드로 변환하거나 외부 데이터를 동기화해야 하는 협업 단계라면, MCP 서버 기반의 파이프라인을 구축해 데이터 흐름의 정확성을 관리하는 것이 필수적이다. 캔버스 에이전트가 실행력을 담당한다면 MCP 서버는 시스템 간의 연결성을 담당한다고 이해하면 된다.

이해관계자의 다양한 피드백을 조율해야 하는 복잡한 프로젝트일수록 AI의 컨텍스트 읽기 기능을 의사결정 도구로 활용해야 한다. 단순히 코멘트를 요약하는 수준을 넘어, 특정 직책이나 관점을 부여해 디자인을 검토하게 함으로써 커뮤니케이션 비용과 의사결정의 병목을 줄일 수 있다. 다만 이는 파일 내에 충분한 맥락 데이터가 쌓여 있을 때 유효하므로, 평소 코멘트 기록을 체계적으로 남기는 협업 문화가 전제되어야 한다. 이제 디자이너는 픽셀을 옮기는 노동자에서 AI라는 숙련된 조수를 지휘하는 아트 디렉터로 진화한다.