본문 바로가기
  1. 무인정보단말기
  2. UI 리소스
  3. 무인민원발급기
  4. 템플릿
  5. 기본
시작안내 - 상단 공통영역: 시민구청, 정보영역 및 컨트롤 영역: 2024년 노인일자리 및 사회활동 지원사업 참여자를 모집합니다 2023년 11월 29일~12월 31일 시작하기 버튼, 하단공통영역: 한국어,영어,중국어,일본어 버튼, 접근성 버튼

사용성 체크리스트

□ 발권을 시작하는 방법을 명확히 안내해야 한다.
- 명확한 색대비, 아이콘, 텍스트를 활용하여 광고/정보 영역과 발권을 시작하는 컨트롤을 시각적으로 명확히 구분한다. 광고/정보 화면과 공간적으로 분리하여 적용해야 한다.
기본선택(증명종류) - 상단 공통영역: 처음으로 버튼, 시민구청, 선택 언어, 직원호출 버튼,  단계표시:1.기본선택, 2.본인확인, 3.옵션선택, 4.내역확인, 5.결제하기, 6.완료 중 기본선택 단계, 정보영역 및 컨트롤 영역: 발급을 원하는 증명서를 선택하세요. 탭:증명서찾기,간편발급,큰글씨 보기,설치장소,이용안내 중 증명서 찾기 선택, 증명서 찾기 탭 내용:주민등록(200원), 지적,토지,건축(기본 300원 추가1매당 100원), 차량(200원), 보건복지(200원), 농지원부 농업경영체(수수료:다음화면), 가족관계등록부(500원), 제적부(200원), 법정 증명서(기본300원 추가1매당 100원), 지방세 세목별 과세증명서(관내:100원 관외:발급불가), 어선원부(800원), 교육제증명 대학교(원) 제외(무료), 국세증명(무료), 이전 버튼, 페이지, 다음 버튼,  하단공통영역: 이전 버튼, 접근성 버튼

사용성 체크리스트

□ 메뉴 컨트롤(버튼)의 구분을 명확하게 해야 한다.
- 일반적으로 사용되는 메뉴명을 활용하고, 메뉴 버튼의 구분을 명확하게 해야 한다.

□ 정보 영역과 컨트롤 영역의 구분을 명확하게 해야 한다.

□ 발권 내역에서 옵션 변경 및 삭제 컨트롤을 제공해준다.

□ 초성 검색 사용 방법을 안내해야 한다. (열차표 발권)
- 초성 검색 기능이 들어갈 경우, 사용법에 대한 안내를 사용자 친화적으로 해야 한다.
기본선택(증명서) - 발급을 원하시는 증명서를 선택 후 완료 버튼을 누르세요. 주민등록표 초본 200원 버튼, 주민등록표 등본 200원 버튼, 취소 버튼, 완료 버튼

사용성 체크리스트

□ 메뉴 컨트롤(버튼)의 구분을 명확하게 해야 한다.
- 일반적으로 사용되는 메뉴명을 활용하고, 메뉴 버튼의 구분을 명확하게 해야 한다.

□ 정보 영역과 컨트롤 영역의 구분을 명확하게 해야 한다.

□ 발권 내역에서 옵션 변경 및 삭제 컨트롤을 제공해준다.

□ 초성 검색 사용 방법을 안내해야 한다. (열차표 발권)
- 초성 검색 기능이 들어갈 경우, 사용법에 대한 안내를 사용자 친화적으로 해야 한다.
본인확인(주민등록번호) - 상단 공통영역: 처음으로 버튼, 시민구청, 선택 언어, 직원호출 버튼,  단계표시:1.기본선택, 2.본인확인, 3.옵션선택, 4.내역확인, 5.결제하기, 6.완료 중 본인확인 단계, 정보영역 및 컨트롤 영역: 본인 확인을 위해 주민등록번호를 입력하세요. 주민등록번호 앞6자리-뒤1자리, 3*4 숫자 입력 키패드, 취소 버튼, 다음 버튼,  하단공통영역: 이전 버튼, 접근성 버튼

