2.5.1. 단일 포인터 입력 지원

다중 포인터 또는 경로기반 동작을 통한 입력은 단일 포인터 입력으로도 조작할 수 있어야 한다.

목적

터치를 사용할 수 있는 모바일 기기 등에서 두 개 이상의 손가락을 동시에 사용하는 다중 포인터 동작, 정밀한 경로나 모양을 그려야 하는 경로 기반 동작, 끌기와 놓기(drag & drop) 동작 등은 일부 사용자에게 어렵거나 수행하지 못할 수 있다. 이러한 사용자도 한 손가락과 최소한의 동작만으로 원활하게 웹 콘텐츠와 상호작용을 할 수 있도록 하기 위함이다.

따라서, 다양한 입력 장치를 사용하는 모든 사용자가 웹 콘텐츠와 원활하게 상호작용을 할 수 있도록, 다중 포인터 또는 경로 기반 동작으로 실행되는 기능은 단일 포인터 입력만으로도 조작할 수 있어야 한다.

배경 및 필요성

모바일 기기에서 스와이프 제스처에 의해 기능이 수행되는 경우, 사용자는 화면을 터치한 채 한 방향으로 쓸어서 포인터를 이동시켜야 한다. 그러나 일부 사용자는 일정한 압력을 유지하며 동일한 방향으로 제스처를 취하기 어렵다.

마찬가지로, 두 손가락을 사용하는 동작(예: 두 손가락으로 쓸어내리는 동작, 핀치 줌 등)은 일부 장애가 있거나 한 손가락밖에 사용할 수 없는 사용자는 수행할 수 없다.

또한 노트북의 터치패드를 사용할 때, 사용자가 파일을 끌어다 놓기 위해 한 손가락은 누름 동작을 유지한 채 다른 손가락을 사용해 폴더를 이동해야 하는 경우가 있다. 이러한 동작은 손가락 움직임에 제약이 있는 사용자나 키보드 사용자가 수행하기 어렵다.

따라서, 다중 포인터나 경로 기반 동작으로 실행되는 기능은 단일 포인터 입력만으로도 동일한 기능을 수행할 수 있는 대체 사용자 인터페이스를 제공해야 한다.

다음과 같은 경우에는 예외로 한다.

서명 같은 자유로운 그리기 기능, 피아노 건반처럼 동시에 여러 개의 입력이 필수적으로 다중 포인터가 필수적인 기능이거나 단순화할 수 없는 기능, 화면 가장자리에서 안쪽으로 스와이프하여 메뉴를 여는 등 브라우저나 운영체제에서 기본으로 제공되는 표준 제스처가 해당한다.

용어

포인터 입력: 마우스, 펜, 터치 등 화면에서 특정 위치(좌표 또는 좌표 집합)를 선택하거나 조작할 수 있는 입력 방식을 의미한다. (예: 터치스크린에서 손가락으로 화면을 누르거나, 마우스로 버튼을 클릭하는 동작)
단일 포인터(single pointer): 단일 탭, 클릭, 더블 탭, 길게 누르기 등을 포함하여, 화면과 접촉하는 한 지점에서 발생하는 포인터 입력을 말한다. 한 손가락 또는 마우스를 사용한 입력 방식은 모두 단일 포인터 입력에 해당한다.
다중 포인터(multipoint gesture): 핀치 줌, 멀티 터치 회전, 세 손가락 탭 등 두 개 이상의 포인터를 사용하는 입력 방식을 의미한다.
경로기반 동작(path-based gesture): 사용자가 화면에서 지정된 특정 경로나 모양(예: Z자, 원, 직선 등)을 그리는 입력 방식을 의미한다. 예를 들어, 한 방향으로 쓸어 넘기는 스와이프(swipe) 동작도 포함된다. 경로 기반 동작은 단순한 클릭이나 터치와 달리, 특정 방향이나 모양을 따라 손가락을 움직이는 방식이 포함된다.

이미지. 출처: Freepik

기본 규칙

다중 포인터가 필요한 동작은 단일 포인터 입력으로도 수행할 수 있도록 한다.
경로 기반 동작이나 특정 모양을 그리는 대신, 단일 포인터 입력만으로 기능을 실행할 수 있는 대체 인터페이스를 제공한다.

