a11y

7. 접근성 콘텐츠 제작 기법

무인정보단말기 접근성

무인정보단말기 접근성 콘텐츠 제작 기법은 무인정보단말기 UI플랫폼 사이트에 자세히 안내되고 있어서 기본적인 UI가이드 정보만 안내하고 상세내용은 사이트 링크로 제공. 무인정보단말기(키오스크) UI(사용자 인터페이스) 가이드는 무인정보단말기 시스템을 설계하고 개발할 때 필요한 UI 디자인에 대한 지침을 제공하는 문서이다. 이 가이드는 사용자 경험(UX)을 향상시키고, 사용자가 무인정보단말기를 효과적으로 이용할 수 있도록 하는 데 중점을 둔다. 무인정보단말기의 UI는 모든 사용자에게 접근 가능해야 하므로 장애인을 위한 보조 기술 및 기능성을 고려하여 UI를 설계하도록 지침을 제시한다.

무인정보단말기 개요

무인정보단말기(키오스크) UI(사용자 인터페이스) 가이드는 무인정보단말기 시스템을 설계하고 개발할 때 필요한 UI 디자인에 대한 지침을 제공하는 문서이다. 이 가이드는 사용자 경험(UX)을 향상시키고, 사용자가 무인정보단말기를 효과적으로 이용할 수 있도록 하는 데 중점을 둔다. 무인정보단말기의 UI는 모든 사용자에게 접근 가능해야 하므로 장애인을 위한 보조 기술 및 기능성을 고려하여 UI를 설계하도록 지침을 제시한다.
무인정보단말기 UI 플랫폼 > 무인정보단말기 > 안내

무인정보단말기 분류

대분류

선행 연구(NIA 연구반, 22년)를 통해 사용자의 무인정보단말기 활용 목적 및 개별 업체의 자율성을 고려하여 4개 유형으로 분류하였다. 본 가이드는 대분류 UI 가이드를 제공한다.

  1. 유통(결제형)
    • 상품코드(바코드 등)를 사용자가 직접 스캔해서 제품을 구매하는 유형
      • 예. 대형마트, 편의점 등
  2. 주문(티켓형)
    • 직원의 도움이 필요한 음식물 등의 주문 및 구매
      • 예. 커피숍, 패스트푸드점 등
  3. 발권(티켓/서류)
    • 요청에 대해 정보처리 후 인쇄물 제공
      • 예. 무인민원발급기, 무인처방전발행기, 셀프체크인(공항, 교통)
  4. 안내
    • 사용자 조작에 따라 정보 제공
      • 예. 관광정보시스템, 정보제공시스템, 안내시스템 등
중분류

무인정보단말기 관련 고시인 「장애인·고령자 등의 정보 접근 및 이용 편의 증진을 위한 고시」(과기정통부, 22년)에서 16개 유형으로 분류되어 있으며, 아래 내용은 대분류와 대응하여 매핑한 결과이다.

  1. 유통
    • (1)무인주유기 (2)무인주차정산기 (3)무인결제기 (4)무인도서대여반납기
  2. 주문
    • (5)무인주문기
  3. 발권
    • (6)무인민원발급기 (7)무인발권기 (8)무인발매기 (9)무인증명발매기 (10)셀프체크인 (11)무인처방전발매기 (12)금융자동화기기
  4. 안내
    • (13)종합정보시스템 (14)위치정보시스템
  5. 기타
    • (15)무인사용자인증기 (16) 기타(사물함, 택배함 등)

UI 가이드 원칙