사용성 체크리스트

□ 인증 수단별 사용법은 안내해야 한다.
- 생체 인증을 위해 사용자가 쉽게 따라 할 수 있도록 안내 가이드를 명확히 제시해야 하고, 인증이 완료되면 시각적, 청각적으로 명확한 피드백을 제공해야 한다.

□ 사용자의 개인정보를 보호해야 한다.
- 개인정보의 경우, 시각적인 노출이 차단되어야 하고, 특히 음성정보가 사용되는 경우 사용자가 동의한 장치를 통해서만 제공되어야 한다.

□ 숫자 입력 키패드는 3x4 배열을 사용해야 한다.
본인확인(지문) - 상단 공통영역: 처음으로 버튼, 시민구청, 선택 언어, 직원호출 버튼,  단계표시:1.기본선택, 2.본인확인, 3.옵션선택, 4.내역확인, 5.결제하기, 6.완료 중 본인확인 단계, 정보영역 및 컨트롤 영역: 본인 확인을 위해 지문인식기에 손가락을 올려주세요. 지문 확인창 안내, 취소 버튼, 하단공통영역: 이전 버튼, 접근성 버튼

사용성 체크리스트

□ 인증 수단별 사용법은 안내해야 한다.
- 생체 인증을 위해 사용자가 쉽게 따라 할 수 있도록 안내 가이드를 명확히 제시해야 하고, 인증이 완료되면 시각적, 청각적으로 명확한 피드백을 제공해야 한다.

□ 사용자의 개인정보를 보호해야 한다.
- 개인정보의 경우, 시각적인 노출이 차단되어야 하고, 특히 음성정보가 사용되는 경우 사용자가 동의한 장치를 통해서만 제공되어야 한다.

□ 숫자 입력 키패드는 3x4 배열을 사용해야 한다.
옵션선택(전체포함) - 상단 공통영역: 처음으로 버튼, 시민구청, 선택 언어, 직원호출 버튼,  단계표시:1.기본선택, 2.본인확인, 3.옵션선택, 4.내역확인, 5.결제하기, 6.완료 중 옵션선택 단계, 정보영역 및 컨트롤 영역: 주민등록표(등본)의 내용을 선택하세요. 탭(법원용,교육기관용,공공기관용,부동산계약용,금융/병원용) 중 법원용 선택, 전체포함 버튼(선택), 전체미포함 버튼, 1.과거주소변동 사항 포함버튼(선택),미포함버튼, 주소표기기간 최근5년 기간선택버튼,2.세대구성사유 포함버튼(선택),미포함버튼,3.세대구성일자 포함버튼(선택),미포함버튼,4.발생일/신고일 포함버튼(선택),미포함버튼,5.변동사유 포함버튼(선택),미포함버튼, 사유표기인원 세대버튼,세대원버튼,6.교부대상자 외 다른 세대원의 이동 포함버튼(선택),미포함버튼,7.주민등록번호 뒷자리 포함버튼(선택),미포함버튼, 세대구성일자 본인버튼,세대원버튼,8.발생일/신고일 포함버튼(선택),미포함버튼,9.동거인 포함버튼(선택),미포함버튼, 발급하기 버튼, 하단공통영역: 이전 버튼, 접근성 버튼

사용성 체크리스트

□ 선택된 내역 및 옵션은 색상, 체크 표시 등으로 명확히 구분할 수 있도록 해야 한다.

