Accessibility 본문

7.1 컨트롤간 충분한 간격

컨트롤은 충분한 간격으로 배치하는 것이 바람직하다.

필요성

비장애인도 각 버튼간의 터치 간격이 좁게 되어 있고 버튼의 크기가 작으면 불편한데 뇌성마비 장애인의 경우 손 떨림 등이 많이 있고 이로 인하여 정확한 터치 동작을 취하기가 어렵다. 따라서 터치 동작을 원활히 수행할 수 있도록 터치 간격을 적절히 유지하는 것이 매우 중요하다. 저시력인의 경우도 터치 타겟이 작을 경우 많은 어려움을 겪게 되는데 특히 중요한 결제 정보를 입력하거나 은행용 모바일 애플리케이션을 사용하는 경우 실수로 잘못 터치하는 경우 되돌이킬 수 없는 문제가 발생할 수 도 있다.

대상

  • 지체
  • 저시력
  • 비장애

적용기술

  • 컨트롤 중심간의 간격은 13mm * 13mm 이상 권장 함
  • 선택해야 하는 컨트롤 영역의 크기는 8.5mm * 8.5mm 이상 권장 함
mm 단위 pixel 변환 표
mm px
13mm 49.1px
8.5mm 32.1px
iOS

액정 3.5인치 디바이스 기준 Portrait mode 시 가로 버튼을 4개 이하로 제작


iOS 버튼 예시
Android
  • 안드로이드는 탑재된 모바일 기기별로 제공되는 해상도가 다르기 때문에 개발시 제공 해상도를 기준으로 컨트롤 간 간격을 제공할 필요가 있음
  • 지원 되는 해상도 명시

    AndroidMenifest.xml에 <support-screens> 태그를 추가하면 해상도가 다른 다양한 모바일 기기에서도 동일한 화면 표현 가능

  • 참고(관련 태그) http://developer.android.com/guide/topics/manifest/supports-screens-element.html
    <supports-screens android:resizeable=["true"| "false"]
        android:smallScreens=["true" | "false"]
        android:normalScreens=["true" | "false"]
        android:largeScreens=["true" | "false"]
        android:xlargeScreens=["true" | "false"]
        android:anyDensity=["true" | "false"]
        android:requiresSmallestWidthDp="integer"
        android:compatibleWidthLimitDp="integer"
        android:largestWidthLimitDp="integer"/>
  • 해상도별 레이아웃 제공

    레이아웃 폴더를 이용하여 지원하고자 하는 해상도에 대한 폴더를 구분함으로써 해상도별 레이아웃 제공이 가능

  • Android 3.2미만 폴더 생성 규칙

    /res/layout/layout-가로해상도x세로해상도


    해상도별 레이아웃 제공에 따른 파일 구조도
  • Android 3.2이상 폴더 생성 규칙
    Android 3.2이상 폴더 생성 규칙
    규칙 설명
    swdp 기본 가로 화면 600dp일 경우 /res/layout-sw600dp
    wdp 지원 가능한 너비 지원 /res/layout-w1024dp
    hdp 지원 가능한 길이 지원 /res/layout-h720dp
  • 화면의 픽셀 밀도(Density)별 비트맵 제공

    ldpi, mdpi, hdpi별로 각각의 밀도에 해당하는 비트맵을 제공하여 화면에 정확한 표현 필요

  • 각 해상도별 컨트롤 크기 설정 법

    기기별 화면 크기, 해상도, dpi가 다르기 때문에 13mm이상의 컨트롤간 간격에 대한 계산 필요

  • 제품별 권장 간격(삼성전자 스마트 폰 사례)
    제품별 권장 간격(삼성전자 스마트 폰 사례)
    제품명 LCD크기 권장 간격 (13mm이상)
    갤럭시 S 4.0인치, 100.8 mm 120px 이상, 80dpi 이상
    갤럭시 S II 4.3인치, 109.2 mm 110px 이상, 72.6dpi 이상
    갤럭시 탭 10.1 10.1인치, 256.5 mm 122px 이상, 122dpi 이상
    갤럭시 노트 5.3인치, 134.62mm 145px 이상, 72.5dpi 이상

검사방법 및 QA 지표 산정방법

iOS, Android
  • 사용자 의도와 무관하게 다른 컨트롤을 눌러지지 않는지 체크
  • 컨트롤 중심간의 간격이 13mm * 13mm 이상인지 체크
  • 선택해야 하는 컨트롤 영역 크기가 8.5mm * 8.5mm 이상인지 체크
오류수(건)
  • 컨트롤 중심 간 간격이 13mm * 13mm 미만인 컨트롤 수
  • 선택해야 하는 컨트롤 영역의 크기가 8.5mm * 8.5mm 미만인 경우 (쿼티 입력 등 운영체제에서 제공하는 기본 사용자 인터페이스의 경우에는 예외)

사례

오류사례

컨트롤 중심간의 간격이 13mm 이상 유지하지 못함

오류사례이미지
개선방법

컨트롤 중심간의 간격 13mm 이상으로 제공

우수사례

컨트롤 및 메뉴 간 충분한 간격(13mm 이상)을 유지하고 있음

우수사례이미지