Astryx, Meta가 공개한 AI 에이전트형 디자인 시스템 정리

Meta가 내부에서 사용해온 디자인 시스템을 오픈소스로 공개했습니다. 바로 ‘Astryx’입니다.

Astryx는 단순히 컴포넌트를 모아둔 UI 라이브러리가 아니라, AI 에이전트가 프로젝트 안에서 일관된 화면을 만들 수 있도록 설계된 디자인 시스템입니다. 사용자는 Meta 내부에서 검증된 설계 방식과 컴포넌트를 바탕으로 UI를 구성할 수 있습니다.

이 글에서는 Astryx의 주요 특징과 사용법, 도입 전 확인해야 할 주의사항을 정리해보겠습니다.

Astryx 핵심 요약

• Meta가 만든 오픈소스 디자인 시스템입니다. 공식 GitHub 저장소는 facebook/astryx이며 MIT 라이선스로 공개되어 있습니다.
• 현재 Beta 단계입니다. 공식 사이트와 GitHub 모두 Astryx를 Beta로 안내하고 있습니다.
• React와 StyleX 기반입니다. 컴포넌트는 typed React components로 제공되고, 스타일 시스템은 StyleX 기반입니다.
• 150개 이상 컴포넌트를 제공합니다. 공식 블로그와 GitHub는 150+ 접근성 컴포넌트를 안내합니다. 메인 페이지에는 160+로도 표시되어 있어 최신 수량은 확인이 필요합니다.
• AI 에이전트 사용을 고려했습니다. CLI와 문서 구조를 통해 사람과 AI 코딩 도구가 같은 기준으로 컴포넌트, 템플릿, 토큰을 탐색할 수 있게 설계됐습니다.

Astryx란?

* 이미지 출처: Astryx 홈페이지

Astryx는 Meta가 공개한 오픈소스 디자인 시스템입니다. React와 StyleX를 기반으로 만들어졌으며, 접근성을 고려한 컴포넌트, 브랜드 단위 테마, 다크 모드, 템플릿, CLI를 하나의 시스템으로 제공합니다.

기존 디자인 시스템은 특정 브랜드의 시각 언어를 그대로 따라가야 하거나, 복사해서 쓰는 컴포넌트 모음에 그치는 경우가 많았던 반면 Astryx는 '커스터마이징의 자유'와 '시스템의 일관성'을 동시에 추구해, 사용자가 원하는 브랜드 이미지를 그대로 구현할 수 있도록 설계되었습니다. 

Meta가 내부에서 

8년동안 사용한 디자인 시스템

Astryx는 Meta가 8년 동안 내부에서 개발하고 13,000개 이상의 앱에 적용하며 검증한 디자인 시스템으로, Meta 플랫폼 환경에 최적화되어 있었습니다.

하지만 AI 시대로 넘어가면서 Claude Code, Cursor, GitHub Copilot 같은 AI 코딩 툴과 함께 사용하는 것이 중요해졌고, 이에 맞춰 AI 에이전트가 읽고 쓸 수 있는 디자인 시스템으로 재설계되어 오픈소스로 공개되었습니다.

덕분에 Astryx를 도입하는 사용자는 Meta의 방대한 데이터와 실전 경험으로 검증된 탄탄한 디자인 시스템을 활용할 수 있게 되었습니다.

Meta의 AI 에이전트 형 디자인 시스템 

Astryx의 주요 특징

1. 브랜드에 맞게 바꿀 수 있는 디자인 시스템입니다

Astryx는 완성도 높은 컴포넌트를 제공하면서도 특정 브랜드 룩에 갇히지 않도록 설계되었습니다. 테마를 통해 색상, 타이포그래피, 라운드(radius), 모션, 간격을 자유롭게 조정할 수 있어, 같은 컴포넌트로도 우리 서비스만의 시각 언어를 만들 수 있습니다.

2. 컴포넌트와 템플릿을 함께 제공합니다

컴포넌트를 하나씩 조립할 필요 없이 템플릿에서 시작해 빠르게 화면을 완성할 수 있습니다.버튼, 테이블, 폼, 채팅, 내비게이션, 다이얼로그 같은 기본 컴포넌트는 물론, 로그인, 체크아웃, 설정, AI 챗, IDE, 파일 탐색기처럼 바로 쓸 수 있는 페이지 단위 템플릿까지 갖추고 있어 커머스부터 AI 서비스, 개발 도구까지 다양한 유형의 프로젝트에 폭넓게 활용할 수 있습니다. 

3. AI 코딩 도구와 함께 쓰기 쉽게 만들어졌습니다

사람뿐만 아니라 AI 에이전트를 통해 직접 읽고 활용할 수 있습니다. 

Getting Started 문서에는 Claude Code, Cursor 같은 AI 코딩 도구에 그대로 붙여 넣을 수 있는 설치 프롬프트가 별도로 준비되어 있고, CLI를 통해 컴포넌트 문서, 템플릿, 토큰, 테마 정보를 탐색할 수 있습니다. 덕분에 사람과 AI가 같은 기준을 보며 하나의 프로젝트를 일관되게 구성할 수 있습니다.

Astryx 사용법

패키지 설치

Astryx를 실제 React 프로젝트에 적용하려면 기본적으로 터미널에서 npm, pnpm, yarn 같은 패키지 매니저를 사용해 설치해야 합니다. 위의 명령어를 입력해 Astryx 패키지를 설치합니다.

