문서 보기문서 편집수정 내역 디지털 정부서비스 UI/UX 가이드라인 (덤프버전으로 되돌리기) [[분류:행정안전부]][[분류:디자인 시스템]][[분류:2024년 공개]] ||<-2><tablealign=right><tablewidth=400><tablebgcolor=#fff,#1c1d1f><tablebordercolor=#003764><bgcolor=#003764><color=#fff> {{{+1 '''디지털 정부서비스 UI/UX 가이드라인'''}}}[br]KRDS || ||<-2><bgcolor=#fff> {{{#!wiki style="margin: 5% 20%;" [[파일:KRDS 로고.svg|width=100%]]}}}|| ||<width=100><colbgcolor=#003764><colcolor=#fff> '''배포''' ||[[행정안전부]], [[디지털플랫폼정부위원회]] || || '''공개''' ||[[2024년]] [[4월 15일]] || || '''바로가기''' ||[[https://uiux.egovframe.go.kr/|[[파일:홈페이지 아이콘.svg|width=20]]]]|| [목차] [clearfix] == 개요 == [[행정안전부]] 및 [[디지털플랫폼정부위원회]]에서 배포한 행정기관 및 공공기관이 준수해야 할 디지털 정부서비스 [[디자인 시스템]]이다. 영문명칭인 KRDS는 Korean Design System으로 추정된다. [[대한민국 정부상징]]을 사용하는 [[중앙행정기관]] 및 소속기관, [[공공기관]], [[지방자치단체]] 등의 웹사이트, 모바일 웹·앱 등에 적용하기 위한 목적으로 만들어졌다. 아직 모든 정부기관 페이지에 적용되지는 않았으며 점차 적용시킬 것으로 보인다. [[대한민국 정부상징/디자인 가이드|정부상징 디자인 가이드]]가 [[로고]]에 대한 가이드라인이었다면, KRDS는 정부기관 디지털 서비스의 전반적인 UI/UX에 대한 가이드라인이다. 기존 활용성이 떨어지던 문서 형태의 가이드라인과 달리 웹사이트 및 [[피그마(프로그램)|피그마]] 파일로 제작되었으며, [[접근성]]을 위해 각 컴포넌트 및 패턴 페이지 아래에 [[웹 표준#웹 접근성 지침 (WCAG)|WCAG]] 적합성을 명시하는 등, 해외 및 민간 기업의 디자인 시스템 못지 않은 수준으로 공개되어 관련 업계에서도 회자되었다. == 구성 == 원칙, 스타일, 컴포넌트, 기본 패턴, 서비스 패턴으로 구성되어있다. === 원칙 === > 디지털 정부서비스 UI/UX의 방향성과 설계 기준이 되는 상위 원칙 === 스타일 === > 컴포넌트, 기본 패턴을 시각적으로 일관성 있게 표현하기 위한 규칙 [[색상]], [[서체]], 형태, 배치, [[아이콘]]의 스타일을 정의하고 있다. 일관성, 접근성, 효율성 3가지의 방향성을 기준으로 설계되었다. 서체는 [[프리텐다드]]의 라틴 문자 등의 부분을 일부 수정한 [[https://github.com/orioncactus/pretendard/tree/main/packages/pretendard-gov|Pretendard GOV]]를 차용하였다. 수정된 부분은 대문자 I와 소문자 l 등 헷갈리기 쉬운 문자를 구분하기 쉽도록 하는 등 여러면으로 개선되었다. [[https://github.com/orioncactus/pretendard/pull/137|#]] === 컴포넌트 === > 사용자 인터페이스의 가장 작은 단위로 과업에 상관 없이 일관성 있게 사용되는 공통 요소에 대한 가이드 === 기본 패턴 === > 컴포넌트 요소들이 조합되어 핵심 과업을 수행하는 데 반복적으로 함께 사용되는 사용자 인터페이스 집합에 대한 가이드 === 서비스 패턴 === > 디지털 정부서비스에서 제공하는 핵심 과업에 대한 사용자 여정 기반의 사용자 경험 설계 가이드 == 외부 링크 == * [[https://designcompass.org/2024/04/17/krds/|KRDS: 대한민국 정부 디자인 시스템]] - 디자인 나침반 * [[https://www.inflearn.com/pages/infmation-68-20240423|공공 서비스의 새 얼굴! 처음 만나는 디자인 시스템]] - [[인프런]] * [[https://www.etnews.com/20240415000211|행안부·디플정위, 공공 UI·UX 가이드라인 배포…“공공 웹·앱 효율성 높여”]] - [[전자신문]] == 관련 문서 == * [[행정안전부]] * [[디지털플랫폼정부위원회]] * [[디자인 시스템]]캡챠되돌리기