사흘 이내 로스팅
주문이 모이면 그때 볶습니다. 미리 볶아 쌓아두지 않습니다.
Astryx (Meta 디자인 시스템) vs Carbon Design System
커피 구독 브랜드 LUMA 의 같은 랜딩 한 페이지를 두 스타일 규칙으로 각각 다시 지어 나란히 놓았습니다. 콘텐츠는 같고, 규칙만 다릅니다.
같은 씬, 두 벌
무드 대비
4축 좌표(-2 ~ +2)를 같은 눈금 위에 겹쳐 놓았습니다. 축은 정규화하지 않습니다 — 두 점이 붙어 있으면 실제로 가까운 것입니다.
무드 4축 수치(−2에서 +2 사이): 밀도 — Astryx (Meta 디자인 시스템) -1, Carbon Design System -1. 온도감 — Astryx (Meta 디자인 시스템) 1, Carbon Design System -2. 시대감 — Astryx (Meta 디자인 시스템) 0, Carbon Design System 0. 격식 — Astryx (Meta 디자인 시스템) 1, Carbon Design System 1.
나란히 놓고 보기
Astryx (Meta 디자인 시스템)
- YEAR
- 2024
- BY
- Meta Platforms
- MOOD
- 미니멀 · 따뜻한 · 신뢰감
Carbon Design System
- YEAR
- 2017
- BY
- IBM
- MOOD
- 미니멀 · 신뢰감
주요 특징
Astryx (Meta 디자인 시스템)
- 의도 기반 시맨틱 컬러 토큰 (용도로 명명, light-dark() 자동 다크모드)
- neutral·butter·chocolate·gothic·matcha·stone·y2k 7종 테마 팩
- StyleX 원자 CSS 통합 + plain CSS/Tailwind/CSS-in-JS 상호운용
- 4px 그리드 정렬 타입 스케일 (Figtree, 14px × 1.2^step)
- CLI 기반 개발자 도구 (codemod 마이그레이션, 자연어 페이지 빌드)
Carbon Design System
- 그리드 기반 레이아웃
- 체계적인 타이포그래피
- 접근성 우선
- 일관된 컴포넌트 라이브러리
- 다크/라이트 테마 지원
장점과 한계
Astryx (Meta 디자인 시스템)
장점
- 시맨틱 토큰 + light-dark() 덕분에 다크모드를 별도 코드 없이 자동 지원
- 테마 팩 교체만으로 전체 무드 전환 — 앱 코드 수정 불필요
- StyleX 원자 CSS로 런타임 오버헤드 없이 정적 스타일 추출
- CLI codemod로 버전 업그레이드·마이그레이션 자동화
- 'Working with AI' 공식 문서 등 AI 협업까지 고려한 설계
한계
- 2024년 공개된 신생 시스템으로 커뮤니티·레퍼런스가 아직 적음 (v0.x)
- StyleX 중심 워크플로라 기존 CSS 파이프라인 팀은 학습 곡선 존재
- 기본 neutral 테마가 절제된 모노크롬이라 강한 브랜드 컬러 표현에는 커스텀 필요
Carbon Design System
장점
- WCAG 2.1 AA 완전 준수
- 오픈소스로 자유롭게 사용 가능
- 8px 그리드 기반의 철저한 수학적 레이아웃
- 화이트·그레이·블랙·g10 등 다양한 테마 공식 제공
한계
- 기업/테크 이미지가 강해 소비자 앱엔 어울리지 않음
- 높은 학습 곡선
- 비교적 보수적인 시각 스타일
역사와 배경
Astryx (Meta 디자인 시스템)
2024년 Meta가 오픈소스로 공개한 디자인 시스템으로, 사내 원자 CSS 라이브러리 StyleX를 기반으로 합니다. 0.1.0에서 @xds에서 @astryxdesign으로 리브랜딩했고, 자연어로 페이지를 구성하는 'astryx build' 등 AI 시대의 개발 워크플로를 적극 반영하며 발전하고 있습니다.
Carbon Design System
2017년 IBM이 자사 제품군의 통일성을 위해 오픈소스로 공개. IBM Plex 폰트와 함께 '엔터프라이즈 오픈소스 디자인 시스템'의 대표 사례.
접근성
Astryx (Meta 디자인 시스템)
모든 컬러 토큰이 라이트/다크 쌍으로 정의되어 두 모드 모두에서 텍스트 대비를 보장하며, OS의 모션 감소(prefers-reduced-motion) 설정 존중을 모션 가이드라인에 명시합니다. disabled 전용 텍스트·아이콘 토큰으로 상태 구분도 명확합니다.
Carbon Design System
WCAG 2.1 AA 기준 전면 준수. 키보드 내비게이션, 스크린 리더, 고대비 모드 모두 검증.
자주 묻는 질문
Astryx (Meta 디자인 시스템) vs Carbon Design System, 무엇이 다른가요?
Astryx (Meta 디자인 시스템) — Meta가 공개한 오픈소스 디자인 시스템으로, StyleX 원자 CSS와 깊게 통합된 시맨틱 토큰 아키텍처가 핵심입니다. 따뜻한 크림 배경과 니어블랙 모노크롬 강조의 절제된 기본 테마(neutral) 위에 butter, matcha, gothic, y2k 등 테마 팩을 얹어 코드 수정 없이 전혀 다른 무드를 만들 수 있습니다. Carbon Design System — IBM의 오픈소스 디자인 시스템으로, 엔터프라이즈 제품에 최적화되어 있습니다. 무드 좌표에서 가장 벌어지는 축은 온도감입니다 — Astryx (Meta 디자인 시스템) 쪽은 따뜻함 쪽에, Carbon Design System 쪽은 차가움 쪽에 서 있습니다.
언제 Astryx (Meta 디자인 시스템) 쪽, 언제 Carbon Design System 쪽을 골라야 하나요?
테마·다크모드를 처음부터 시스템으로 깔고 가는 신규 프로젝트 · React 기반 대규모 제품의 디자인 토큰 표준화 · AI 에이전트와 함께 UI를 생성·유지보수하는 팀 같은 화면이라면 Astryx (Meta 디자인 시스템) 쪽이 오래 버팁니다. 반대로 엔터프라이즈 SaaS · B2B 제품 · 관리자 대시보드 쪽 그림이라면 Carbon Design System 쪽으로 기웁니다. 둘 다 걸린다면 같은 씬을 입힌 두 데모를 나란히 보고 결정하는 편이 빠릅니다.
Astryx (Meta 디자인 시스템) vs Carbon Design System, 장단점은 어떻게 갈리나요?
Astryx (Meta 디자인 시스템) 쪽 — 강점은 시맨틱 토큰 + light-dark() 덕분에 다크모드를 별도 코드 없이 자동 지원 · 테마 팩 교체만으로 전체 무드 전환 — 앱 코드 수정 불필요, 짚고 갈 한계는 2024년 공개된 신생 시스템으로 커뮤니티·레퍼런스가 아직 적음 (v0.x) · StyleX 중심 워크플로라 기존 CSS 파이프라인 팀은 학습 곡선 존재입니다. Carbon Design System 쪽 — 강점은 WCAG 2.1 AA 완전 준수 · 오픈소스로 자유롭게 사용 가능, 짚고 갈 한계는 기업/테크 이미지가 강해 소비자 앱엔 어울리지 않음 · 높은 학습 곡선입니다.