디자인과 코드의 간극을 메우는 피그마의 AI 전략: 'Figma Specs'와 'Code Layers'의 의미

디자인과 코드 사이의 '번역'을 넘어

소프트웨어 개발 생태계에서 디자인과 구현 사이의 간극은 오랫동안 협업의 병목 지점으로 지목되어 왔습니다. 피그마(Figma)의 최고 디자인 책임자 로레다나 크리산(Loredana Crisan)은 현재 업계에서 과거보다 17배 많은 코드가 생산되고 있음에도 불구하고, 실제 제품 출시 속도는 1.3배 증가하는 데 그쳤다는 점을 지적합니다[1]. 이는 상당수의 코드가 제품 배포를 위한 것이 아니라, 제품의 형태를 탐색하고 설계하는 과정에서 생성되기 때문입니다. 피그마가 최근 인도에서 열린 Config 이벤트에서 발표한 일련의 기능들은 바로 이러한 '설계를 위한 코드'와 '실제 배포되는 제품' 사이의 거리를 좁히려는 시도로 해석됩니다.

에이전트의 가이드라인, 'Figma Specs'

AI 에이전트가 디자인 작업에 깊숙이 관여하게 되면서, 가장 큰 과제는 '예측 가능성'을 확보하는 것입니다. AI는 본질적으로 비결정론적(non-deterministic)인 특성을 지니기에, 브랜드의 디자인 언어를 일관되게 유지하는 것이 어렵습니다[1]. 이를 해결하기 위해 피그마는 마크다운 기반의 에디터인 'Figma Specs'를 도입했습니다[1].

Figma Specs는 단순히 텍스트를 기록하는 도구가 아닙니다. 이는 디자인 라이브러리, 코드 라이브러리, 그리고 브랜드 가이드라인을 중앙화하여 AI 에이전트가 참조할 수 있는 '진실의 원천(Single Source of Truth)' 역할을 수행합니다[1]. 사용자는 캔버스 내에서 직접 이 문서를 작성하거나 별도의 파일로 관리할 수 있으며, 캔버스 요소나 FigJam 다이어그램과도 연동됩니다. 결과적으로 AI 에이전트는 이 명세서를 바탕으로 브랜드 규칙을 준수하며 디자인을 생성하게 됩니다[1].

'Code Layers'와 Payload 통합이 갖는 실질적 의미

피그마는 또한 'Code Layers' 기능을 오픈 베타로 전환하며, 디자인 캔버스 위에서 직접 코드를 작성하고 이를 인터랙티브한 프로토타입으로 변환할 수 있게 했습니다[1]. 이는 과거 2025년 6월 비공개 베타로 시작된 기능으로, 이제 더 많은 사용자가 AI를 통해 디자인을 코드로 변환하거나 프로토타입의 일부를 즉각적으로 수정하는 경험을 할 수 있게 되었습니다[1].

이러한 흐름은 지난해 인수한 오픈소스 헤드리스 CMS인 Payload와의 통합으로 더욱 구체화됩니다[1][2]. 피그마는 'Figma Make' 제품에 Payload를 통합하여 동적 웹사이트 생성과 콘텐츠 관리를 직접 수행할 수 있는 환경을 구축하고 있습니다[1]. 이는 단순히 디자인 툴을 넘어, 아이디어 구상부터 배포까지의 전 과정을 아우르는 '디지털 제품 창작의 중앙 허브'가 되겠다는 피그마의 비전을 반영합니다[2].

불확실성과 기술적 한계

물론 이러한 기능들이 즉각적으로 완벽한 워크플로우를 보장하는 것은 아닙니다. AI 에이전트가 Figma Specs를 얼마나 정확하게 해석하고 반영할지는 여전히 실무자의 검증이 필요한 영역입니다. 또한, 피그마가 지향하는 '디자인-코드 통합' 모델이 복잡한 엔터프라이즈급 애플리케이션 개발 환경에서 기존의 개발자 도구들과 얼마나 매끄럽게 호환될지는 향후 관찰이 필요한 지점입니다. 특히 AI가 생성한 코드가 실제 운영 환경에서 요구되는 보안성이나 최적화 수준을 충족할 수 있을지에 대해서는 신중한 접근이 요구됩니다.

결국 피그마의 이번 행보는 AI가 단순히 디자인을 돕는 보조 도구를 넘어, 디자인 시스템의 규칙을 이해하고 이를 코드로 구현하는 '실행 주체'로 진화하고 있음을 보여줍니다. 디자인과 코드의 경계가 희미해지는 시대에, 피그마는 과연 디자인 시스템을 통해 AI의 창의성을 얼마나 효과적으로 통제하고 생산성으로 전환할 수 있을까요?

검증에 사용한 자료

[1] Figma announces new features to define how agents work on its platform | TechCrunch — TechCrunch · 원문
[2] Welcoming Payload to the Figma Team | Figma Blog — www.figma.com · 공식·1차 자료

링크된 자료는 사실 확인에 사용했으며, 분석과 해석의 책임은 본 사이트에 있습니다.