# Carbon Design System

> IBM의 오픈소스 디자인 시스템으로, 엔터프라이즈 제품에 최적화되어 있습니다.

- 층: 레퍼런스 (디자인 언어)
- ID: carbon-design
- 연도: 2017
- 제작자: IBM
- 무드 태그: 미니멀, 신뢰감
- 출처: 빌더스게이트 디자인 피팅룸 — https://ui.buildersgate.com/styles/carbon-design

## 정의

IBM의 오픈소스 디자인 시스템으로, 엔터프라이즈 제품에 최적화되어 있습니다.

## 역사·배경

2017년 IBM이 자사 제품군의 통일성을 위해 오픈소스로 공개. IBM Plex 폰트와 함께 '엔터프라이즈 오픈소스 디자인 시스템'의 대표 사례.

## 주요 특징

- 그리드 기반 레이아웃
- 체계적인 타이포그래피
- 접근성 우선
- 일관된 컴포넌트 라이브러리
- 다크/라이트 테마 지원

## 핵심 원칙

- 명확하고 직관적
- 접근 가능하고 포용적
- 일관되고 예측 가능

## 컬러 시스템

White/Gray10/Gray90/Gray100 4가지 테마 기반. 모두 회색-파랑 계열의 절제된 팔레트

### 색상 역할

