# KRDS (대한민국 정부 디자인 시스템) — 디자인 스타일 가이드

## 기본 정보
- **ID**: krds
- **카테고리**: design-language
- **연도**: 2023
- **제작자**: 행정안전부 / 한국지능정보사회진흥원 (NIA)

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

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

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

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

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

### 색상 역할
- 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, 모션 감소 설정 시 애니메이션 비활성화

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

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

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

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

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

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

## 관련 스타일
- [carbon-design](https://ui.buildersgate.com/styles/carbon-design)
- [atlassian-design](https://ui.buildersgate.com/styles/atlassian-design)
- [material-design](https://ui.buildersgate.com/styles/material-design)
- [accessibility-first](https://ui.buildersgate.com/styles/accessibility-first)

## 참고 구현 예시 (디자인 토큰)
> 아래 토큰은 이 스타일의 참고 구현 예시입니다. 프로젝트의 브랜드 컬러·폰트에 맞게 조정하되, 위 컬러 시스템/타이포그래피 가이드의 제약 조건을 준수하세요.

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

### 헤더
- background: #FFFFFF
- textColor: #1A1A1A
- accentColor: #0050FF

### 타이포그래피
- fontFamily: Inter, 'Noto Sans KR', sans-serif
- headingWeight: 700
- bodyWeight: 400
- letterSpacing: 0em

### 스페이싱
- unit: 8px
- scale: 1

### 그림자 (Shadows)
- sm: 0 1px 3px rgba(0,0,0,0.08)
- md: 0 2px 8px rgba(0,0,0,0.10)
- lg: 0 4px 16px rgba(0,0,0,0.12)
- xl: 0 8px 24px rgba(0,0,0,0.16)

### Border Radius
- none: 0
- sm: 4px
- md: 8px
- lg: 12px
- full: 9999px

### 테두리 (Borders)
- width: 1px
- style: solid
- color: #CCCCCC

### 이펙트
- blur: 0px
- opacity: 1
- transition: all 0.2s ease

### 애니메이션
- duration: 200ms
- easing: ease

### 컴포넌트 토큰
- 버튼: shape=rounded / hoverEffect=darken / textTransform=none
- 카드: style=outlined / hoverEffect=shadow
- 인풋: style=outlined / focusEffect=border
- 배지: shape=rounded / style=solid
- 아이콘: package=lucide / strokeWidth=2 / defaultSize=24

### 레이아웃
- containerStyle: boxed
- sectionSpacing: normal

### 특수 효과
- glassmorphism: false
- gradientText: false
- animatedBackground: false
- scanlines: false
- noise: false

## 자주 묻는 질문 (FAQ)

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

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

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

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

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

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

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

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

## API 엔드포인트
- 스타일 상세: https://ui.buildersgate.com/api/styles?id=krds
- 디자인 토큰: https://ui.buildersgate.com/api/themes?id=krds&merged=true

이 페이지 주소를 AI에게 보여주고 "디자인 시스템 문서를 만들어줘"라고 해보세요.

← 홈으로 돌아가기

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

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

연도

2023

제작자

행정안전부 / 한국지능정보사회진흥원 (NIA)

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

#0050FF

핵심 원칙

1

Accessibility First — 모든 국민이 동등하게 접근 가능한 디자인

2

Consistency — 범정부 웹사이트의 통일된 사용자 경험

3

Transparency — 공공 정보를 명확하고 신뢰감 있게 전달

주요 특징

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

장단점

장점

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

단점 / 한계

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

적합한 사용처

사용 사례

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

이런 프로젝트에 추천

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

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

실제 사용 예시

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

UI 컴포넌트 예제

이 디자인 스타일의 특징을 반영한 실제 UI 컴포넌트들입니다.

KRDS Buttons

채운 스타일(강조), 윤곽선 스타일(기본), 텍스트 스타일(낮은 강조) 3단계 위계

KRDS 색상 시스템

정부 청색·적색·회색 기반 — 매직넘버로 WCAG AA 대비 보장

Primary (정부 청색)

Gray (정부 회색 / Blue-Gray)

System Colors

Danger
Warning
Success
Info

매직넘버 40(3:1) · 50(4.5:1) · 70(7:1) · 90(15:1) — 명도 대비 자동 충족

KRDS 리스트 & 카드

공공 서비스 정보 표시를 위한 리스트 셀과 카드 패턴

📋

민원 접수 현황

처리 중 3건

진행
📄

증명서 발급

주민등록등본

완료
🔔

알림 설정

처리완료 알림 ON

설정

KRDS 배지 & 시스템 상태

빠른 인지와 탐색을 위한 배지 — 분류·상태·메타데이터 표시

신규처리중대기긴급완료
⛔

시스템 점검 안내

3월 28일 02:00~06:00 서비스가 중단됩니다.

⚠️

인증서 만료 예정

공동인증서가 7일 후 만료됩니다.

✅

처리 완료

요청하신 주민등록등본이 발급되었습니다.

ℹ️

안내

정부24 모바일 앱에서도 이용 가능합니다.

KRDS 인풋 필드

윤곽선(outlined) 기본 스타일 — 포커스 시 Primary 컬러 링 표시

KRDS 타이포그래피

Pretendard GOV 기반 — 본문 17px, 줄간격 150% 이상, rem 단위 반응형

Display (32px / Bold 700)

디지털 정부 서비스

Heading 1 (24px / Bold 700)

일관된 사용자 경험

Heading 2 (20px / Bold 700)

접근성과 사용성 보장

Body (17px / Regular 400)

KRDS(범정부 디자인 시스템)는 대한민국 디지털 정부 서비스의 편의성, 일관성, 접근성을 보장하기 위해 설계되었습니다. Pretendard GOV 서체와 매직넘버 기반 접근성 시스템을 사용합니다.

Caption (13px / Regular 400)

디지털플랫폼정부위원회 · 2025 · Pretendard GOV · WCAG AA

KRDS 엘리베이션 & 표면

기본 모드 — gray10 → gray0 → gray5 → gray0 레이어 쌓기 패턴

elevation -1

gray-10

elevation 0

gray-0

elevation +1

gray-5

elevation +2

gray-0

자주 묻는 질문

KRDS (대한민국 정부 디자인 시스템)이란 무엇인가요?
대한민국 범정부 차원의 공공 웹 디자인 시스템으로, 접근성(KWCAG 2.2 AA 이상)을 최우선으로 한 표준화된 UI 컴포넌트, 8px 그리드, 고대비 컬러 시스템을 제공합니다. 모든 정부 웹사이트와 공공 서비스의 일관된 사용자 경험을 보장합니다. 2023년 행정안전부와 NIA가 범정부 차원의 디지털 정부 혁신 전략의 일환으로 KRDS를 공개했습니다. 흩어져 있던 각 부처별 디자인 가이드를 통합하고, 국제 접근성 표준(WCAG 2.2)과 한국 웹접근성 표준(KWCAG)을 동시에 충족하는 컴포넌트 라이브러리를 제공합니다.
KRDS (대한민국 정부 디자인 시스템)의 핵심 디자인 원칙은 무엇인가요?
KRDS (대한민국 정부 디자인 시스템)의 핵심 원칙은 Accessibility First — 모든 국민이 동등하게 접근 가능한 디자인, Consistency — 범정부 웹사이트의 통일된 사용자 경험, Transparency — 공공 정보를 명확하고 신뢰감 있게 전달입니다.
KRDS (대한민국 정부 디자인 시스템)은 어떤 프로젝트에 적합한가요?
KRDS (대한민국 정부 디자인 시스템)은 범정부 행정 웹사이트, 공공 서비스 포털 (정부24 등), 지자체 / 공공기관 웹사이트, 공공 데이터 시각화 대시보드, 전자민원 시스템, 정부·공공기관 웹사이트 구축, 접근성이 법적 요구사항인 서비스, 고령자·장애인 대상 디지털 서비스, 정보 전달 중심의 공공 포털 사이트 등의 프로젝트에 적합합니다.
KRDS (대한민국 정부 디자인 시스템)의 장단점은 무엇인가요?
장점으로는 KWCAG 2.2 AA 접근성 기준을 컴포넌트 레벨에서 보장, 범정부 표준으로 정부 프로젝트 수주 시 즉시 적용 가능, Figma UI Kit 및 프론트엔드 코드 공개, 8px 그리드로 정보 밀도 높은 공공 서비스에 최적화, 고령자·장애인 등 디지털 취약계층까지 고려한 설계이 있습니다. 단점으로는 보수적 디자인으로 트렌디한 상업 서비스에는 부적합, 정부 가이드라인 준수 시 디자인 자유도 제한, 민간 서비스 대비 컴포넌트 종류가 제한적이 있습니다.
KRDS (대한민국 정부 디자인 시스템)에서 색상은 어떻게 사용하나요?
고대비 시맨틱 컬러 토큰 시스템으로, 공공 서비스의 신뢰감과 접근성을 동시에 충족하는 블루 중심 팔레트 색상 역할은 primary: Government Blue (#0050FF) — 공식적이고 신뢰감 있는 핵심 색상, background: White(#FFFFFF) / Light Gray(#F5F5F5) 배경, text: #1A1A1A(본문), #666666(보조), #999999(비활성)입니다. 주의사항: 모든 텍스트-배경 조합에서 4.5:1 이상 명도 대비 필수, 색상만으로 정보를 전달하지 않음 — 아이콘, 텍스트, 패턴을 병행.
KRDS (대한민국 정부 디자인 시스템)에 어울리는 폰트 스타일은 무엇인가요?
KRDS (대한민국 정부 디자인 시스템)에는 Pretendard — 가독성과 공식적 톤을 겸비한 산세리프 폰트가 적합합니다. 최대 1개 폰트 패밀리 사용을 권장합니다. 제약 사항: 본문 최소 16px — 고령자 가독성 보장, 행간(line-height) 1.6 이상 — 긴 텍스트 읽기 편안함.
KRDS (대한민국 정부 디자인 시스템) 디자인에서 하면 안 되는 것은 무엇인가요?
KRDS (대한민국 정부 디자인 시스템)에서 피해야 할 것: 색상만으로 상태나 의미를 구분 금지 — 반드시 텍스트/아이콘 병행, 포커스 인디케이터를 숨기거나 제거 금지, 자동 재생 미디어 또는 시간 제한 콘텐츠 금지 (일시정지 제공 필수), CAPTCHA 등 접근 불가능한 보안 요소 단독 사용 금지.
KRDS (대한민국 정부 디자인 시스템)을 사용하는 실제 서비스나 제품은 무엇이 있나요?
KRDS (대한민국 정부 디자인 시스템)을 적용한 대표적인 제품·서비스로는 정부24 (gov.kr), 국민건강보험공단, 국세청 홈택스, 고용노동부 워크넷, 행정안전부 공식 사이트 등이 있습니다.

관련 스타일 탐색

Carbon Design System

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

Atlassian Design System

아틀라시안의 제품군에 사용되는 디자인 시스템입니다.

Material Design

구글이 만든 디자인 시스템으로, 물리적 재료와 조명의 은유를 사용합니다.

Accessibility-First Design

모든 사용자가 접근 가능한 포용적 디자인을 우선합니다.