Carbon Design System (IBM)
TL;DR
- Carbon Design System (IBM)의 핵심 개념과 사용 범위를 한눈에 정리
- 등장 배경과 필요한 이유를 짚고 실무 적용 포인트를 연결
- 주요 특징과 체크리스트를 빠르게 확인
1. 개념
``` Carbon Design System
2. 배경
Carbon Design System (IBM)이(가) 등장한 배경과 기존 한계를 정리한다.
3. 이유
이 주제를 이해하고 적용해야 하는 이유를 정리한다.
4. 특징
- 이름의 의미
- 2010년대 초반 IBM의 문제
- IBM의 디자인 혁신 선언 (2012)
- Carbon의 탄생 (2017)
- 정의
5. 상세 내용
작성일: 2026-01-30 카테고리: Frontend / Design System / UI 포함 내용: Carbon, IBM, 디자인 토큰, 접근성, React 컴포넌트, Figma, 디자이너-개발자 협업
1. Carbon Design System이란?
이름의 의미
Carbon Design System
Carbon = 탄소
└── 모든 유기물의 기본 원소
└── "모든 IBM 제품의 기본이 되겠다"는 의미
└── 주기율표에서 6번 원소 (안정적, 기본적)
Design System = 디자인 시스템
└── 일관된 UI/UX를 위한 규칙 + 컴포넌트 + 가이드라인
정체: IBM이 만든 오픈소스 디자인 시스템
창시: IBM Design 팀
첫 릴리스: 2017년
라이선스: Apache 2.0 (무료, 상업적 사용 가능)
2. 등장 배경: 왜 IBM이 디자인 시스템을 만들었나?
2010년대 초반 IBM의 문제
┌─────────────────────────────────────────────────────────────────┐
│ 2010년대 초반 IBM 상황 │
├─────────────────────────────────────────────────────────────────┤
│ │
│ IBM의 제품 수: 수백 개 │
│ │
│ ┌───────────┐ ┌───────────┐ ┌───────────┐ ┌───────────┐ │
│ │ IBM Cloud │ │ Watson AI │ │ Db2 │ │ WebSphere │ │
│ │ 파란 버튼 │ │ 녹색 버튼 │ │ 회색 버튼 │ │ 주황 버튼 │ │
│ │ 둥근 모서리│ │ 각진 모서리│ │ 그림자 있음│ │ 그림자 없음│ │
│ │ 16px 폰트 │ │ 14px 폰트 │ │ 12px 폰트 │ │ 18px 폰트 │ │
│ └───────────┘ └───────────┘ └───────────┘ └───────────┘ │
│ │
│ 결과: │
│ ├── 제품마다 다른 UI/UX │
│ ├── 사용자가 "이게 같은 회사 제품 맞아?" 혼란 │
│ ├── 디자이너 100명이 같은 버튼을 100가지로 디자인 │
│ ├── 개발자가 같은 버튼을 100번 다르게 구현 │
│ └── 유지보수 지옥 │
│ │
└─────────────────────────────────────────────────────────────────┘
IBM의 디자인 혁신 선언 (2012)
┌─────────────────────────────────────────────────────────────────┐
│ │
│ 2012년: IBM CEO 지니 로메티 │
│ "IBM은 디자인 회사가 될 것이다" │
│ │
│ 행동: │
│ ├── 디자이너 1,000명+ 채용 │
│ ├── IBM Design Thinking 도입 │
│ ├── 모든 제품에 디자이너 배치 │
│ └── 통합 디자인 시스템 개발 시작 │
│ │
│ ┌──────────────────────────────────────────────────────────┐ │
│ │ "좋은 디자인은 좋은 비즈니스다" │ │
│ │ - IBM Design 모토 │ │
│ └──────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────┘
Carbon의 탄생 (2017)
┌─────────────────────────────────────────────────────────────────┐
│ │
│ 2017년: Carbon Design System v1.0 공개 │
│ │
│ 목표: │
│ ├── "한 회사, 한 언어" - 모든 IBM 제품이 같은 언어로 소통 │
│ ├── 디자이너-개발자 간 소통 비용 제거 │
│ ├── 접근성(A11y)을 기본으로 내장 │
│ └── 오픈소스로 공개하여 커뮤니티와 함께 발전 │
│ │
│ 핵심 철학: │
│ ┌──────────────────────────────────────────────────────────┐ │
│ │ "Design once, use everywhere" │ │
│ │ 한 번 디자인하고, 어디서든 사용하자 │ │
│ └──────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────┘
3. 디자인 시스템이란 무엇인가?
정의
┌─────────────────────────────────────────────────────────────────┐
│ │
│ 디자인 시스템 = 스타일 가이드 + 컴포넌트 라이브러리 + 패턴 + 원칙 │
│ │
│ ┌───────────────────────────────────────────────────────────┐ │
│ │ 비유: 레고(LEGO) 블록 │ │
│ │ │ │
│ │ 레고 회사가 제공하는 것: │ │
│ │ ├── 블록들 (= 컴포넌트) │ │
│ │ ├── 색상 팔레트 (= 디자인 토큰) │ │
│ │ ├── 조립 설명서 (= 패턴/가이드라인) │ │
│ │ └── 안전 기준 (= 접근성 규칙) │ │
│ │ │ │
│ │ 사용자(디자이너/개발자)가 하는 것: │ │
│ │ └── 블록을 조합해서 원하는 것을 만듦 │ │
│ └───────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────┘
디자인 시스템 vs 컴포넌트 라이브러리 vs UI 키트
┌─────────────────────────────────────────────────────────────────┐
│ │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ 디자인 시스템 (Design System) │ │
│ │ ┌───────────────────────────────────────────────────┐ │ │
│ │ │ 컴포넌트 라이브러리 (Code) │ │ │
│ │ │ ┌─────────────────────────────────────────────┐ │ │ │
│ │ │ │ UI 키트 (Figma/Sketch) │ │ │ │
│ │ │ └─────────────────────────────────────────────┘ │ │ │
│ │ └───────────────────────────────────────────────────┘ │ │
│ └─────────────────────────────────────────────────────────┘ │
│ │
│ UI 키트: │
│ └── 디자인 도구(Figma)에서 쓰는 시각적 요소들 │
│ │
│ 컴포넌트 라이브러리: │
│ └── 코드로 구현된 UI 컴포넌트 (React, Vue 등) │
│ │
│ 디자인 시스템: │
│ └── 위 둘 + 원칙 + 가이드라인 + 접근성 + 패턴 + 거버넌스 │
│ │
│ Carbon은 "완전한 디자인 시스템" │
│ Bootstrap은 "컴포넌트 라이브러리"에 가까움 │
│ │
└─────────────────────────────────────────────────────────────────┘
4. Carbon의 구성 요소
계층 구조
┌─────────────────────────────────────────────────────────────────┐
│ Carbon Design System │
├─────────────────────────────────────────────────────────────────┤
│ │
│ Layer 1: Foundation (기초) │
│ ├── Colors (색상 팔레트) │
│ ├── Typography (IBM Plex 폰트) │
│ ├── Spacing (8px 그리드 시스템) │
│ ├── Motion (애니메이션 원칙) │
│ └── Icons (1,000개+ 아이콘) │
│ │
│ Layer 2: Components (컴포넌트) │
│ ├── Form: Button, Input, Checkbox, Dropdown, DatePicker │
│ ├── Data: DataTable, Pagination, Accordion │
│ ├── Navigation: Tabs, Breadcrumb, TreeView │
│ ├── Feedback: Modal, Notification, Toast, Loading │
│ └── 50개+ 컴포넌트 │
│ │
│ Layer 3: Patterns (패턴) │
│ ├── Form 패턴: 폼 레이아웃, 검증, 에러 처리 │
│ ├── Data Visualization: 차트, 그래프 │
│ ├── Navigation 패턴: 메뉴, 라우팅 │
│ └── Empty State: 빈 화면 처리 │
│ │
│ Layer 4: Guidelines (가이드라인) │
│ ├── Accessibility (접근성) │
│ ├── Content (콘텐츠 작성 가이드) │
│ └── Motion (애니메이션 가이드) │
│ │
└─────────────────────────────────────────────────────────────────┘
색상 시스템 (Color Tokens)
┌─────────────────────────────────────────────────────────────────┐
│ Carbon 색상 체계 │
├─────────────────────────────────────────────────────────────────┤
│ │
│ Gray Scale (10단계): │
│ ┌────┬────┬────┬────┬────┬────┬────┬────┬────┬────┐ │
│ │ 10 │ 20 │ 30 │ 40 │ 50 │ 60 │ 70 │ 80 │ 90 │100 │ │
│ │밝음│ │ │ │ │ │ │ │ │어둠│ │
│ └────┴────┴────┴────┴────┴────┴────┴────┴────┴────┘ │
│ │
│ Color Palette: │
│ ├── Blue (IBM 시그니처 컬러) │
│ ├── Cyan, Teal, Green (성공/긍정) │
│ ├── Yellow, Orange (경고) │
│ ├── Red, Magenta (에러/위험) │
│ └── Purple (브랜딩용) │
│ │
│ 테마 지원: │
│ ├── White (기본 라이트) │
│ ├── Gray 10 (라이트 변형) │
│ ├── Gray 90 (다크 모드) │
│ └── Gray 100 (완전 다크) │
│ │
│ ┌──────────────────────────────────────────────────────────┐ │
│ │ $interactive-01: #0f62fe (파란색) │ │
│ │ $ui-background: #ffffff (흰 배경) │ │
│ │ $text-primary: #161616 (검은 텍스트) │ │
│ │ │ │
│ │ → "토큰"이라 부름 (값이 아닌 역할로 명명) │ │
│ │ → 테마 바꾸면 토큰 값만 바뀌고 코드는 그대로 │ │
│ └──────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────┘
타이포그래피 (IBM Plex)
┌─────────────────────────────────────────────────────────────────┐
│ IBM Plex 폰트 │
├─────────────────────────────────────────────────────────────────┤
│ │
│ IBM Plex = IBM이 직접 만든 오픈소스 폰트 │
│ │
│ 종류: │
│ ├── IBM Plex Sans (산세리프) - 기본 │
│ ├── IBM Plex Serif (세리프) - 본문용 │
│ ├── IBM Plex Mono (모노스페이스) - 코드용 │
│ ├── IBM Plex Sans KR (한글) ← 중요! │
│ └── IBM Plex Sans JP, TC, Arabic 등 다국어 지원 │
│ │
│ 타입 스케일: │
│ ┌────────────────────────────────────────────────────────┐ │
│ │ $heading-01: 14px / 18px (작은 제목) │ │
│ │ $heading-02: 16px / 22px │ │
│ │ $heading-03: 20px / 26px │ │
│ │ $heading-04: 28px / 36px │ │
│ │ $heading-05: 32px / 40px │ │
│ │ $heading-06: 42px / 50px │ │
│ │ $heading-07: 54px / 64px (가장 큰 제목) │ │
│ │ │ │
│ │ $body-01: 14px / 20px (기본 본문) │ │
│ │ $body-02: 16px / 24px (큰 본문) │ │
│ │ $label-01: 12px / 16px (레이블) │ │
│ │ $caption-01: 12px / 16px (캡션) │ │
│ └────────────────────────────────────────────────────────┘ │
│ │
│ 왜 IBM이 자체 폰트를 만들었나? │
│ ├── 라이선스 문제 없이 전 세계 사용 │
│ ├── 기술 문서에 적합한 가독성 │
│ ├── 코드와 일반 텍스트 조화 │
│ └── 다국어 일관성 (한글 포함!) │
│ │
└─────────────────────────────────────────────────────────────────┘
간격 시스템 (Spacing)
┌─────────────────────────────────────────────────────────────────┐
│ 8px 그리드 시스템 │
├─────────────────────────────────────────────────────────────────┤
│ │
│ 기본 단위: 8px (= 0.5rem) │
│ │
│ 간격 스케일: │
│ ┌────────────────────────────────────────────────────────┐ │
│ │ $spacing-01: 2px (mini) │ │
│ │ $spacing-02: 4px (2xs) │ │
│ │ $spacing-03: 8px (xs) ← 기본 단위 │ │
│ │ $spacing-04: 12px (sm) │ │
│ │ $spacing-05: 16px (md) = 8px × 2 │ │
│ │ $spacing-06: 24px (lg) = 8px × 3 │ │
│ │ $spacing-07: 32px (xl) = 8px × 4 │ │
│ │ $spacing-08: 40px (2xl) = 8px × 5 │ │
│ │ $spacing-09: 48px (3xl) = 8px × 6 │ │
│ └────────────────────────────────────────────────────────┘ │
│ │
│ 왜 8px인가? │
│ ├── 대부분의 화면 해상도에서 깔끔하게 나눠짐 │
│ ├── 2, 4, 8, 16, 32... 이진수 계열로 계산 쉬움 │
│ ├── 시각적으로 일관된 리듬감 │
│ └── 업계 표준 (Google Material도 8px 사용) │
│ │
│ 사용 예시: │
│ ┌────────────────────────────────────────────────────────┐ │
│ │ .card { │ │
│ │ padding: $spacing-05; /* 16px */ │ │
│ │ margin-bottom: $spacing-06; /* 24px */ │ │
│ │ gap: $spacing-03; /* 8px */ │ │
│ │ } │ │
│ └────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────┘
5. 접근성 (Accessibility)
Carbon의 접근성 원칙
┌─────────────────────────────────────────────────────────────────┐
│ 접근성 = 기본값 │
├─────────────────────────────────────────────────────────────────┤
│ │
│ Carbon의 철학: "접근성은 선택이 아닌 필수" │
│ │
│ WCAG 2.1 AA 수준 준수: │
│ ├── Level A: 최소 요구사항 │
│ ├── Level AA: 표준 (Carbon이 준수) ← │
│ └── Level AAA: 최고 수준 │
│ │
│ 구체적인 적용: │
│ ┌────────────────────────────────────────────────────────┐ │
│ │ │ │
│ │ 1. 색상 대비 │ │
│ │ └── 텍스트: 최소 4.5:1 대비율 │ │
│ │ └── 큰 텍스트: 최소 3:1 대비율 │ │
│ │ └── 색맹 사용자를 위해 색상만으로 정보 전달 X │ │
│ │ │ │
│ │ 2. 키보드 네비게이션 │ │
│ │ └── 모든 컴포넌트 키보드로 조작 가능 │ │
│ │ └── Tab 순서 논리적 │ │
│ │ └── 포커스 표시 명확 │ │
│ │ │ │
│ │ 3. 스크린 리더 지원 │ │
│ │ └── ARIA 속성 기본 탑재 │ │
│ │ └── 의미론적 HTML 사용 │ │
│ │ └── 대체 텍스트 필수 │ │
│ │ │ │
│ │ 4. 모션/애니메이션 │ │
│ │ └── prefers-reduced-motion 지원 │ │
│ │ └── 깜빡임 제한 (초당 3회 이하) │ │
│ │ │ │
│ └────────────────────────────────────────────────────────┘ │
│ │
│ 왜 중요한가? │
│ ├── 법적 요구사항 (미국 ADA, 유럽 EAA) │
│ ├── 시장 확대 (전 세계 장애인 10억명+) │
│ ├── SEO 향상 (시맨틱 HTML) │
│ └── 모두에게 더 나은 UX (상황적 장애 포함) │
│ │
└─────────────────────────────────────────────────────────────────┘
6. React에서 Carbon 사용하기
설치
# Carbon React 컴포넌트
npm install @carbon/react
# Carbon 스타일
npm install @carbon/styles
# 추가 패키지 (선택)
npm install @carbon/icons-react # 아이콘
npm install @carbon/pictograms-react # 픽토그램
npm install @carbon/colors # 색상 토큰
npm install @carbon/layout # 레이아웃 유틸
기본 사용법
// App.jsx
import React from 'react';
import { Button, TextInput, DataTable, Modal } from '@carbon/react';
import { Add, TrashCan, Edit } from '@carbon/icons-react';
// 스타일 import (필수!)
import '@carbon/styles/css/styles.css';
function App() {
return (
<div>
{/* 버튼 */}
<Button kind="primary" renderIcon={Add}>
추가하기
</Button>
<Button kind="secondary">
취소
</Button>
<Button kind="danger" renderIcon={TrashCan}>
삭제
</Button>
{/* 텍스트 입력 */}
<TextInput
id="username"
labelText="사용자 이름"
placeholder="이름을 입력하세요"
helperText="영문 2-20자"
/>
</div>
);
}
테마 적용
// 테마 변경
import { GlobalTheme } from '@carbon/react';
function App() {
return (
// theme: "white" | "g10" | "g90" | "g100"
<GlobalTheme theme="g90"> {/* 다크 모드 */}
<YourApp />
</GlobalTheme>
);
}
주요 컴포넌트 예시
// DataTable - 가장 많이 사용되는 컴포넌트
import {
DataTable,
Table,
TableHead,
TableRow,
TableHeader,
TableBody,
TableCell,
TableContainer,
TableToolbar,
TableToolbarContent,
TableToolbarSearch,
} from '@carbon/react';
const headers = [
{ key: 'name', header: '이름' },
{ key: 'email', header: '이메일' },
{ key: 'status', header: '상태' },
];
const rows = [
{ id: '1', name: '홍길동', email: 'hong@example.com', status: '활성' },
{ id: '2', name: '김철수', email: 'kim@example.com', status: '비활성' },
];
function MyTable() {
return (
<DataTable rows={rows} headers={headers}>
{({ rows, headers, getTableProps, getHeaderProps, getRowProps }) => (
<TableContainer title="사용자 목록">
<TableToolbar>
<TableToolbarContent>
<TableToolbarSearch />
</TableToolbarContent>
</TableToolbar>
<Table {...getTableProps()}>
<TableHead>
<TableRow>
{headers.map(header => (
<TableHeader {...getHeaderProps({ header })}>
{header.header}
</TableHeader>
))}
</TableRow>
</TableHead>
<TableBody>
{rows.map(row => (
<TableRow {...getRowProps({ row })}>
{row.cells.map(cell => (
<TableCell key={cell.id}>{cell.value}</TableCell>
))}
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
)}
</DataTable>
);
}
7. Carbon vs 다른 디자인 시스템
┌─────────────────────────────────────────────────────────────────┐
│ 디자인 시스템 비교 │
├─────────────────────────────────────────────────────────────────┤
│ │
│ 항목 │ Carbon │ Material │ Ant Design │ Chakra │
│ ─────────────┼────────────┼────────────┼────────────┼──────── │
│ 개발사 │ IBM │ Google │ Alibaba │ 커뮤니티│
│ 타겟 │ 엔터프라이즈│ 모바일+웹 │ 엔터프라이즈│ 일반 │
│ 디자인 철학 │ 기능 중심 │ 직관적 │ 실용적 │ 개발자 │
│ 컴포넌트 수 │ 50+ │ 40+ │ 60+ │ 50+ │
│ 접근성 │ AAA급 │ AA급 │ A급 │ AA급 │
│ 다크모드 │ ✅ 4종 │ ✅ 2종 │ ✅ 2종 │ ✅ 2종 │
│ Figma 키트 │ ✅ 공식 │ ✅ 공식 │ ✅ 공식 │ ✅ 커뮤│
│ 한글 폰트 │ ✅ 공식 │ ❌ │ ❌ │ ❌ │
│ DataTable │ ⭐⭐⭐⭐⭐ │ ⭐⭐⭐ │ ⭐⭐⭐⭐⭐ │ ⭐⭐⭐ │
│ 폼 컴포넌트 │ ⭐⭐⭐⭐ │ ⭐⭐⭐⭐ │ ⭐⭐⭐⭐⭐ │ ⭐⭐⭐⭐│
│ │
│ 선택 기준: │
│ ├── 엔터프라이즈 B2B → Carbon, Ant Design │
│ ├── 모바일 앱 → Material Design │
│ ├── 빠른 개발 → Chakra UI, Ant Design │
│ ├── 접근성 필수 → Carbon (가장 엄격) │
│ └── 데이터 대시보드 → Carbon, Ant Design │
│ │
└─────────────────────────────────────────────────────────────────┘
8. 디자이너-개발자 협업
Figma와의 연동
┌─────────────────────────────────────────────────────────────────┐
│ 디자이너-개발자 워크플로우 │
├─────────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────────┐ ┌─────────────┐ ┌───────────┐ │
│ │ 디자이너 │ → │ Figma │ → │ 개발자 │ │
│ │ │ │ │ │ │ │
│ │ Carbon 키트 │ │ 시안 작성 │ │ @carbon/ │ │
│ │ 컴포넌트 │ │ (컴포넌트명 │ │ react │ │
│ │ 사용 │ │ 명시) │ │ 코드 작성 │ │
│ └─────────────┘ └─────────────┘ └───────────┘ │
│ │
│ 디자이너가 하는 일: │
│ ├── Figma Carbon Kit 설치 │
│ ├── Kit의 컴포넌트로 화면 구성 │
│ ├── 컴포넌트명과 속성 명시 (예: "Button - primary, lg") │
│ └── 간격은 Carbon spacing 토큰 사용 │
│ │
│ 개발자가 하는 일: │
│ ├── Figma에서 컴포넌트명 확인 │
│ ├── @carbon/react에서 해당 컴포넌트 import │
│ ├── props 매핑 (primary → kind="primary") │
│ └── 1:1 매칭으로 구현 (해석 불필요) │
│ │
│ ┌──────────────────────────────────────────────────────────┐ │
│ │ 핵심 장점: │ │
│ │ "디자이너: Button primary 써주세요" │ │
│ │ "개발자: <Button kind="primary" />" │ │
│ │ │ │
│ │ → 소통 비용 제로! │ │
│ │ → "이 색상 코드 뭐야?" 같은 질문 사라짐 │ │
│ └──────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────┘
Figma 리소스
┌─────────────────────────────────────────────────────────────────┐
│ Carbon Figma 리소스 │
├─────────────────────────────────────────────────────────────────┤
│ │
│ 공식 Figma 키트: │
│ └── https://www.figma.com/community/file/1132847584256871681 │
│ (Carbon Design System - White theme) │
│ │
│ 포함 내용: │
│ ├── 모든 컴포넌트 (Button, Input, Table, Modal...) │
│ ├── 아이콘 라이브러리 │
│ ├── 색상 스타일 │
│ ├── 텍스트 스타일 │
│ └── 레이아웃 그리드 │
│ │
│ 사용 방법: │
│ 1. Figma Community에서 "Duplicate" 클릭 │
│ 2. 내 프로젝트에 Library로 등록 │
│ 3. 디자인 시 Library에서 컴포넌트 드래그 │
│ │
└─────────────────────────────────────────────────────────────────┘
9. CCK 프로젝트에서의 Carbon 사용
패키지 구성
┌─────────────────────────────────────────────────────────────────┐
│ CCK 프로젝트의 Carbon 의존성 │
├─────────────────────────────────────────────────────────────────┤
│ │
│ // package.json (@cck/mold) │
│ { │
│ "dependencies": { │
│ "@carbon/colors": "11.24.0", // 색상 토큰 │
│ "@carbon/icons-react": "11.69.0", // 아이콘 │
│ "@carbon/layout": "11.24.0", // 레이아웃 유틸 │
│ "@carbon/react": "1.89.0", // React 컴포넌트 │
│ "@carbon/styles": "1.88.0", // SCSS 스타일 │
│ "@carbon/pictograms-react": "11.85.0" // 픽토그램 │
│ } │
│ } │
│ │
│ 사용 위치: │
│ ├── /common/mold/ → Carbon + Ant 래핑한 공통 컴포넌트 │
│ ├── /accio/ → 금융/회계 앱 │
│ ├── /helloworld/ → 재무제표 분석 │
│ └── 모든 프론트엔드 앱 │
│ │
└─────────────────────────────────────────────────────────────────┘
10. 정리
┌─────────────────────────────────────────────────────────────────┐
│ Carbon Design System 요약 │
├─────────────────────────────────────────────────────────────────┤
│ │
│ Carbon = IBM이 만든 오픈소스 디자인 시스템 │
│ │
│ 탄생 배경: │
│ ├── 2012년 IBM 디자인 혁신 선언 │
│ ├── 수백 개 제품의 UI 통일 필요성 │
│ ├── 디자이너-개발자 소통 비용 감소 │
│ └── 2017년 오픈소스로 공개 │
│ │
│ 핵심 특징: │
│ ├── WCAG 2.1 AA 접근성 준수 (기본 내장) │
│ ├── IBM Plex 폰트 (한글 포함) │
│ ├── 8px 그리드 시스템 │
│ ├── 디자인 토큰 (색상, 간격, 타이포그래피) │
│ ├── 50개+ React 컴포넌트 │
│ └── Figma 공식 키트 │
│ │
│ 사용 사례: │
│ ├── B2B 엔터프라이즈 애플리케이션 │
│ ├── 데이터 대시보드 │
│ ├── 관리자 콘솔 │
│ └── 접근성이 중요한 서비스 │
│ │
│ CCK에서: │
│ ├── @carbon/react 직접 사용 │
│ └── @cck/mold로 래핑하여 CCK 스타일 적용 │
│ │
└─────────────────────────────────────────────────────────────────┘
관련 키워드
Carbon, IBM, 디자인 시스템, Design System, React, 접근성, A11y, WCAG, IBM Plex, 디자인 토큰, Figma, 컴포넌트 라이브러리, 엔터프라이즈, DataTable