- interactive: 버튼, 링크, 포커스 — IBM Blue (#0F62FE)
- ui-background: 페이지 배경 (테마에 따라 #fff, #f4f4f4, #262626, #161616)
- ui-01/02: 컴포넌트 배경 — 테마에 따라 2단계
- text-01/02/03/04: 텍스트 계층 4단계
- support-error/warning/success/info: 상태 색상 4종

### 색상 제약

- IBM Blue 계열 외 primary 색상 사용 금지
- 4가지 공식 테마 중 하나 선택 — 임의 테마 생성 지양
- 상태 색상(error/warning 등)을 장식 목적으로 사용 금지

### 다크모드 전략

Gray90 또는 Gray100 테마로 전환. 동일한 token 이름 사용, 값만 교체

### 대비 요구사항

WCAG 2.1 AA 전면 준수. 모든 테마에서 텍스트-배경 4.5:1 이상

## 타이포그래피

- 폰트 성격: IBM Plex Sans — 기술적이고 전문적이며 가독성 높은 산세리프. 고정폭 코드에는 IBM Plex Mono
- 권장 폰트 수: 최대 2개
- 타입 스케일: Carbon Type Scale 고정 (4px 기반 수학적 스케일)

### 타이포그래피 제약

- IBM Plex 계열만 사용 권장 (Plex Sans, Plex Mono, Plex Serif)
- 14단계 Type Scale 준수 (12/14/16/18/20/24/28/32/36/42/48/54/60/68px)
- Productive vs Expressive 두 모드 구분 — 대시보드는 Productive(촘촘), 마케팅은 Expressive(여유)

## 설계 제약

### 하면 안 되는 것

- 8px 그리드 벗어난 spacing 사용 금지
- IBM Blue 외 강조색 추가 금지
- 장식적 그라데이션·그림자 사용 금지 — 완전 플랫

### 반드시 포함할 것

- 8px 기반 spacing 시스템 철저 준수
- Focus indicator — 키보드 포커스 시 2px 파란 외곽선 필수
- 데이터 테이블·폼 등 복잡한 컴포넌트는 반드시 Carbon 컴포넌트 사용

### 모션 가이드

Productive 모션: 100~200ms, Linear. Expressive 모션: 200~400ms, ease-in-out. 불필요한 애니메이션 배제 — 기능 중심.

## 무드 프로파일

4축 각각 −2 ~ +2 정수. 취향 테스트(/fit)와 비교 페이지가 같은 좌표를 쓴다.

- 밀도: -1 (여백 −2 ↔ +2 빽빽)
- 온도감: -2 (차가움 −2 ↔ +2 따뜻함)
- 시대감: 0 (레트로 −2 ↔ +2 미래적)
- 격식: +1 (자유분방 −2 ↔ +2 격식)

## 사용 사례

- 엔터프라이즈 SaaS
- 데이터 분석 대시보드
- IBM 클라우드 제품
- 내부 관리자 도구

## 추천 프로젝트 유형

- 엔터프라이즈 SaaS
- B2B 제품
- 관리자 대시보드
- IBM 생태계 서비스

## 장단점

### 장점

- WCAG 2.1 AA 완전 준수
- 오픈소스로 자유롭게 사용 가능
- 8px 그리드 기반의 철저한 수학적 레이아웃
- 화이트·그레이·블랙·g10 등 다양한 테마 공식 제공

### 단점·한계

- 기업/테크 이미지가 강해 소비자 앱엔 어울리지 않음
- 높은 학습 곡선
- 비교적 보수적인 시각 스타일

## 실제 사용 제품·서비스

- IBM Cloud
- Watson
- IBM Cognos Analytics

## 접근성

WCAG 2.1 AA 기준 전면 준수. 키보드 내비게이션, 스크린 리더, 고대비 모드 모두 검증.

## 자주 묻는 질문

### Q1. Carbon Design System이란 무엇인가요?

IBM의 오픈소스 디자인 시스템으로, 엔터프라이즈 제품에 최적화되어 있습니다. 2017년 IBM이 자사 제품군의 통일성을 위해 오픈소스로 공개. IBM Plex 폰트와 함께 '엔터프라이즈 오픈소스 디자인 시스템'의 대표 사례.

### Q2. Carbon Design System의 핵심 디자인 원칙은 무엇인가요?

Carbon Design System의 핵심 원칙은 명확하고 직관적, 접근 가능하고 포용적, 일관되고 예측 가능입니다.

### Q3. Carbon Design System은 어떤 프로젝트에 적합한가요?

Carbon Design System은 엔터프라이즈 SaaS, 데이터 분석 대시보드, IBM 클라우드 제품, 내부 관리자 도구, 엔터프라이즈 SaaS, B2B 제품, 관리자 대시보드, IBM 생태계 서비스 등의 프로젝트에 적합합니다.

### Q4. Carbon Design System의 장단점은 무엇인가요?

장점으로는 WCAG 2.1 AA 완전 준수, 오픈소스로 자유롭게 사용 가능, 8px 그리드 기반의 철저한 수학적 레이아웃, 화이트·그레이·블랙·g10 등 다양한 테마 공식 제공이 있습니다. 단점으로는 기업/테크 이미지가 강해 소비자 앱엔 어울리지 않음, 높은 학습 곡선, 비교적 보수적인 시각 스타일이 있습니다.

### Q5. Carbon Design System에서 색상은 어떻게 사용하나요?

White/Gray10/Gray90/Gray100 4가지 테마 기반. 모두 회색-파랑 계열의 절제된 팔레트 색상 역할은 interactive: 버튼, 링크, 포커스 — IBM Blue (#0F62FE), ui-background: 페이지 배경 (테마에 따라 #fff, #f4f4f4, #262626, #161616), ui-01/02: 컴포넌트 배경 — 테마에 따라 2단계입니다. 주의사항: IBM Blue 계열 외 primary 색상 사용 금지, 4가지 공식 테마 중 하나 선택 — 임의 테마 생성 지양.

### Q6. Carbon Design System에 어울리는 폰트 스타일은 무엇인가요?

Carbon Design System에는 IBM Plex Sans — 기술적이고 전문적이며 가독성 높은 산세리프. 고정폭 코드에는 IBM Plex Mono 폰트가 적합합니다. 최대 2개 폰트 패밀리 사용을 권장합니다. 제약 사항: IBM Plex 계열만 사용 권장 (Plex Sans, Plex Mono, Plex Serif), 14단계 Type Scale 준수 (12/14/16/18/20/24/28/32/36/42/48/54/60/68px).

### Q7. Carbon Design System 디자인에서 하면 안 되는 것은 무엇인가요?

Carbon Design System에서 피해야 할 것: 8px 그리드 벗어난 spacing 사용 금지, IBM Blue 외 강조색 추가 금지, 장식적 그라데이션·그림자 사용 금지 — 완전 플랫.

### Q8. Carbon Design System을 사용하는 실제 서비스나 제품은 무엇이 있나요?

Carbon Design System을 적용한 대표적인 제품·서비스로는 IBM Cloud, Watson, IBM Cognos Analytics 등이 있습니다.

## 참고 디자인 토큰

> 아래 토큰은 이 스타일의 참고 구현 예시다. 프로젝트의 브랜드 컬러·폰트에 맞게 조정하되, 위 컬러 시스템·타이포그래피·설계 제약은 지킨다.

### 색상

- primary: #0F62FE
- secondary: #393939
- accent: #42BE65
- background: #161616
- surface: #262626
- text: #F4F4F4
- textSecondary: #C6C6C6
- border: #393939

### 타이포그래피

- fontFamily: IBM Plex Sans, 'Noto Sans KR', sans-serif
- headingWeight: 600
- bodyWeight: 400
- letterSpacing: 0em

### 간격·반경·그림자·테두리

- spacing: unit 8px × scale 1
- borderRadius: sm 0 / md 0 / lg 0 / full 9999px
- shadow sm: 0 2px 6px rgba(0,0,0,0.3)
- shadow md: 0 4px 8px rgba(0,0,0,0.3)
- shadow lg: 0 8px 16px rgba(0,0,0,0.3)
- border: 1px solid #393939

### 컴포넌트 형태

- button: square / hover darken / text none
- card: flat / hover border
- input: outlined / focus border
- badge: rounded / solid
- icon: tabler / stroke 1.5 / size 20px
- layout: boxed / section compact
- animation: 110ms cubic-bezier(0.2, 0, 0.38, 0.9)

## 관련 링크

### 관련 스타일

- [Material Design](https://ui.buildersgate.com/styles/material-design)
- [Ant Design](https://ui.buildersgate.com/styles/ant-design)
- [Atlassian Design System](https://ui.buildersgate.com/styles/atlassian-design)

### 데모 (같은 화면, 이 스타일로)

- [브랜드 랜딩 데모](https://ui.buildersgate.com/demo/brand/carbon-design)
- [SaaS 대시보드 데모](https://ui.buildersgate.com/demo/saas/carbon-design)
- [커머스 데모](https://ui.buildersgate.com/demo/commerce/carbon-design)

### 비교

- [Carbon Design System vs Ant Design](https://ui.buildersgate.com/compare/ant-design-vs-carbon-design)
- [Carbon Design System vs Astryx (Meta 디자인 시스템)](https://ui.buildersgate.com/compare/astryx-vs-carbon-design)
- [Carbon Design System vs Atlassian Design System](https://ui.buildersgate.com/compare/atlassian-design-vs-carbon-design)
- [Carbon Design System vs KRDS (대한민국 정부 디자인 시스템)](https://ui.buildersgate.com/compare/carbon-design-vs-krds)
- [Carbon Design System vs Material Design](https://ui.buildersgate.com/compare/carbon-design-vs-material-design)
- [Carbon Design System vs Shopify Polaris](https://ui.buildersgate.com/compare/carbon-design-vs-shopify-polaris)
- [Carbon Design System vs Wanted Design System (Montage)](https://ui.buildersgate.com/compare/carbon-design-vs-wanted-montage)

### 쓰임새별 추천

- [SaaS 대시보드](https://ui.buildersgate.com/for/saas-dashboard)
- [핀테크·금융 서비스](https://ui.buildersgate.com/for/fintech)
- [기업·공공 사이트](https://ui.buildersgate.com/for/corporate-public)

---

HTML 버전: https://ui.buildersgate.com/styles/carbon-design

이 문서는 https://ui.buildersgate.com/styles/carbon-design.md 로 제공됩니다. 전체 목록은 https://ui.buildersgate.com/llms.txt 를 참고하세요.