[행안부 웹사이트]UI/UX 가이드 - 품질 진단서

🏷️ 본 게시글은 전자정부 웹사이트 UI UX가이드 문서를 보기 쉽게 정리, 공부한 게시글입니다.🏷️
출처는 아래와 같습니다.
https://www.mois.go.kr/frt/bbs/type001/commonSelectBoardArticle.do?bbsId=BBSMSTR_000000000045&nttId=69451

 

개요의 목적은 점검입니다.

설계 개발이 완료된 웹사이트에대해 점검하면 됩니다.

 

UI.UX품질 점검표 / UIUX 품질 평가표로 구성되어 있습니다.

 

진단 > 결과분석 > 활용 및 개선의 순서로 진행하시면 됩니다.

 

 

 

 

[ UI UX 품질 점검표 ]

필수사항은 반드시 'YES' 체크되어야 하며, 필수사항의 미적용시 서비스 시작 전 수정해야 합니다.

---

< 브랜드 영역 >

( 1 ) 헤더

상세패턴	번호	구분	점검항목	YES	NO	N/A
헤더	1	권장	핵심정보만 간결히 제공
	2	필수	nav가 최상단인가
	3	필수	로고와 웹사이트 이름을 좌측 상단에 배치하였는가
	4	권장	메인메뉴와 검색은 웹사이트의 목적에 맞도록 배치하고 있다.

 

( 2 ) 푸터

상세패턴	번호	구분	점검항목	YES	NO	N/A
푸터	1	필수	개인정보처리방침 표서
	2	필수	전자상거래가 포함된 경우, 이용약관을 표시하고 있다
	3	필수	웹사이트 내부 링크는 좌측, 외부 링크는 우측
	4	권장	사용자들이 빈번하게 찾는 링크를 배치

 

---

< 탐색 >

( 1 ) 메인메뉴

상세패턴	번호	구분	점검항목	YES	NO	N/A
메인메뉴	1	권장	링크를 우선순위에 따라 배치 이용 빈도가 높고 중요한 콘텐츠로 연결된 링크일 수록 좌측에 배치하여, 접근과 사용을 쉽게
	2	필수	링크의 활성화 상태가 명확히 구분되도록 표현 현재 탐색 중인 페이지가 사이트 구조상 어디에 위치하는지를 알 수 있도록 활성화된 메뉴 링크를 명확하게 구분한다.
	3	권장	링크명에 이해하기 쉬운 용어를 사용하고 있다. 링크명에 전문 용어 또는 일반적인 사람들에게 익 숙하지 않은 용어를 사용할 경우, 의미를 이해하기 어려워 탐색에 많은 시간이 소요되거나 원하는 페이지를 발견하지 못할 수도 있다.
	4	권장	링크는 최소한으로 사용하고 있다. 반드시 필요한 링크만 제공하여 사용자가 빠르게 메뉴를 파악할 수 있게 만들고, 선택과정에서의 혼 동을 방지해야 한다.
	5	필수	메인 메뉴를 숨기지 않은 상태로 제공하고 있다. 일명 ‘햄버거 메뉴’라고 불리는 숨긴 메뉴를 사용 하게 되면, 메뉴 링크명을 통해 전달되는 사이트의 특성 정보와 함께, 탐색 위치에 관한 정보가 사라 지게 된다. 메뉴 정보에 기초한 사용자의 빠른 탐 색을 도울 수 있도록 숨겨진 전역메뉴를 사용하지 않을 것을 권장한다

 

( 2 ) 서브메뉴

상세패턴	번호	구분	점검항목	YES	NO	N/A
서브메뉴	1	권장	메뉴의 길이를 적절하게 제공하고 있다. 긴 계층 구조를 한 번에 표현할 경우, 사용자가 아 래에 제공된 링크를 놓칠 수 있기 때문에 메뉴를 적절한 길이로 제공해야 한다. 아코디언 형식을 활 용하면 상위 구조를 한 번에 확인하기 쉽게 제공 할 수 있다.
	2	필수	메뉴의 계층구조를 명확하게 구분하여 표현하고 있다. 사용자의 탐색을 방해하지 않도록 나란히 배치된 링크 간 수준을 명확하게 구분해야 한다

 

( 3 ) 탭

상세패턴	번호	구분	점검항목	YES	NO	N/A
탭	1	필수	동일한 수준의 탭은 일관성 있게 표현하고 있다. 웹사이트 구조에서 동일한 수준의 콘텐츠를 탐색 하는 데 사용되는 탭은 일관성 있게 표현해야 한 다
	2	필수	동일한 수준의 탭은 일관성 있게 표현하고 있다. 웹사이트 구조에서 동일한 수준의 콘텐츠를 탐색 하는 데 사용되는 탭은 일관성 있게 표현해야 한 다
	3	필수	선택되지 않은 탭의 내용도 확인할 수 있도록 표현하고 있다. 선택되지 않은 탭의 글자나 배경색을 지나치게 흐 리게 표현하면, 탭의 내용을 알 수 없게 된다. 또 한 비활성화 상태로 인식되어 사용자의 행동을 저 해할 수 있다.
	4	권장	탭 메뉴를 단일행으로 제공하고 있다. 여러 행으로 구성된 탭 메뉴는 복잡하기 때문에, 사용자는 탐색 도중, 몇 번째 탭을 방문하였는지 쉽게 잊어버릴 수 있다.

 

