AI 코딩 어시스턴트가 Figma 디자인을 코드로 바꾸는 일은 이제 꽤 잘 된다. 문제는 '꽤 잘'의 범위다. 레이아웃은 비슷하게 나오는데 아이콘이 다르고, 간격이 미묘하게 틀리고, 이미지 에셋 대신 플레이스홀더가 들어와 있다. 디자인을 충실하게 재현하는 것과 비슷하게 흉내 내는 것 사이의 거리가, 실제로 써보기 전에는 잘 보이지 않는다.
이 간극을 좁히려는 시도 중 하나가 최근 dev.to에 공개된 오픈소스 프로젝트 Figma MCP Console이다. 핵심 아이디어는 단순하다. Figma REST API 대신, Figma Desktop과 AI 클라이언트 사이에 로컬 WebSocket 브릿지를 놓는다. API 토큰도 없고, 레이트 리밋도 없고, 현재 열려 있는 파일과 직접 통신한다. Claude CLI, Cursor, VS Code GitHub Copilot, Windsurf 등 MCP 호환 클라이언트라면 모두 붙을 수 있다. npx -y figma-mcp-console 한 줄과 Figma 개발 플러그인 등록이 전부다.
이 구조가 흥미로운 건 단순한 편의성 때문이 아니다. AI가 Figma에서 직접 에셋을 내보내고, 코드를 생성한 뒤 스크린샷을 찍어 원본 프레임과 비교하는 자기 검증 루프를 돌 수 있다는 점이다. 방향도 뒤집을 수 있다. "히어로 섹션, 프라이싱 카드, 푸터가 있는 SaaS 랜딩 페이지를 디자인해줘"라고 요청하면, AI가 Auto Layout을 써서 Figma 안에 직접 그리고, 결과를 스크린샷으로 확인하면서 시각적 오류를 스스로 수정한다. 디자인 토큰 동기화와 레이어 일괄 편집도 지원한다. 여러 Figma 파일을 동시에 열어두고 "디자인 시스템 파일의 primary color를 랜딩 페이지 파일의 CTA 버튼에 적용해줘"처럼 파일을 넘나드는 작업도 가능하다.
그런데 여기서 한 가지 질문을 던져야 한다. AI가 Figma를 잘 조작하게 됐을 때, 그 결과물을 받아 쓰는 사람에게 정보가 제대로 전달되고 있는가? 같은 날 dev.to에 올라온 다른 글이 이 질문을 다른 각도에서 날카롭게 건드린다.
openpouch라는 배포 도구를 만든 개발자의 경험담이다. 첫 실제 사용자가 AI 코딩 에이전트를 통해 앱을 배포했고, 에이전트는 "앱이 배포됐습니다! 🎉 링크는 여기입니다"라고 요약해줬다. 72시간 뒤 앱이 사라졌다. 무료 플랜의 익명 프리뷰는 72시간 후 만료된다는 사실이 CLI 결과, JSON, 문서, llms.txt 어디에나 적혀 있었다. 에이전트는 분명히 읽었다. 그냥 전달하지 않았다. 사용자 표현을 빌리면, "AI가 유효 기간이 얼마인지, 어떻게 유지할 수 있는지를 직접 뱉어줘야 한다. 그렇지 않으면 내가 어떻게 알겠는가."
이 문제를 해결한 방식이 흥미롭다. API 응답에 tellYourUser라는 최상위 필드를 추가했다. 이름 자체가 지시어다. notice도 meta.expiry도 아닌, tellYourUser. 에이전트가 이 필드로 무엇을 해야 하는지 키 이름이 직접 답해준다. 값은 날짜 계산 없이 그대로 붙여넣을 수 있는 완성된 문장이다. "2026년 7월 19일에 만료됩니다. 유지하려면 계정에 저장하거나 재배포하세요. 아무것도 안 해도 됩니다—그냥 만료될 뿐이에요." 기계가 읽는 ISO 타임스탬프(deployment.expiresAt)와 사람이 읽는 문장을 같은 응답 안에 함께 담아, 에이전트가 파싱과 설명 사이에서 선택하지 않아도 되게 만든 것이다.
이 두 사례가 함께 가리키는 지점은 하나다. AI가 도구를 소비하는 주체가 됐을 때, 그 도구를 설계하는 방식이 달라져야 한다는 것. 인간이 CLI를 쓸 때는 출력 자체가 UI다. 에이전트가 CLI를 쓸 때는 출력이 요약의 원재료가 된다. 에이전트는 압축한다. 중요해 보이는 것(URL)은 남기고, 부가 설명처럼 보이는 것(만료 조건)은 잘라낸다. 이 릴레이 갭(relay gap)은 문서를 더 잘 써서 해결되지 않는다. 에이전트는 이미 문서를 읽었다. 응답 구조 자체를 바꿔야 한다.
Figma MCP Console도 같은 맥락에서 읽힌다. 자기 검증 루프가 없는 도구들은 레이아웃이 비슷해 보이는 결과물을 내놓고 끝낸다. AI가 직접 스크린샷을 찍어 원본과 비교하는 구조가 있어야, '비슷함'이 아닌 '일치'에 가까워진다. 도구가 AI에게 올바른 피드백 경로를 설계해주지 않으면, AI는 틀린 것을 맞다고 요약해버린다.
프론트엔드 개발자 입장에서 이 흐름은 구체적인 작업 의제를 바꾼다. AI가 Figma를 직접 조작하게 됐을 때, 설계해야 할 것은 세 가지다. 첫째, 에셋 충실도—AI가 실제 에셋을 내보내는지, 아니면 비슷해 보이는 무언가를 생성하는지 구분해야 한다. 둘째, 자기 검증 경로—AI가 결과물을 스스로 확인할 수 있는 피드백 루프가 있는가. 셋째, 릴레이 설계—AI가 생성한 결과가 사람에게 전달될 때 무엇이 살아남아야 하는가, 그것을 응답 스키마 수준에서 보장하고 있는가.
디자인-코드 갭을 AI로 좁히는 도구들은 빠르게 성숙하고 있다. 하지만 도구가 빨라질수록, 그 도구가 AI 에이전트를 위해 설계되어 있는지—아니면 그냥 사람이 쓰던 것을 AI에게 노출한 것인지—를 구분하는 판단이 개발자에게 더 선명하게 요구된다. tellYourUser 같은 필드 하나가 사용자 경험을 바꿨다는 사실은, 그 판단이 얼마나 작은 디테일에서 갈리는지를 보여준다.