Read Original
#Frontend

에이전트도 읽는 디자인 시스템, Clay 개편기

에이전트도 읽는 디자인 시스템, Clay 개편기
01

Summary

AI 에이전트도 알아듣는 디자인 시스템! 아임웹의 Clay 개편 비하인드

개발자 경험(DX)을 넘어 AI 경험(AX)까지 잡은 차세대 디자인 시스템 리팩터링 전략

인간 개발자를 넘어 AI 에이전트가 디자인 시스템을 분석하고 코드를 작성하는 시대가 도래했습니다. 아임웹은 디자인 시스템 Clay의 규칙과 어휘를 전면 개편하여 Figma와 React를 완벽히 일치시키고 AI용 가이드라인을 제공했습니다. AI와 인간 모두를 만족시킨 혁신적인 디자인 시스템 구축 과정을 상세히 공유합니다.

  • 01AI 에이전트의 코드 해석 경험을 뜻하는 AX(AI Experience) 개념의 적극적인 도입
  • 02Figma 디자인 자산과 React 코드의 명칭 및 속성 타입을 100% 일대일 매칭
  • 03상태 속성을 HTML 표준명으로 전환하고 구조를 Compound 패턴으로 일원화
  • 04AI 에이전트를 위한 79개의 전용 마크다운 가이드라인 및 Clay CLI 제공
  • 05동일 화면 구현 테스트 결과 타입 에러 0건 및 작업 비용 50% 감소 달성

RECOMMENDATION

AI 기반의 코드 생성 자동화를 추진 중이거나 디자인 시스템의 일관성을 높이고 디자이너와 개발자 간의 정렬을 완벽히 맞추고 싶은 엔지니어링 팀에게 강력히 추천합니다.

The Problem

기존 디자인 시스템은 컴포넌트별 API와 명칭이 제각각이어서 사람뿐만 아니라 코드를 생성하는 AI 에이전트에게도 혼란을 주었습니다. 특히 디자인 도구인 Figma와 React 코드 사이의 구조적 불일치로 인해 AI 에이전트가 코드를 예측하고 작성할 때 잦은 환각 현상과 타입 에러가 발생했습니다.

The Solution

컴포넌트의 상태 prop을 HTML 표준으로 통일하고 구조를 Compound 패턴으로 일원화하여 일관성을 높였습니다. Figma와 React의 컴포넌트 명칭, 속성, 타입을 일대일로 동기화했으며, AI 에이전트의 분석 기준이 되는 79개의 상세 마크다운 가이드라인과 터미널 조회용 CLI 도구를 구축했습니다.

The Result

에이전트를 활용한 화면 구현 테스트에서 타입 에러가 전혀 발생하지 않는 성과를 거두었습니다. 더불어 에이전트가 코드를 작성하는 데 소요되는 시간과 비용을 기존 대비 약 50% 수준으로 절감하였으며, 디자인 시스템 기반의 대화형 프로토타이핑 툴 'mold' 개발로 이어졌습니다.

Trade-off

에이전트의 환각을 방지하고 일관성을 유지하기 위해 Tailwind CSS를 통한 임의 레이아웃 구성을 제한하고 반드시 전용 레이아웃 컴포넌트를 사용하도록 규칙을 강제하여, 개별 컴포넌트 수준에서의 마크업 커스텀 자유도가 다소 제한되는 상충관계가 존재합니다.

03

Key Concepts

Concept · 01

AX (AI Experience)

AI 에이전트가 소프트웨어 시스템, API, 또는 문서를 원활하게 파악하고 정확한 결과물을 생성할 수 있도록 상호작용 환경을 최적화하는 경험 모델입니다.

  • 기존의 개발자 경험(DX)을 확장하여 AI 에이전트가 디자인 시스템을 읽고 코드를 자동 생성할 수 있도록 설계 방향성을 정의하는 데 활용되었습니다.
Concept · 02

Compound 패턴

하나의 완성형 컴포넌트를 내부 서브 컴포넌트들의 결합 구조로 쪼개어 유기적인 상태 공유와 유연한 마크업 구성을 가능하게 하는 React 컴포넌트 설계 방식입니다.

  • 기존의 flat 패턴과 혼재되었던 컴포넌트 구조를 compound 형태로 단일화하여 에이전트가 문서를 반복 조회하지 않고도 코드를 쉽게 작성하도록 도왔습니다.
Concept · 03

Figma-to-Code Alignment

Figma 디자인 컴포넌트의 레이어 구조 및 속성 정보와 프론트엔드 코드의 실제 컴포넌트 명세가 상호 간 유기적인 명칭 동기화를 이루도록 설계하는 기법입니다.

  • Figma의 Checkbox 컴포넌트 명칭과 React 구현체의 속성을 동일하게 맞춤으로써 디자인과 코드 간의 장벽을 허물고 에이전트의 오작동을 줄였습니다.