( 4 ) 브래드크럼

상세패턴	번호	구분	점검항목	YES	NO	N/A
브래드크럼	1	필수	각각의 경로를 링크로 제공하고 있다. 사용자가 상위 혹은 이전 페이지를 쉽고 빠르게 탐색할 수 있도록 브래드크럼을 구성하는 개별 경 로를 링크로 제공한다.
	2	필수	모든 페이지에서 일관된 위치에 배치하고 있다. 브래드크럼은 전역메뉴와 본문 사이의 일관된 위 치에 제공하여, 사용자가 안정적으로 경로 정보를 사용할 수 있어야 한다.
	3	권장	적절한 기호와 이미지를 활용하여 경로 간 관계를 표시하고 있다. 사용자가 선행관계나 위계를 명확하게 알 수 있도 록, 적절한 의미를 가진 기호(>, -, / 등)와 이미지 를 활용하여 경로를 구분해야 한다.
	4	권장	가장 하위수준의 경로를 명확하게 구분하여 표현하고 있다. 색상, 크기, 아이콘 이미지 등의 표현을 통해 가장 하위수준, 즉 현재 페이지 경로를 구분하면 사용자 가 탐색 중인 위치를 더욱 빠르게 인지할 수 있다.

 

( 5 ) 사이트맵

상세패턴	번호	구분	점검항목	YES	NO	N/A
사이트맵	1	필수	링크 목록은 사이트 구조에 맞게 계층화하여 표현하고 있다. 사이트의 구조를 고려하여 링크의 위계수준을 구 분함으로써 사용자가 전체적인 사이트 구성을 쉽 게 이해하고, 필요한 페이지를 효과적으로 탐색하 는 작업을 도와주어야 한다.
	2	필수	외부 사이트나 새 창으로 연결되는 링크를 분명하게 구분하고 있다. 외부 사이트 또는 새 창으로 연결되는 링크는 아 이콘 이미지 등을 활용하여 내부링크와 명확하게 구분함으로써 사용자가 혼동하지 않도록 해야 한 다

 

 

---

< 검색 >

 

( 1 ) 통합메뉴

상세패턴	번호	구분	점검항목	YES	NO	N/A
통합메뉴	1	필수	통합검색 기능은 검색상자와 검색버튼으로 제공하고 있다. 통합검색 기능은 웹사이트에서 사용자가 쉽게 찾 을 수 있도록 링크 대신 검색상자와 검색버튼으로 구성해야 한다.
	2	필수	검색이라는 의미를 보편적으로 인식할 수 있는 레이블과 아이콘을 사용하고 있다. 검색 버튼에는 버튼의 용도를 보편적으로 인식할 수 있도록 ‘검색’이라는 레이블을 사용하거나, 돋보 기 모양의 아이콘을 사용한다.
	3	필수	통합검색은 웹사이트의 모든 페이지에서 접근 가능하도록 제공하고 있다. 통합검색의 기능은 페이지의 우측 상단의 일관된 위치에 배치하는 것을 권장한다. 검색 기능이 중요 한 사이트의 경우, 통합검색 기능을 강조하기 위해 메인페이지의 검색창을 보다 중요한 위치에 배치 할 수 있다.
	4	권장	검색창 내에 검색어에 대한 안내를 제공하고 있다. 검색창을 빈칸으로 남겨두기보다 플레이스홀더를 이용하여 적절한 검색어 예시나 ‘검색어를 입력하 세요’와 같은 안내 문구를 기본으로 제공하면 사용 성을 더 높일 수 있다.

 

( 2 ) 고급검색

상세패턴	번호	구분	점검항목	YES	NO	N/A
고급검색	1	필수	조건검색이 기본 옵션으로 포함되지 않도록 제공하고 있다. 일반적으로 사람들은 하나 또는 두 개의 검색어로 간단한 검색을 수행한다. 조건검색이 기본으로 제 공되면 많은 입력필드에 대해 부담을 느낄 수 있 으며, 복잡한 절차로 인해 실수할 확률이 높아진 다.
	2	필수	자동완성 기능을 제공하고 있다. 사용자가 검색어를 입력하기 시작하면 자동완성 기능을 사용하여 사용자의 입력시간을 줄여주는 것이 좋다. 자동완성 기능은 입력시간을 줄일 뿐만 아니라, 검색 결과에 대한 빠른 단서를 제공하기 때문에, 특별한 경우를 제외하고는 복잡한 조건검
	3	권장	개인화 검색기능을 제공하고 있다. 사용자가 검색어를 입력하기 전에 기존의 사용자 검색기록을 보여주거나 실시간 검색어 제안 등으 로 추천 검색어를 제시하면, 사용자의 검색시간을 줄여 줄 수 있다.

 

