IBM 카본 디자인 시스템 (IBM Carbon Design System)- 오픈소스 디자인 시스템
1. 개요 및 철학 Carbon Design System은 IBM이 개발하고 사용하는 오픈소스 디자인 시스템으로, 사용자 중심의 인터페이스를 일관되게 설계하고 구현하기 위한 체계적 가이드입니다. Carbon은 IBM의 다양한 제품군 전반에서 시각적 일관성과 접근성을 보장하기 위해 만들어졌으며, 사용성과 확장성, 접근성(accessibility)을 최우선으로 고려한 시스템입니다. Carbon은 단순히 UI 컴포넌트의 집합이 아니라, 디자인 원칙, 가이드라인, 토큰 시스템, 코드 구현, 접근성 정책 등을 모두 포함하는 디자인 생태계입니다. Carbon의 핵심 철학은 다음 세 가지에 기반합니다: - 모듈성과 확장성(Modular & Scalable): 다양한 제품에 적용 가능하도록 유연하게 설계됨. - 접근성 우선(Accessibility first): WCAG 2.1 AA 기준 이상을 기본으로 설계. - 오픈 협업(Open Collaboration): 오픈소스로 공개되어 외부 기여도 가능. 2. 아키텍처 구성 Carbon Design System은 크게 다음과 같은 핵심 구성 요소로 이루어져 있습니다. 2.1. Design Tokens 디자인 토큰은 색상, 타이포그래피, 간격, 그림자 등의 디자인 결정값을 추상화한 변수들입니다. 이를 통해 일관된 테마와 스케일 조정이 가능해집니다. 2.2. Component Library Carbon은 React 기반의 UI 컴포넌트들을 중심으로 하며, Vue, Angular, Web Components 버전도 지원합니다. 주요 컴포넌트로는 다음이 있습니다: - Form Elements: Text Input, Dropdown, Checkbox 등 - Navigation: Side Nav, Tabs, Breadcrumb - Data Visual...