디지털 정부서비스 UI/UX 가이드라인
디지털 정부서비스 UI/UX 가이드라인
- 2024.03.01
About Project
Work Process
공공서비스 사용자들의 데이터 및 요구사항 분석을 기반으로 사용자 중심의 UI/UX 공통가이드를 구현 했습니다.
Analysis
사용자 분석
실제 이용 상황에서 사용자 의견과 일반적인 사용성에 대한 전문가 의견을 종합적으로 분석하여 핵심 UI/UX 문제점을 도출하였습니다.
글로벌 국가의 디자인 시스템 분석
글로벌 디지털 정부 가이드의 특성과 민간 서비스 디자인시스템의 동향을 종합적으로 분석하여 정부 아이덴티티 영역 적용 기준을 정의하고, 공통 가이드 개발 범위를 도출하였습니다.
국민 평가단 만족도 조사
다양한 연령 및 성별 그리고 디지털 취약계층을 포함한 300명의 국민평가단을 모집하여 300개의 공공기관의 UIUX 만족도 평가를 진행했습니다.
Developing a Guide
UI/UX 설계 원칙
누구나 더 쉽고 편리한 디지털플랫폼 정부 서비스를 목표로 총 7가지의 디자인원칙을
수립했습니다.
UI/UX 설계 원칙의 중요한 이유와 의미를 설명하고 이를 따르기 위한 주요 방안을
제시합니다.
스타일 가이드
일관성과 유연성 확보의 관점으로 사용자에게 가장 효과적으로 인지될 수 있는 칼라, 폰트, 레이아웃과그리드, 형태, 아이콘등 총 5가지 스타일요소를 선정하여 디지털 정부서비스의 디자인 스타일를 수립하였습니다.
컴포넌트
정부서비스 보편적인 UI요소를 방향으로 가장 빈번하게 사용되는 공통 구성요소를 선정하여 37가지 컴포넌트를 개발했습니다.
기본 패턴
디지털공공서비스의 핵심과업에서 공통으로 사용되는 11가지 과업 패턴을 기본 패턴으로 선정하여 구조 및 사용자 상호작용에 대한 가이드를 제시 했습니다.
- 도움
- 목록 탐색
- 필터링/정렬
- 상세 정보 확인
- 동의
- 사용자 피드백
- 개인 식별 정보 입력
- 첨부파일
- 입력 폼
- 확인
- 오류
-
필터링·정렬
필터링과 정렬은 사용자가 데이터를 원하는 기준에 맞게 선택하고 조직화 할 수 있게 합니다. 이를 통해 검색 결과를 좁히고 원하는 정보를 빠르게 찾을 수 있습니다.
-
도움
사용자를 위한 도움 패턴은 서비스 이용 도중 UI 작동 방식, 사용법, 과업 진행 상황 등을 설명하는데 도움을 줍니다. 이는 특히 디지털 취약계층 사용자에게 더 쉽고 빠르게 서비스를 이해하고 활용할 수 있도록 해줍니다.
-
사용자 피드백
사용자가 원하는 정보를 명확하고 간결하게 제공할 수 있도록 합니다. 또한 제목과 요약 정보를 포함한 링크를 통해 사용자가 쉽게 상세 정보에 접근할 수 있도록 가이드 합니다.
서비스 패턴 가이드
핵심서비스의 사용자 여정을 기반으로 사용자경험 설계를 위한 서비스 패턴 제작하고 서비스 특성을 고려하여 최적화 할 수 있도록 다양한 유형을 제공합니다.
- 방문
- 검색
- 로그인
- 신청
- 정책 정보 확인
디자인 리소스 및 표준 HTML 코드 개발
만들어진 가이드를 Figma기반의 디자인 리소스와 표준 HTML로 개발하여 디자이너와 개발자들이 쉽게 이해하고 사용할 수 있도록 개발되었습니다.
- 피그마
- 컴포넌트
- 패턴
- 코드
- 웹 페이지 가이드
-
디자인 리소스
디자인툴중 가장 사용율이 높은 Figma를 기반으로 쉽게 재 사용 할 수 있는 라이브러리와 패턴을 제공합니다.
-
표준 마크업
개발자들이 쉽게 이해하고 활용할 수 있도록 각 컴포넌트와 패턴 디자인에 상호작용을 적용한 HTML표준 마크업을 제공합니다.
-
웹 페이지 가이드
문서형태의 한계를 극복하기 위해 좁더 빠르게 편리하게 탐색하고 체험할 수 있는 공통가이드 웹페이지를 제공합니다.
범정부 공통 가이드는
모든 사용자를 포용하고 사용자 경험을 개선하는 것은 물론이고 각 기관들의 효율적인 운영/관리를 위해 제작되었습니다. 이를 통해 정부 서비스의 품질을 향상 시키고, 국민들에게 더 나은 디지털 경험을 제공할 수 있을 것입니다.
