Ant Design vs Wanted Design System (Montage)

커피 구독 브랜드 LUMA 의 같은 랜딩 한 페이지를 두 스타일 규칙으로 각각 다시 지어 나란히 놓았습니다. 콘텐츠는 같고, 규칙만 다릅니다.

같은 씬, 두 벌

Ant Design상세 보기 →크게 보기 →
Wanted Design System (Montage)상세 보기 →크게 보기 →

무드 대비

4축 좌표(-2 ~ +2)를 같은 눈금 위에 겹쳐 놓았습니다. 축은 정규화하지 않습니다 — 두 점이 붙어 있으면 실제로 가까운 것입니다.

Ant DesignWanted Design System (Montage)축 범위 −2 ~ +2 고정

무드 4축 수치(−2에서 +2 사이): 밀도 — Ant Design -1, Wanted Design System (Montage) -1. 온도감 — Ant Design -1, Wanted Design System (Montage) -1. 시대감 — Ant Design 0, Wanted Design System (Montage) 0. 격식 — Ant Design 1, Wanted Design System (Montage) 1.

나란히 놓고 보기

Ant Design

YEAR
2015
BY
Ant Group
MOOD
미니멀 · 신뢰감

Wanted Design System (Montage)

YEAR
2024
BY
Wanted Lab (원티드랩)
MOOD
미니멀 · 신뢰감

주요 특징

Ant Design

  • 풍부한 컴포넌트 라이브러리
  • 일관된 디자인 토큰
  • 국제화 지원
  • 명확한 시각적 계층
  • 효율적인 작업 흐름

Wanted Design System (Montage)

  • 명도 기반 컬러 넘버링 (0=Black, 100=White)
  • Normal/Spread 듀얼 엘리베이션 시스템
  • Pretendard JP 기반 19단계 타이포 스케일
  • 4px 기반 스페이싱 + 8px 그리드
  • CC BY 4.0 오픈소스 라이선스

장점과 한계

Ant Design

장점
  • 컴포넌트 수가 매우 풍부 (60개 이상)
  • React 생태계 최고 인기 UI 라이브러리 중 하나
  • 디자인 토큰 커스터마이징 용이
  • 국제화(i18n) 내장
한계
  • 번들 사이즈가 큰 편
  • 디자인이 Material보다 독특함이 부족
  • 중국 기업 이미지로 일부 시장에서 거부감

Wanted Design System (Montage)

장점
  • CC BY 4.0 오픈소스 — 상업적 사용, 수정, 재배포 자유
  • 명도 기반 숫자 네이밍으로 직관적 색상 선택 가능
  • Pretendard JP로 한국어/영어/일본어 동시 지원
  • Figma UI Kit 공개 (Web + Native 별도 제공)
  • Hover/Active 상태를 Opacity 프레임으로 처리하여 색상 관리 단순화
한계
  • 2024년 공개된 비교적 새로운 시스템으로 커뮤니티 생태계가 작음
  • Wanted Sans 커스텀 폰트는 별도 적용 필요
  • 채용 도메인 최적화로 타 도메인에 그대로 적용 시 일부 컴포넌트 부족 가능

역사와 배경

Ant Design

2015년 알리바바 그룹 내부 디자인 시스템으로 시작. 현재 GitHub에서 가장 많은 스타를 보유한 디자인 시스템 중 하나.

Wanted Design System (Montage)

원티드랩이 2024년 디자인 라이브러리로 처음 선보인 뒤, 2025년 에이전틱 디자인 시스템 'Montage'로 확장하여 CC BY 4.0 오픈소스로 공개했습니다. 'From Separate Core Blocks To a Seamless Flow'를 슬로건으로, AI가 디자인을 읽고 생성할 수 있도록 설계된 것이 특징입니다.

접근성

Ant Design

기본 접근성 지원. aria 레이블 제공. WCAG AA 부분 준수.

Wanted Design System (Montage)

시맨틱 컬러 토큰으로 Label(Normal~Disable), Status(Positive/Cautionary/Negative), Interaction(Inactive/Disable) 등 상태별 색상을 체계적으로 정의하며, Static White/Black으로 테마 변경에도 고정 대비를 보장합니다.

자주 묻는 질문

Ant Design vs Wanted Design System (Montage), 무엇이 다른가요?

Ant Design — 엔터프라이즈급 UI 디자인 언어로, 중국 알리바바 그룹에서 개발했습니다. Wanted Design System (Montage) — CC BY 4.0 오픈소스 디자인 시스템으로, 명도 기반 넘버링 컬러 체계(0=Black, 100=White), Pretendard JP 타이포그래피, 5단계 Normal/Spread 엘리베이션, 7개 카테고리 40+개 컴포넌트를 갖춘 원티드의 크로스 플랫폼 디자인 시스템입니다. 무드 4축 좌표는 사실상 겹칩니다 — 차이는 좌표보다 색·질감·컴포넌트를 다루는 손끝에서 갈립니다.

언제 Ant Design 쪽, 언제 Wanted Design System (Montage) 쪽을 골라야 하나요?

B2B SaaS · React 기반 관리자 페이지 · 기업용 대시보드 같은 화면이라면 Ant Design 쪽이 오래 버팁니다. 반대로 오픈소스 디자인 시스템을 기반으로 자사 시스템 구축 · 한·영·일 다국어 지원이 필요한 서비스 · 정보 밀도가 높은 데이터 중심 웹/앱 쪽 그림이라면 Wanted Design System (Montage) 쪽으로 기웁니다. 둘 다 걸린다면 같은 씬을 입힌 두 데모를 나란히 보고 결정하는 편이 빠릅니다.

Ant Design vs Wanted Design System (Montage), 장단점은 어떻게 갈리나요?

Ant Design 쪽 — 강점은 컴포넌트 수가 매우 풍부 (60개 이상) · React 생태계 최고 인기 UI 라이브러리 중 하나, 짚고 갈 한계는 번들 사이즈가 큰 편 · 디자인이 Material보다 독특함이 부족입니다. Wanted Design System (Montage) 쪽 — 강점은 CC BY 4.0 오픈소스 — 상업적 사용, 수정, 재배포 자유 · 명도 기반 숫자 네이밍으로 직관적 색상 선택 가능, 짚고 갈 한계는 2024년 공개된 비교적 새로운 시스템으로 커뮤니티 생태계가 작음 · Wanted Sans 커스텀 폰트는 별도 적용 필요입니다.

이어서 볼 비교