UI 원칙은 무인정보단말기 서비스의 사용자 경험을 위해 무인정보단말기 UI 설계 시 준수해야 할 기본 원칙과 방향성을 담고 있다.
무인정보단말기 UI 플랫폼 > 무인정보단말기 > UI 가이드 원칙

  1. 사용자 중심 UI

    사용자 중심 UI 원칙은 사용자 친화적인 UI를 설계해야 함을 의미한다.

    • 용어를 알기 쉽게 정의한다.
    • 무인정보단말기에서 요구하는 과업의 수준을 사용자에게 적절하게 정의한다.
    • 사용자가 인지하기 쉬운 무인정보단말기의 정확한 피드백을 정의한다.
    • UI 컴포넌트는 실제와 유사한 메타포를 바탕으로 만든다.
  2. 사용자에 최적화된 UI

    사용자에 최적화된 UI 원칙은 사용자의 다양한 능력을 고려한 UI를 설계해야 함을 의미한다.

    • 무인정보단말기에 사용되는 정보, 기능, 컨트롤을 정의한다.
    • 정보 및 컨트롤 UI 컴포넌트를 인식하기 쉽게 가시적으로 제작한다.
    • 접근성과 사용성 모두 고려해 설계한다.
    • 무인정보단말기에 필요한 접근성 기능을 정의한다.
  3. 직관적인 UI

    직관적인 UI 원칙은 학습이 필요 없는 인지적으로 쉬운 UI를 설계해야 함을 의미한다.

    • 무인정보단말기에서 발생할 수 있는 오류 상황을 정의한다.
    • 오류 상황에 맞는 적절한 오류 메시지의 피드백 방식을 정의한다.
    • 한가지 방식이 아니라 다양한 사용자가 인지할 수 있는 피드백 방식을 개발한다.
    • 공통된 화면 레이아웃을 통해 구조화된 UI 구성한다.
  4. 조작하기 쉬운 UI

    조작하기 쉬운 UI 원칙은 사용자가 쉽게 화면을 컨트롤 할 수 있는 UI를 설계해야 함을 의미한다.

    • 무인정보단말기의 기능 및 컨트롤을 정의한다.
    • 기능 및 컨트롤이 다양한 사용자가 쉽게 제어할 수 있도록 구성한다.
    • 과업을 수행하는 도중 쉽게 되돌릴 수 있는 기능을 제공한다.
  5. 지속 가능한 일관된 UI

    지속 가능한 일관된 UI 원칙은 사용자가 사용에 있어서 일관된 UI를 설계해야 함을 의미한다.

    • 무인정보단말기 사용에 필요한 과업을 정의한다.
    • 과업의 프로세스가 일관되게 설계한다.
    • 공통된 화면 레이아웃을 통해 구조화되고 일관된 UI 구성한다.
  6. 개인의 정보가 보호되는 UI

    개인의 정보가 보호되는 UI 원칙은 입출력되는 개인정보가 보호되도록 설계해야 함을 의미한다.

    • 무인정보단말기에 입력 및 출력되는 개인정보를 정의한다.
    • 개인정보가 보호되는 방법 및 기능을 정의한다.

UI 사용성 체크리스트

누구에게나 동등한 기회 제공을 위해 무인정보단말기의 사용성 및 접근성을 보장할 필요가 있다.
무인정보단말기 UI 플랫폼 > 무인정보단말기 > 공통 UI 가이드

화면 레이아웃

화면 레이아웃 권장사항
[이미지 출처] 무인정보단말기 UI 플랫폼

사용성 체크리스트

