About dysclicksia

인터랙션 디자인을 할 때 마우스 클릭 혹은 손가락 터치는 아주 자연스럽고 기본적인 동작 같지만 생각보다 고민할 지점이 많다.

싱글 클릭과 더블 클릭을 구분하기

어떤 UI 요소가 싱글 클릭에 반응하고 어떤 UI 요소가 더블 클릭에 반응하는지, 혹은 동일 요소가 싱글 클릭과 더블 클릭에 각각 다르게 반응하는지를 알려주는 시각적 힌트가 대체로 없기 때문에, 사용자는 대체로 이걸 외워야 한다. 어느 정도 시간이 지나면 익숙해지기 때문에 대체로 의식하지 않게 될 뿐이다.

웹 브라우저에서는 밑줄이 그어진 파란색 글자를 싱글 클릭하면 다른 페이지가 열린다. 하지만 데스크탑 탐색기(윈도)나 파인더(맥)에서는 더블 클릭을 해야 파일이 열린다. 그런데 똑같은 데스크탑이라도 화면 하단의 테스크바(윈도)나 독(맥)에 있는 아이콘은 싱글 클릭으로 열린다.

상황에 따라 달라지는 동작

어떤 맥락에서는 같은 데스크탑, 같은 앱이라도 상황에 따라 동작이 달라지기 때문에, 때로는 싱글 클릭과 더블 클릭 뿐 아니라, 싱글 클릭과 싱글 클릭도 구분을 해야 한다. 이게 무슨 말인가? 예를 들어, 탐색기(윈도)나 파인더(맥)에서 싱글 클릭을 하면 파일이 선택된다. 그런데 이미 선택된 파일을 또 싱글 클릭하면, 즉 싱글 클릭을 두 번 하면, 파일 이름을 바꾸는 모드로 전환된다.

잠깐. 그런데 싱글 클릭을 두 번하면 더블 클릭이 아닌가? 아니다. 싱글 클릭을 “충분히 빠르게” 두 번 해야 더블 클릭이다. 느리게 두 번하거나 첫 클릭과 두번째 클릭 사이에 마우스를 “충분히” 움직였으면 더블 클릭이 아니다. 이 문제는 잠시 후에 더 자세히 살펴보자.

시기에 따라 달라지는 조작 방식

같은 운영 체제라도 시기에 따라 조작 방식이 바뀌기도 한다.

1990년대 말, 윈도 98에서는 윈도와 브라우저(인터넷 익스플로러)를 통합한 “액티브 데스크탑”을 도입하면서 윈도 내부에서도 더블 클릭을 거의 없앴더랬다. 우리말로는 탐색기(“바탕 화면”은 사실 탐색기의 일부다)와 인터넷 익스플로러를 통합했다고 하니까 좀 이상하게 들릴 수 있는데 영어로는 “Explorer (탐색기)“와 “Internet Explorer”를 통합한 것이니 이상하진 않다. 물론 이 “통합”으로 인해 반독점법 위반으로 기소됐지만 이 이야기는 다음 기회에.

2000년대 중반, 이번에는 반대로 소위 “Rich Internet Application”이라는 개념이 유행하면서 웹이 데스크탑의 UI를 따라하기 시작하는데, 이 탓에 웹에서도 더블 클릭이나 우클릭을 활용하는 인터페이스가 급격히 증가한다. RIA는 매크로미디어(이후에 어도비가 인수)라는 기업에서 자사의 제품 “플렉스”를 홍보하려고 만든 마케팅 용어인데 당시에 웹 2.0 유행과 맞물려 크게 흥행했으나 지금은 거의 쓰이지 않는 용어가 되었다(웹 접근성 표준 Accessible RIA에서 여전히 쓰이고 있는 점이 약간의 예외). 돌이켜 생각해보면 플래시+플렉스 조합은 웹 표준과 어긋나는 지점이 많았는데(특정 기업에 대한 의존, 블랙 박스, 다른 웹 표준과의 상호운용성 부재 등) 당시 왜 그렇게 잘 됐는지 좀 의아하겠지만 그럴만한 이유가 있었더랬다. 이 이야기도 다음 기회에.

이런 이유로, 데스크탑은 약간 웹처럼 작동하고 웹은 약간 데스크탑처럼 작동하면서 어디서 싱글 클릭을 하고 어디서 더블 클릭을 할지 외우기란 더욱 어려워졌다.

어떤 사람들은 웹 링크를 포함하여 모든 곳에서 항상 더블 클릭을 한다. 아마 어디가 더블 클릭이고 어디가 싱글 클릭인지 외우기 어려우니 무조건 더블 클릭을 하는 습관을 들인 것 같다. 내가 관찰하기로는 상대적으로 고령인 경우가 많았는데, 고령일수록 짧은 시간 안에 움직임 없이 같은 지점을 두 번 연달아 클릭하는 동작(더블 클릭)은 관절에 더 무리를 줄 것만 같아서 안타깝다.

낮아지는 가시성

웹이 데스크탑을 따라하기 시작하면서 링크를 밑줄 그어진 파란 글씨로 표시하는 관습도 급격히 사라졌고, 가시성(visibility)이 급격히 낮아진다.

