메타 Astryx가 어떤 오픈소스인지
Astryx는 메타가 6월 18일 베타로 공개한 디자인 시스템입니다. 버튼, 입력창, 표, 대화창 같은 화면 부품을 한 가지 규칙으로 맞춰 둔 묶음이라고 보면 됩니다. 메타 설명으로는 회사 안에서 8년 동안 다듬어졌고, 사내 앱 1만 3천 개 이상이 이걸로 화면을 만들었습니다.
공개 범위는 꽤 넓습니다. 접근성을 챙긴 컴포넌트가 150개 이상이고, 브랜드 색과 글꼴을 바꾸는 테마, 다크 모드, 바로 가져다 쓰는 페이지 템플릿, 명령줄 도구(CLI)가 한 저장소에 들어 있습니다. React 19와 메타의 스타일 라이브러리 StyleX 위에서 만들어졌고 라이선스는 MIT입니다.
공개는 여름이었지만 11월 8일 깃허브 일간 트렌딩에 다시 올라왔습니다. 이날 기준 별은 1만 4천 7백 개 정도이고, 11월 6일과 7일(미국 시간) 사이에만 0.7.9부터 0.7.11까지 세 번 새 버전이 나왔을 만큼 빠르게 바뀌는 중입니다. 아직 1.0 전의 베타라는 점은 기억해 둘 만합니다. 메타는 11월 12일 샌프란시스코 사옥에서 Astryx 팀이 직접 나오는 행사도 열 예정입니다.
Astryx 테마를 바꾸면 달라지는 화면
Astryx를 처음 보면 가장 눈에 들어오는 건 테마입니다. 공식 사이트의 Themes 메뉴에는 가상의 쇼핑몰 Studio 화면이 떠 있고, 왼쪽 목록에서 테마를 고르면 같은 화면이 그 자리에서 바뀝니다. 상품 카드, 결제 폼, 고객 상담 챗봇 창, 재고 표, 매출 카드까지 한 화면에 몰려 있어서 테마 하나가 실제 서비스 전체에 어떻게 먹히는지 한 번에 볼 수 있습니다.
아래 네 장은 같은 화면에서 테마만 바꾼 결과입니다. Stone은 회색 바탕에 담백한 상품 사진, Gothic은 검은 바탕과 꽃 사진, matcha는 연두색 바탕에 손글씨 느낌 제목과 둥근 카드, Y2K는 보라색 바탕에 반짝이는 소품 사진으로 바뀝니다. 버튼 위치와 구조는 그대로인데 글꼴, 색, 모서리 둥글기, 사진 분위기가 통째로 달라져서 전혀 다른 가게처럼 보입니다.
저장소에 패키지로 올라온 테마는 neutral, butter, chocolate, matcha, stone, gothic, y2k 일곱 가지입니다. 사이트의 미리보기 목록에는 그중 여섯 개가 떠 있고, 마음에 드는 테마를 내 프로젝트의 테마 파일로 복사해 고쳐 쓰는 방식입니다.
Astryx 테마가 코드 수정 없이 바뀌는 구조
이게 가능한 이유는 테마를 만드는 방식에 있습니다. Astryx에서 테마는 CSS 사용자 지정 속성, 흔히 CSS 변수라고 부르는 값들을 덮어쓰는 묶음입니다. 색, 글꼴, 모서리 반지름, 움직임 같은 값을 토큰 단위로 바꾸기 때문에 컴포넌트 코드를 포크하거나 한 번 더 감싸지 않아도 화면 인상이 바뀝니다.
메타는 소개 글에서 기존 선택지가 둘 다 불편했다고 설명합니다. 큰 회사의 디자인 시스템을 그대로 쓰면 내 서비스가 남의 제품처럼 보이고, 복사해 붙여 넣는 컴포넌트 모음을 쓰면 자유롭지만 프로젝트마다 코드가 갈라져 수정이나 업그레이드를 받을 길이 없고 접근성도 각자 챙겨야 한다는 겁니다. Astryx는 동작과 접근성은 시스템이 맡고, 겉모습은 테마가 맡도록 나눴다고 합니다.
스타일 도구를 강제하지 않는 점도 눈에 띕니다. 내부는 StyleX로 만들었지만 쓰는 쪽에서는 미리 빌드된 CSS를 불러오고 타입이 붙은 React 컴포넌트를 쓰면 됩니다. 덮어쓰고 싶은 부분은 className으로 Tailwind, CSS 모듈, 그냥 CSS 중 원래 쓰던 방식을 그대로 쓸 수 있습니다. 더 깊이 고치고 싶으면 swizzle 기능으로 컴포넌트 원본 코드를 내 프로젝트로 꺼내 직접 관리할 수도 있습니다.
디자이너와 함께 일하는 팀이라면 Figma 라이브러리도 있습니다. 공식 블로그 설명으로는 Astryx Figma 라이브러리를 자동 작업이 점 릴리스마다 코드와 맞춰 갱신해서, 디자인 파일과 실제 컴포넌트가 따로 놀지 않게 했다고 합니다. 한국어 서비스에 반가운 변화도 있습니다. 8월 0.5.0 버전에서 로캘(언어와 지역 설정) 묶음이 30개로 늘었고, 선택 상자나 날짜 입력칸에서 한글처럼 조합해서 치는 글자를 Enter로 확정할 때 입력칸 값까지 같이 확정돼 버리던 문제를 고쳤습니다.
AI 코딩 도구가 Astryx를 쓰는 방식
Astryx가 내세우는 또 하나는 사람과 AI 에이전트가 같은 방식으로 쓰도록 만들었다는 점입니다. 클로드 코드나 코덱스 같은 도구에 화면을 맡기면 그럴듯하지만 어디서 본 듯한 화면이 나오기 쉬운데, Astryx 팀은 그 원인을 AI가 따라 할 좋은 예시가 없어서라고 봤습니다.
7월 공식 블로그 글을 보면 초기에는 에이전트가 Astryx 컴포넌트를 거의 쓰지 않고 div와 span을 늘어놓았다고 합니다. 문서와 예시를 다 쥐여 줬는데도 그랬고, 알고 보니 에이전트가 그대로 베낀 템플릿 자체가 엉성했다는 겁니다. 그래서 템플릿마다 같은 기준으로 점수를 매기는 채점표를 만들고, 디자이너가 다듬은 예시를 페이지, 블록, 컴포넌트 세 크기로 쌓았습니다.
그 예시를 꺼내 주는 게 CLI의 build 명령입니다. 만들고 싶은 화면을 자연어로 적으면 가장 가까운 페이지 템플릿, 부분을 채울 블록, 빈 곳을 메울 컴포넌트를 골라 주고 어디서 시작할지도 하나 정해 줍니다. 대시보드를 찾으면 분석, KPI, 지표 같은 단어까지 넓혀 찾는 식입니다. 이 검색은 네트워크 호출이나 AI 모델 없이 정해진 점수 규칙으로만 돌아서 같은 요청에는 늘 같은 결과가 나온다고 합니다. 결과 끝에는 레이아웃에 div를 쓰지 말 것, 인라인 스타일 대신 토큰을 쓸 것 같은 규칙이 붙어서 에이전트가 시스템 밖으로 새지 않게 막습니다.
CLI는 컴포넌트 설명, 디자인 토큰, 템플릿, 테마 도구, 업그레이드 코드 변환(codemod)을 터미널 명령과 JSON 응답으로 내놓습니다. 컴퓨터에 한 번 전역 설치해 두면 그 컴퓨터의 코딩 에이전트가 모두 Astryx 문서를 찾아 쓸 수 있고, 프로젝트 안에서는 그 프로젝트에 설치된 버전이 우선합니다.
Astryx 설치 방법과 필요한 버전
설치는 npm 명령 두 줄입니다. 본체인 core, 테마 하나, StyleX를 넣고 CLI는 개발용 의존성으로 넣습니다. React와 react-dom 19 이상이 있어야 하고, 빌드 플러그인이나 PostCSS, Babel 설정 없이 CSS 몇 줄을 불러오고 테마 공급자로 감싸면 된다고 안내합니다. Next.js, Vite, Tailwind, CDN별 자세한 순서는 core 패키지의 README에 있습니다.
CLI는 Node.js 버전을 따로 봐야 합니다. CLI 0.7.11은 Node.js 22.13.0 이상을 요구합니다. 리눅스 서버의 Node.js 20.18.1에서 CLI 0.7.11을 설치해 실행하면 설치는 끝나지만 실행하자마자 Node.js 22.13.0 이상이 필요하다는 안내만 나오고 멈췄습니다. 회사 서버나 오래된 노트북에 Node 20을 쓰고 있다면 nvm 같은 도구로 22 이상을 먼저 올려 두는 편이 빠릅니다.
실수하기 쉬운 곳이 하나 더 있습니다. CLI를 설치하기 전에 npx astryx처럼 범위(@astryxdesign) 없는 이름으로 실행하면 Astryx와 상관없는 다른 npm 패키지를 받아 실행하게 됩니다. 공식 README도 이걸 따로 경고합니다. 처음에는 꼭 npx @astryxdesign/cli 처럼 전체 이름으로 실행하거나, 아래처럼 package.json에 스크립트를 걸어 두는 방법을 씁니다.
# 본체, 기본 테마, StyleX 설치 (React 19 이상 필요)
npm install @astryxdesign/core @astryxdesign/theme-neutral @stylexjs/stylex
npm install -D @astryxdesign/cli
# CLI는 Node.js 22.13.0 이상에서 실행
node -v
# 범위 이름으로 실행 (npx astryx 단독 실행은 다른 패키지가 깔림)
npx @astryxdesign/cli search button
npx @astryxdesign/cli template --list
# 컴퓨터 전체에 한 번 설치하면 astryx 명령을 어디서나 쓸 수 있음
npm i -g @astryxdesign/cliAstryx를 쓰기 전에 알아 둘 한계
가장 먼저 걸리는 건 React 전용이라는 점입니다. Vue나 Svelte, 순수 HTML 사이트에서 쓰는 도구가 아닙니다. React 19 이상을 요구하니 아직 18에 머문 프로젝트는 React부터 올려야 합니다.
두 번째는 베타라는 점입니다. 0.x 버전에서 며칠 간격으로 릴리스가 나오고, 릴리스 노트마다 이전 버전에서 올라올 때 쓰는 upgrade 명령이 붙어 있습니다. 바뀌는 게 많다는 뜻이라 오래 손대지 않을 사이트보다는 계속 관리하는 프로젝트에 맞습니다. 차트 컴포넌트는 아직 정식 버전 없이 canary 태그로만 배포되고, 실험용 lab 패키지는 npm에 올라와 있지 않습니다.
그래도 화면을 AI에게 자주 맡기는 사람이라면 한 번 볼 만합니다. 컴포넌트 수나 테마보다 에이전트가 베낄 좋은 예시와 규칙을 CLI로 바로 꺼내 주는 구조가 다른 컴포넌트 모음과 가장 다른 지점이라서, 지금 쓰는 도구에서 매번 비슷한 화면이 나온다면 비교해 볼 이유가 됩니다. 공식 사이트의 Playground와 Storybook에서 설치 없이 컴포넌트를 눌러 볼 수 있습니다.