( 3 ) 검색결과

상세패턴	번호	구분	점검항목	YES	NO	N/A
검색결과	1	필수	검색결과 페이지에 검색창이 유지되고 있다. 검색을 실행하여 검색결과 페이지로 화면이 전환 되었을 때, 연속적이고 추가적인 검색이 가능하도 록 검색창을 유지하는 것이 좋다. 검색에 집중할 수 있도록 검색결과 페이지 내에 별도의 검색창을 배치할 수 있다.
	2	권장	검색어와 일치하는 항목을 강조하여 표현하고 있다. 검색결과를 표시할 때는 사용자가 입력했던 검색 어와 일치하는 항목을 강조 표시하여, 인지의 흐름 에 단절이 생기지 않도록 하는 것이 좋다.
	3	필수	입력한 검색어와 검색결과 수를 표시하고 있다. 검색결과 수를 명시하여 사용자의 다음 행동을 빠 르게 결정할 수 있도록 해야 한다. 경우에 따라 검 색결과를 카테고리별로 묶어서 제공해 주면 사용 자가 검색결과를 직접 구분하여 접근하는 데 도움 을 줄 수 있다.
	4	필수	검색결과가 없는 경우, 결과를 명확하게 알리 고 적절한 대안을 제공하고 있다. 검색결과가 없는 현상은 실제로 데이터가 없거나 검색과정에서의 실수 등 다양한 원인으로 인해 나 타날 수 있으므로, 사용자에게 문제를 구체적으로 알려주어야 한다. 또한, 원인을 파악한 사용자가 입력한 검색어를 재확인하여, 철자를 수정하거나 다른 검색어를 입력함으로써 필요한 정보를 발견 할 수 있도록 안내해야 한다

 

 

 

---

< 콘텐츠 >

 

( 1 ) 목록보기

상세패턴	번호	구분	점검항목	YES	NO	N/A
목록보기	1	필수	중요한 항목은 목록의 상단에 배치하고 있다.  사용자는 목록의 좌측 상단 영역에 먼저 주의를 기울인다. 그러므로 우선적으로 보여주어야 할 중요한 내용은 좌측 상단에 배치한다.
	2	권장	항목을 의미 있는 단위로 구분하고 논리적인 순서에 따라 정렬하고 있다. 논리적인 순서에 따라 정렬하면 사용자가 내용을 빠르게 훑어보고 쉽게 이해할 수 있다. 항목의 정 렬에 표, 간격, 구분선, 배경색 등을 활용할 수 있 다.
	3	권장	강조를 위한 시각적 표현을 적절하게 사용하고 있다. 색상, 아이콘 이미지를 적절하게 사용하면 사용자 의 효율적인 정보처리를 도울 수 있지만 지나치면 오히려 주의가 분산될 수 있다.
	4	권장	긴 목록은 페이지 등으로 단위를 나누어 제공 하고 있다. 긴 목록은 페이지로 구분하는 등 적절하게 단위를 나누어, 한 번에 지나치게 많은 정보를 제공하지 않아야 한다. 긴 페이지를 스크롤하는 것보다 페이 지네이션을 이용하여 분할된 페이지를 탐색하는 것이 탐색이 더욱 효과적이다.
	5	필수	규모가 큰 목록에 필터링 또는 검색 기능을 제공하고 있다. 항목 개수가 많은 경우, 페이지네이션만으로 정보를 탐색하는 것에 한계가 있으므로 필터링이나 검색 기능을 제공하여 빠 른 내용 탐색이 가능하도록 만들어야 한다.

 

( 2 ) 콘텐츠 작성/업로드

상세패턴	번호	구분	점검항목	YES	NO	N/A
콘텐츠 작성/업로드	1	필수	작성방법은 플레이스홀더가 아닌 텍스트로 제공하고 있다. 입력필드 내부에 플레이스홀더로 제공된 텍스트는 키보드가 진입하면 사라지기 때문에, 필요한 시점 에 정보를 활용할 수 없다. 그러므로 콘텐츠 작성 에 관한 설명은 텍스트 형식으로 입력필드 상하단 에 제공해야 한다.
	2	필수	버튼을 용도 및 기능을 기준으로 분명하게 구분하고 있다. ‘등록’ 버튼 이외에 ‘임시저장’, ‘취소’, ‘초기화’ 등 여러 개의 버튼을 제공하는 경우, 용도에 따라 버 튼의 표현을 구분하여 사용자가 혼동하지 않도록 해야 한다. ‘취소’나 ‘초기화’ 등 주의를 요하는 버 튼은 ‘등록’ 버튼과 분명하게 구분되어야 한다.
	3	필수	등록 가능한 텍스트 및 파일크기를 표시하고 있다. 콘텐츠 용량에 관한 정보가 제출버튼을 누른 후에 제공되면, 이미 작성한 내용을 수정하는 데 많은 시간이 걸리므로 사용자가 사전에 정보를 쉽게 파 악할 수 있도록 표현을 강조하여 입력폼과 함께 제공해야 한다.
	4	필수	입력 세션 유지시간을 표시하고 있다. 입력 세션 유지 시간에 제한이 있는 경우, 확인이 쉬운 표현 방법을 이용해 시간 정보를 안내해야 한다. 이를 통해, 사용자가 작성 중에 예상하지 못 한 세션종료로 인해 데이터를 잃어버리지 않도록 해야 한다

 

 