사용성 체크리스트 화면은 27인치 이상의 크기를 권장한다 의 권장사항 예시이미지
[이미지 출처] 무인정보단말기 UI 플랫폼
무인정보단말기 과업의 단계 표시를 해야 한다 의 권장 사례 예시이미지
[이미지 출처] 무인정보단말기 UI 플랫폼
화면 상의 모든 글자의 크기는 글자의 높이가 12mm 이상으로 해야 한다 의 권장 사례 예시이미지
[이미지 출처] 무인정보단말기 UI 플랫폼
모든 컨트롤의 크기는 150mm<sup>2</sup>이상, 한 변의 길이 12mm 이상,  간격은 2.5mm 이상으로 해야 한다 권장 사례 예시이미지
[이미지 출처] 무인정보단말기 UI 플랫폼
의미 있는 글자나 아이콘, 컨트롤은 배경과 명도 대비가 명확해야 한다 의 권장 사례 예시이미지
[이미지 출처] 무인정보단말기 UI 플랫폼
불필요한 이미지 삽입을 지양해야 한다 의 권장 사례 예시이미지
[이미지 출처] 무인정보단말기 UI 플랫폼
아이콘은 식별하기 쉬운 표준 모양으로 글자와 함께 표시되어야 한다 권장사항의 예시이미지
[이미지 출처] 무인정보단말기 UI 플랫폼
글자 정보는 일상적이고 자연스러운 용어를 사용해야 한다 권장 사례 예시이미지
[이미지 출처] 무인정보단말기 UI 플랫폼
추가적인 탐색 인터랙션이 없도록 2줄 카테고리를 사용한다 의 권장 사례 예시이미지
[이미지 출처] 무인정보단말기 UI 플랫폼
추가적인 탐색 인터랙션이 없도록 2줄 카테고리를 사용한다 의 권장 사례 예시이미지
[이미지 출처] 무인정보단말기 UI 플랫폼
페이지가 늘어나는 경우, 명확한 페이지 표시를 해야 한다 의 권장 사례 예시이미지
[이미지 출처] 무인정보단말기 UI 플랫폼
직원 호출 컨트롤을 통해 지원 서비스를 제공해야 한다 의 권장사항 예시이미지
[이미지 출처] 무인정보단말기 UI 플랫폼
사용자의 선택적 응답을 요구하는 조작에는 시간제한(timeout)을 두지 않아야 한다 의 권장사항 예시이미지
[이미지 출처] 무인정보단말기 UI 플랫폼
무인정보단말기에 입력 및 출력되는 개인정보는 보호되어야 한다 의 권장사항 예시이미지1 무인정보단말기에 입력 및 출력되는 개인정보는 보호되어야 한다 의 권장사항 예시이미지2
[이미지 출처] 무인정보단말기 UI 플랫폼

장애 유형별 UI

의미 있는 모든 콘텐츠는 대체 콘텐츠와 함께 제공해야 한다.
대체 콘텐츠(이미지, 음성 안내, 자막 안내, 수어 안내 등)를 표시해주면 고령자, 장애인 등이 무인정보단말기의 반응을 인지하기 편할 수 있다. 화면에 문자 및 그림, 영상 정보가 의미를 지니는 경우, 이와 동등한 대체 콘텐츠를 제공하여야 한다. 모든 그림과 영상 정보에 대해서 대체 텍스트가 정확한 내용으로 제공되어야 한다.
무인정보단말기 UI 플랫폼 > 무인정보단말기 > 장애 유형별 공통 UI 가이드 > 음성

1. 시각장애인 (음성 안내)

의미 있는 모든 콘텐츠는 음성을 통해 안내해야 한다.
모든 시각적 정보는 음성과 함께 제공해야 한다. 무인정보단말기의 각 화면에서 어떠한 정보가 주고 어떠한 과업을 수행해야 하는지 알 수 있도록 음성을 통해 안내하여 시각장애인의 정확한 무인정보단말기의 사용을 지원해야 한다.

음성 출력 기준
(단위: dBA (※ A-weighted decibel))

음성 안내 세부 설정

음성 안내 원칙

음성 안내 제작

음성 안내 항목 및 내용

무인주문기 음성 안내 예시 출처 - 무인정보단말기 UI 플랫폼

https://www.kioskui.or.kr/index.do?menu_id=00001089

2. 시각장애인 (점자 표기)

점자 표시를 제공해야 한다.
무인정보단말기에 부착된 장치(예: 신용카드 투입구, 티켓 배출함 등)에 용도와 목적을 알 수 있도록 점자 표시를 하여 시각장애인의 정확한 무인정보단말기의 사용을 지원해야 한다.
무인정보단말기 UI 플랫폼 > 무인정보단말기 > 장애 유형별 공통 UI 가이드 > 점자

점자 기본 정의