2010년대 초반, 이번에는 플랫 디자인이 유행하기 시작한다. 애플도 2013년에 스큐어모피즘 탈피를 선언하며 UI 요소에서 그림자까지 없애버리는 극단적인 다지안을 채택하며 동참한다. 이 시기 미니멀-플랫 디자인의 유행엔 여러 이유가 있겠지만, 당시에 기기의 폼 팩터 다양성이 폭발적으로 증가(다양한 크기의 모바일 폰, 태블릿, 가로-세로 모드, 데스크탑 등)함에 따라 거의 반 강제적으로 미니멀하고 기하학적인 디자인의 필요성이 커진 면도 있다고 본다. 적어도 난 그런 이유에서 카드 메타포에 기반한 플랫 디자인을 주장했다(아마 2007-8년 경).

아이폰의 “혁신적인” 멀티 터치 인터페이스와 2010년대 초반의 “지나친” 미니멀 디자인이 합쳐지면서 가시성은 더욱 낮아졌고 이제 사용자들은 싱글 클릭과 더블 클릭을 구분하기에 앞서 어디를 클릭할지 찾아야 하는 과업까지 수행해야 한다.

흔한 오해와 달리 그림자는 스큐어모피즘과 무관하며 인간 보편적인 시지각 메커니즘을 잘 활용할 수 있는 매우 중요한 디자인 요소라는 점에서 이 결정은 애플의 큰 실수였다고 본다. 구글의 머티리얼 디자인은 시작부터 그림자를 중요한 요소로 활용했는데 나는 이게 올바른 선택이라고 본다. 다행히 애플의 디자인에도 다시 서서히 그림자가 돌아온다. 이 이야기도 다음 기회에.

싱글 클릭, 더블 클릭, 드래그

어디를 클릭할지 찾았고 싱글 클릭인지 더블 클릭인지도 알아냈으면, 이제 실행할 차례다.

더블 클릭을 한다고 가정하자. 버튼을 누르는 동작을 D, 떼는 동작을 U, 움직임을 m이라고 할 때, 더블 클릭은 DUDU다. 그런데 인간의 손가락은 기계처럼 정밀하지 않기 때문에 각 동작 사이에 짧은 움직임이 들어갈 수 있다. 즉, DUDU를 하고 싶은데 사실은 DmUDU, DUmDU, DmUmDU 등을 하는 경우가 생긴다.

운동 장애가 있는 사람이라면 더 빈번하게 겪는 문제다. 제프 래스킨은 인간 중심 인터페이스에서 이를 난클릭증(dysclicksia)이라고 부른다. 실제로 있는 병명은 아니고, 1997년에 Pam Martin이 고안한 용어라고 한다. 보편 디자인 관점에서 생각해보면, 심각한 운동 장애가 없더라도 경미한 수전증, 당뇨로 인한 손떨림, 움직이는 지하철에 앉아서 노트북을 쓰는 경우 등 다양한 상황에서 누구나 겪을 수 있다.

문제는, DmU는 정의 상 클릭이 아니라 드래그고(누른 상태로 움직인 후 놓았으니까) DUmDU는 두 번의 싱글 클릭이며(첫 클릭과 두번째 클릭 사이에 마우스를 움직였으니까) DUDU라고 하더라도 앞의 DU와 뒤의 DU 사이에서 충분한 시간이 흘렀다면 역시나 두 번의 싱글 클릭이라는 점이다.

그렇기 때문에 대부분의 운영 체제에서는 D와 U사이에 짧은 m이 있거나 DU와 DU 사이에 짧은 m이 있더라도 m이 충분히 짧고 시간이 충분히 빨랐으면 이를 더블 클릭으로 ‘판정’해준다. 운영체제의 접근성 설정 화면을 열어보면 클릭 또는 더블 클릭과 관련된 온갖 파라메터를 볼 수 있다.

마우스가 아니라 터치 스크린인 경우 더 많은 보정이 필요하다. 특히 손가락이 화면에 닿는 면적은 마우스의 뾰족한 화살표 끝에 비해 너무나 크고, 손가락은 투명하지 않기 때문에 터치 지점을 시각적으로 가리게 되며, 인간이 스크린을 바라보는 각도에 따라 터치 지점을 다르게 인식하고(상대방이 쥐고 있는 휴대폰을 내가 터치하려고 하면 엉뚱한 곳이 터치되는 이유), 책상 표면에 안정적으로 붙어 있는 마우스와 달리 손가락은 공중에 떠있기 때문에 그렇다.

결국 사용자는 스스로 인지하지 못하고 있더라도 생각보다 빈번하게 더블 클릭, 드래그, 두 번의 싱글 클릭 사이의 모호한 제스처를 제공하고, 컴퓨터는 온갖 휴리스틱을 동원해서 모호한 제스처를 최대한 열심히 해석한다.

결론

인터랙션 디자인을 할 때 이러한 점을 고려하면 좀 더 쾌적한 인터페이스를 만들 수 있다. 예를 들어, 두 번의 싱글 클릭과 더블 클릭과 드래깅은 생각보다 구분이 명확하지 않은 제스처이므로 되도록이면 세 동작 사이에서 조작 실수가 일어났을 때 문제가 생길만한 디자인은 피하면 좋다.