툴팁 반응속도개선 ― 반응속도를 예전으로 되돌린 이유

툴팁이 뭐냐굽쇼? 아래 그림을 보시죠.

링크에 마우스를 올렸을 때 자막처럼 나오는 박스를 툴팁이라고 합니다. 이것의 반응속도에 대한 이야기를 하려고 합니다. 예전에 <레프트21>에서 툴팁 반응속도를 빠르게 개선한 적이 있었습니다.(“링크설명(툴팁)을 제깍제깍뜨게 만들다”)

그러나 항상 빠른게 좋은 것은 아닙니다. 웹 사용성의 대가 제이콥 닐슨은 ¹드롭다운 메뉴의 반응속도에 관해 다음과 같이 말했습니다.

반응속도를 너무 빠르게하지 마시길. 마우스는 어떤 것을 보여주기 전까지 0.5초동안 고정되어있어야 합니다. 이 가이드라인을 위반하면 사용자가 마우스를 움직일 때 화면이 참을 수 없는 깜빡임을 유발합니다.(tooltip도 마찬가지)

관련글 보기

사용성을 향상시키는 0.5초

0.5초는 아주 짧은 속도이긴 하지만 바로 보여주는것과 확실히 차이는 납니다. 왜 바로 보여주지 않고 잠깐 기다려야 할까요?  여러분 자신을 한 번 생각해봅시다. 여러분의 움직임이 슬로우비디오처럼 천천히 재생된다고 생각하시고 말입니다. 링크에 마우스를 올릴 때 툴팁을 기대하면서 올리시나요? 대부분의 경우는 클릭하기위해 올리거나 그냥 지나치는 경우일 것입니다. 물론 툴팁을 기대하면서 마우스를 올리는 경우도 있습니다. 중요한 것은 항상 툴팁을 기대하면서 마우스를 링크에 올리지 않는다는 겁니다.

툴팁을 기대하면서 의도적으로 마우스를 링크에 갖다 대었을 경우에는 툴팁이 빨리나오는 것이 그 사용자에게 좋을 것입니다. 그런데 그냥 마우스를 특정 위치로 이동하고 있는 사용자의 경우 툴팁 반응속도가 0초라면 사용자의 의도와 무관한 툴팁이 깜빡거릴 것입니다. 클릭을 작정하고 마우스를 올렸을 경우에도 마찬가지죠.

(단, 툴팁이나 드롭된 메뉴가 제거될 때는 빨라야합니다.)

따라서 0.5초의 작은 간격으로 이런 문제를 완화시킬 수 있는 것입니다. 그래서 반응속도를 빠르게 했던 ‘툴팁 플러그인’을 제거했습니다. 그러나 링크 태그에 “title=’링크에 대한 설명’” 이런식으로 쓰면 플러그인이 없어도 브라우져가 툴팁을 적당한 속도로 보여줍니다. Chrome브라우져에서는 아래와 같이 보입니다.

접근성

또한, 툴팁의 반응 속도를 낮춘 또 한가지의 중요한 이유는 웹 접근성 때문입니다. 특히 광과민성 발작 증세를 지닌 장애인의 경우 깜빡거리는 것에 반응해 발작을 일으킬 수 있는데요, 특히 깜빡거리는 주파수의 범위가 3㎐에서 49㎐ 사이인 경우에 발작을 일으키는 원인이 되고, 20㎐ 부근이 발작을 가장 잘 일으킵니다. (자료 출처 : 인터넷 웹 컨텐츠 접근성 지침. 이하 접근성 지침 ) 3Hz 인 경우에 1초에 3번 깜빡이는 정도를 말합니다. 이정도의 깜빡임은 일반인들에게도 불편함을 줄 수 있습니다. 

한 국에서는 웹 접근성에 대한 고려가 상당히 불충분한 현실인데요, 이런 ‘인위적 실수’는 진보진영 웹 사이트에서도 심심치 않게 발견되곤 합니다. 사회 변혁과 진보를 바라는 더 많은 사람들과 만나기 위해, 저희 레프트21 웹마스터들은 기능 개선과 사용성 못지 않게 접근성에 대해서도 항상 고민하고 있답니다.^^

빠른 툴팁에 익숙해졌다가 약간 당황하셨던 분들이 있을것입니다. 그래서 이렇게 자세한 설명을 하게 된 것이기도 합니다. 0.5초만 기다려주세요^^