핵심: 2026 대한민국 정부 서비스는 KRDS (Korea Design System) + KWCAG 2.2 + 디지털 포용 3축으로 표준화. 조달청 평가시스템 같은 정부 도메인은 자체 디자인 자유도 ↓ — 표준 컴포넌트·패턴·토큰 따라가는 게 안전 + 시각적 일관성 ↑.
기준
2026 표준
국내 정부 디자인 시스템
KRDS — 행정안전부 + DPG 위원회 운영. 2025.1 개시, 2025.8 가이드라인 수정본, 2026 목표 220개 서비스 확대
접근성
KWCAG 2.2 (2022.12 개정) — 4 원칙 / 14 지침 / 33 검사항목. 정부 사이트 의무 적용
국제 참조
WCAG 2.1 + WCAG 2.2 (W3C)
벤치마크
GOV.UK Design System (영국), USWDS (미국) — 두 시스템이 글로벌 표준
디지털 포용
고령자 / 장애인 / 디지털 취약계층 — KRDS 2차 가이드의 핵심 차별점
2KRDS — 대한민국 정부 디자인 시스템
대한민국 정부상징 사용하는 모든 중앙행정기관 / 소속기관 / 공공기관 / 지자체의 웹·모바일·앱에 적용 의무. 조달청은 기획재정부 외청 — 적용 대상.
구조 (5 영역)
영역
내용
1. 디자인 원칙
사용자 중심 / 모두 포용(접근성) / 일관 경험 / 신뢰성 — 4 원칙
2. 스타일 가이드
색상 / 타이포그래피 / 간격 / 그리드 / 아이콘 — 디자인 토큰 기반
3. 컴포넌트
버튼·입력·셀렉트·체크박스·테이블·페이지네이션·모달·탭·아코디언 등 30+
4. 기본 패턴
로그인·검색·필터·정렬·페이지네이션·페이지 헤더·푸터 등
5. 서비스 패턴
민원 신청·결제·문서 업로드·예약·결과 조회 등 정부 서비스 워크플로우
2차 가이드 (2025.8) 의 핵심 진화
디자인 토큰 기반 — 색상·타이포·간격을 변수화 → 다크모드 / 고대비 모드 자동 대응
디지털 취약계층 배려 — 큰 글자 / 단순 경로 / 명확한 라벨 / 단계별 검증
유지보수 + 확장성 — Figma 라이브러리 + HTML 컴포넌트 키트 + 디자인 토큰 모두 동기화
적용 수준 3단계 — 필수(Do) / 권장(Better) / 우수(Best)
제공 리소스
리소스
설명
공식 사이트
www.krds.go.kr
가이드라인 (v0.4)
v04.krds.go.kr
Figma 라이브러리
v1.0.0 공개 — 디자인 스타일·컴포넌트·패턴 전체
HTML 컴포넌트 키트
바닐라 HTML/CSS/JS 구현체
디자인 토큰
JSON 토큰 — Tailwind/CSS variables 매핑 가능
3KWCAG 2.2 — 한국 웹 접근성 지침
정부 사이트는 웹 접근성 인증 마크 획득 권장 — KWCAG 2.2 준수 + 한국정보접근성인증평가원 심사. 디지털포용법 근거.
구조 — 4 원칙 / 14 지침 / 33 검사항목
원칙
지침 수
대표 항목
1. 인식의 용이성 (Perceivable)
5
대체 텍스트 / 자막 / 색에 무관한 콘텐츠 / 명도 대비 4.5:1+ / 자동 재생 차단
2. 운용의 용이성 (Operable)
5
키보드 전용 / 충분한 시간 / 깜빡임 차단 / 반복 영역 건너뛰기 / 명확한 제목
3. 이해의 용이성 (Understandable)
3
기본 언어 표시 / 사용자 요구 시에만 변경 / 입력 오류 정정
4. 견고성 (Robust)
1
마크업 오류 방지 / WAI-ARIA
2.2 의 주요 추가 항목 (2022.12 개정)
표의 구성 — 헤더 cell 명확화
찾기 쉬운 도움 정보 — 도움말 위치 일관성
접근성 안내 정보 명시 — 페이지 하단 접근성 인증 표시
입력 도움 — autocomplete 속성
평가시스템 적용 시 가장 어려운 항목: 명도 대비 (현재 brand blue #4876ef on white = 4.55:1 — AA 통과 / AAA 7:1 미달) · 키보드 전용 (drag-drop 업로드 키보드 대체 필요) · 반복 영역 건너뛰기 (admin 사이드바)
4글로벌 정부 디자인 시스템 비교
시스템
국가
특징
참고할 점
GOV.UK Design System
영국
WCAG 2.0 준수 / 사용자 우선 / 간결 / SASS + JS
대체 표준의 기준. 컴포넌트 페이지마다 demo + code + 사용 시점 모두 명시 — 우리 컴포넌트 문서화 모델
USWDS
미국
모바일 우선 / 통합 토큰 + 템플릿 / Sketch + XD 디자인 자산
토큰 시스템 모범. 디자인 토큰 → CSS variables → React/Vue 자동 매핑
Australia GOV Design System
호주
UDS — 일원화된 정부 디지털 경험
다국가 정부의 통합 패턴 (한국 KRDS 와 유사)
MOJ Design Patterns
영국 법무부
GOV.UK Extension — 도메인 특화 (사법) 패턴
조달청 도메인 특화 확장 모델. KRDS 기반 + 평가 도메인 패턴 추가
공통 best practice
접근성을 design phase 부터 — 사후 audit 가 아닌 컴포넌트 자체에 ARIA 내장
패턴 라이브러리 — 컴포넌트뿐 아니라 페이지 패턴 (검색 결과 / 폼 / 단계 wizard) 까지 표준화
token-driven — 색상·간격·타이포 변수화로 일관성 + 테마
open source — 정부 시스템도 GitHub 공개. 외부 contribution 수용
5조달청 평가시스템 — KRDS 적용 매트릭스
현재 eval-system-premium 의 페이지·컴포넌트별 KRDS 적용 우선순위.
화면 / 컴포넌트
KRDS 컴포넌트
적용 수준
현재 상태
우선순위
/upload — 업로드 버튼
Primary Button (필수)
Do
Tailwind blue-600 임시 — KRDS 표준 brand color 미적용
P1
/upload — 드래그·드롭 파일 업로드
File Upload (서비스 패턴)
Better
커스텀 구현 — KRDS 의 keyboard accessible 패턴 미준수
P1
/upload — 결과 표
Data Table + Sort + Pagination
Do
커스텀 — sort/page 없음
P1
/eval — dropdown 비교 대상 선택
Multi-Select Dropdown
Better
커스텀 — keyboard navigation 부분 미지원
P2
/eval — side-by-side 비교
Comparison Pattern (서비스 패턴)
Better
커스텀 column 분할 — KRDS 표준 없으므로 자체 패턴 OK
P3
/admin — 로그인 폼
Login Form (서비스 패턴)
Do
커스텀 — 정부24 SSO 미연동
P2 (실서비스 진입 시)
전역 — 헤더 / 푸터
Pan-Government Header / Footer
Do
없음 — 정부상징 / 접근성 안내 미표시
P1 (정부 사이트 의무)
전역 — 색상 토큰
KRDS Color Tokens
Do
Tailwind 직접 사용 — 토큰 미적용
P2
전역 — 타이포그래피
KRDS Typography (Pretendard)
Do
system-ui 사용 — Pretendard 미적용
P3
전역 — 명도 대비 (a11y)
WCAG/KWCAG AA 4.5:1
Do (필수)
미검증
P1
전역 — 키보드 네비게이션
Skip to content / Focus indicator
Do (필수)
미구현
P1
전역 — 다크모드 / 고대비
Color tokens + prefers-color-scheme
Better
라이트만
P3
6현재 디자인 vs KRDS 표준 — 격차 분석
색상 시스템
요소
현재 (Tailwind)
KRDS 표준
격차
Primary brand
#4876ef (blue-600 부근)
#2563EB 계열 — 정확한 KRDS 토큰 확인 필요
유사하나 미일치
Success
emerald-700
KRDS green token
미확인
Error
rose-700
KRDS red token
미확인
중간 회색
slate
KRDS neutral
매핑 필요
타이포그래피
요소
현재
KRDS 표준
본문 폰트
Apple SD Gothic Neo / Pretendard / Malgun Gothic 폴백
Pretendard 권장 (Pretendard JP variant 도 있음)
본문 크기
14~15px
16px 본문 권장 (디지털 포용 — 큰 글자)
줄간격
1.65~1.75
1.5~1.7 KRDS
제목 hierarchy
26→20→15 (3 레벨)
KRDS 5 단계 (H1~H5)
접근성 (KWCAG 2.2 33 검사항목)
항목
현재 상태
우선순위
1.1.1 대체 텍스트 (이미지 alt)
제품 이미지 alt 누락
P1
1.4.3 명도 대비 4.5:1 (AA)
미검증
P1
2.1.1 키보드 사용 보장
업로드 드래그·드롭 키보드 미지원
P1 (label 패턴은 해결됨)
2.4.1 반복 영역 건너뛰기 (skip link)
미구현
P1
2.4.2 제목 제공 (페이지 title)
일부만
P2
3.1.1 기본 언어 표시 (html lang)
lang="ko" 확인됨
OK
3.3.1 입력 오류 정정
업로드 에러 메시지 일부
P2
4.1.1 마크업 오류 방지
미검증 (HTML validator)
P2
7적용 우선순위 + 작업량
데모일 (5/22) D-1 안에 가능한 것 + 데모 후 단계별 보강.
#
작업
예상 시간
임팩트
시점
P1-1
Pan-Government Header — 정부상징 + 사이트명 + 접근성 안내 링크
2시간
🔴 큼 (정부 사이트 의무)
데모 후 1주
P1-2
이미지 alt 일괄 점검 + 추가
30분
🟠 중 (a11y)
D-1 가능
P1-3
Skip-to-content 링크 추가
15분
🟠 중 (a11y)
D-1 가능
P1-4
명도 대비 자동 검사 (axe-core / pa11y CI)
1시간
🟢 작 (검증)
데모 후 1주
P1-5
Primary Button — KRDS 표준 color + size 매핑
1시간
🟠 중
데모 후 1주
P2-1
KRDS 디자인 토큰 → Tailwind theme 매핑
3시간
🔴 큼 (전역 일관성)
데모 후 1주
P2-2
Pretendard 폰트 도입 + 타이포 스케일
1시간
🟠 중
데모 후 1주
P2-3
HANUI (shadcn/ui-style KRDS 컴포넌트) 도입
1일
🔴 큼 (개발 가속)
데모 후 2주
P2-4
Data Table — sort / pagination / 컬럼 토글
1일
🔴 큼 (UX)
데모 후 2주
P3-1
다크모드 + 고대비 모드 (디지털 포용)
1일
🟠 중
데모 후 1개월
P3-2
정부24 SSO 연동
3일
🔴 큼 (실서비스)
실서비스 진입 시
P3-3
웹 접근성 인증 마크 신청 + 심사
2~4주
🟠 중 (신뢰)
실서비스 진입 후
8HANUI — KRDS 의 shadcn/ui-style 라이브러리
커뮤니티 개발 — KRDS 디자인 토큰 + 컴포넌트를 shadcn/ui 스타일 React 컴포넌트로 구현. eval-system-premium (Next.js + Tailwind) 와 직호환.
기능
HANUI
장점
Copy-Paste
npm 의존성 없음 — 소스 코드 직접 복사
커스터마이즈 자유. 라이브러리 라이프사이클 종속 X
Tailwind 기반
KRDS 색상·간격을 Tailwind theme 으로
현재 Tailwind 코드와 호환
접근성 내장
Radix UI primitives 기반
ARIA / 키보드 / focus 모두 default 처리
한국어 우선
예제·문서 한국어
한자 혼용 / 한국어 width 고려
권장: 데모 후 P2-3 작업으로 HANUI 컴포넌트 1~2개 우선 도입 (Button + Data Table) → 점진적 확대
9데모일 (5/22) 적용 가능 — Quick wins
코드 변경 최소 + 임팩트 큰 항목 (D-1 안 가능):
#
변경
파일
시간
효과
1
Skip-to-content 링크 추가 (전역 layout.tsx)
frontend/src/app/layout.tsx
15분
키보드 사용자 접근성 ↑
2
모든 <img> alt 점검 + 추가
전역
30분
스크린리더 호환
3
페이지별 <title> 메타 정비 (조달청 평가시스템 — 페이지명)
each page metadata
30분
SEO + a11y
4
focus indicator 강화 (Tailwind focus-visible:ring-2)
전역 CSS
15분
키보드 사용자 명확성
5
본문 폰트 16px 기본 (현재 14~15px) — KRDS 권장 + 디지털 포용
globals.css
15분
고령자 가독성
총 ~1.5시간. KRDS / KWCAG 부분 준수 + 시각 품질 ↑.
10장기 로드맵 (데모 후)
단계
목표
주요 작업
기간
1단계 (1주)
접근성 baseline + 정부 표준 헤더
P1 전체 (헤더/푸터/skip/alt/대비)
3~5일
2단계 (2~4주)
KRDS 디자인 토큰 + HANUI 도입
Tailwind theme 재구성 + Button/Table/Input 등 우선 컴포넌트 교체