단일 포인터 입력으로도 조작할 수 있는 대체 수단 제공의 구체적인 예로 다음과 같은 것을 고려할 수 있다.

두 손가락 핀치 줌은 한 손가락으로 조작 가능한 ‘+’, ‘-’ 버튼을 제공한다.
방향을 돌리기 위한 회전 제스처는 회전 버튼으로 제공한다.
파일이나 항목을 끌기와 놓기(drag & drop)는 ‘선택’ 후 ‘이동’ 버튼을 제공한다.
경로 기반 동작이나 특정 모양을 그리는 대신 해당 기능을 실행하는 버튼을 제공한다.

이러한 대체 수단은 사용자가 쉽게 발견할 수 있어야 하며, 기존 제스처나 끌기(Dragging) 동작으로 실행되는 기능과 동등한 기능을 제공해야 한다.

적용 사례

1) 다중 포인터 동작을 단일 포인터 동작으로 조작할 수 있는 인터페이스 제공

다중 포인터 동작으로 조작하는 기능을 단일 포인터 동작으로도 조작할 수 있도록 인터페이스를 제공한다.

다음은 지도를 확대, 축소해서 볼 수 있도록 두 손가락 핀치 줌 기능이 제공된 사례이다. 한 손가락으로 조작할 수 있는 ‘+’ 와 ‘-’ 버튼을 제공하여, 다중 포인터 동작이 어렵거나 불가능한 사용자도 쉽게 지도를 확대하고 축소할 수 있다.

2) 경로 기반 동작을 단일 포인터 동작으로 조작할 수 있는 인터페이스 제공

스와이프 제스처로 이전/다음 콘텐츠를 탐색하는 배너 영역에서, 한 손가락으로 조작할 수 있는 ‘이전/다음’ 버튼도 함께 제공한다. 이를 통해 스와이프 동작이 어려운 사용자도 쉽게 콘텐츠를 탐색할 수 있다.

개선 필요 사례

1) 다중 포인터 동작을 대체할 수 있는 단일 포인터 입력 미지원

다음은 숙소 서비스에서 핀치 줌 제스처로만 확대 및 축소할 수 있는 지도 기반으로 검색 결과를 보여주는 사례이다.

핀치 줌 인/아웃은 동시에 두 손가락으로 조작해야 하므로, 손가락 사용에 제약이 있는 사용자는 이 동작이 매우 어려울 수 있다. 또한, 음성 명령 사용자도 핀치 줌 명령을 내릴 수 없어 확대/축소 기능을 사용할 수 없다.

개선 방법

단일 포인터 입력만으로 확대/축소가 가능하도록, ‘+’ 및 ‘-’ 버튼과 같은 대체 컨트롤을 제공한다. 이 버튼은 보조 기기 등을 통해서도 조작할 수 있게 제공되어야 한다.

2) 끌기와 놓기를 대체할 수 있는 단일 포인터 입력 미지원

다음은 끌기와 놓기를 통한 이미지 업로드 기능을 제공하는 웹 앨범 서비스의 사례이다. 끌기와 놓기 방식으로만 파일 첨부가 가능하도록 제공되고 있어, 포인터 입력에 제약이 있는 사용자나 화면을 볼 수 없는 사용자는 파일을 첨부하는 데 어려움을 겪을 수 있다.

개선 방법

‘파일 선택’ 버튼 등 단일 포인터 조작만으로 파일을 선택하고 첨부할 수 있는 기능을 제공한다.

3) 경로 기반 동작을 대체할 수 있는 단일 포인터 입력 미지원

다음은 쇼핑몰에서 스와이프 제스처를 통해 이전/다음 콘텐츠를 보여주는 배너 사례이다. 좌/우 스와이프 제스처로만 조작할 수 있는 경우, 화면을 볼 수 없는 사용자나 손떨림이 심한 사용자는 해당 제스처를 수행하기 어려워 배너를 탐색할 수 없게 된다.

개선 방법

다음의 방법들을 고려해 볼 수 있다.

단일 포인터 입력만으로 이전/다음 콘텐츠를 노출할 수 있는 버튼을 제공한다.
특정 순서의 콘텐츠를 바로 노출할 수 있는 컨트롤(예: 페이지 입력 상자 또는 인디케이터 등)을 제공한다.
전체 콘텐츠를 볼 수 있는 버튼을 제공한다.