Carbon is IBM’s open source design system for products and digital experiences. With the IBM Design Language as its foundation, the system consists of working code, design tools and resources, human interface guidelines, and a vibrant community of contributors.
엔터프라이즈 제품군을 위한 구조적 디자인 시스템
IBM Carbon Design System은 복잡한 기업용 소프트웨어 환경을 전제로 설계된 대표적인 디자인 시스템입니다. 데이터 중심의 대시보드, 관리 화면, 복합 인터랙션이 많은 B2B 제품군을 안정적으로 운영하기 위한 기준이 체계적으로 정리되어 있습니다. 대규모 조직에서 디자인 시스템이 어떻게 확장되고 유지되는지를 보여주는 좋은 사례입니다.
추천하는 이유
1. 복잡한 B2B 환경을 전제로 설계되었습니다
기업용 소프트웨어는 기능이 많고 정보 밀도가 높습니다. Carbon은 이러한 환경에서 화면 구조를 어떻게 정리하고 위계를 세우는지 명확하게 보여줍니다. 특히 데이터 테이블, 필터, 상태 UI처럼 복잡도가 높은 컴포넌트를 안정적으로 설계하는 방식을 참고하기 좋습니다.
2. 패턴에 강점이 있습니다
대시보드, 데이터 입력 흐름, 알림 구조 등 실제 사용 맥락 기반 패턴을 함께 제공합니다. 컴포넌트 단위 설계를 넘어 제품 단위의 UX 흐름을 시스템으로 정리하는 방식을 배울 수 있습니다.
3. 확장성과 접근성을 동시에 고려합니다
엔터프라이즈 환경에서도 접근성을 기본 기준으로 둡니다. 또한 대규모 제품군에 적용될 수 있도록 구조가 유연하게 설계되어 있습니다. 디자인 시스템이 조직과 제품을 안정적으로 운영하기 위한 인프라임을 보여주는 사례입니다.
Spectrum provides components and tools to help product teams work more efficiently, and to make Adobe’s applications more cohesive.
디자인 원칙과 토큰 체계가 정교하게 설계된 시스템
Adobe Spectrum은 Photoshop, Illustrator, XD 등 다양한 Adobe 제품군 전반에 적용되는 디자인 시스템입니다. 디자인 툴을 만드는 회사답게, 시각적 완성도뿐 아니라 원칙, 구조, 토큰 체계까지 매우 정교하게 정리되어 있습니다. 디자인 시스템의 기초부터 확장까지 균형 있게 공부하기 좋은 사례입니다.
추천하는 이유
1. 디자인 원칙부터 명확하게 정의합니다
Spectrum은 규칙만 나열하지 않습니다. 왜 이렇게 설계하는지, 어떤 경험을 지향하는지부터 설명합니다. 디자인 시스템을 컴포넌트 모음이 아니라 설계 철학이 반영된 기준 체계로 바라보는 방식을 배울 수 있습니다.
2. 토큰과 스페이싱 구조가 매우 체계적입니다
컬러, 타이포그래피, 스페이싱 등 기초 요소가 구조적으로 정리되어 있습니다. 특히 간격 체계와 레이아웃 규칙이 명확해, 시각적 일관성을 어떻게 유지하는지 잘 보여줍니다. 디자인과 개발이 동일한 기준을 공유하는 토큰 기반 설계 방식을 참고하기 좋습니다.
3. 여러 제품군 확장을 전제로 설계되었습니다
Adobe는 다양한 성격의 제품을 운영합니다. 그럼에도 브랜드 경험을 유지할 수 있는 이유는 시스템 구조 덕분입니다. 디자인 시스템이 제품군 전체를 연결하는 기반이 될 수 있음을 보여주는 사례입니다.
Explore Atlassian Design to build beautiful experiences using our design system, and stay up to date with the latest news.
디자인 토큰 구조가 명확한 SaaS 중심 디자인 시스템
Atlassian Design System은 Jira, Confluence, Trello 등 협업 툴 전반에 적용되는 시스템입니다. 다양한 제품군과 기능을 하나의 경험으로 연결해야 하는 SaaS 환경을 전제로 설계되었으며, 특히 Foundation과 Token 구조가 체계적으로 정리되어 있습니다.
추천하는 이유
1. Foundation → Token → Component 구조가 명확합니다
Atlassian은 디자인 시스템의 기초 요소(Fundamentals)부터 토큰, 그리고 컴포넌트까지 단계적으로 정리합니다. 기초 개념이 어떻게 실제 UI로 확장되는지 흐름이 잘 보입니다. 디자인 시스템을 구조적으로 이해하기 좋은 사례입니다.
2. 협업 환경을 전제로 설계되었습니다
협업 툴 특성상 제품 기능이 빠르게 확장됩니다. Atlassian은 이런 환경에서도 일관성을 유지할 수 있도록 기준을 세분화해 둡니다. 디자인과 개발이 동일한 토큰 체계를 공유하며 조직 단위 협업을 지원하는 시스템 구조를 확인할 수 있습니다.
3. 대규모 SaaS 확장성을 보여줍니다
여러 제품군이 존재함에도 브랜드 경험이 통일되어 있습니다. 이는 구조적인 설계 기준이 있기 때문입니다.
Dell Design System은 글로벌 하드웨어, 소프트웨어 제품군 전반에 적용되는 시스템입니다. 다양한 제품 라인업과 복잡한 구매, 관리 흐름을 아우르기 위해 설계되었으며, 컴포넌트 상태 정의와 문서화 수준이 특히 체계적으로 정리되어 있습니다. 안정성과 일관성이 중요한 B2B 환경에서 참고하기 좋은 사례입니다.
추천하는 이유
1. 컴포넌트 상태 정의가 매우 구체적입니다
Default, Hover, Active, Disabled 등 각 상태가 명확하게 구분되어 있습니다. 사용 상황별 동작 기준까지 포함한 설계 방식을 살펴볼 수 있습니다.
2. 구현 관점까지 고려해 문서화 되어 있습니다
Dell 디자인 시스템은 개발 적용을 전제로 구성되어 있습니다. 컴포넌트 설명이 디자인과 코드 관점 모두에서 이해 가능하도록 정리되어 있습니다. 디자인 시스템이 협업 도구로 기능하는 방식을 참고하기 좋습니다.
3. 대규모 브랜드 환경에서의 일관성을 유지합니다
여러 제품군과 채널이 존재함에도 브랜드 톤과 UI 경험이 안정적으로 유지됩니다. 디자인 시스템이 단순 통일이 아니라 브랜드 운영 전략의 일부로 작동하는 방식을 보여주는 사례입니다.
Lightning Design System 2 · Design system documentation, made with zeroheight
대규모 CRM 환경에 최적화된 엔터프라이즈 디자인 시스템
Salesforce Lightning Design System(SLDS)은 글로벌 CRM 플랫폼 전반에 적용되는 디자인 시스템입니다. 영업, 마케팅, 고객 관리 등 다양한 비즈니스 기능이 하나의 환경 안에서 작동해야 하는 복잡한 구조를 전제로 설계되었습니다. 데이터 밀도가 높고 기능이 많은 기업용 소프트웨어 환경에서 디자인 시스템이 어떻게 안정성을 유지하는지 보여주는 대표적인 사례입니다.
추천하는 이유
1. 데이터 중심 UI의 복잡성을 해소하고 안정적으로 유지합니다
CRM 제품은 고객 정보, 매출 데이터, 활동 이력 등 복잡한 데이터를 동시에 다뤄야 합니다. SLDS는 테이블, 폼, 상태 UI, 배지, 모달 등 데이터 중심 컴포넌트를 체계적으로 정리합니다. 정보 위계를 어떻게 설계하고, 복잡한 화면을 어떻게 안정적으로 유지하는지 참고하기 좋은 사례입니다.
2. 기업용 제품 확장을 전제로 한 구조입니다
Salesforce는 다양한 산업과 기업 규모에 맞춰 제품을 확장합니다. 그럼에도 일관된 사용자 경험을 유지할 수 있는 이유는 시스템 구조 덕분입니다. 디자인 시스템이 단일 서비스가 아니라 대규모 제품군을 연결하는 기반 역할을 한다는 점을 보여줍니다.
3. 일관성과 안정성을 우선하는 설계 철학을 지킵니다
엔터프라이즈 환경에서는 화려함보다 신뢰와 안정성이 중요합니다. SLDS는 명확한 구조, 예측 가능한 인터랙션, 정돈된 시각 체계를 유지합니다. 디자인 시스템이 브랜드 표현을 넘어 비즈니스 신뢰를 만드는 도구가 될 수 있음을 보여주는 사례입니다.
확장성 높은 디자인 시스템, 국내 사례도 필요하다면?
글로벌 SaaS 기업들은 디자인 시스템을 제품 확장의 인프라로 다룹니다.
하지만 이제 확장성은 글로벌 기업만의 과제가 아닙니다.
서비스가 성장하고, 기능이 늘어나고, 제품군이 다양해질수록 국내 서비스 역시 같은 질문에 마주하게 됩니다.
_carbondesignCarbon Design System
Spectrum, Adobe’s design system
Atlassian DesignAtlassian Design
dds__chevron-left
Lightning Design System 2
Codeit Design System