□ 컨트롤 터치의 결과를 명확히 알려주는 문구를 사용해야 한다.
- ‘확인’ ‘다음’ 보다는 ‘발급하기’ ‘발권하기’와 같은 문구를 제공해줘야 한다.
옵션선택(전체미포함) - 상단 공통영역: 처음으로 버튼, 시민구청, 선택 언어, 직원호출 버튼,  단계표시:1.기본선택, 2.본인확인, 3.옵션선택, 4.내역확인, 5.결제하기, 6.완료 중 옵션선택 단계, 정보영역 및 컨트롤 영역: 주민등록표(등본)의 내용을 선택하세요. 탭(법원용,교육기관용,공공기관용,부동산계약용,금융/병원용) 중 법원용 선택, 전체포함 버튼, 전체미포함 버튼(선택), 1.과거주소변동 사항 포함버튼,미포함버튼(선택), 주소표기기간 최근5년 기간선택버튼(비활성),2.세대구성사유 포함버튼,미포함버튼(선택),3.세대구성일자 포함버튼,미포함버튼(선택),4.발생일/신고일 포함버튼,미포함버튼(선택),5.변동사유 포함버튼,미포함버튼(선택), 사유표기인원 세대버튼,세대원버튼,6.교부대상자 외 다른 세대원의 이동 포함버튼,미포함버튼(선택),7.주민등록번호 뒷자리 포함버튼,미포함버튼(선택), 세대구성일자 본인버튼(비활성),세대원버튼(비활성),8.발생일/신고일 포함버튼,미포함버튼(선택),9.동거인 포함버튼,미포함버튼(선택), 발급하기 버튼, 하단공통영역: 이전 버튼, 접근성 버튼

사용성 체크리스트

□ 선택된 내역 및 옵션은 색상, 체크 표시 등으로 명확히 구분할 수 있도록 해야 한다.

□ 컨트롤 터치의 결과를 명확히 알려주는 문구를 사용해야 한다.
- ‘확인’ ‘다음’ 보다는 ‘발급하기’ ‘발권하기’와 같은 문구를 제공해줘야 한다.
옵션선택(신청부수) - 상단 공통영역: 처음으로 버튼, 시민구청, 선택 언어, 직원호출 버튼,  단계표시:1.기본선택, 2.본인확인, 3.옵션선택, 4.내역확인, 5.결제하기, 6.완료 중 옵션선택 단계, 정보영역 및 컨트롤 영역: 발급하실 부수를 입력하신 후 완료 버튼을 눌러주세요. 부수 입력창, 3*4 숫자 키패드, 이전버튼, 완료버튼, 하단공통영역: 이전 버튼, 접근성 버튼

사용성 체크리스트

□ 선택된 내역 및 옵션은 색상, 체크 표시 등으로 명확히 구분할 수 있도록 해야 한다.

□ 컨트롤 터치의 결과를 명확히 알려주는 문구를 사용해야 한다.
- ‘확인’ ‘다음’ 보다는 ‘발급하기’ ‘발권하기’와 같은 문구를 제공해줘야 한다.
내역확인 - 상단 공통영역: 처음으로 버튼, 시민구청, 선택 언어, 직원호출 버튼,  단계표시:1.기본선택, 2.본인확인, 3.옵션선택, 4.내역확인, 5.결제하기, 6.완료 중 내역확인 단계, 정보영역 및 컨트롤 영역: 신청 내용을 확인하시고 결제하기 버튼을 누르세요. 신청 증명서(주민등록표(등본)), 신청 부수(3부), 선택내용(증명서 용도,임의선택), 결제요금(1부당 수수료:200원,합계:600원), 결제금액 600원, 결제하기 버튼, 하단공통영역: 이전 버튼, 접근성 버튼

사용성 체크리스트

□ 발권 내역은 수정하거나 취소할 수 있어야 한다.
- 선택된 정보에 대해 수량을 변경할 수 있어야 하고, 삭제할 수 있는 컨트롤을 제공해야 한다.

