사흘 이내 로스팅
주문이 모이면 그때 볶습니다. 미리 볶아 쌓아두지 않습니다.
Astryx (Meta 디자인 시스템) vs Human Interface Guidelines (HIG)
커피 구독 브랜드 LUMA 의 같은 랜딩 한 페이지를 두 스타일 규칙으로 각각 다시 지어 나란히 놓았습니다. 콘텐츠는 같고, 규칙만 다릅니다.
같은 씬, 두 벌
무드 대비
4축 좌표(-2 ~ +2)를 같은 눈금 위에 겹쳐 놓았습니다. 축은 정규화하지 않습니다 — 두 점이 붙어 있으면 실제로 가까운 것입니다.
무드 4축 수치(−2에서 +2 사이): 밀도 — Astryx (Meta 디자인 시스템) -1, Human Interface Guidelines (HIG) -1. 온도감 — Astryx (Meta 디자인 시스템) 1, Human Interface Guidelines (HIG) 0. 시대감 — Astryx (Meta 디자인 시스템) 0, Human Interface Guidelines (HIG) 0. 격식 — Astryx (Meta 디자인 시스템) 1, Human Interface Guidelines (HIG) 1.
나란히 놓고 보기
Astryx (Meta 디자인 시스템)
- YEAR
- 2024
- BY
- Meta Platforms
- MOOD
- 미니멀 · 따뜻한 · 신뢰감
Human Interface Guidelines (HIG)
- YEAR
- 1987
- BY
- Apple
- 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 마이그레이션, 자연어 페이지 빌드)
Human Interface Guidelines (HIG)
- 명료한 계층 구조
- 부드러운 애니메이션
- SF 폰트 사용
- 네이티브 컨트롤
- 일관된 내비게이션
장점과 한계
Astryx (Meta 디자인 시스템)
장점
- 시맨틱 토큰 + light-dark() 덕분에 다크모드를 별도 코드 없이 자동 지원
- 테마 팩 교체만으로 전체 무드 전환 — 앱 코드 수정 불필요
- StyleX 원자 CSS로 런타임 오버헤드 없이 정적 스타일 추출
- CLI codemod로 버전 업그레이드·마이그레이션 자동화
- 'Working with AI' 공식 문서 등 AI 협업까지 고려한 설계
한계
- 2024년 공개된 신생 시스템으로 커뮤니티·레퍼런스가 아직 적음 (v0.x)
- StyleX 중심 워크플로라 기존 CSS 파이프라인 팀은 학습 곡선 존재
- 기본 neutral 테마가 절제된 모노크롬이라 강한 브랜드 컬러 표현에는 커스텀 필요
Human Interface Guidelines (HIG)
장점
- 전 세계 iPhone 사용자에게 친숙한 UX
- 시스템과 깊이 통합된 자연스러운 경험
- 고급스럽고 프리미엄한 이미지
- SwiftUI로 빠른 구현 가능
한계
- Apple 플랫폼에 한정
- 웹에서 그대로 구현 어려움
- 엄격한 가이드라인으로 커스터마이징 제한
역사와 배경
Astryx (Meta 디자인 시스템)
2024년 Meta가 오픈소스로 공개한 디자인 시스템으로, 사내 원자 CSS 라이브러리 StyleX를 기반으로 합니다. 0.1.0에서 @xds에서 @astryxdesign으로 리브랜딩했고, 자연어로 페이지를 구성하는 'astryx build' 등 AI 시대의 개발 워크플로를 적극 반영하며 발전하고 있습니다.
Human Interface Guidelines (HIG)
1987년 Mac용 첫 가이드라인 발행. 이후 iOS, iPadOS, macOS, watchOS, tvOS로 범위를 넓히며 세계에서 가장 영향력 있는 디자인 가이드라인으로 발전.
접근성
Astryx (Meta 디자인 시스템)
모든 컬러 토큰이 라이트/다크 쌍으로 정의되어 두 모드 모두에서 텍스트 대비를 보장하며, OS의 모션 감소(prefers-reduced-motion) 설정 존중을 모션 가이드라인에 명시합니다. disabled 전용 텍스트·아이콘 토큰으로 상태 구분도 명확합니다.
Human Interface Guidelines (HIG)
Dynamic Type(텍스트 크기 자동 조정), VoiceOver, Switch Control 등 접근성 기능이 시스템 레벨에서 강력하게 지원됨.
자주 묻는 질문
Astryx (Meta 디자인 시스템) vs Human Interface Guidelines (HIG), 무엇이 다른가요?
Astryx (Meta 디자인 시스템) — Meta가 공개한 오픈소스 디자인 시스템으로, StyleX 원자 CSS와 깊게 통합된 시맨틱 토큰 아키텍처가 핵심입니다. 따뜻한 크림 배경과 니어블랙 모노크롬 강조의 절제된 기본 테마(neutral) 위에 butter, matcha, gothic, y2k 등 테마 팩을 얹어 코드 수정 없이 전혀 다른 무드를 만들 수 있습니다. Human Interface Guidelines (HIG) — 애플의 디자인 철학으로, 명료성, 존중, 깊이를 핵심 가치로 합니다. 무드 좌표에서 가장 벌어지는 축은 온도감입니다 — Astryx (Meta 디자인 시스템) 쪽은 따뜻함 쪽에, Human Interface Guidelines (HIG) 쪽은 중간 쪽에 서 있습니다.
언제 Astryx (Meta 디자인 시스템) 쪽, 언제 Human Interface Guidelines (HIG) 쪽을 골라야 하나요?
테마·다크모드를 처음부터 시스템으로 깔고 가는 신규 프로젝트 · React 기반 대규모 제품의 디자인 토큰 표준화 · AI 에이전트와 함께 UI를 생성·유지보수하는 팀 같은 화면이라면 Astryx (Meta 디자인 시스템) 쪽이 오래 버팁니다. 반대로 iOS 앱 · macOS 앱 · Apple 생태계 서비스 쪽 그림이라면 Human Interface Guidelines (HIG) 쪽으로 기웁니다. 둘 다 걸린다면 같은 씬을 입힌 두 데모를 나란히 보고 결정하는 편이 빠릅니다.
Astryx (Meta 디자인 시스템) vs Human Interface Guidelines (HIG), 장단점은 어떻게 갈리나요?
Astryx (Meta 디자인 시스템) 쪽 — 강점은 시맨틱 토큰 + light-dark() 덕분에 다크모드를 별도 코드 없이 자동 지원 · 테마 팩 교체만으로 전체 무드 전환 — 앱 코드 수정 불필요, 짚고 갈 한계는 2024년 공개된 신생 시스템으로 커뮤니티·레퍼런스가 아직 적음 (v0.x) · StyleX 중심 워크플로라 기존 CSS 파이프라인 팀은 학습 곡선 존재입니다. Human Interface Guidelines (HIG) 쪽 — 강점은 전 세계 iPhone 사용자에게 친숙한 UX · 시스템과 깊이 통합된 자연스러운 경험, 짚고 갈 한계는 Apple 플랫폼에 한정 · 웹에서 그대로 구현 어려움입니다.