며칠 전, 대한민국 정부에서 행정기관 및 공공기관이 준수해야 할 공식 UI/UX 가이드라인(KRDS)을 배포했다.
https://uiux.egovframe.go.kr/guide/index.html
KRDS의 메인페이지는 깔끔하게 정리되어 있었다.
도입 배경
- 점차 오프라인에서 온라인으로 변화하는 행정 서비스 이용 방식
- 실태조사 결과, 디지털정부 온라인 서비스의 이용이 불편해 개선이 필요하다는 사용자의 의견
- 디지털 정부 부서별로 각자의 UI/UX 가이드라인을 만들고 이를 적용하다 보니 일관성이 없다는 문제점을 발견했고, 사용자 경험의 제고와 일관성 및 직관성을 높이기 위해 개발하게 되었다고 한다.
적용 수준
서비스 패턴 가이드라인은 사용자의 관점에서 중요도, 만족도를 기준으로 총 세 가지로 구분했다.
적용 수준은 필수에서 우수로 갈수록 범위가 넓어지며, 최상위 수준의 가이드라인은 하위 수준의 가이드라인이 준수되어야 한다.
디자인 원칙
KRDS의 디자인원칙은 총 7가지로 구성되어 있다.
1. 사용자 중심의 서비스 (사용자 주도권)
- 사용자 정의, 사용자 여정 고려
2. 모든 사용자를 포용하는 서비스 (개인화)
- 서비스 이용에 가장 큰 어려움을 겪는 사용자에 대한 문제 제거
- 각 사용자 집단에 대한 대안 제공
3. 공통된 경험 안에서 개별 특성을 고려한 서비스
4. 빠르고 간단한 서비스 (반응성, 단축성)
- 이용 단계의 속도 고려
5. 쉽게 이해하고 사용할 수 있는 서비스 (이해 가능성, 친숙성)
- 이미 확립된 친숙함을 기반으로 디자인
6. 사용자의 다양한 상황을 고려하는 서비스 (유연성)
- 사용자의 서비스 이용에 대한 경험 조사
7. 신뢰할 수 있는 서비스
- 모든 화면에 정부 서비스 공식 배너 배치
- 정보의 정확성 및 최신성 주기적으로 점검
서비스 측정 및 평가 수업 때 배웠던 사용성의 속성 체계를 함께 보며 읽어보니 더 흥미로웠다.
스타일 가이드의 방향성
1. 일관성 (Consistency)
2. 접근성 (Accessibility)
3. 효율성 (Efficiency)
접근성의 경우, 국제 웹 표준 개발 컨소시엄 W3C의 웹콘텐츠 접근성 지침 (WCAG)에서 레벨 AA 이상의 원칙을 기반으로 제시한다. (오홍...)
스타일 가이드 요소
색상, 서체, 형태, 배치, 아이콘으로 구성되어 있다.
색상
Primary Color (버튼, 활성 상태) - 주요 구성 요소
Secondary Color (필터, 칩) - 보조 구성 요소
Grayscale (BG, Text, Line) - 정보 전달, 위계
이외에도 색의 균형감과 백그라운드 컬러, 시스템 컬러 등 다양한 가이드라인이 정리되어 있으니 쭉 읽어보면 좋을 것 같다.
배치
Breakpoint (반응형 웹에서 사이즈가 변화하는 지점. 처음 알았다...)
컴포넌트 요소
민망하지만... UI 디자인을 하면서, 컴포넌트의 형태와 쓰임은 알지만 정식 명칭이 기억 안 날 때 '왜 그 있잖아요, 삭제되었습니다 할 때 잠깐 떴다 사라지는 팝업!' 이런 식으로 말한 적이 많았다.
그런데 KRDS에 컴포넌트 요소에 대한 이름과 설명이 매우 자세하게 나열되어 있다. 정말 감사하다...
그냥 혼자 보려고 캡쳐해뒀음KRDS를 알기 전엔 기억이 안 날 때마다 디자이너스의 용어사전을 찾아보곤 했었다. 여기도 정리가 잘 되어 있으니 참고해도 좋을 듯!
마무리하며
지금 밋업데이를 준비하면서 디자인 시스템에 대해 이것저것 찾아보고 있었는데, 가독성 좋고 배울 게 많은 디지털정부서비스 UI/UX 가이드라인을 읽어볼 수 있어 다행이라고 생각한다.
IT프로젝트에서 디자이너로 활동하면서 디자인 시스템을 만들어본 경험은 있지만, 행정안전부나 대기업의 디자인시스템 가이드라인을 읽다 보면 아직 배울 점이 많다는 것을 느끼게 되는 것 같다!
지니어스천재디자이너