□ 중요한 정보와 그 외 정보는 명확히 구분한다.
- 결제와 직접 관련이 되는 정보(예. 목적지, 시간, 결제금액 등)는 강조하여 시각적으로 명확히 구분한다. 접근성을 고려하여 강조하는 부분을 중심으로 음성 및 수어로 안내해야 한다.
내역확인(무료) - 상단 공통영역: 처음으로 버튼, 시민구청, 선택 언어, 직원호출 버튼,  단계표시:1.기본선택, 2.본인확인, 3.옵션선택, 4.내역확인, 5.결제하기, 6.완료 중 내역확인 단계, 정보영역 및 컨트롤 영역: 신청 내용을 확인하시고 결제하기 버튼을 누르세요. 신청 증명서(주민등록표(등본)), 신청 부수(1부), 선택내용(증명서 용도,임의선택), 결제요금(1부당 수수료:무료,합계:무료), 결제금액 무료, 신청하기, 하단공통영역: 이전 버튼, 접근성 버튼

사용성 체크리스트

□ 발권 내역은 수정하거나 취소할 수 있어야 한다.
- 선택된 정보에 대해 수량을 변경할 수 있어야 하고, 삭제할 수 있는 컨트롤을 제공해야 한다.

□ 중요한 정보와 그 외 정보는 명확히 구분한다.
- 결제와 직접 관련이 되는 정보(예. 목적지, 시간, 결제금액 등)는 강조하여 시각적으로 명확히 구분한다. 접근성을 고려하여 강조하는 부분을 중심으로 음성 및 수어로 안내해야 한다.
결제하기(방법선택,5버튼) - 상단 공통영역: 처음으로 버튼, 시민구청, 선택 언어, 직원호출 버튼,  단계표시:1.기본선택, 2.본인확인, 3.옵션선택, 4.내역확인, 5.결제하기, 6.완료 중 결제하기 단계, 정보영역 및 컨트롤 영역: 결제 방법을 선택하세요. 총 결제금액 9,000원, 결제방법(신용카드,페이,모바일 쿠폰,바코드 할인,기프트 카드) ?기프트 카드:금액이 충전 된 실물 카드, 하단공통영역: 이전 버튼, 접근성 버튼

사용성 체크리스트

□ 결제 방법 선택 화면은 이미지와 글자가 포함된 컨트롤로 제공한다.
- 사용자가 쉽고 빠르게 이해할 수 있도록 이미지(혹은 아이콘)과 글자를 함께 버튼식으로 제공하며, 그리드뷰로 배치하여 탐색하기 쉽도록 제공한다. 결제금액도 같이 표시해야 한다.

□ 카드 인식기의 위치, 카드 삽입 방향, 카드 면에 대해 안내를 해준다.
- 매체를 삽입하는 과정에서 원활한 삽입을 도와주는 모양으로 되어있거나 가이드를 제공해야 한다. 인식되었을 때 시각적, 청각적 피드백을 제공해야 한다.

□ 삽입 방향이 잘못되었을 경우, 곧바로 삽입된 매체를 배출하고 오류 메시지 및 음성 메시지를 발생시켜야 한다.

□ 카드 결제 승인 상태를 보여주기 위해 승인 요청 문구 및 진행 막대가 잘 보이도록 표시해야 한다.
결제하기(결제) - 상단 공통영역: 처음으로 버튼, 시민구청, 선택 언어, 직원호출 버튼,  단계표시:1.기본선택, 2.본인확인, 3.옵션선택, 4.내역확인, 5.결제하기, 6.완료 중 결제하기 단계, 정보영역 및 컨트롤 영역: 신용카드를 우측 하단의 카드 리더기에 끝까지 넣어주세요, 신용카드 결제, 하단공통영역: 이전 버튼, 접근성 버튼

사용성 체크리스트

□ 결제 방법 선택 화면은 이미지와 글자가 포함된 컨트롤로 제공한다.
- 사용자가 쉽고 빠르게 이해할 수 있도록 이미지(혹은 아이콘)과 글자를 함께 버튼식으로 제공하며, 그리드뷰로 배치하여 탐색하기 쉽도록 제공한다. 결제금액도 같이 표시해야 한다.

□ 카드 인식기의 위치, 카드 삽입 방향, 카드 면에 대해 안내를 해준다.
- 매체를 삽입하는 과정에서 원활한 삽입을 도와주는 모양으로 되어있거나 가이드를 제공해야 한다. 인식되었을 때 시각적, 청각적 피드백을 제공해야 한다.