( 3 ) 상세내용 보기

상세패턴	번호	구분	점검항목	YES	NO	N/A
상세내용 보기	1	필수	콘텐츠의 작성자, 작성일, 출처, 저작권을 표시하고 있다. 전자정부 웹사이트에서 제공되는 모든 콘텐츠에는 작성자, 작성일, 출처, 저작권 정보를 표시하여 사 용자가 신뢰를 가지고 정보를 이용할 수 있도록 해야 한다.
	2	권장	제목은 다른 요소들과 분명하게 구분되도록 표현하고 있다. 제목은 웹사이트에서의 현재 사용자 위치를 알려 주고, 본문을 읽기 전에 간략한 내용을 파악할 수 있게 도와준다. 따라서 각 페이지의 제목은 다른 제목과 명확하게 구분되어 제시되어야 한다.
	3	권장	콘텐츠 요소들 사이의 계층구조를 명확하게 구분하고 있다. 요소들 간 계층구조를 명확하게 구분하면, 사용자 는 중요한 정보를 더욱 빠르게 처리할 수 있다.
	4	권장	문단과 문장은 최대한 간단명료하게 구성하고 있다. 사용자의 읽기 이해를 촉진할 수 있도록, 문단을 구성하는 문장, 문장을 구성하는 단어를 가능한 간 단명료하게 사용해야 한다.
	5	권장	핵심 주제를 첫 문단, 첫 문장에 제공하고 있다. 핵심 주제를 문단이나 문장의 첫 부분에 배치할 경우, 다음에 어떤 내용이 나올 것인지를 충분히 예측할 수 있으므로 내용을 조직화하고 이해하기 쉽다.
	6	권장	인포그래픽, 사진, 동영상 등의 콘텐츠를 적절하게 활용하고 있다. 시각적 정보를 활용하면 텍스트에만 의존하는 것 보다 말하고자 하는 바를 효과적으로 전달할 수 있으며 사용자의 흥미를 유발한다.

 

( 4 ) 댓글 남기기/읽기

상세패턴	번호	구분	점검항목	YES	NO	N/A
댓글 남기기/읽기	1	필수	댓글입력에 사용하는 텍스트 입력필드의 크기를 적절하게 제공하고 있다. 사용자가 여러 줄의 텍스트를 입력할 수 있음을 고려하여 입 력필드를 충분히 크게 제공해야 한다.
	2	필수	텍스트 입력필드를 콘텐츠 주변에 제공하고 있다. 이미지, 기사 등의 대상과 이에 대해 의견을 남기 는 행동이 연결될 수 있도록 충분히 가까운 곳에 제공해야 한다.
	3	권장	댓글을 적절하게 구조화하여 표현하고 있다. 단순히 상세내용에 의견을 남기는 것이 중요하다 면 댓글을 등록된 시간 순으로 보여주는 것이 좋 다. 그러나 사용자들 간의 활발한 토론이 필요한 경우, 댓글 작성자를 기준으로 내용을 구조화하는 것이 효과적이다.
	4	필수	작성자/관리자가 남긴 댓글을 다른 댓글과 분명하게 구분하고 있다. 작성자/관리자의 댓글은 사용자에게 중요한 정보를 전달하기 때문에 명확히 구분되어야 한다.
	5	권장	페이징을 적절하게 사용하고 있다. 페이징을 적절하게 사용하면, 댓글 하단의 다른 정 보를 확인하기 위해 스크롤하지 않아도 되며, 페이 지 로딩 속도에 도움이 된다.
	6	필수	관리자가 댓글을 삭제할 경우, 삭제 이유를 명확하게 제공하고 있다. 댓글이 관리자에 의해 삭제되었으며, 어떠한 이유 로 삭제되었는지를 표시함으로써 사용자들은 사이 트에서 어떤 행동이 허용되지 않는지 알 수 있다.

 

 

 

( 5 ) 공유/공감

