TL;DR

  • AI 에이전트가 대부분의 코드를 작성하는 환경에서 디자인 시스템은 웹사이트의 디자인과 프런트엔드 코드를 일관되게 유지하는 조향 레이어임.
  • 기존 디자인 시스템은 실제 제품의 변화 속도를 따라가지 못해 더 이상 존재하지 않는 제품을 설명하게 되는 문제가 있음.
  • 디자인 리드와 프런트엔드 리드가 그리드, 글꼴, 색상, 간격, 컴포넌트를 한 번 정의하면 팀원별 에이전트가 이를 따르는 협업형 조향이 가능함.
  • Intent는 AGENTS.md, 전역 스타일시트의 디자인 토큰, 실제 사례를 보여주는 디자인 시스템 페이지를 활용하며, 에이전트가 기존 컴포넌트와 스타일을 재사용함.
  • 디자인 시스템을 사이트와 같은 코드에서 생성하면 제품 변화에 맞춰 최신 상태를 유지할 수 있고, 에이전트는 관련 문서를 매번 읽음.

디자인 시스템이 제품 변화를 따라가지 못하는 문제

  • 20년 넘게 디자인 시스템을 다루며 반복해서 본 패턴은 디자인팀이 시스템을 만드는 데 많은 시간을 투자한 뒤 실제 제품이 진화하면서 최신 상태를 유지하는 데 어려움을 겪는 상황임.
  • 그 결과 디자인 시스템이 더 이상 존재하지 않는 제품을 설명하게 됨.
  • 흔히 더 많은 자원을 투입하는 방식으로 대응했으며, 여기에는 디자인 시스템 전담 팀이나 중앙 집중식 디자인 검토가 포함됨.

AI 에이전트와 협업형 조향

  • AI 에이전트가 코드 대부분을 작성하면 디자인 시스템은 AI 조향 레이어의 일부가 될 수 있음. 이는 모든 웹사이트 업데이트를 브랜드, 디자인, 개발 지침에 맞추는 맥락임.
  • 간단히 말해 에이전트를 위한 디자인 시스템은 사이트의 디자인과 프런트엔드 코드를 조향하는 레이어임.
  • AI 에이전트를 사용하면 팀의 누구나 웹사이트를 업데이트할 수 있음. 마케팅팀은 랜딩 페이지를 추가하고, 엔지니어링팀은 문서를 추가하며, 제품 관리자(PM)는 가격 페이지를 조정함.
  • 조향 기준이 없으면 각 에이전트가 저마다의 어조와 말투, 색상, 간격 등을 적용하게 됨.
  • 협업형 조향에서는 디자인 리드와 프런트엔드 리드가 그리드, 글꼴, 색상, 간격, 컴포넌트를 한 번 정의하고 모든 팀원의 에이전트가 이를 따름. 팀은 계속 제품을 출시하고 사이트의 일관성은 유지됨.

Intent 웹사이트의 디자인 시스템

  • Intent 웹사이트의 AGENTS.md 파일은 AI 에이전트가 색상, 타이포그래피, 그리드 값을 복제하는 대신 사이트 전역 스타일시트의 테마 클래스와 CSS 변수를 재사용하도록 안내함.
  • 스타일시트에는 색상, 글꼴, 글자 크기, 반응형 그리드, 라이트 및 다크 테마가 디자인 토큰으로 정의되어 있음. 디자인 토큰은 사이트 전체에서 공유하는 이름 있는 값임.
  • 디자인 시스템 페이지에는 에이전트가 살펴볼 수 있는 실제 작동 예시가 표시됨.
  • 새 버튼을 추가해 달라는 요청을 받으면 에이전트는 기존 Button 컴포넌트와 스타일을 재사용하며, 버튼은 다크 모드에도 자동으로 대응함. 사람이 별도로 정보를 찾아볼 필요가 없음.

코드가 기준이 되는 설계 흐름

  • Intent의 디자인 시스템은 Figma 명세에서 출발했으며, Figma MCP 연결을 사용해 명세를 코드로 자동 변환함.
  • 이후 코드가 단일 기준 정보(source of truth)가 됐으며, 사이트가 진화하면서 본문 글꼴, 반응형 레이아웃, 다크 모드 등이 코드에 반영됨.
  • 에이전트가 변경 사항을 원본 Figma 파일에 다시 기록한 사례도 있지만, 코드가 기준 정보이므로 실제 작업에서는 그럴 필요가 없었음.

Sol과 Aria의 사례 및 문서 활용

  • Sol과 Aria의 웹사이트도 같은 접근 방식을 따르며, 각 디자인 시스템 페이지에는 디자인 토큰과 에이전트 지침이 포함됨.
  • 디자인 시스템 페이지는 사이트와 같은 코드로 만들어지므로 최신 상태를 유지함.
  • 디자인팀은 사람들이 디자인 시스템 문서를 실제로 읽게 하려고 여러 해 동안 노력해 왔지만, 에이전트는 매번 문서를 읽음.