표본
이 스타일의 기본형
버튼·입력·배지를 이 스타일의 규칙 그대로 그린 카드입니다.
KRDS (대한민국 정부 디자인 시스템)
대한민국 범정부 차원의 공공 웹 디자인 시스템으로, 접근성(KWCAG 2.2 AA 이상)을 최우선으로 한 표준화된 UI 컴포넌트, 8px 그리드, 고대비 컬러 시스템을 제공합니다. 모든 정부 웹사이트와 공공 서비스의 일관된 사용자 경험을 보장합니다.
- YEAR
- 2023
- BY
- 행정안전부 / 한국지능정보사회진흥원 (NIA)
- MOOD
- 신뢰감 · 미니멀
- PRIMARY#0050FF
- SECONDARY#E8F0FE
- ACCENT#0050FF
- BG#F5F5F5
- SURFACE#FFFFFF
취급 표시
- 둥근 모서리
- 가는 테두리
- 보통 아이콘 선
표본
이 스타일의 규칙을 그대로 적용한 UI 컴포넌트입니다.
버튼
입력과 토글
배지
중립강조긍정
탭
스탯과 차트
2,480주간 방문증가+12%
1.8%이탈률감소-0.4%p
여덟 달의 지표 흐름을 담은 표본 차트입니다.
아바타와 아이콘
김서이하박지윤채+1
카드
기본 카드
서피스 토큰이 그대로 정하는 기본 상태의 카드입니다.
강조 카드
강조 상태에서 서피스가 어떻게 달라지는지 보여줍니다.
무드와 이웃
밀도여백빽빽여백에서 빽빽 사이 5단계 중 2단계
온도감차가움따뜻함차가움에서 따뜻함 사이 5단계 중 2단계
시대감레트로미래적레트로에서 미래적 사이 5단계 중 3단계
격식자유분방격식자유분방에서 격식 사이 5단계 중 5단계
- 신뢰감
- 미니멀
어디에 쓰나
실제로 쓰는 곳
- 정부24 (gov.kr)
- 국민건강보험공단
- 국세청 홈택스
- 고용노동부 워크넷
- 행정안전부 공식 사이트
사용 사례
- 범정부 행정 웹사이트
- 공공 서비스 포털 (정부24 등)
- 지자체 / 공공기관 웹사이트
- 공공 데이터 시각화 대시보드
- 전자민원 시스템
이런 프로젝트에 맞습니다
- 정부·공공기관 웹사이트 구축
- 접근성이 법적 요구사항인 서비스
- 고령자·장애인 대상 디지털 서비스
- 정보 전달 중심의 공공 포털 사이트
이런 프로젝트에 권합니다
더 읽기
원칙·제약·역사처럼 적용할 때 필요한 내용입니다. 필요한 항목만 펼쳐 보세요.
역사와 배경
2023년 행정안전부와 NIA가 범정부 차원의 디지털 정부 혁신 전략의 일환으로 KRDS를 공개했습니다. 흩어져 있던 각 부처별 디자인 가이드를 통합하고, 국제 접근성 표준(WCAG 2.2)과 한국 웹접근성 표준(KWCAG)을 동시에 충족하는 컴포넌트 라이브러리를 제공합니다.
핵심 원칙
- Accessibility First — 모든 국민이 동등하게 접근 가능한 디자인
- Consistency — 범정부 웹사이트의 통일된 사용자 경험
- Transparency — 공공 정보를 명확하고 신뢰감 있게 전달
주요 특징
- KWCAG 2.2 AA 이상 접근성 준수
- 8px 기반 그리드 시스템
- 고대비 시맨틱 컬러 토큰
- 표준화된 공공 서비스 UI 패턴
- Pretendard 기반 타이포그래피
장점과 한계
장점
- KWCAG 2.2 AA 접근성 기준을 컴포넌트 레벨에서 보장
- 범정부 표준으로 정부 프로젝트 수주 시 즉시 적용 가능
- Figma UI Kit 및 프론트엔드 코드 공개
- 8px 그리드로 정보 밀도 높은 공공 서비스에 최적화
- 고령자·장애인 등 디지털 취약계층까지 고려한 설계
한계
- 보수적 디자인으로 트렌디한 상업 서비스에는 부적합
- 정부 가이드라인 준수 시 디자인 자유도 제한
- 민간 서비스 대비 컴포넌트 종류가 제한적
컬러 시스템
고대비 시맨틱 컬러 토큰 시스템으로, 공공 서비스의 신뢰감과 접근성을 동시에 충족하는 블루 중심 팔레트
색의 역할
- 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 토큰 제공)
설계 제약
반드시 포함
- 모든 인터랙티브 요소에 키보드 접근 가능
- 명확한 포커스 인디케이터 (2px outline, #0050FF)
- 폼 요소에 명시적 레이블 (placeholder만으로 대체 불가)
- 에러 메시지는 해당 필드 인접 위치에 텍스트로 표시
- 8px 기반 일관된 스페이싱 시스템
하지 말 것
- 색상만으로 상태나 의미를 구분 금지 — 반드시 텍스트/아이콘 병행
- 포커스 인디케이터를 숨기거나 제거 금지
- 자동 재생 미디어 또는 시간 제한 콘텐츠 금지 (일시정지 제공 필수)
- CAPTCHA 등 접근 불가능한 보안 요소 단독 사용 금지
모션 — prefers-reduced-motion 미디어 쿼리 대응 필수 — 기본 200ms ease, 모션 감소 설정 시 애니메이션 비활성화
접근성
KWCAG 2.2 AA 이상을 모든 컴포넌트에서 기본 충족하며, 키보드 전용 탐색, 스크린 리더 호환, 고대비 모드, 텍스트 크기 조절(200%까지), 포커스 인디케이터 강화, 색상 외 시각 단서 병행 사용을 컴포넌트 레벨에서 보장합니다.
자주 묻는 질문
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), 국민건강보험공단, 국세청 홈택스, 고용노동부 워크넷, 행정안전부 공식 사이트 등이 있습니다.