상세패턴	번호	구분	점검항목	YES	NO	N/A
공유/공감	1	필수	공유/공감 아이콘은 관련된 대상 주변에 제공 하고 있다. 공유/공감 아이콘을 공유하거나 공감을 표시하고자 하는 콘텐츠 주변에 배치하여 어떤 대상에 대해 행동하고 있는지를 알 수 있게 만들어야 한다.
	2	권장	여러 가지 방식의 공유 기능을 제공하고 있다. 공유, 전송, 내보내기, 북마크 등 사용자가 다양한 방식으로 콘텐츠를 공유할 수 있게 해 주어야 한 다
	3	권장	공감수 기준의 정렬 기능을 제공하고 있다. 공감수를 기준으로 한 정렬 기능을 제공하여, 많은 사용자들로부터 공감을 얻은 콘텐츠를 확인할 수 있도록 하는 것이 좋다.
	4	필수	공감을 표시한 사용자의 정보가 다른 사용자 에게 표시되지 않도록 하고 있다. 공감을 표시한 사용자를 향한 커뮤니티의 부정적 인 행동을 유발할 수 있으므로 다른 사용자에게 의견을 표시한 사용자의 정보를 제공해서는 안 된 다.

'

( 6 ) 관련콘텐츠

상세패턴	번호	구분	점검항목	YES	NO	N/A
관련콘텐츠	1	필수	사용자의 목표나 선호와 관련 있는 콘텐츠를 제공하고 있다. 사용자의 목표나 선호와 관련 없는 추천 정보는 오히려 방해가 되므로 실제로 관련이 있는 콘텐츠 를 보여주어야 한다.
	2	권장	관련 콘텐츠 목록의 제목을 적절하게 제공하고 있다. 공유, 전송, 내보내기, 북마크 등 사용자가 다양한 방식으로 콘텐츠를 공유할 수 있게 해 주어야 한 다
	3	필수	상세내용 주변에 관련 콘텐츠 목록을 배치하고 있다. 상세내용과 관련콘텐츠 목록 사이에 너무 많은 공 백이 있거나 다른 요소가 개입되면 사용자가 목록 을 보지 못하고 놓칠 가능성이 높다.
	4	권장	관련 콘텐츠 목록 주변에 광고배너 또는 시선을 끄는 요소가 배치되지 않도록 하고 있다. 목록 주변에 배너나 광고처럼 표현된 요소가 배치되면 사용 자는 사이드바에 주의를 잘 기울이지 않으므로 유의해야 한 다

 

 

---

< 회원 >

 

( 1 ) 회원가입

상세패턴	번호	구분	점검항목	YES	NO	N/A
회원가입	1	권장	최소한의 정보만 요구하고 있다. 사이트에 회원가입이 필요한지를 우선적으로 고려 해야 한다. 회원가입이 필요하다면, 아이디, 비밀번 호 정보 정도로 최소화할 것을 권장한다
	2	필수	입력이 필요한 데이터의 용도를 명확하게 설명하고 있다. 입력한 데이터가 어떻게 활용될 것이고, 어떤 편의 성을 제공할 수 있는지를 사용자에게 명확하게 안 내해야 한다.
	3	필수	아이디, 비밀번호 입력양식에 대해 사전에 정확하게 안내하고 있다. 입력필드에 영문만 입력가능한지, 숫자가 포함되어 야 하는지 등의 요구조건은 오류가 발생하기 전에 정확하게 알려주어야 한다. 사용자가 회원가입 과 정을 중도에 포기하지 않고, 성공적인 가입경험을 할 수 있도록 도와준다.
	4	권장	비밀번호 입력필드에 입력한 문자를 확인할 수 있도록 표시하고 있다. 회원가입 과정 동안만 데이터를 기호(*)로 변환하 지 않는 방안을 고려한다. 입력과 변환 사이에 짧 은 지연을 두어 문자를 확인하는 방법을 사용할 수 있다.
	5	권장	비밀번호의 보안수준을 적절하게 설정하고 있다. 정보제공 목적의 사이트 사용자와 민원발급 사이 트에서 사용자가 기대하는 사이트 보안수준은 매 우 다르다. 따라서 사용자가 사이트의 성격에 맞게 비밀번호 보안수준을 설정할 수 있도록 해 주어야 한다.
	6	권장	오류 메시지는 제출버튼을 누르기 이전에 실시간으로 표시하고 있다. 회원가입 제출버튼을 누르기 전에 오류 메시지를 실시간으로 제공하면, 사용자의 불편과 가입과정에 서의 이탈을 방지할 수 있다.
	7	권장	회원 가입 이외에 공개인증(OAuth)을 이용한 인증수단을 제공하고 있다. 회원가입 과정을 거치지 않고, 공개 인증을 이용한 편리한 로그인 방식의 사용을 고려해 본다.

 

( 2 ) 약관동의

