가이드라인 소개가이드라인의 활용 방법

서비스 전반의 UI/UX 개선

기획

디지털 정부서비스의 목표를 수립하고 발주하는 기획 과정에서 사용자 관점의 UI/UX 과업 범위를 정의하는 것은 매우 중요하다.
본 가이드라인을 활용하면 해당 서비스의 UI/UX 구현 목표와 범위를 정의하고 사용자 경험 품질 요구사항을 구체적으로 명시할 수 있다.

01. 사업계획 수립
  1. 적용 대상 및 기준에 따라 해당 서비스의 UI/UX 가이드라인 준수 범위 수립
  2. 원칙과 세부 콘텐츠를 기반으로 해당 서비스의 UI/UX 목표와 추진전략을 수립
02. 발주
  1. 제안요청서의 ‘사업 추진 시 준수해야 할 규정에 관한 사항’ 등에 본 가이드라인의 준수를 명시
  2. 제안요청서의 '품질 요구사항'에 UI/UX 분석 및 설계, 구현, 테스트 단계에서 본 가이드라인의 내용들이 잘 준수되었는지 점검하도록 명시

구축

본 가이드라인은 디지털 정부서비스를 신규로 구축하거나 개편할 때 준수해야 하는 UI/UX 관련 원칙과 세부 가이드를 제시하고 있다.
'분석-설계-구현-테스트’ 등 서비스 전반의 UI/UX를 개선하는 일련의 과정에서 해당 항목들을 참고하면 사용자 관점의 공통된 경험을 보다 효율적으로 구현하고 점검할 수 있다.

01. 분석
  1. 원칙 및 가이드라인 기반으로 UI/UX 현황 분석 및 이슈 도출
  2. VOC, 사용성 평가, 접근성 진단 등 사용자 관점의 자체 분석 결과를 컴포넌트, 기본 패턴, 서비스 패턴 관점으로 분류
  3. 사용자 분석 결과와 가이드라인 기반 점검 결과를 종합하여 핵심 문제와 개선 범위를 정의
02. 설계
  1. 서비스 패턴의 사용자 플로(flow)와 세부 여정별 가이드라인을 중심으로 핵심 서비스의 UI/UX 개선안 정의
  2. UI/UX 개선안 중 추가 개발이 필요한 항목에 대한 프로세스와 구현 기능 설계
  3. 컴포넌트, 기본 패턴의 유형과 가이드라인을 참고하여 구성 요소별 UI 설계
  4. 서비스 패턴의 표준 프로토타입을 참고하여 과업 단위의 프로토타입 제작
03. 구현
  1. 스타일 가이드의 세부 내용 기반으로 디자인 스타일 반영
  2. 컴포넌트, 기본 패턴 중심의 공통 UI 개발
  3. UI 개발 시 해당 구성 요소의 상호작용 가이드라인을 참고
  4. 서비스 패턴의 가이드라인을 구현하기 위한 기능 개발
04. 테스트
  1. 스타일, 컴포넌트, 기본 패턴 등 요소별 가이드라인 준수 여부 점검
  2. 서비스 패턴의 사용자 여정별 가이드라인 준수 여부 점검
  3. 구성 요소별 가이드라인을 체크리스트로 목록화하여 이슈 점검

운영

디지털 정부서비스는 한번 구축하고 끝나는 것이 아니라 사용자의 요구에 최적화된 서비스 경험을 지속적으로 제공해야 한다.
서비스의 UI/UX 현황을 상시적으로 점검하고 개선하는 운영 과정에서 본 가이드라인을 활용하면 보다 체계적으로 사용자 경험 품질 관리 계획을 수립하고 개선할 수 있다.

01. 현황 분석·점검
  1. 구성 요소별 가이드라인을 체크리스트로 목록화 하여 이슈 점검
  2. VOC, 사용성 평가, 접근성 진단 등 사용자 관점의 자체 분석 결과를 컴포넌트, 기본 패턴, 서비스 패턴 관점으로 분류
  3. 사용자 분석 결과와 가이드라인 기반 점검 결과를 종합하여 핵심 문제와 개선 범위를 정의
