사흘 이내 로스팅
주문이 모이면 그때 볶습니다. 미리 볶아 쌓아두지 않습니다.
Carbon Design System vs Wanted Design System (Montage)
커피 구독 브랜드 LUMA 의 같은 랜딩 한 페이지를 두 스타일 규칙으로 각각 다시 지어 나란히 놓았습니다. 콘텐츠는 같고, 규칙만 다릅니다.
같은 씬, 두 벌
무드 대비
4축 좌표(-2 ~ +2)를 같은 눈금 위에 겹쳐 놓았습니다. 축은 정규화하지 않습니다 — 두 점이 붙어 있으면 실제로 가까운 것입니다.
무드 4축 수치(−2에서 +2 사이): 밀도 — Carbon Design System -1, Wanted Design System (Montage) -1. 온도감 — Carbon Design System -2, Wanted Design System (Montage) -1. 시대감 — Carbon Design System 0, Wanted Design System (Montage) 0. 격식 — Carbon Design System 1, Wanted Design System (Montage) 1.
나란히 놓고 보기
Carbon Design System
- YEAR
- 2017
- BY
- IBM
- MOOD
- 미니멀 · 신뢰감
Wanted Design System (Montage)
- YEAR
- 2024
- BY
- Wanted Lab (원티드랩)
- MOOD
- 미니멀 · 신뢰감
주요 특징
Carbon Design System
- 그리드 기반 레이아웃
- 체계적인 타이포그래피
- 접근성 우선
- 일관된 컴포넌트 라이브러리
- 다크/라이트 테마 지원
Wanted Design System (Montage)
- 명도 기반 컬러 넘버링 (0=Black, 100=White)
- Normal/Spread 듀얼 엘리베이션 시스템
- Pretendard JP 기반 19단계 타이포 스케일
- 4px 기반 스페이싱 + 8px 그리드
- CC BY 4.0 오픈소스 라이선스
장점과 한계
Carbon Design System
장점
- WCAG 2.1 AA 완전 준수
- 오픈소스로 자유롭게 사용 가능
- 8px 그리드 기반의 철저한 수학적 레이아웃
- 화이트·그레이·블랙·g10 등 다양한 테마 공식 제공
한계
- 기업/테크 이미지가 강해 소비자 앱엔 어울리지 않음
- 높은 학습 곡선
- 비교적 보수적인 시각 스타일
Wanted Design System (Montage)
장점
- CC BY 4.0 오픈소스 — 상업적 사용, 수정, 재배포 자유
- 명도 기반 숫자 네이밍으로 직관적 색상 선택 가능
- Pretendard JP로 한국어/영어/일본어 동시 지원
- Figma UI Kit 공개 (Web + Native 별도 제공)
- Hover/Active 상태를 Opacity 프레임으로 처리하여 색상 관리 단순화
한계
- 2024년 공개된 비교적 새로운 시스템으로 커뮤니티 생태계가 작음
- Wanted Sans 커스텀 폰트는 별도 적용 필요
- 채용 도메인 최적화로 타 도메인에 그대로 적용 시 일부 컴포넌트 부족 가능
역사와 배경
Carbon Design System
2017년 IBM이 자사 제품군의 통일성을 위해 오픈소스로 공개. IBM Plex 폰트와 함께 '엔터프라이즈 오픈소스 디자인 시스템'의 대표 사례.
Wanted Design System (Montage)
원티드랩이 2024년 디자인 라이브러리로 처음 선보인 뒤, 2025년 에이전틱 디자인 시스템 'Montage'로 확장하여 CC BY 4.0 오픈소스로 공개했습니다. 'From Separate Core Blocks To a Seamless Flow'를 슬로건으로, AI가 디자인을 읽고 생성할 수 있도록 설계된 것이 특징입니다.
접근성
Carbon Design System
WCAG 2.1 AA 기준 전면 준수. 키보드 내비게이션, 스크린 리더, 고대비 모드 모두 검증.
Wanted Design System (Montage)
시맨틱 컬러 토큰으로 Label(Normal~Disable), Status(Positive/Cautionary/Negative), Interaction(Inactive/Disable) 등 상태별 색상을 체계적으로 정의하며, Static White/Black으로 테마 변경에도 고정 대비를 보장합니다.
자주 묻는 질문
Carbon Design System vs Wanted Design System (Montage), 무엇이 다른가요?
Carbon Design System — IBM의 오픈소스 디자인 시스템으로, 엔터프라이즈 제품에 최적화되어 있습니다. Wanted Design System (Montage) — CC BY 4.0 오픈소스 디자인 시스템으로, 명도 기반 넘버링 컬러 체계(0=Black, 100=White), Pretendard JP 타이포그래피, 5단계 Normal/Spread 엘리베이션, 7개 카테고리 40+개 컴포넌트를 갖춘 원티드의 크로스 플랫폼 디자인 시스템입니다. 무드 좌표에서 가장 벌어지는 축은 온도감입니다 — 둘 다 차가움 쪽이지만 Carbon Design System 쪽이 한층 더 멀리 갑니다.
언제 Carbon Design System 쪽, 언제 Wanted Design System (Montage) 쪽을 골라야 하나요?
엔터프라이즈 SaaS · B2B 제품 · 관리자 대시보드 같은 화면이라면 Carbon Design System 쪽이 오래 버팁니다. 반대로 오픈소스 디자인 시스템을 기반으로 자사 시스템 구축 · 한·영·일 다국어 지원이 필요한 서비스 · 정보 밀도가 높은 데이터 중심 웹/앱 쪽 그림이라면 Wanted Design System (Montage) 쪽으로 기웁니다. 둘 다 걸린다면 같은 씬을 입힌 두 데모를 나란히 보고 결정하는 편이 빠릅니다.
Carbon Design System vs Wanted Design System (Montage), 장단점은 어떻게 갈리나요?
Carbon Design System 쪽 — 강점은 WCAG 2.1 AA 완전 준수 · 오픈소스로 자유롭게 사용 가능, 짚고 갈 한계는 기업/테크 이미지가 강해 소비자 앱엔 어울리지 않음 · 높은 학습 곡선입니다. Wanted Design System (Montage) 쪽 — 강점은 CC BY 4.0 오픈소스 — 상업적 사용, 수정, 재배포 자유 · 명도 기반 숫자 네이밍으로 직관적 색상 선택 가능, 짚고 갈 한계는 2024년 공개된 비교적 새로운 시스템으로 커뮤니티 생태계가 작음 · Wanted Sans 커스텀 폰트는 별도 적용 필요입니다.