상세패턴	번호	구분	점검항목	YES	NO	N/A
약관동의	1	권장	제출 버튼의 레이블에 구체적인 행동을 반영 하여 제공하고 있다. 약관동의 서식 제출은 문서에 서명하는 과정과 유 사하다. 클릭함으로써 동의하게 됨을 분명히 알려 주면, 사용자는 서명을 하는 과정과 유사한 논리적 인 흐름에 따라 자연스럽게 행동할 수 있다.
	2	필수	동의하지 않음 옵션을 제공하고 있다. 대안을 선택할 수 있는 기회를 제공받은 것으로 인해, 사용자는 약관에 동의하는 행동이 더욱 의미 있다고 느끼게 된다.
	3	권장	동의함/동의하지 않음 옵션은 다른 요소와 명확하게 구분하여 표현하고 있다. 선택 옵션이 다른 요소들과 잘 구분되지 않으면, 사용자는 동의여부 선택 옵션을 인지하지 못해, 선 택과정 없이 다음 단계로 넘어가려는 시도를 하게 되고 결국 오류가 발생 할 수 있다.

 

( 3 ) 로그인/인증

상세패턴	번호	구분	점검항목	YES	NO	N/A
로그인/인증	1	권장	로그인은 반드시 필요한 상황에서만 유도하고 있다. 사용자의 작업 과정을 방해하지 말고, 로그인이 필 요한 작업을 수행하는 상황에서 로그인을 요청해 야 한다
	2	필수	로그인은 반드시 필요한 상황에서만 유도하고 있다. 사용자의 작업 과정을 방해하지 말고, 로그인이 필 요한 작업을 수행하는 상황에서 로그인을 요청해 야 한다
	3	필수	로그인 양식 주변에 아이디/비밀번호 찾기 링크를 제공하고 있다. 대다수의 인증 실패는 계정정보를 잊어버리는데서 기인하므로, 사용자가 로그인에 필요한 정보를 쉽 게 검색할 수 있도록 로그인 양식 주변에 아이디/ 비밀번호 찾기 링크를 제공해야 한다.
	4	권장	로그인 정보를 저장할 수 있는 옵션을 제공하 고 있다. 아이디나 비밀번호 중 어떤 정보가 저장되는지, 어 느 정도 기간 동안 저장되는지에 관한 정보를 보 여주거나 사용자가 선택할 수 있는 옵션을 제공한 다.
	5	권장	로그인 상태로의 전환을 명확하게 표시하고 있다. 사용자의 이름 또는 로그아웃 옵션을 표시하여, 사 용자가 현재 로그인 상태에 있음을 알려주어야 한 다.
	6	필수	로그아웃할 수 있는 방법을 분명하게 표시하고 있다. 로그인 상태로 전환된 후, 사용자가 로그아웃할 수 있는 방법을 쉽게 인지할 수 있도록 표현해야 한 다

 

( 4 ) 주소찾기

상세패턴	번호	구분	점검항목	YES	NO	N/A
주소찾기	1	필수	주소찾기 팝업버튼의 레이블을 명확하게 제공 하고 있다. ‘우편번호’, ‘검색’이 아니라 ‘주소검색’과 같이 정 확한 명칭의 레이블을 제공하여 사용자가 버튼을 빠르게 인지할 수 있도록 해야 한다.
	2	필수	별도의 팝업을 통해 주소를 입력하는 경우, 주소 입력필드의 비활성화 상태를 명확하게 표현하고 있다. 입력필드가 비활성화되지 않으면 사용자는 직접 입력을 시도하기 때문에, 입력폼의 제출 단계에서 검색시스템을 이용하여 정보를 다시 입력해야 하 는 문제가 발생한다.
	3	필수	입력받을 주소체계를 명확하게 표시하고 있다. 사용자가 부적절한 주소 및 주소검색 키워드를 입 력하지 않도록 입력받을 주소체계를 명확하게 표 시해야 한다

 

 

 

 

---

< 신청/조회/발행 >

 

( 1 ) 신청서 작성

상세패턴	번호	구분	점검항목	YES	NO	N/A
신청서 작성	1	필수	레이블과 설명은 입력필드 주변에 제공하고 있다. 입력필드의 용도와 관련 도움말을 쉽게 활용할 수 있도록 근접한 위치에 정보를 제공한다.
	2	필수	입력필드의 크기는 적절하게 제공하고 있다. 데이터 길이를 기준으로 입력필드를 충분히 크게 제공하여, 입력한 값을 확인하기 위해 별도로 키보 드를 사용하지 않도록 만들어야 한다.
	3	필수	필수입력 요소, 편집 가능한 요소가 명확하게 구분되도록 표현하고 있다. 사용자가 불필요한 동작을 수행하지 않도록 필수입력 항목 과 편집이 가능한 항목을 다른 요소들과 명확하게 구분한다
	4	필수	입력값의 단위를 표시하고 있다. 레이블과 별개로 ‘개, 부수’ 등의 데이터 입력 단위 를 표시하여 사용자의 입력 오류를 줄인다.
	5	필수	사용자가 잘못 입력/선택한 값을 자동으로 삭 제하지 않고 있다. 사용자가 어떤 값을 잘못 입력했는지 문제를 확인 하고 필요한 내용을 수정할 수 있도록, 입력값을 자동으로 삭제하지 않는다.
	6	필수	초기화 버튼은 다른 버튼과 명확하게 구분하고 있다. 사용자가 실수로 입력값을 모두 삭제하지 않도록 초기화 버튼을 시각적, 공간적으로 다른 버튼과 구 분해야 한다.

 

