디자인 시스템은 그동안 사람 디자이너와 개발자 사이의 약속이었다. 하지만 대규모 언어 모델(LLM)과 AI 에이전트가 프론트엔드 코드 생성 영역으로 빠르게 진입하면서, 디자인 시스템을 사람이 아닌 머신이 읽을 수 있는 형태로 노출해야 한다는 요구가 커지고 있다. Meta의 Astryx는 바로 이 지점에서 출발한 프로젝트다. 2026년 6월 기준 업데이트를 통해 Astryx는 단순한 React UI 키트를 넘어, CLI(Command Line Interface)와 MCP(Model Context Protocol) 서버를 정식 제공하며 AI 에이전트 친화형 오픈소스 디자인 시스템으로 포지션을 재정의했다.
- Astryx는 Meta의 오픈소스 React 디자인 시스템으로, 이번 릴리스부터 CLI와 MCP 서버를 기본 구성 요소로 제공한다.
- MCP 서버를 통해 LLM과 AI 에이전트가 디자인 토큰, 컴포넌트 명세, 접근성 가이드라인을 머신이 읽을 수 있는 형태로 직접 조회할 수 있다.
- 에이전트가 코드 생성, 컴포넌트 추천, 디자인 일관성 점검을 자동화할 수 있는 표준 인터페이스가 마련되면서 디자인 시스템과 AI 도구 사이의 통합 장벽이 크게 낮아진 것으로 평가된다.
디자인 시스템은 이제 사람이 직접 찾아 읽는 문서가 아니라, 에이전트가 API처럼 호출하는 인프라로 진화하고 있다.
Astryx와 MCP 서버 등장 배경
디자인 시스템을 머신이 읽는 시대가 온 이유
최근 1~2년간 GitHub Copilot, Cursor, Claude Code 같은 LLM 기반 코딩 도구는 단순 코드 자동완성을 넘어 프로젝트 컨텍스트를 스스로 파악해 컴포넌트를 추천하고, 테스트 코드를 작성하며, 리팩터링을 제안하는 수준까지 발전했다. 다만 이러한 도구들이 디자인 시스템과 만나면 항상 같은 문제에 부딪혔다. 디자인 시스템 정보가 사람용 문서 사이트, Figma 라이브러리, 디자인 토큰 JSON 파일 등에 분산돼 있어 에이전트가 안정적으로 참조하기 어렵다는 점이다. 결국 에이전트는 컨벤션을 잊고, 색상 값을 임의로 추측하며, 접근성 규칙을 무시한 코드를 만들어내는 일이 반복됐다. 이 문제를 해결하기 위한 표준 프로토콜로 Anthropic이 제안한 것이 MCP이며, MCP는 LLM과 외부 데이터 소스를 일관된 방식으로 연결하기 위한 개방형 표준이다.
Meta의 Astryx는 어떤 프로젝트인가
Astryx는 Meta가 공개한 오픈소스 React 디자인 시스템이다. 이번 업데이트의 핵심은 디자인 토큰, 컴포넌트 명세, 접근성 가이드라인과 같은 구조화된 사양을 사람뿐 아니라 머신이 읽을 수 있는 형태로도 제공한다는 점이다. 기존에는 디자인 시스템 정보를 사람이 검색해 읽는 방식이었다면, 이제는 에이전트가 MCP 서버에 쿼리를 보내고 표준 응답을 받아 활용하는 방식으로 전환된 것이다. 이는 디자인 시스템의 소비 주체가 사람에서 에이전트로 확장됐다는 점에서 의미 있는 변화로 평가된다.
CLI와 MCP 서버가 제공하는 핵심 기능
CLI로 자동화되는 디자인 시스템 워크플로
Astryx에 함께 포함된 CLI는 단순한 보조 도구가 아니라, 디자인 시스템과 개발 파이프라인을 잇는 자동화 진입점 역할을 한다. 주요 기능은 다음 표와 같이 정리할 수 있다.
| CLI 명령 영역 | 주요 기능 | 주 사용자 |
|---|---|---|
| 컴포넌트 스캐폴딩 | 디자인 시스템이 정의한 표준 컴포넌트 기반 코드를 신규 프로젝트에 즉시 생성 | 프론트엔드 개발자 |
| 토큰 검증 및 마이그레이션 | 디자인 토큰 변경 시 영향 범위 점검 및 구버전 토큰 자동 변환 | 디자인 시스템 운영자 |
| 접근성 규칙 점검 | 생성된 코드에 대해 WCAG 기반 규칙을 로컬에서 사전 검증 | QA 및 접근성 담당자 |
| 에이전트 연동 메타데이터 추출 | MCP 서버가 노출할 컴포넌트 및 토큰 명세를 미리 빌드 | 플랫폼 및 도구 개발자 |
이처럼 CLI가 디자인 시스템 관련 작업을 사람이 직접 수행하던 영역에서 자동화 중심으로 옮겨놓은 도구라는 점이 주목할 만한 변화다.
MCP 서버를 통한 에이전트-디자인 시스템 연결
MCP는 LLM이 외부 리소스를 일관된 인터페이스로 조회하고 호출할 수 있도록 정의한 공개 표준이다. Astryx의 MCP 서버는 디자인 토큰, 컴포넌트 명세, 접근성 가이드라인을 표준화된 리소스로 노출한다. 에이전트는 이 서버를 통해 다음 행위를 수행할 수 있다.
- 특정 컴포넌트의 props 인터페이스, 시맨틱 역할, 접근성 속성을 실시간으로 조회
- 디자인 토큰 변경 이력과 권장 색상 대비 조합 확인
- 사용자 요청에 맞춰 적절한 컴포넌트와 토큰을 추천받는 컨텍스트 기반 응답 생성
즉, MCP 서버는 디자인 시스템을 LLM이 안전하게 호출할 수 있는 API 형태로 변환하는 어댑터 역할을 한다. 이는 에이전트 통합이 특정 도구에 종속되지 않고, 공개 표준 위에서 동작하도록 만든다는 점에서 의의가 크다.
에이전트 통합이 바꾸는 디자인-개발 협업 구조
코드 생성과 컴포넌트 추천의 자동화
Astryx와 MCP 서버의 결합은 LLM이 임의로 색상 값이나 마진 값을 추측하던 기존 문제를 완화할 수 있는 잠재력을 갖는다. 에이전트는 MCP 서버를 통해 디자인 시스템이 공식으로 정의한 토큰과 컴포넌트만 활용하도록 제한되기 때문이다. 결과적으로 생성된 코드는 처음부터 디자인 시스템 컨벤션을 따를 가능성이 높아지고, 이후 디자인 시스템 업데이트 시에도 토큰 단위로 일관성 있게 반영될 수 있을 것으로 보인다. 이는 디자인-개발 사일로 문제를 AI 차원에서 줄이는 시도로 읽힌다.
접근성과 디자인 일관성 점검의 변화
MCP 서버는 정적 문서로는 노출하기 어려운 정보를 함께 제공한다. 예를 들어 특정 버튼 컴포넌트의 disabled 상태 색상 대비비, 포커스 링의 권장 두께, 스크린 리더를 위한 ARIA 라벨 규칙 같은 항목이다. 에이전트가 코드 생성 단계에서 이 정보를 함께 받아 적용한다면, 접근성 가이드라인 준수율이 크게 개선될 여지가 있다. 디자인 일관성 측면에서도 토큰 변경이 발생하면 MCP 서버가 최신 명세를 즉시 반영하므로, 여러 서비스에 분산된 UI가 자연스럽게 동기화될 가능성이 커진다. 다만 효과적인 일관성 점검을 위해서는 MCP 서버가 항상 최신 토큰 명세를 제공하도록 관리 프로세스가 갖춰져야 한다는 점이 병행 과제로 남아 있다.
한국 시장 대응 및 도입 시사점
국내 서비스에 Astryx와 MCP를 도입할 때 고려할 점
한국 시장에서 Astryx를 도입할 때 가장 먼저 점검할 부분은 자사 디자인 시스템과 Astryx의 컴포넌트, 토큰 명세 간 매핑 가능성이다. Astryx는 Meta의 디자인 철학과 컴포넌트 명명 규칙을 따르고 있어, 기존 사내 디자인 시스템과 충돌하는 영역이 발생할 수 있다. 또한 MCP 서버가 표준으로 노출하는 메타데이터가 자사의 접근성 정책과 어느 정도 일치하는지 사전 검토가 필요하다. 대한 사전 검토가 필요하다. 디자인 토큰 운영 거버넌스 측면에서도 MCP가 가정한 토큰 구조와 사내 토큰 계층이 다를 경우, 토큰 명세 매핑 레이어를 별도로 구축해야 할 수 있다. 이러한 통합 비용을 고려했을 때, 디자인 시스템을 처음부터 구축하는 팀보다는 이미 운영 중인 디자인 시스템을 AI 도구와 연결하려는 팀이 단기적으로 더 큰 효과를 볼 것으로 분석된다.
에이전트 도구와 결합한 후속 기술 동향 전망
Astryx처럼 디자인 시스템이 CLI와 MCP 서버를 함께 공개하는 패턴은 점차 표준처럼 확산될 가능성이 있다. 향후에는 디자인 토큰 정의 시 MCP 친화적인 메타데이터를 함께 작성하는 것이 일반화되고, 디자인 시스템 운영 도구도 MCP 서버를 기본 출력 형태로 제공하는 방향으로 진화할 것으로 보인다. LLM 기반 코딩 도구 측면에서도 특정 디자인 시스템에 종속되지 않고 MCP 표준만 준수하면 다양한 디자인 시스템과 연동할 수 있게 되므로, 도구 선택의 폭이 넓어질 것으로 기대된다. 한국 개발자 입장에서는 사내 디자인 시스템을 어떻게 MCP 호환 형태로 추상화하느냐가 향후 AI 에이전트 협업 경쟁력을 좌우하는 핵심 변수가 될 것으로 판단된다.
참고로 본문에서 소개한 MCP 표준 자체는 Anthropic이 제안한 공개 표준이며, Astryx의 구체적인 구현과 기능은 MarkTechPost 기사 원문을 통해 확인할 수 있다. MCP의 보다 일반적인 사양과 개념은 Model Context Protocol 표준 문서에서 별도로 참조할 수 있다.
정리하면
- Astryx는 Meta의 오픈소스 React 디자인 시스템으로, 이번 릴리스부터 CLI와 MCP 서버를 기본 제공해 AI 에이전트가 직접 조회 가능한 구조로 전환했다.
- CLI는 컴포넌트 스캐폴딩, 토큰 검증, 접근성 사전 점검 등 디자인 시스템 운영 작업을 자동화하는 진입점 역할을 한다.
- MCP 서버는 디자인 토큰, 컴포넌트 명세, 접근성 가이드라인을 표준 인터페이스로 노출해 에이전트 기반 코드 생성의 신뢰도를 높인다.
- 디자인 시스템은 이제 사람이 직접 찾아 읽는 문서가 아니라, 에이전트가 API처럼 호출하는 인프라로 진화하고 있다.