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

> 대한민국 범정부 차원의 공공 웹 디자인 시스템으로, 접근성(KWCAG 2.2 AA 이상)을 최우선으로 한 표준화된 UI 컴포넌트, 8px 그리드, 고대비 컬러 시스템을 제공합니다. 모든 정부 웹사이트와 공공 서비스의 일관된 사용자 경험을 보장합니다.

- 층: 레퍼런스 (디자인 언어)
- ID: krds
- 연도: 2023
- 제작자: 행정안전부 / 한국지능정보사회진흥원 (NIA)
- 무드 태그: 신뢰감, 미니멀
- 출처: 빌더스게이트 디자인 피팅룸 — https://ui.buildersgate.com/styles/krds

## 정의

대한민국 범정부 차원의 공공 웹 디자인 시스템으로, 접근성(KWCAG 2.2 AA 이상)을 최우선으로 한 표준화된 UI 컴포넌트, 8px 그리드, 고대비 컬러 시스템을 제공합니다. 모든 정부 웹사이트와 공공 서비스의 일관된 사용자 경험을 보장합니다.

## 역사·배경

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

## 주요 특징

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

## 핵심 원칙

- Accessibility First — 모든 국민이 동등하게 접근 가능한 디자인
- Consistency — 범정부 웹사이트의 통일된 사용자 경험
- Transparency — 공공 정보를 명확하고 신뢰감 있게 전달

## 컬러 시스템

고대비 시맨틱 컬러 토큰 시스템으로, 공공 서비스의 신뢰감과 접근성을 동시에 충족하는 블루 중심 팔레트

### 색상 역할

