사흘 이내 로스팅
주문이 모이면 그때 볶습니다. 미리 볶아 쌓아두지 않습니다.
Ant Design vs Atlassian Design System
커피 구독 브랜드 LUMA 의 같은 랜딩 한 페이지를 두 스타일 규칙으로 각각 다시 지어 나란히 놓았습니다. 콘텐츠는 같고, 규칙만 다릅니다.
같은 씬, 두 벌
무드 대비
4축 좌표(-2 ~ +2)를 같은 눈금 위에 겹쳐 놓았습니다. 축은 정규화하지 않습니다 — 두 점이 붙어 있으면 실제로 가까운 것입니다.
무드 4축 수치(−2에서 +2 사이): 밀도 — Ant Design -1, Atlassian Design System 0. 온도감 — Ant Design -1, Atlassian Design System 0. 시대감 — Ant Design 0, Atlassian Design System 0. 격식 — Ant Design 1, Atlassian Design System 1.
나란히 놓고 보기
Ant Design
- YEAR
- 2015
- BY
- Ant Group
- MOOD
- 미니멀 · 신뢰감
Atlassian Design System
- YEAR
- 2017
- BY
- Atlassian
- MOOD
- 신뢰감 · 친근·발랄
주요 특징
Ant Design
- 풍부한 컴포넌트 라이브러리
- 일관된 디자인 토큰
- 국제화 지원
- 명확한 시각적 계층
- 효율적인 작업 흐름
Atlassian Design System
- 협업 중심 컴포넌트
- 유연한 레이아웃
- 강력한 접근성
- 일관된 브랜딩
- 확장 가능한 아키텍처
장점과 한계
Ant Design
장점
- 컴포넌트 수가 매우 풍부 (60개 이상)
- React 생태계 최고 인기 UI 라이브러리 중 하나
- 디자인 토큰 커스터마이징 용이
- 국제화(i18n) 내장
한계
- 번들 사이즈가 큰 편
- 디자인이 Material보다 독특함이 부족
- 중국 기업 이미지로 일부 시장에서 거부감
Atlassian Design System
장점
- Jira·Confluence에서 검증된 복잡한 워크플로우 지원
- 접근성 최우선 설계
- 오픈소스 컴포넌트 라이브러리 (Atlaskit)
한계
- Atlassian 제품 외에서는 낯선 느낌
- 비교적 보수적인 시각 디자인
- 커스터마이징 범위 제한
역사와 배경
Ant Design
2015년 알리바바 그룹 내부 디자인 시스템으로 시작. 현재 GitHub에서 가장 많은 스타를 보유한 디자인 시스템 중 하나.
Atlassian Design System
Atlassian 제품군의 폭발적 성장 이후 디자인 일관성 확보를 위해 2017년 공식화. Atlaskit 컴포넌트 라이브러리로 구현.
접근성
Ant Design
기본 접근성 지원. aria 레이블 제공. WCAG AA 부분 준수.
Atlassian Design System
WCAG 2.1 AA 준수. 키보드 내비게이션·스크린 리더 철저 검증.
자주 묻는 질문
Ant Design vs Atlassian Design System, 무엇이 다른가요?
Ant Design — 엔터프라이즈급 UI 디자인 언어로, 중국 알리바바 그룹에서 개발했습니다. Atlassian Design System — 아틀라시안의 제품군에 사용되는 디자인 시스템입니다. 무드 좌표에서 가장 벌어지는 축은 밀도입니다 — Ant Design 쪽은 여백 쪽에, Atlassian Design System 쪽은 중간 쪽에 서 있습니다.
언제 Ant Design 쪽, 언제 Atlassian Design System 쪽을 골라야 하나요?
B2B SaaS · React 기반 관리자 페이지 · 기업용 대시보드 같은 화면이라면 Ant Design 쪽이 오래 버팁니다. 반대로 B2B 협업 툴 · 프로젝트 관리 앱 · 개발자 플랫폼 쪽 그림이라면 Atlassian Design System 쪽으로 기웁니다. 둘 다 걸린다면 같은 씬을 입힌 두 데모를 나란히 보고 결정하는 편이 빠릅니다.
Ant Design vs Atlassian Design System, 장단점은 어떻게 갈리나요?
Ant Design 쪽 — 강점은 컴포넌트 수가 매우 풍부 (60개 이상) · React 생태계 최고 인기 UI 라이브러리 중 하나, 짚고 갈 한계는 번들 사이즈가 큰 편 · 디자인이 Material보다 독특함이 부족입니다. Atlassian Design System 쪽 — 강점은 Jira·Confluence에서 검증된 복잡한 워크플로우 지원 · 접근성 최우선 설계, 짚고 갈 한계는 Atlassian 제품 외에서는 낯선 느낌 · 비교적 보수적인 시각 디자인입니다.