02. 운영계획 수립
  1. 본 가이드라인의 적용 대상 및 기준을 확인하고, 운영 업무의 예산 및 가용 자원을 고려하여 UI/UX 가이드라인의 준수 범위 수립
  2. 서비스 패턴의 적용 수준인 ‘필수(Do) - 권장(Better) - 우수(Best)’를 기반으로 개선활동의 목표 설정
03. 구현
  1. 스타일, 컴포넌트, 기본 패턴의 유형과 가이드라인을 참고하여 구성 요소별 UI 개선
  2. 서비스 패턴의 가이드라인과 표준 프로토타입을 참고하여 과업 단위의 UI/UX 개선

특정 과업 및 요소의 UI/UX 일부 개선

본 가이드라인은 디지털 정부서비스에서 사용자가 빈번하게 경험하는 핵심 과업과 사용자 인터페이스 공통 요소를 기반으로 개발되었다.
각 구성 항목의 유형과 용례를 이해하고 관련 요소를 조합하여 적용하면 서비스의 개별 특성을 고려하면서도 일관성 있는 사용자 경험을 제공할 수 있다.

일부 요소의 UI/UX 개선

서비스 전체가 아닌 일부 화면이나 요소의 UI/UX 개선이 필요한 경우, 해당 과업과 관련된 컴포넌트와 기본 패턴에서 해당 항목을 참고하여 개선한다.

예시 1. 서비스의 '탐색'과 관련된 UI/UX 개선
  1. 컴포넌트의 '탐색' 범주에 해당하는 메인 메뉴, 사이드 메뉴, 콘텐츠 내 탐색, 브레드크럼, 페이지네이션 등의 내용을 참고
예시 2. 서비스의 ‘도움’과 관련된 UI/UX 개선
  1. ‘도움’ 기본 패턴의 유형 중 안내 영역, 플레이스홀더, 인라인 텍스트, 툴팁, 맥락적 도움말, 도움 패널 등의 사용성 가이드라인을 참고

서비스 패턴에 없는 과업의 UI/UX 개선

서비스 패턴에 없는 과업의 UI/UX 개선 시, 서비스 패턴의 세부 여정에서 유사한 항목을 참고 하거나 과업의 구성 요소에 해당하는 가이드라인 참고하여 개선한다.

예시 1. 서비스 가입, 예약 등의 UI 설계
  1. 서비스 패턴 ‘신청’의 가이드라인 중, 해당 과업과 관련된 항목을 참고
  2. 기본 패턴의 입력폼, 도움, 확인, 오류 등의 가이드라인을 참고
  3. 해당 서비스 패턴과 기본 패턴을 구성하는 컴포넌트의 가이드를 참고하여 상세 UI 설계

모바일 서비스의 UI/UX 개선

본 가이드라인은 디지털 정부서비스를 이용하는 사용자의 과업 수행 여정을 기반으로 개발되었으므로, 각 가이드라인의 개념과 목적을 충분히 이해하고 모바일 웹·앱 서비스에 해당하는 내용을 참고하면 모바일 사용자 경험을 향상할 수 있다.

참고할 사항

01. 원칙
  1. '원칙 6. 사용자의 다양한 상황을 고려하는 서비스'에 해당하는 내용과 주요 방안을 이해하고 숙지
02. 스타일
  1. 배치 항목의 반응형 레이아웃 그리드 등 스크린 크기별 가이드 참고
03. 컴포넌트/기본 패턴/서비스 패턴
  1. 구성요소별 구조, 유형, 플랫폼 고려사항 및 사용성/접근성 가이드라인에서 모바일에 해당하는 사항 참고
04. 표준 프로토타입
  1. 헤더, 푸터 등 아이덴티티 영역과 각 서비스 여정별 표준 프로토타입의 모바일 화면 참고