점자란 시각장애인들이 사용하는 ‘문자’ 다. 점자는 양각된 6개의 점(가로 3줄, 세로 2줄)으로 이루어지며, 점의 수와 위치에 의하여 63개의 서로 다른 점형이 만들어지고 각 점형에 글자를 배정하여 문자 체계를 이룬다.
한 칸을 구성하는 각각의 점에는 번호가 매겨져 있으며, 왼쪽 위에서 아래로 1점, 2점, 3점과 오른쪽 위에서 아래로 4점, 5점, 6점으로 구분한다.
점자는 시각을 통해 읽는 문자와 달리 튀어나온 점을 촉각으로 식별해야 해서 점의 높이, 점의 지름 및 점간 거리 등이 점자식별 및 가독성에 많은 영향을 미친다.
점자에 대한 자세한 내용은 국립국어원의 ‘한글 점자 규정 해설’을 참고하길 바란다.
국립국어원 ‘점자 규정과 해설’

점자 예시 (왼쪽 위에서 아래 1점, 2점, 3점, 오른쪽 위에서 아래 4점, 5점, 6점)
[이미지 출처] 무인정보단말기 UI 플랫폼

점자 표시 규격

반구형 점자 예시이미지
[이미지 출처] 무인정보단말기 UI 플랫폼 - 반구형 점자
점자 규격 예시이미지
[이미지 출처] 무인정보단말기 UI 플랫폼 - 점자 규격(단위:mm)

점자 표시 위치

방향 준수 예시이미지
[이미지 출처] 무인정보단말기 UI 플랫폼 - 방향 준수 예시

점자 표시 제작

점자 표시 항목 및 내용

점자 표시 문구 예시

신용카드 점자표시 예시이미지
[이미지 출처] 무인정보단말기 UI 플랫폼 - 신용카드 점자표시
신용카드 넣는 곳 예시이미지
[이미지 출처] 무인정보단말기 UI 플랫폼 - 신용카드 넣는 곳 점자표시
카드 넣는 곳 예시이미지
[이미지 출처] 무인정보단말기 UI 플랫폼 - 카드 넣는 곳 점자표시
결제 단말기 예시이미지
[이미지 출처] 무인정보단말기 UI 플랫폼 - 결제 단말기 점자표시
바코드 점자표시 예시이미지
[이미지 출처] 무인정보단말기 UI 플랫폼 - 바코드 점자표시
바코드 스캐너 점자표시 예시이미지
[이미지 출처] 무인정보단말기 UI 플랫폼 - 바코드 스캐너 점자표시
바코드 대는 곳 점자표시 예시이미지
[이미지 출처] 무인정보단말기 UI 플랫폼 - 바코드 대는 곳 점자표시
영수증 점자표시 예시이미지
[이미지 출처] 무인정보단말기 UI 플랫폼 - 영수증 점자표시
영수증 나오는 곳 점자표시 예시이미지
[이미지 출처] 무인정보단말기 UI 플랫폼 - 영수증 나오는 곳 점자표시
용지 나오는 곳 점자표시 예시이미지
[이미지 출처] 무인정보단말기 UI 플랫폼 - 용지 나오는 곳 점자표시
출력물 나오는 곳 점자표시 예시이미지
[이미지 출처] 무인정보단말기 UI 플랫폼 - 출력물 나오는 곳 점자표시
티켓 나오는 곳 점자표시 예시이미지
[이미지 출처] 무인정보단말기 UI 플랫폼 - 티켓 나오는 곳 점자표시
발권 내역 나오는 곳 점자표시 예시이미지
[이미지 출처] 무인정보단말기 UI 플랫폼 - 발권 내역 나오는 곳 점자표시
증명서 나오는 곳 점자표시 예시이미지
[이미지 출처] 무인정보단말기 UI 플랫폼 - 증명서 나오는 곳 점자표시
음성안내 점자표시 예시이미지
[이미지 출처] 무인정보단말기 UI 플랫폼 - 음성안내 점자표시
음성 안내 시작 점자표시 예시이미지
[이미지 출처] 무인정보단말기 UI 플랫폼 - 음성 안내 시작 점자표시
이어폰 점자표시 예시이미지
[이미지 출처] 무인정보단말기 UI 플랫폼 - 이어폰 점자표시
이어폰 연결 점자표시 예시이미지
[이미지 출처] 무인정보단말기 UI 플랫폼 - 이어폰 연결 점자표시
볼륨 조절 점자표시 예시이미지
[이미지 출처] 무인정보단말기 UI 플랫폼 - 볼륨 조절 점자표시
음성 안내 볼륨 조절 점자표시 예시이미지
[이미지 출처] 무인정보단말기 UI 플랫폼 - 음성 안내 볼륨 조절 점자표시
키패드 점자표시 예시이미지
[이미지 출처] 무인정보단말기 UI 플랫폼 - 키패드 조절 점자표시
숫자 키패드 예시이미지
[이미지 출처] 무인정보단말기 UI 플랫폼 - 숫자 키패드 점자표시
방향 키패드 예시이미지
[이미지 출처] 무인정보단말기 UI 플랫폼 - 방향 키패드 점자표시
시각장애인 전용 키패드 예시이미지
[이미지 출처] 무인정보단말기 UI 플랫폼 - 시각장애인 전용 키패드 점자표시
점자 디스플레이 예시이미지
[이미지 출처] 무인정보단말기 UI 플랫폼 - 점자 디스플레이 점자표시
디스플레이 예시이미지
[이미지 출처] 무인정보단말기 UI 플랫폼 - 디스플레이 점자표시
신분증 올려놓는 곳 예시이미지
[이미지 출처] 무인정보단말기 UI 플랫폼 - 신분증 올려놓는 곳 점자표시
지폐 넣는 곳 예시이미지
[이미지 출처] 무인정보단말기 UI 플랫폼 - 지폐 넣는 곳 점자표시
지폐 나오는 곳 예시이미지
[이미지 출처] 무인정보단말기 UI 플랫폼 - 지폐 나오는 곳 점자표시
동전 넣는 곳 예시이미지
[이미지 출처] 무인정보단말기 UI 플랫폼 - 동전 넣는 곳 점자표시
지문인식기 예시이미지
[이미지 출처] 무인정보단말기 UI 플랫폼 - 지문인식기 점자표시
장정맥인식기 예시이미지
[이미지 출처] 무인정보단말기 UI 플랫폼 - 장정맥인식기 점자표시
지정맥인식기 예시이미지
[이미지 출처] 무인정보단말기 UI 플랫폼 - 지정맥인식기 점자표시
바이오 인증하는 곳 예시이미지
[이미지 출처] 무인정보단말기 UI 플랫폼 - 바이오 인증하는 곳 점자표시
직원 호출 예시이미지
[이미지 출처] 무인정보단말기 UI 플랫폼 - 직원 호출 점자표시
3. 청각장애인 (수어 안내)