□ 삽입 방향이 잘못되었을 경우, 곧바로 삽입된 매체를 배출하고 오류 메시지 및 음성 메시지를 발생시켜야 한다.

□ 카드 결제 승인 상태를 보여주기 위해 승인 요청 문구 및 진행 막대가 잘 보이도록 표시해야 한다.
발권 - 상단 공통영역: 처음으로 버튼, 시민구청, 선택 언어, 직원호출 버튼,  단계표시:1.기본선택, 2.본인확인, 3.옵션선택, 4.내역확인, 5.결제하기, 6.완료 중 결제하기 단계, 정보영역 및 컨트롤 영역: 증명서 발급중 출력이 완료되면 증명서를 받아가세요 번호 30번

사용성 체크리스트

□ 매체가 출력되는 경우, 출력이 완료되었다는 글자 안내와 음성 메시지를 제공해야 한다.

□ 발권 출력에 대한 위치/사용 방법을 시각적 혹은 비시각적 안내를 통해 제공해야 한다.
- 물리적 결과물이 산출되는 경우 산출 위치를 직관적으로 표시해야 한다. 그림, 사진, 물리적 조명 등의 시각적 안내와 음성 등의 비시각적 안내를 동반해야 한다.
완료(영수증출력 여부) - 상단 공통영역: 처음으로 버튼, 시민구청, 선택 언어, 직원호출 버튼,  단계표시:1.기본선택, 2.본인확인, 3.옵션선택, 4.내역확인, 5.결제하기, 6.완료 중 완료 단계, 정보영역 및 컨트롤 영역: 결제가 완료되었습니다 영수증을 출력하시겠습니까? 아니오 버튼, 예 버튼, 하단공통영역: 이전 버튼, 접근성 버튼

사용성 체크리스트

□ 매체가 출력되는 경우, 출력이 완료되었다는 글자 안내와 음성 메시지를 제공해야 한다.

□ 과업의 완료 여부를 명확하게 알려주며, 신용카드와 같은 소지품을 잊지 않게 가져가도록 안내해야 한다.
- 사용자가 카드, 영수증 및 물건 등을 회수할 수 있게 하도록 시각적 혹은 비시각적 안내를 해야 한다.
완료(영수증출력) - 상단 공통영역: 처음으로 버튼, 시민구청, 선택 언어, 직원호출 버튼, 정보영역 및 컨트롤 영역: 영수증 출력중 잊으신 물건 없이 안녕히 가세요

사용성 체크리스트

□ 매체가 출력되는 경우, 출력이 완료되었다는 글자 안내와 음성 메시지를 제공해야 한다.

□ 과업의 완료 여부를 명확하게 알려주며, 신용카드와 같은 소지품을 잊지 않게 가져가도록 안내해야 한다.
- 사용자가 카드, 영수증 및 물건 등을 회수할 수 있게 하도록 시각적 혹은 비시각적 안내를 해야 한다.
완료 - 상단 공통영역: 처음으로 버튼, 선택 언어, 직원호출 버튼, 정보영역 및 컨트롤 영역: 이용해주셔서 감사합니다 잊으신 물건 없이 안녕히 가세요. 시민구청

사용성 체크리스트

□ 매체가 출력되는 경우, 출력이 완료되었다는 글자 안내와 음성 메시지를 제공해야 한다.

□ 과업의 완료 여부를 명확하게 알려주며, 신용카드와 같은 소지품을 잊지 않게 가져가도록 안내해야 한다.
- 사용자가 카드, 영수증 및 물건 등을 회수할 수 있게 하도록 시각적 혹은 비시각적 안내를 해야 한다.

이 페이지의 내용과 사용편의성에 만족하십니까?

사용편의성 만족도
자료 담당자
김민수 선임(053-230-1380)
최근자료수정일
2024-03-25