KRDS란? 정부 직원조차 모르는 한국 정부 디자인 시스템

Source: Dev.to

KRDS란 무엇인가?

Korea Government Design System – 2023년 행정안전부에서 만든 공공 부문 웹사이트용 디자인 가이드라인입니다.
Gov24, 국민건강보험공단 등 한국 정부 사이트들이 비슷한 디자인을 가지고 있다는 것을 눈치채셨다면, 그것이 바로 KRDS가 적용된 결과입니다.

왜 만들었나요?

1. 일관성

정부 사이트들은 이전에 네비게이션 위치, 버튼 색상, 전체 레이아웃 등이 제각각이어서 시민들이 서비스를 찾기 어려웠습니다. KRDS는 구조, 네비게이션, UI 컴포넌트를 표준화해 사용자가 사이트마다 익숙한 경험을 할 수 있게 합니다.

2. 접근성

공공 부문 사이트는 국내 접근성 인증을 받아야 합니다. KRDS는 색상 대비, 키보드 네비게이션, 스크린리더 지원 등의 요구사항을 내장해, 기관들이 별도 작업 없이 기본 접근성 기준을 충족하도록 돕습니다.

3. 비용 절감

각 사이트를 처음부터 디자인하는 것은 비용이 많이 듭니다. KRDS 컴포넌트를 재사용하면 디자인·개발 노력이 줄어들어 비용이 낮아집니다.

현실

직원들이 모른다

RFP(제안서)에서는 종종 “KRDS 준수”를 요구하지만, 실제 프로젝트 매니저들은 그것이 무엇을 의미하는지, 어떻게 검증해야 하는지 모르는 경우가 많습니다.

비기술자들이 어려워한다

KRDS 웹사이트에서는 “컴포넌트”, “디자인 토큰”, “시맨틱 컬러” 같은 용어를 사용합니다. 개발자와 디자이너는 이해하지만, 행정 직원들은 사이트가 KRDS에 부합하는지 판단하기 어렵습니다.

디자이너는 제약을 느낀다

“이 색상을 사용할 것”, “버튼은 이렇게 만들 것”, “정확한 간격을 적용할 것” 같은 가이드라인은 창의적 자유를 누리던 디자이너에게 제한적으로 다가옵니다. 디자인이 “너무 평범하다”거나 “트렌드에 뒤처진다”는 우려가 흔합니다.

그렇다면 어떻게 해야 할까요?

KRDS는 “최소 기준”이다

KRDS를 100 % 따를 필요는 없습니다. 핵심 요구사항만 충족하면 충분합니다.

• 색상 – 정부 브랜드 팔레트(파랑)를 기본으로 사용.
• 접근성 – 최소 4.5:1 색상 대비, 완전한 키보드 네비게이션.
• 구조 – 간단한 헤더‑콘텐츠‑푸터 레이아웃.

이 기본 요소들을 만족한다면 “KRDS 적용”이라고 주장할 수 있습니다.

커스터마이징 허용

KRDS 팔레트 안에서 추가적인 기관 색상이나 브랜딩을 혼합해도 됩니다.

/* KRDS default */
--krds-primary: #256EF4; /* blue */

/* Agency addition (example) */
--agency-primary: #00A86B; /* Ministry of Environment green */

KRDS를 대체하는 것이 아니라 확장하는 것입니다.

현실적인 구현 단계

비기술 직원에게 KRDS 설명하는 방법

KRDS가 뭐에요?

“행정안전부에서 만든 정부 웹사이트용 디자인 가이드입니다. 모든 정부 사이트가 비슷한 모습인 이유가 KRDS이며, 이를 따르면 자동으로 접근성 요구사항도 충족됩니다.”

우리 사이트가 KRDS‑준수인가요?

“헤더와 푸터가 가이드 구조를 따르고, 색상이 정부 팔레트를 사용하며, 키보드로 전체 사이트를 탐색할 수 있다면 ‘준수’합니다.”

요약

KRDS 자체가 문제가 아니라, 명확한 설명과 실질적인 구현 가이드가 부족한 것이 문제입니다.

KRDS 기반 오픈소스 React 컴포넌트는 다음에서 확인할 수 있습니다:

Tags: #react #designsystem #accessibility #government #opensource