사흘 이내 로스팅
주문이 모이면 그때 볶습니다. 미리 볶아 쌓아두지 않습니다.
Carbon Design System vs Shopify Polaris
커피 구독 브랜드 LUMA 의 같은 랜딩 한 페이지를 두 스타일 규칙으로 각각 다시 지어 나란히 놓았습니다. 콘텐츠는 같고, 규칙만 다릅니다.
같은 씬, 두 벌
무드 대비
4축 좌표(-2 ~ +2)를 같은 눈금 위에 겹쳐 놓았습니다. 축은 정규화하지 않습니다 — 두 점이 붙어 있으면 실제로 가까운 것입니다.
무드 4축 수치(−2에서 +2 사이): 밀도 — Carbon Design System -1, Shopify Polaris -1. 온도감 — Carbon Design System -2, Shopify Polaris 0. 시대감 — Carbon Design System 0, Shopify Polaris 0. 격식 — Carbon Design System 1, Shopify Polaris 1.
나란히 놓고 보기
Carbon Design System
- YEAR
- 2017
- BY
- IBM
- MOOD
- 미니멀 · 신뢰감
Shopify Polaris
- YEAR
- 2016
- BY
- Shopify
- MOOD
- 미니멀 · 신뢰감
주요 특징
Carbon Design System
- 그리드 기반 레이아웃
- 체계적인 타이포그래피
- 접근성 우선
- 일관된 컴포넌트 라이브러리
- 다크/라이트 테마 지원
Shopify Polaris
- 머천트 중심 디자인
- 일관된 컴포넌트
- 접근성 우선
- 명확한 행동 유도
- 효율적인 워크플로우
장점과 한계
Carbon Design System
장점
- WCAG 2.1 AA 완전 준수
- 오픈소스로 자유롭게 사용 가능
- 8px 그리드 기반의 철저한 수학적 레이아웃
- 화이트·그레이·블랙·g10 등 다양한 테마 공식 제공
한계
- 기업/테크 이미지가 강해 소비자 앱엔 어울리지 않음
- 높은 학습 곡선
- 비교적 보수적인 시각 스타일
Shopify Polaris
장점
- 이커머스 워크플로우에 최적화
- 오픈소스로 Shopify 앱 개발에 자유롭게 활용
- 접근성 검증 완료
한계
- Shopify 플랫폼에 특화된 시각 언어
- 이커머스 외 서비스엔 어색할 수 있음
역사와 배경
Carbon Design System
2017년 IBM이 자사 제품군의 통일성을 위해 오픈소스로 공개. IBM Plex 폰트와 함께 '엔터프라이즈 오픈소스 디자인 시스템'의 대표 사례.
Shopify Polaris
2016년 Shopify 내부 디자인 시스템으로 시작. 이후 Shopify 앱 개발자 생태계 전체의 표준으로 공개.
접근성
Carbon Design System
WCAG 2.1 AA 기준 전면 준수. 키보드 내비게이션, 스크린 리더, 고대비 모드 모두 검증.
Shopify Polaris
WCAG 2.1 AA 준수. 색상 대비·키보드 내비게이션 철저 검증.
자주 묻는 질문
Carbon Design System vs Shopify Polaris, 무엇이 다른가요?
Carbon Design System — IBM의 오픈소스 디자인 시스템으로, 엔터프라이즈 제품에 최적화되어 있습니다. Shopify Polaris — 상거래 경험을 위한 Shopify의 디자인 시스템으로, 명확하고 일관된 인터페이스를 제공합니다. 무드 좌표에서 가장 벌어지는 축은 온도감입니다 — Carbon Design System 쪽은 차가움 쪽에, Shopify Polaris 쪽은 중간 쪽에 서 있습니다.
언제 Carbon Design System 쪽, 언제 Shopify Polaris 쪽을 골라야 하나요?
엔터프라이즈 SaaS · B2B 제품 · 관리자 대시보드 같은 화면이라면 Carbon Design System 쪽이 오래 버팁니다. 반대로 이커머스 관리자 UI · Shopify 앱 · 판매자용 대시보드 쪽 그림이라면 Shopify Polaris 쪽으로 기웁니다. 둘 다 걸린다면 같은 씬을 입힌 두 데모를 나란히 보고 결정하는 편이 빠릅니다.
Carbon Design System vs Shopify Polaris, 장단점은 어떻게 갈리나요?
Carbon Design System 쪽 — 강점은 WCAG 2.1 AA 완전 준수 · 오픈소스로 자유롭게 사용 가능, 짚고 갈 한계는 기업/테크 이미지가 강해 소비자 앱엔 어울리지 않음 · 높은 학습 곡선입니다. Shopify Polaris 쪽 — 강점은 이커머스 워크플로우에 최적화 · 오픈소스로 Shopify 앱 개발에 자유롭게 활용, 짚고 갈 한계는 Shopify 플랫폼에 특화된 시각 언어 · 이커머스 외 서비스엔 어색할 수 있음입니다.