- primary: Government Blue (#0050FF) — 공식적이고 신뢰감 있는 핵심 색상
- background: White(#FFFFFF) / Light Gray(#F5F5F5) 배경
- text: #1A1A1A(본문), #666666(보조), #999999(비활성)
- semantic: Success(#0B7B3E), Warning(#D4760A), Error(#D92525), Info(#0050FF)
- focus: #0050FF 2px outline — 키보드 포커스 인디케이터

### 색상 제약

- 모든 텍스트-배경 조합에서 4.5:1 이상 명도 대비 필수
- 색상만으로 정보를 전달하지 않음 — 아이콘, 텍스트, 패턴을 병행
- 비활성(disabled) 상태도 3:1 이상 대비 유지
- 고대비 모드에서 border 색상 강화

### 다크모드 전략

공공 서비스 특성상 라이트 모드를 기본으로 하되, 시스템 설정 연동 다크 모드를 선택적으로 제공

### 대비 요구사항

KWCAG 2.2 AA (4.5:1 본문, 3:1 대형 텍스트·UI 컴포넌트) — 고대비 모드에서 AAA(7:1) 충족

## 타이포그래피

- 폰트 성격: Pretendard — 가독성과 공식적 톤을 겸비한 산세리프
- 권장 폰트 수: 최대 1개
- 타입 스케일: 1.25 (Major Third)

### 타이포그래피 제약

- 본문 최소 16px — 고령자 가독성 보장
- 행간(line-height) 1.6 이상 — 긴 텍스트 읽기 편안함
- 텍스트 크기 200%까지 확대해도 레이아웃 깨지지 않아야 함
- 자간 조절 가능한 구조 (letter-spacing 토큰 제공)

## 설계 제약

### 하면 안 되는 것

- 색상만으로 상태나 의미를 구분 금지 — 반드시 텍스트/아이콘 병행
- 포커스 인디케이터를 숨기거나 제거 금지
- 자동 재생 미디어 또는 시간 제한 콘텐츠 금지 (일시정지 제공 필수)
- CAPTCHA 등 접근 불가능한 보안 요소 단독 사용 금지

### 반드시 포함할 것

- 모든 인터랙티브 요소에 키보드 접근 가능
- 명확한 포커스 인디케이터 (2px outline, #0050FF)
- 폼 요소에 명시적 레이블 (placeholder만으로 대체 불가)
- 에러 메시지는 해당 필드 인접 위치에 텍스트로 표시
- 8px 기반 일관된 스페이싱 시스템

### 모션 가이드

prefers-reduced-motion 미디어 쿼리 대응 필수 — 기본 200ms ease, 모션 감소 설정 시 애니메이션 비활성화

## 무드 프로파일

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

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

## 사용 사례

- 범정부 행정 웹사이트
- 공공 서비스 포털 (정부24 등)
- 지자체 / 공공기관 웹사이트
- 공공 데이터 시각화 대시보드
- 전자민원 시스템

## 추천 프로젝트 유형

- 정부·공공기관 웹사이트 구축
- 접근성이 법적 요구사항인 서비스
- 고령자·장애인 대상 디지털 서비스
- 정보 전달 중심의 공공 포털 사이트

## 장단점

### 장점

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

### 단점·한계

- 보수적 디자인으로 트렌디한 상업 서비스에는 부적합
- 정부 가이드라인 준수 시 디자인 자유도 제한
- 민간 서비스 대비 컴포넌트 종류가 제한적

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

- 정부24 (gov.kr)
- 국민건강보험공단
- 국세청 홈택스
- 고용노동부 워크넷
- 행정안전부 공식 사이트

## 접근성

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

## 자주 묻는 질문

### Q1. KRDS (대한민국 정부 디자인 시스템)이란 무엇인가요?

대한민국 범정부 차원의 공공 웹 디자인 시스템으로, 접근성(KWCAG 2.2 AA 이상)을 최우선으로 한 표준화된 UI 컴포넌트, 8px 그리드, 고대비 컬러 시스템을 제공합니다. 모든 정부 웹사이트와 공공 서비스의 일관된 사용자 경험을 보장합니다. 2023년 행정안전부와 NIA가 범정부 차원의 디지털 정부 혁신 전략의 일환으로 KRDS를 공개했습니다. 흩어져 있던 각 부처별 디자인 가이드를 통합하고, 국제 접근성 표준(WCAG 2.2)과 한국 웹접근성 표준(KWCAG)을 동시에 충족하는 컴포넌트 라이브러리를 제공합니다.

### Q2. KRDS (대한민국 정부 디자인 시스템)의 핵심 디자인 원칙은 무엇인가요?

KRDS (대한민국 정부 디자인 시스템)의 핵심 원칙은 Accessibility First — 모든 국민이 동등하게 접근 가능한 디자인, Consistency — 범정부 웹사이트의 통일된 사용자 경험, Transparency — 공공 정보를 명확하고 신뢰감 있게 전달입니다.

### Q3. KRDS (대한민국 정부 디자인 시스템)은 어떤 프로젝트에 적합한가요?

KRDS (대한민국 정부 디자인 시스템)은 범정부 행정 웹사이트, 공공 서비스 포털 (정부24 등), 지자체 / 공공기관 웹사이트, 공공 데이터 시각화 대시보드, 전자민원 시스템, 정부·공공기관 웹사이트 구축, 접근성이 법적 요구사항인 서비스, 고령자·장애인 대상 디지털 서비스, 정보 전달 중심의 공공 포털 사이트 등의 프로젝트에 적합합니다.

### Q4. KRDS (대한민국 정부 디자인 시스템)의 장단점은 무엇인가요?

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

### Q5. KRDS (대한민국 정부 디자인 시스템)에서 색상은 어떻게 사용하나요?

고대비 시맨틱 컬러 토큰 시스템으로, 공공 서비스의 신뢰감과 접근성을 동시에 충족하는 블루 중심 팔레트 색상 역할은 primary: Government Blue (#0050FF) — 공식적이고 신뢰감 있는 핵심 색상, background: White(#FFFFFF) / Light Gray(#F5F5F5) 배경, text: #1A1A1A(본문), #666666(보조), #999999(비활성)입니다. 주의사항: 모든 텍스트-배경 조합에서 4.5:1 이상 명도 대비 필수, 색상만으로 정보를 전달하지 않음 — 아이콘, 텍스트, 패턴을 병행.

### Q6. KRDS (대한민국 정부 디자인 시스템)에 어울리는 폰트 스타일은 무엇인가요?

KRDS (대한민국 정부 디자인 시스템)에는 Pretendard — 가독성과 공식적 톤을 겸비한 산세리프 폰트가 적합합니다. 최대 1개 폰트 패밀리 사용을 권장합니다. 제약 사항: 본문 최소 16px — 고령자 가독성 보장, 행간(line-height) 1.6 이상 — 긴 텍스트 읽기 편안함.

### Q7. KRDS (대한민국 정부 디자인 시스템) 디자인에서 하면 안 되는 것은 무엇인가요?

KRDS (대한민국 정부 디자인 시스템)에서 피해야 할 것: 색상만으로 상태나 의미를 구분 금지 — 반드시 텍스트/아이콘 병행, 포커스 인디케이터를 숨기거나 제거 금지, 자동 재생 미디어 또는 시간 제한 콘텐츠 금지 (일시정지 제공 필수), CAPTCHA 등 접근 불가능한 보안 요소 단독 사용 금지.

### Q8. KRDS (대한민국 정부 디자인 시스템)을 사용하는 실제 서비스나 제품은 무엇이 있나요?

KRDS (대한민국 정부 디자인 시스템)을 적용한 대표적인 제품·서비스로는 정부24 (gov.kr), 국민건강보험공단, 국세청 홈택스, 고용노동부 워크넷, 행정안전부 공식 사이트 등이 있습니다.

## 참고 디자인 토큰

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

### 색상

- primary: #0050FF
- secondary: #E8F0FE
- accent: #0050FF
- background: #F5F5F5
- surface: #FFFFFF
- text: #1A1A1A
- textSecondary: #666666
- border: #CCCCCC

### 타이포그래피

- fontFamily: Inter, 'Noto Sans KR', sans-serif
- headingWeight: 700
- bodyWeight: 400
- letterSpacing: 0em

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

- spacing: unit 8px × scale 1
- borderRadius: sm 4px / md 8px / lg 12px / full 9999px
- shadow sm: 0 1px 3px rgba(0,0,0,0.08)
- shadow md: 0 2px 8px rgba(0,0,0,0.10)
- shadow lg: 0 4px 16px rgba(0,0,0,0.12)
- border: 1px solid #CCCCCC

### 컴포넌트 형태

- button: rounded / hover darken / text none
- card: outlined / hover shadow
- input: outlined / focus border
- badge: rounded / solid
- icon: lucide / stroke 2 / size 24px
- layout: boxed / section normal
- animation: 200ms ease

## 관련 링크

### 관련 스타일

- [Carbon Design System](https://ui.buildersgate.com/styles/carbon-design)
- [Atlassian Design System](https://ui.buildersgate.com/styles/atlassian-design)
- [Material Design](https://ui.buildersgate.com/styles/material-design)
- [Accessibility-First Design](https://ui.buildersgate.com/styles/accessibility-first)

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

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

### 비교

- [KRDS (대한민국 정부 디자인 시스템) vs Atlassian Design System](https://ui.buildersgate.com/compare/atlassian-design-vs-krds)
- [KRDS (대한민국 정부 디자인 시스템) vs Carbon Design System](https://ui.buildersgate.com/compare/carbon-design-vs-krds)
- [KRDS (대한민국 정부 디자인 시스템) vs Material Design](https://ui.buildersgate.com/compare/krds-vs-material-design)

### 쓰임새별 추천

- [기업·공공 사이트](https://ui.buildersgate.com/for/corporate-public)

---

HTML 버전: https://ui.buildersgate.com/styles/krds

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