수어 안내를 제공해야 한다.
청각장애인이 무인정보단말기 사용 상황과 맥락을 알 수 있도록 의미 있는 모든 콘텐츠는 수어 안내를 제공해야 한다.
수어 안내 제공을 위한 리소스가 부족하다면, 자막 안내로 대체해야 한다.
무인정보단말기 UI 플랫폼 > 무인정보단말기 > 장애 유형별 공통 UI 가이드 > 수어

용어 정리

  1. 청각장애인 : 청력에 장애가 있는 사람.
  2. 한국수어 : 대한민국 농문화 속에서 시각ㆍ동작 체계를 바탕으로 생겨난 고유한 형식의 언어를 말한다.
  3. 농인 : 청각장애를 가진 사람으로서 농문화 속에서 한국수어를 일상어로 사용하는 사람을 말한다.
  4. 농문화 : 농인으로서의 농정체성과 가치관을 기반으로 하는 생활양식의 총칭을 말한다.
  5. 한국수어사용자 : 청각장애 또는 언어장애로 인하여 한국수어를 일상어로 사용하거나 보조적으로 사용하는 사람을 말한다.
  6. 수어통역 : 한국수어를 국어로 변환하거나 국어를 한국수어로 변환하는 것을 말한다.

수어 안내 규격

수어 안내자 권장 사례 예시이미지
[이미지 출처] 무인정보단말기 UI 플랫폼

수어 안내 위치

수어 안내 무인정보단말기 권장 사례 예시이미지
[이미지 출처] 무인정보단말기 UI 플랫폼

수어 안내 제작

수어 안내 항목 및 내용

참조