에이전트가 디자인-코드 루프를 닫는다: Figma MCP부터 Claude Auto Mode까지

에이전트가 디자인-코드 루프를 닫는다: Figma MCP부터 Claude Auto Mode까지

Skills로 디자인 시스템을 에이전트 언어로 변환하고, Auto Mode로 승인 루프를 지능적으로 해소하는—두 혁신이 맞닿는 지점에서 개발 워크플로우의 구조가 바뀌고 있다.

Figma MCP use_figma Claude Code Auto Mode Skills 디자인 시스템 에이전트 워크플로우 프론트엔드 자동화
광고

루프가 닫히기 시작했다

디자인에서 코드로 이어지는 워크플로우에는 오랫동안 끊어진 고리가 있었다. AI가 UI 초안을 뚝딱 만들어줘도, 그 결과물이 팀의 디자인 시스템과 어긋나면 결국 사람이 다시 정리해야 했다. 반대로 Claude Code 같은 에이전트가 코드를 써줘도, 개발자는 파일 수정마다 승인 버튼을 눌러야 했다. 2025년 상반기, 이 두 가지 마찰 지점이 동시에 공략받고 있다. Figma의 use_figma 베타와 Anthropic의 Claude Code Auto Mode가 그 주인공이다.

Figma MCP: 디자인 시스템이 에이전트의 실행 문법이 된다

뉴스탭 보도에 따르면 Figma는 MCP(Model Context Protocol) 서버를 통해 use_figma 도구를 베타 공개했다. 핵심은 단순히 AI가 캔버스를 건드릴 수 있게 됐다는 게 아니다. 에이전트가 팀의 디자인 시스템 컨텍스트를 이해한 상태에서 작업한다는 것이다.

컴포넌트, 변수, 토큰은 물론 명명 규칙, 오토 레이아웃 구조, 라이브러리 구성 방식까지—그동안 디자이너 머릿속과 Figma 파일에만 암묵적으로 존재하던 규칙들이 이제 에이전트의 실행 맥락으로 주입된다. Claude Code나 OpenAI Codex가 생성한 Figma 에셋이 팀의 가이드라인을 벗어나 있어 수동으로 수정하는 일이 줄어드는 구조다.

Skills: 워크플로우 자체를 코드처럼 버전 관리한다

use_figma와 함께 등장한 Skills가 더 주목할 만하다. Skills는 에이전트가 Figma 캔버스에서 어떤 순서와 규칙으로 작업할지를 정의하는 마크다운 기반 지침 세트다. 플러그인 개발이나 별도 코딩 없이 작성할 수 있고, Git으로 팀 전체가 공유할 수 있다.

여기서 Claude Code 심화 가이드(velog)와 연결되는 중요한 인사이트가 있다. SKILLS.md가 CLAUDE.md와 다른 이유는 로딩 전략에 있다. CLAUDE.md는 세션마다 무조건 로딩돼 토큰을 잡아먹지만, Skills는 필요할 때만 온디맨드로 불러온다. 마치 코드의 LazyLoading처럼—에이전트의 컨텍스트 창을 효율적으로 관리하는 아키텍처 결정이다. Figma가 제공하는 예시 Skills만 봐도 범위가 넓다: 신규 컴포넌트를 생성하는 /figma-generate-library, 접근성 스크린리더 사양을 만드는 /create-voice, 코드와 Figma 변수 간 토큰 드리프트를 감지하는 /sync-figma-token, 병렬 워크플로우를 실행하는 /multi-agent까지. 디자인 시스템 운영의 반복 작업들이 에이전트에게 위임될 레시피 목록이 갖춰지고 있다.

Auto Mode: 승인 피로 없이 에이전트 자율성을 확보하는 법

AI 타임즈 보도에 따르면 Anthropic은 Claude Code에 Auto Mode를 도입했다. 기존의 딜레마는 명확했다. 매 작업마다 승인을 받는 보수적 모드는 안전하지만 느리고, --dangerously-skip-permissions 옵션은 빠르지만 위험하다. Auto Mode는 그 사이에서 AI 분류기가 각 작업의 위험도를 실시간으로 평가하는 세 번째 경로를 제시한다.

대량 파일 삭제, 민감 데이터 유출, 악성 코드 실행은 사전 차단. 안전하다고 판단된 작업은 자동 실행. 반복적으로 차단되는 경우에만 사람에게 최종 승인을 요청하는 구조다. 핵심은 개입 피로(Intervention Fatigue)를 줄이면서 통제권을 잃지 않는 것이다. 현재 Claude Sonnet 4.6과 Opus 4.6에서 작동하며 CLI에서 claude --enable-auto-mode로 활성화할 수 있다.

단, Anthropic 스스로도 완전한 안전을 보장하지 않는다고 명시했다. 맥락을 충분히 파악하지 못해 위험 작업을 허용하거나 정상 작업을 막는 오탐이 생길 수 있고, 추가 분류 과정으로 토큰 비용과 지연 시간이 소폭 증가한다. 샌드박스 환경에서 사용하라는 권고는 여전히 유효하다.

두 혁신이 맞닿는 지점: 설계 책임이 이동한다

use_figma + Skills + Auto Mode를 하나의 워크플로우로 이어보면 구조가 보인다. 에이전트가 Figma 디자인 시스템을 읽고(use_figma), Skills에 정의된 절차에 따라 컴포넌트를 생성하거나 토큰을 동기화하고, 코드로 구현하는 단계에서는 Auto Mode가 반복적인 승인 루프를 대신 처리한다. 디자인에서 코드까지 사람의 개입 없이 흐를 수 있는 레일이 깔리고 있는 셈이다.

여기서 프론트엔드 개발자가 주목해야 할 시사점이 있다. 에이전트에게 맡길 수 있는 작업의 범위가 넓어질수록, 설계 결정의 무게는 오히려 커진다. Skills를 어떻게 정의하느냐, Auto Mode의 위험 임계치를 조직 컨텍스트에 맞게 어떻게 튜닝하느냐—이 구조 설계가 팀의 생산성과 안전성을 동시에 결정한다. 도구를 쓰는 사람이 아니라 도구가 작동하는 규칙을 만드는 사람이 되어야 한다는 것이다.

전망: 루프가 닫히면 병목이 이동한다

Figma CPO 유키 야마시타는 "초기 디자인 구상부터 디자인 시스템 업데이트까지 에이전트 활용 범위를 한층 넓힐 수 있게 됐다"고 말했다. Claude Code 프로덕트 책임자 캣 우는 "Skills는 Claude Code가 디자인 캔버스 안에서 작업하는 방식을 이해하도록 도와, 팀의 의도와 판단을 충실히 반영한 개발을 가능하게 한다"고 평가했다.

두 발표가 같은 시점에 나온 것은 우연이 아니다. 에이전트가 디자인-코드 루프를 닫아가면서 다음 병목은 더 선명하게 드러날 것이다: 에이전트가 이해할 수 있는 수준으로 디자인 시스템이 정비되어 있는가, 그리고 팀이 에이전트의 자율성 반경을 사전에 명확하게 설계해두었는가. 도구는 빠르게 진화하고 있다. 준비된 팀과 그렇지 않은 팀의 격차도 같은 속도로 벌어지고 있다.

출처

더 많은 AI 트렌드를 Seedora 앱에서 확인하세요