( 2 ) 신청내역 확인/취소

상세패턴	번호	구분	점검항목	YES	NO	N/A
신청내역 확인/취소	1	필수	내역을 적절하게 구조화하여 제공하고 있다. 여러 건의 신청 내역이 있을 경우, 내역을 표나 목 록으로 구조화하여 알기 쉽게 표현한다.
	2	필수	정렬 기능을 제공하고 있다. 내역을 신청일자, 중요도, 마감기한 등의 기준으로 정렬하여 중요한 내용을 우선적으로 확인할 수 있 게 만든다.
	3	권장	일괄 선택 기능을 제공하고 있다. 일괄 선택 기능을 제공하면, 사용자가 여러 건의 신청 내역에 같은 동작을 여러 번 반복하지 않고 필요한 작업을 빠르게 수행하도록 돕는다.
	4	필수	신청취소 버튼을 명확하게 구분할 수 있도록 표현하고 있다. 신청 상태를 변경하고자 하는 사용자가 원하는 목 표를 빠르게 달성할 수 있도록, 신청취소 버튼을 인지하기 쉽게 만든다

 

 

 

---

< 안내 >

 

( 1 ) 모달

상세패턴	번호	구분	점검항목	YES	NO	N/A
모달	1	필수	모달과 주변 영역을 명확하게 구분하고 있다. 사용자에게 모달창이 활성화되었음을 알려주고 주 의를 집중할 수 있게 도와준다.
	2	권장	모달에 스크롤이 생성되지 않도록 제공하고 있다. 모달은 핵심적인 내용을 간단하게 전달하고자 할 때 사용한다. 스크롤이 생성될 만큼 많은 양의 콘 텐츠는 모달이 아닌 별도의 페이지로 구성하는 것 이 바람직하다.
	3	권장	모달은 단계적이지 않고, 단순한 정보를 전달 하는 데 사용하고 있다. 복잡한 과업을 여러 단계로 구분할 때에는, 활용할 수 있는 공간이 한정적인 모달 대신 별도의 페이 지로 구성하는 것이 좋다.
	4	권장	하나의 모달이 다른 모달을 실행하지 않도록 제공하고 있다. 여러 개의 모달을 제공하게 되면 시각적 복잡성이 증가하고 조작이 어려워지므로, 한 번에 한 개의 모달만 실행되도록 해야 한다.
	5	권장	행위 관련 버튼은 최대 2개만 제공하고 있다. 모달과 같이 한정적인 영역에 여러 개의 버튼이 제공되면, 용도가 혼동되기 쉬우며 조작이 어렵다

 

( 2 ) 확인

상세패턴	번호	구분	점검항목	YES	NO	N/A
확인	1	권장	확인은 심각하거나 취소가 어려운 행동에 사용하고 있다. 중요도가 낮은 행동에 반복적으로 확인을 요청하 면 사용자는 불편을 느끼며, 시간이 지남에 따라 실제로 중요한 확인 메시지에는 신경 쓰지 않게 된다. 그러므로 결과가 매우 중요한 경우에 확인을 사용해야 한다.
	2	필수	상황에 대한 명확하고 간결한 설명을 제공하고 있다. 왜 그 행위를 수행하지 않아야 하는지, 어떤 결과 가 발생하는지를 명확하고 간단하게 설명하여 사 용자가 빠르게 내용을 인지할 수 있게 해 주어야 한다
	3	필수	행동을 확정, 취소할 수 있는 버튼을 모두 제공하고 있다. 행동을 확정하는 버튼과 함께 행동을 취소하고 이 전으로 돌아갈 수 있는 버튼을 제공하여, 오류를 방지하는 역할을 수행해야 한다.
	4	권장	버튼의 레이블에 행동을 구체적으로 설명하고 있다. 버튼 레이블에 작동 시, 어떤 동작을 수행하는 것 인지 구체적으로 기술되어 있으면 사용자는 본문 을 읽지 않더라도 어떤 행위를 할것인지 또는 하 지 말아야 하는지를 이해하고, 효과적으로 다음 행 동을 취할 수 있다.

 

( 3 ) 오류

