전자정부 웹사이트 UI·UX 가이드라인
IT 위키
더 많은 작업
전자정부 웹사이트 UI·UX 가이드라인은 행정·공공기관 웹사이트가 국민 누구나 쉽고 편리하게 쓸 수 있도록, 화면 설계와 사용자 경험의 공통 원칙·기준을 행정안전부가 정한 지침이다.
기관마다 따로 만든 공공 웹사이트는 메뉴 구조·용어·로그인과 신청 절차가 제각각이어서, 국민이 사이트를 옮길 때마다 사용법을 새로 익혀야 했다. 행정안전부는 2019년 이 가이드라인을 마련해 설계 원칙 → 설계 기준 → 설계 가이드의 3단계로 공공 웹사이트의 UI·UX 를 표준화했다. 원칙은 지향점을, 기준은 지켜야 할 요건을, 가이드는 구체적인 설계 방안과 적용 예시를 준다.
2024년 2월에는 이를 이은 「디지털 정부서비스 UI·UX 가이드라인」과 범정부 디자인 시스템(KRDS)이 배포되어, 컴포넌트·패턴 단위의 공통 디자인까지 제공하게 되었다. 행정·공공기관은 「전자정부 웹사이트 품질관리 지침」에 따라 웹사이트를 새로 만들거나 고칠 때 이를 따라야 한다.
전자정부 웹사이트가 지향하는 다섯 가지 방향이다.
- 사용자 중심의 전자정부 웹사이트
- 모두를 위한 전자정부 웹사이트
- 편리한 전자정부 웹사이트
- 열린 전자정부 웹사이트
- 지속가능한 전자정부 웹사이트
설계 원칙을 실제 화면 설계에서 점검할 수 있게 풀어 쓴 기준이다.
| 번호 | 설계 기준 | 점검 내용 |
|---|---|---|
| 1 | 사용자에게 필요한 정보와 기능을 제공한다 | 사용자가 원하는 정보와 기능을 충분히, 이해하기 쉬운 형태로 주는가 |
| 2 | 작업에 소요되는 시간과 단계를 최소화한다 | 응답이 빠른가, 반복 입력·불필요한 단계가 없는가 |
| 3 | 직관적이고 일관성 있게 만든다 | 흐름이 논리적이고 용어가 쉬운가, 모든 페이지에서 같은 규칙을 쓰는가 |
| 4 | 사용자가 원하는 방식으로 이용할 수 있게 만든다 | 입출력 수단·글자 크기 등 설정을 바꿀 수 있는가, 불필요한 자동 동작이 없는가 |
| 5 | 사용자가 실수하지 않게 만든다 | 실수를 부르는 요소가 없는가, 중요한 실행 전에 확인하고 오류를 알리며 되돌릴 수 있는가 |
| 6 | 모든 유형의 사용자가 이용할 수 있게 만든다 | 장애인·고령자, 여러 브라우저, 초보자와 숙련자 모두 쓸 수 있는가 |
| 7 | 원하는 서비스와 정보를 쉽게 찾을 수 있어야 한다 | 이동 수단이 다양하고 내비게이션이 익숙한 구조이며 정보의 위계가 분명한가 |
UI·UX 가이드라인과 함께 공공 웹사이트가 갖춰야 할 품질 요소이다.
| 요소 | 뜻 | 주요 내용 |
|---|---|---|
| 웹 접근성 | 장애인·고령자 등 누구나 웹 정보에 동등하게 접근하는 것 | 한국형 웹 콘텐츠 접근성 지침(KWCAG) 준수, 대체 텍스트, 키보드만으로 조작, 명도 대비, 자막. 장애인차별금지법과 지능정보화 기본법에 근거한 의무 |
| 웹 호환성 | 어느 브라우저·운영체제·기기에서도 같은 화면과 기능을 쓰는 것 | 웹 표준(HTML5·CSS) 준수, 특정 브라우저 전용 기술 배제, 크로스 브라우징 점검 |
| 웹 개방성 | 특정 기술·제품에 묶이지 않고 누구나 정보를 이용하고 찾을 수 있게 여는 것 | ActiveX 같은 비표준 플러그인 제거, 검색엔진이 공공정보를 수집할 수 있게 허용(robots.txt 설정), 공공데이터를 기계가 읽을 수 있는 형태로 제공 |
| 웹 최적화 | 사용 환경에 맞춰 빠르고 가볍게 동작하게 하는 것 | 페이지 용량·이미지 경량화, 로딩 속도 개선, 모바일에 맞춘 반응형 화면, 검색엔진 최적화 |
- 접근성은 사람(장애·연령)의 차이를, 호환성은 환경(브라우저·기기)의 차이를 넘는 것이 초점이다
- 개방성은 기술 종속을 없애고 정보를 밖으로 여는 것, 최적화는 같은 기능을 더 빠르고 가볍게 주는 것이다