Figma에서 배포까지—AI 도구가 바꾼 것과 여전히 인간의 몫

Figma에서 배포까지—AI 도구가 바꾼 것과 여전히 인간의 몫

Figma MCP가 80% 시각 정확도를 달성해도 프로덕션 코드가 되지 못하는 이유—그리고 Codex vs Claude Code가 그 나머지 구간을 어떻게 채우는가.

Figma MCP Design-to-Code Codex Claude Code 디자인 시스템 AI 코딩 도구 프론트엔드 워크플로우
광고

"시각적으로 맞다"는 프로덕션 준비와 다르다

Figma MCP가 등장했을 때 디자인-개발 협업 문제가 드디어 해결될 것이라는 기대가 컸다. 단일 패스에서 80~95%의 시각 정확도. 초기 스캐폴딩 속도. 수동 설정 최소화. 숫자만 보면 혁신이 맞다. 그런데 dev.to에 올라온 현장 리포트는 냉정했다. "UI는 맞아 보였다. 하지만 출력물은 프로덕션 레디가 아니었다."

컴포넌트는 기존 디자인 시스템을 무시하고 처음부터 새로 생성됐고, CSS는 페이지 레벨에서 정의됐으며, 내부 아키텍처와 맞지 않았다. MCP는 디자인 시스템이 아니라 컴파일러다. 컴파일러는 '정의되지 않은 동작'을 고치지 않는다. 컨텍스트 없는 자동화는 결국 실패한다는 원칙이 여기서도 그대로 적용된다.

문제는 도구가 아니라 설계 패러다임이었다

진짜 문제는 더 깊은 곳에 있었다. 대부분의 팀이 Figma를 '시각적 가이드'로 취급한다는 사실이다. 현장 통계는 냉혹하다. 70~80%의 팀은 Figma를 시각 참고용으로 쓰고 개발자가 '알아서 해석'하도록 기대한다. 15~20%는 컴포넌트와 토큰은 있지만 "이번 한 번만"식 예외가 존재한다. 진정한 1:1 매핑을 실현하는 팀은 5~10%에 불과하다.

해당 리포트가 제시한 전환점은 질문 자체를 바꾸는 것이었다. "개발자가 어떻게 디자인에 맞춰야 하나?" 대신 "디자인이 어떻게 코드처럼 동작해야 하나?" 로의 전환. 이 단순한 시각 이동이 만든 변화는 실질적이다. 스페이싱은 토큰에서, 패딩은 파라미터로, 타이포그래피는 시스템 정의로. 디자인이 인간이 아닌 기계도 읽을 수 있는 언어가 되는 순간, AI 도구는 비로소 의도를 추론하는 대신 의도를 이해하기 시작한다.

Codex vs Claude Code: 파이프라인 후반부의 선택지

Figma에서 결정론적 설계가 갖춰졌다면, 다음 질문은 이것이다. 어떤 AI 코딩 에이전트가 그 설계를 코드로 가장 잘 번역하는가? 이 맥락에서 Claude Code 사용자를 위한 Codex 비교 가이드가 흥미롭게 읽힌다. 핵심은 "어느 쪽이 더 좋은가"가 아니라 "워크플로우의 어느 구간에 어느 도구가 맞는가"다.

저자는 약 반년간 Claude Code를 주력으로 쓰다가 GPT-5.4 시점부터 Codex를 개인 프로젝트의 메인 도구로 전환했다고 밝힌다. 모델 성능은 이제 비슷한 수준까지 올라왔고, 결정 변수는 비용·한도·툴 UX로 이동했다는 것이다. Codex App은 Claude Code의 CLI 중심 경험과 달리 설정 UI가 더 정돈되어 있고, 권한 모드(Approval/Plan/Reviewer/Sandbox)가 세분화되어 있어 에이전트 자율성을 더 세밀하게 제어할 수 있다.

특히 주목할 만한 점은 Sandbox와 Approval의 분리 구조다. Claude Code의 permission mode가 하나의 축으로 작동하는 반면, Codex는 '무엇을 할 수 있나(Sandbox)'와 '언제 물어보나(Approval)'를 독립적으로 설정한다. 디자인 시스템 컴포넌트를 자동 생성하면서도 외부 네트워크 접근이나 워크스페이스 외부 편집은 차단하고 싶을 때—즉, Figma 토큰 기반 설계가 코드로 번역되는 구간에서—이 세분화된 제어가 유의미하게 작동할 수 있다.

AI 도구가 아직 대체하지 못하는 것

이 두 흐름을 합치면 한 가지 결론이 선명해진다. AI 도구는 실행 속도를 극적으로 높이지만, 설계 결정은 여전히 인간의 몫이라는 것이다. Figma MCP가 시각 정확도를 올리는 동안 컴포넌트 계층 구조, 토큰 매핑 규칙, 명명 일관성은 팀이 사전에 구축해놓은 결정론적 시스템에 의존한다. Codex나 Claude Code가 코드를 빠르게 생성하는 동안, 그 코드가 프로덕션에서 살아남을 수 있는지는 아키텍처 판단과 검증 루프를 설계한 사람에게 달려 있다.

애플이 AI 코딩 앱을 앱스토어에서 반복적으로 차단하고 있다는 소식—Replit의 아이폰 앱 업데이트 차단, Anything의 반복 삭제—은 이 맥락에서 또 다른 층위를 추가한다. AI가 실시간으로 코드를 생성하고 실행하는 구조 자체가 기존 플랫폼 규칙과 충돌한다. "코드 다운로드 금지" 조항이 AI 생성 코드 실행을 막는 아이러니. 배포 파이프라인의 마지막 관문은 AI 도구가 아니라 플랫폼 거버넌스가 쥐고 있는 셈이다.

전망: 자동화는 깊어지되, 설계 책임은 앞당겨진다

앞으로 디자인-개발 워크플로우는 더 자동화될 것이다. 하지만 자동화가 깊어질수록 역설적으로 설계 결정의 품질이 더 중요해진다. 컴파일러가 강력할수록 잘못된 스펙의 파급이 더 빠르고 넓어지는 것처럼.

지금 팀이 해야 할 일은 더 좋은 AI 도구를 찾는 것보다, Figma를 코드처럼 다루는 결정론적 설계 시스템을 먼저 구축하는 것이다. 그 위에서 MCP든 Codex든 Claude Code든 의미 있게 작동한다. 프로토타이핑 속도는 도구가 만들지만, 프로덕션 신뢰성은 시스템이 만든다. 그 시스템을 설계하는 것—그것이 지금 프론트엔드 개발자에게 남은, 그리고 가장 가치 있는 인간의 몫이다.

출처

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