상세패턴	번호	구분	점검항목	YES	NO	N/A
오류	1	필수	빠르게 인지할 수 있도록 표현하고 있다. 오류 메시지의 크기, 색상, 위치 등은 사용자가 빠르 게 오류 발생 정보를 인지할 수 있게 표현해야 한다.
	2	필수	발생한 오류 및 문제를 명확하게 설명하고 있다. 사용자가 어떤 종류의 오류가 어떤 지점에서 발생 했는지 명확히 이해할 수 있어야 오류를 수정할 수 있다.
	3	필수	오류를 수정할 수 있는 방법을 제공하고 있다. 오류의 내용이 복잡한 경우, 문제를 수정할 수 있 는 방법을 함께 제공하면 효과적으로 오류를 수정 할 수 있다.
	4	권장	정중한 문체를 사용하고 있다. 오류 메시지는 사용자에게 부정적인 상황을 알려 주는 정보이므로, 정중한 문체를 사용하여 사용자 를 안심시켜야 한다.

 

 

 

---

< 지원/기타 >

 

( 1 ) 직원검색

상세패턴	번호	구분	점검항목	YES	NO	N/A
직원검색	1	필수	직원 목록에 직원의 이름, 부서, 담당업무, 연락처를 표시하고 있다. 사용자와 정부 간 원활한 의사소통을 도울 수 있 도록, 전자정부 웹사이트에 기관 직원의 명단과 연 락처를 공개해야 한다. 단, 국방·통일·안보 등 보안 이 필요한 일부 기관 및 직위의 명단 및 연락처 정보는 표시하지 않아도 된다.
	2	권장	검색 입력폼과 전체 직원 목록을 함께 제공하고 있다. 검색 수행 이전에 입력폼만 단독으로 표시하거나 빈 목록을 제공하게 되면, 찾고자 하는 직원의 정 확한 정보를 알지 못하는 사용자가 정보를 파악하 는 데 어려움을 겪게 된다. 전체 직원 목록을 기본 으로 표시하여, 사용자가 목록에서 직원 정보를 탐 색할 수 있도록 해야 한다.
	3	권장	담당업무는 쉬운 용어로 간결하게 제공하고 있다. 일반적으로 사용자는 특정 업무를 담당하는 직원 의 정보를 확인하고 소통하고자 하므로, 업무 정보 에는 쉬운 용어를 사용하고 간략하게 구성하여 사 용자가 빠르게 인지할 수 있도록 해야 한다.

( 2 ) 기관위치 확인

상세패턴	번호	구분	점검항목	YES	NO	N/A
기관위치 확인	1	필수	모든 정보는 정확하게 제공하고 있다. 잘못된 기관의 연락처나 위치 정보로 인해 사용자 가 시간과 비용을 낭비하지 않도록, 모든 정보는 최신의 상태로 정확하게 제공해야 한다.
	2	필수	기관의 위치를 표시한 약도나 지도를 제공하고 있다. 주소 텍스트 이외에 약도 또는 지도를 제공하여, 사용자 가 위치 정보를 효율적으로 확인할 수 있도록 해야 한 다. 약도와 지도를 모두 제공하는 경우에는 두 정보를 별도의 탭으로 구분하거나, 지도를 새 창으로 표시하여 화면의 혼잡도를 줄여야 한다.
	3	권장	약도는 위치 및 주변 정보를 적절하게 도식화 하여 제공하고 있다. 약도는 기관의 주변 정보를 적절한 수준으로 포함 하고 이해하기 쉽게 도식화하여 제공함으로써, 사 용자가 약도만으로 대략적인 위치 정보를 파악할 수 있도록 해야 한다.
	4	권장	다양한 접근 방법을 알기 쉽게 구조화하여 표현하고 있다. 기관에 접근하기 위해 활용할 수 있는 다양한 운 송 수단 및 경로 정보는 논리적으로 구조로 구성 되어야 하며, 서로 다른 정보가 명확하게 구분되도 록 표현해야 한다.
	5	권장	위치 확인에 참고할 수 있는 유용한 링크를 제공하고 있다. 사용자가 별도의 검색 없이 관련 정보를 빠르게 확인할 수 있도록, 지역 교통수단 안내 웹사이트, 운송 시간표 안내 웹사이트 등으로 연결되는 유용한 링크를 제공하 는 것이 좋다.

 

( 3 ) 도움말 찾기

상세패턴	번호	구분	점검항목	YES	NO	N/A
도움말 찾기	1	권장	제목은 사용자가 겪는 문제점을 반영하여 제공하고 있다. 도움말의 제목을 구성하는 데 실제 사용자가 겪는 어려움과 문제를 반영함으로써, 사용자가 문제의 해결 방안을 빠르게 발견할 수 있도록 도와주어야 한다.
	2	필수	목록을 유형별로 분류하여 제공하고 있다. 도움말의 개수가 많은 경우, 도움의 유형, 도움말 이 필요한 사용자 유형 등 의미 있는 단위 별로 도움말을 분류하여 제공하면 사용자가 정보를 더 효율적으로 탐색할 수 있다
	3	필수	관리자에게 직접 문의할 수 있는 링크를 제공 하고 있다. 사용자가 유용한 도움말을 찾지 못한 경우를 대비 하여, 목록이나 상세 도움말 주변에 관리자에게 직 접 문의할 수 있는 링크를 제공해야 한다