피그마, AI 에이전트에 캔버스 개방…클로드 코드로 직접 디자인 수정

지금까지 AI에게 화면 설계를 맡기면 늘 어딘가 어색한 결과물이 나왔습니다. 팀의 고유한 브랜드 색상이나 버튼 여백, 디자인 시스템의 세부 규칙을 AI가 전혀 알지 못했기 때문입니다.

피그마가 3월 24일 Figma MCP 서버 베타 버전을 공개하며 이 단절을 해소하고 나섰습니다. 이번 업데이트로 클로드 코드, 코덱스, 커서 같은 MCP 클라이언트가 피그마 캔버스에 직접 접근할 수 있게 됐습니다. 팀의 기존 컴포넌트와 변수를 그대로 활용해 디자인을 새로 만들거나 수정하는 작업이 가능해진 것입니다. 현재 베타 기간에는 무료로 제공되며, 추후 사용량 기반 유료 기능으로 전환될 예정입니다.

코드와 캔버스를 잇는 양방향 워크플로

핵심은 use_figma라는 신규 도구입니다. 기존에 제공되던 도구와의 조합을 통해 완벽한 양방향 루프를 완성했습니다.

이전의 generate_figma_design이 배포된 웹사이트의 HTML을 편집 가능한 피그마 레이어로 변환해 디자인을 코드에 맞추는 역할이었다면, 이번에 추가된 use_figma는 에이전트가 디자인 시스템을 토대로 캔버스에서 직접 작업하도록 돕습니다.

코덱스의 디자인 리드인 에드 베이즈는 오픈AI 내부에서도 피그마를 통해 제품 결정을 내리는데, 이제 코덱스가 피그마 안의 중요한 디자인 맥락을 직접 파악해 더 효율적으로 작업할 수 있게 됐다고 전했습니다.

마크다운 규칙으로 에이전트를 길들이는 스킬

에이전트가 캔버스에 들어와 규격을 망가뜨리지 않도록 통제하는 장치가 바로 스킬(Skills)입니다.

스킬은 복잡한 플러그인을 코딩할 필요 없이 마크다운 파일로 작성하는 지침서입니다. 핵심 기초 스킬인 /figma-use가 피그마의 기본 구조와 원리를 학습시키고, 팀은 여기에 맞춰 맞춤형 규칙을 정의할 수 있습니다.

공개와 함께 코드베이스나 JSON 계약에서 컴포넌트를 생성하고, 디자인 토큰을 동기화하며, 화면 낭독기 규격을 추출하는 등 실무자 중심의 9가지 스킬이 제공됩니다. 클로드 코드의 프로덕트 리드인 캣 우는 스킬 덕분에 클로드 코드가 팀의 의도와 판단 기준을 벗어나지 않고 캔버스 위에서 작업할 수 있다고 강조했습니다.

에이전트가 만든 화면을 스스로 캡처해 비교 검토하는 자체 교정 루프도 지원합니다. 단순 픽셀 수정이 아니라 오토 레이아웃과 컴포넌트, 변수라는 실제 뼈대를 기반으로 수정이 이뤄지는 점이 특징입니다.

왜 중요한가

피그마의 이번 선택은 매우 똑똑하며 위협적입니다.

개발자와 디자이너 입장에서는 양쪽의 싱크를 맞추기 위해 들이던 불필요한 노가다가 대폭 사라집니다. 클로드 코드를 쓰는 개발자는 터미널을 떠나지 않고도 디자인 시스템을 준수한 채 피그마 결과물을 업데이트할 수 있습니다.

업계 전반으로 봐도 피그마는 단순한 드로잉 툴을 넘어 'AI 에이전트의 UI 실행 환경'으로 진화하고 있습니다. 맥락 없이 겉모습만 그럴듯한 화면을 뽑아내는 AI 도구들과 달리, 기업이 이미 구축해 둔 디자인 시스템이라는 단단한 인프라를 무기로 삼았기 때문입니다.

물론 여러 에이전트가 협업 캔버스에 들어와 작업할 때 생길 버전 관리의 혼란이나, 베타 종료 후 도입될 사용량 기반 요금의 부담은 따져봐야 할 과제입니다. 그럼에도 코드와 캔버스 사이의 벽을 무너뜨렸다는 점에서 실무에 미칠 영향은 상당해 보입니다.