Carbon Design System vs KRDS (대한민국 정부 디자인 시스템)

커피 구독 브랜드 LUMA 의 같은 랜딩 한 페이지를 두 스타일 규칙으로 각각 다시 지어 나란히 놓았습니다. 콘텐츠는 같고, 규칙만 다릅니다.

같은 씬, 두 벌

Carbon Design System상세 보기 →크게 보기 →
KRDS (대한민국 정부 디자인 시스템)상세 보기 →크게 보기 →

무드 대비

4축 좌표(-2 ~ +2)를 같은 눈금 위에 겹쳐 놓았습니다. 축은 정규화하지 않습니다 — 두 점이 붙어 있으면 실제로 가까운 것입니다.

Carbon Design SystemKRDS (대한민국 정부 디자인 시스템)축 범위 −2 ~ +2 고정

무드 4축 수치(−2에서 +2 사이): 밀도 — Carbon Design System -1, KRDS (대한민국 정부 디자인 시스템) -1. 온도감 — Carbon Design System -2, KRDS (대한민국 정부 디자인 시스템) -1. 시대감 — Carbon Design System 0, KRDS (대한민국 정부 디자인 시스템) 0. 격식 — Carbon Design System 1, KRDS (대한민국 정부 디자인 시스템) 2.

나란히 놓고 보기

Carbon Design System

YEAR
2017
BY
IBM
MOOD
미니멀 · 신뢰감

KRDS (대한민국 정부 디자인 시스템)

YEAR
2023
BY
행정안전부 / 한국지능정보사회진흥원 (NIA)
MOOD
신뢰감 · 미니멀

주요 특징

Carbon Design System

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

KRDS (대한민국 정부 디자인 시스템)

  • KWCAG 2.2 AA 이상 접근성 준수
  • 8px 기반 그리드 시스템
  • 고대비 시맨틱 컬러 토큰
  • 표준화된 공공 서비스 UI 패턴
  • Pretendard 기반 타이포그래피

장점과 한계

Carbon Design System

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

KRDS (대한민국 정부 디자인 시스템)

장점
  • KWCAG 2.2 AA 접근성 기준을 컴포넌트 레벨에서 보장
  • 범정부 표준으로 정부 프로젝트 수주 시 즉시 적용 가능
  • Figma UI Kit 및 프론트엔드 코드 공개
  • 8px 그리드로 정보 밀도 높은 공공 서비스에 최적화
  • 고령자·장애인 등 디지털 취약계층까지 고려한 설계
한계
  • 보수적 디자인으로 트렌디한 상업 서비스에는 부적합
  • 정부 가이드라인 준수 시 디자인 자유도 제한
  • 민간 서비스 대비 컴포넌트 종류가 제한적

역사와 배경

Carbon Design System

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

KRDS (대한민국 정부 디자인 시스템)

2023년 행정안전부와 NIA가 범정부 차원의 디지털 정부 혁신 전략의 일환으로 KRDS를 공개했습니다. 흩어져 있던 각 부처별 디자인 가이드를 통합하고, 국제 접근성 표준(WCAG 2.2)과 한국 웹접근성 표준(KWCAG)을 동시에 충족하는 컴포넌트 라이브러리를 제공합니다.

접근성

Carbon Design System

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

KRDS (대한민국 정부 디자인 시스템)

KWCAG 2.2 AA 이상을 모든 컴포넌트에서 기본 충족하며, 키보드 전용 탐색, 스크린 리더 호환, 고대비 모드, 텍스트 크기 조절(200%까지), 포커스 인디케이터 강화, 색상 외 시각 단서 병행 사용을 컴포넌트 레벨에서 보장합니다.

자주 묻는 질문

Carbon Design System vs KRDS (대한민국 정부 디자인 시스템), 무엇이 다른가요?

Carbon Design System — IBM의 오픈소스 디자인 시스템으로, 엔터프라이즈 제품에 최적화되어 있습니다. KRDS (대한민국 정부 디자인 시스템) — 대한민국 범정부 차원의 공공 웹 디자인 시스템으로, 접근성(KWCAG 2.2 AA 이상)을 최우선으로 한 표준화된 UI 컴포넌트, 8px 그리드, 고대비 컬러 시스템을 제공합니다. 모든 정부 웹사이트와 공공 서비스의 일관된 사용자 경험을 보장합니다. 무드 좌표에서 가장 벌어지는 축은 온도감입니다 — 둘 다 차가움 쪽이지만 Carbon Design System 쪽이 한층 더 멀리 갑니다.

언제 Carbon Design System 쪽, 언제 KRDS (대한민국 정부 디자인 시스템) 쪽을 골라야 하나요?

엔터프라이즈 SaaS · B2B 제품 · 관리자 대시보드 같은 화면이라면 Carbon Design System 쪽이 오래 버팁니다. 반대로 정부·공공기관 웹사이트 구축 · 접근성이 법적 요구사항인 서비스 · 고령자·장애인 대상 디지털 서비스 쪽 그림이라면 KRDS (대한민국 정부 디자인 시스템) 쪽으로 기웁니다. 둘 다 걸린다면 같은 씬을 입힌 두 데모를 나란히 보고 결정하는 편이 빠릅니다.

Carbon Design System vs KRDS (대한민국 정부 디자인 시스템), 장단점은 어떻게 갈리나요?

Carbon Design System 쪽 — 강점은 WCAG 2.1 AA 완전 준수 · 오픈소스로 자유롭게 사용 가능, 짚고 갈 한계는 기업/테크 이미지가 강해 소비자 앱엔 어울리지 않음 · 높은 학습 곡선입니다. KRDS (대한민국 정부 디자인 시스템) 쪽 — 강점은 KWCAG 2.2 AA 접근성 기준을 컴포넌트 레벨에서 보장 · 범정부 표준으로 정부 프로젝트 수주 시 즉시 적용 가능, 짚고 갈 한계는 보수적 디자인으로 트렌디한 상업 서비스에는 부적합 · 정부 가이드라인 준수 시 디자인 자유도 제한입니다.

이어서 볼 비교