AI 요약
최근 Claude Design을 경험하며 분석한 결과, 제품 디자인의 중심축이 Figma와 같은 디자인 도구에서 다시 코드(Code)로 이동하고 있다는 징후가 포착되었습니다. Figma는 컴포넌트, 스타일, 변수 등 복잡한 시스템을 도입해 엔지니어링 조직 내에서 입지를 다졌으나, 이는 오히려 디자인 시스템을 관리하기 위한 별도의 전문 역할이 필요할 만큼 비대해진 '괴물'이 되었습니다. 특히 Figma의 폐쇄적이고 문서화되지 않은 포맷은 LLM(대규모 언어 모델) 학습 과정에서 제외되는 결과를 초래했습니다. 반면 AI 에이전트는 풍부한 코드 데이터를 학습했기에 코드를 더 잘 이해하며, 이에 따라 디자인의 최종 결과물이자 진실의 원천인 코드로 작업 방식이 회귀하고 있습니다. 결국 복잡한 Figma 시스템은 실물(도자기)을 만들기 위해 그리는 수채화 같은 '손실이 발생하는 근사치'로 전락할 가능성이 높습니다.
핵심 인사이트
- 디자인 시스템의 과잉: Figma의 자체 디자인 시스템 파일에는 946개의 색상 변수가 존재하며, 이는 계층 구조 내에서 매우 복잡하게 관리되고 있습니다.
- LLM 학습에서의 소외: Figma는 폐쇄적인 포맷 정책으로 인해 에이전트 시대의 핵심인 LLM 학습 데이터에 포함되지 못하는 전략적 비용을 치르게 되었습니다.
- 진실의 원천 회귀: 코드가 디자이너에게 친숙해지고 AI 에이전트가 발전함에 따라, 디자인의 최종 권위(Source of Truth)는 Figma 프리미티브가 아닌 코드로 다시 이동할 것입니다.
주요 디테일
- 복잡한 모드 관리: Figma의 단일 변수에는 Light, Dark, FigJam(Light/Dark), DevMode(Light/Dark), Slides(Light/Dark) 등 총 8가지의 모드별 값이 할당되어 있습니다.
- 비효율적인 컴포넌트 변형: 모달 푸터 컴포넌트는 'DS Library Swap', 'QA Plugin' 등 12개의 변형 속성을 가지며, 콤보 입력 컴포넌트는 16개의 변형을 관리하는 등 시스템적 복잡성이 극에 달했습니다.
- 스타일 문서화의 한계: 'light/elevation-300-tooltip'과 같은 효과 스타일은 단순히 0.5px 드롭 섀도우(30% 블랙)라는 CSS 변수를 문서화하기 위해 별도의 명칭으로 존재해야만 하는 구조입니다.
- 레이어 명명 체계: 컴포넌트 내부 레이어들이 "Default, Focused, Close Button=True"와 같이 코드를 흉내 낸 복잡한 문자열로 명명되어 관리의 어려움을 가중시키고 있습니다.
향후 전망
- 디자인 툴의 역할 축소: 결과물인 코드를 직접 생성하는 AI 에이전트의 발전으로 인해, 추상화된 디자인 툴에서 시스템을 구축하는 데 드는 공수가 점차 무의미해질 것입니다.
- 코드 중심 워크플로우: 디자인 변경 사항을 코드로 반영한 후 다시 디자인 툴로 역포팅하는 번거로운 작업이 사라지고, 실제 구현 매체인 코드에서 직접 디자인하고 소통하는 방식이 주류가 될 것으로 보입니다.
출처:hackernews