설치가 완료되면 위의 명령어를 입력해 초기 설정을 실행합니다.

초기 설정 과정에서 시작 페이지 템플릿을 고르는 단계가 나옵니다. 아래 항목 중 프로젝트에 맞는 템플릿을 선택합니다. 

•  Skip: 템플릿 없이 설정만 완료
• Blank Page: 기본 빈 페이지 생성
• Table Page: 테이블 화면 템플릿 생성
• Login Page: 로그인 화면 템플릿 생성

Design system initialized! 문구가 표시되면 Astryx 설치와 초기 설정은 완료된 상태입니다. 이제 프로젝트에 Astryx CSS와 테마를 불러오고, 필요한 컴포넌트나 템플릿을 적용해 화면을 구성할 수 있습니다. 

Claude Code를 사용해서 AI 고객지원 콘솔 만들기

Astryx 설치와 초기 설정이 끝났다면, 이제 Claude Code에 자연어로 화면 제작을 요청할 수 있습니다. 예시를 위해 고객 문의를 확인하고 AI 답변 초안을 검토하는 AI 고객지원 콘솔을 생성해 보겠습니다. Claude Code를 켜고 아래처럼 요청합니다. 

Astrx 디자인 시스템 예시용 프롬프트

Astrx 디자인 시스템 예시용 사용 결과

Meta의 디자인 시스템을 바탕으로 한 AI 고객지원 콘솔 사이트 예시가 완성되었습니다. 기능에 맞는 버튼과 컴포넌트를 배치하고, 화면 크기에 따라 자연스럽게 전환되는 반응형 구조도 함께 적용했습니다.

* 해당 이미지에 사용된 이름과 주소는 모두 AI가 만든 허구의 정보임을 안내드립니다.

Astryx 사용 시 주의사항

1. 아직 Beta 단계입니다

Astryx는 정식 출시 버전이 아닌 Beta 단계입니다. 설치와 테스트는 가능하지만, 실제 서비스에 바로 적용하기 전에는 컴포넌트 API와 CLI 명령어, 테마 구조가 바뀔 가능성을 고려해야 합니다.

특히 디자인 시스템은 한 번 적용하면 여러 화면에 넓게 퍼집니다. 버튼, 폼, 테이블, 다이얼로그 같은 공통 컴포넌트가 많을수록 변경 영향도 커집니다. 따라서 기존 서비스 전체에 바로 적용하기보다, 신규 화면이나 내부 도구에서 먼저 검증하는 것이 좋습니다.

2. React 기반 프로젝트에 최적화되어 있습니다

Astryx는 typed React components를 중심으로 제공됩니다. 즉, React나 Next.js처럼 React 기반으로 화면을 만드는 프로젝트에서 가장 자연스럽게 사용할 수 있습니다.

반대로 Vue, Svelte, Angular 같은 다른 프레임워크에 바로 적용하는 방식은 공식 문서 기준으로 추가 확인이 필요합니다. 

3. 테마 설계가 먼저 필요합니다

Astryx는 브랜드에 맞게 색상, 간격, 타이포그래피, radius, motion 등을 조정할 수 있습니다. 이 점은 분명한 장점이지만, 먼저 정리된 디자인 기준이 있어야 제대로 활용할 수 있습니다.

예를 들어 강조색, 배경색, 버튼 모서리 값, 카드 간격이 정해져 있지 않으면 화면마다 다른 방식으로 수정될 수 있고, 그러면 Astryx를 사용해도 디자인 시스템이 아니라 개별 화면 스타일 모음처럼 운영될 수 있습니다. 도입 전에는 브랜드 토큰, 다크 모드 기준, 컴포넌트별 예외 규칙을 먼저 정리하는 것이 좋습니다.

이제는 디자인도 AI!, 대표 바이브 디자인 툴 사용법이 궁금하다면

클로드 디자인(Claude Design) 사용법, 디자인 작업 방식이 달라지고 있습니다

Open Design 사용법: 클로드 디자인의 한도가 아쉬웠던 분들께

Stitch 사용법, AI로 웹사이트 UI를 만드는 바이브 디자인 툴 활용법

AI 시대, IT 전문가의 기준이 바뀌었습니다.

기업에 필요한 사람은 단순히 AI를 사용할 줄 아는 사람이 아닙니다. AI가 만든 결과를 판단하고, 시스템을 운영하며, 오류와 품질을 검증할 수 있는 전문가가 필요합니다. 

“AI가 빠뜨린 맥락을 채우는 건, 시스템을 경험해본 사람입니다.”

AX·DX·클라우드·핀테크·개발·기획·디자인 등 프로젝트를 직접 수행해 업무와 현장을 이해하고, 프로젝트 운영과 검증에 빠르게 참여할 수 있는 실무형 IT 프리랜서를 매칭합니다.

• 삼성·SK·현대 등 주요 기업 프로젝트 매칭 8만 건 +
• 기업 프로젝트 재의뢰율 98%

이랜서는 단순한 인재 추천을 넘어, 기업이 다시 찾는 IT 프리랜서 매칭 시스템을 만들어왔습니다. 프로젝트를 등록하면 약 41만 명의 IT 전문 인재 풀을 바탕으로, 현장 경험을 갖춘 프리랜서의 지원과 맞춤 매칭을 받을 수 있습니다.

AI의 가능성을 실제 성과로 바꿀 IT 전문가, 이랜서가 매칭합니다.

[프로젝트 등록하고 현장형 프리랜서 만나기]