툴팁 (Tooltip)
쉽게 풀면
화면 위 물음표 아이콘에 마우스를 갖다 대면 잠깐 나타났다 사라지는 짧은 설명 글을 본 적이 있을 것이다. 이것이 툴팁으로, 평소에는 화면을 차지하지 않다가 사용자가 궁금해할 때만 필요한 정보를 짧게 보여주는 역할을 한다. 아이콘만으로 기능을 이해하기 어려울 때 보조 설명 수단으로 자주 활용된다.
왜 중요한가
툴팁은 사용자가 아이콘이나 버튼에 마우스를 올리거나 길게 눌렀을 때 나타나는 짧은 설명 텍스트로, 화면 공간을 상시 차지하지 않으면서도 필요한 순간에만 부가 정보를 제공해 인터페이스를 간결하게 유지하는 데 쓰인다. 아이콘만으로 기능이 명확히 전달되지 않는 경우 보조적 설명 수단으로 UI 디자인에서 흔히 활용된다. 키보드로 요소에 포커스를 두었을 때도 마우스 호버와 동일하게 툴팁이 나타나야 접근성을 만족하며, 이 처리가 빠지면 마우스를 쓰지 않는 사용자는 해당 설명에 아예 접근할 수 없다. 너무 많은 텍스트를 담은 툴팁은 오히려 본래의 간결함이라는 목적을 잃어버리므로, 긴 설명이 필요한 경우에는 툴팁 대신 별도의 도움말 패널이나 문서 링크를 쓰는 것이 권장된다. 모바일 환경에서는 길게 누르기(롱프레스)로 툴팁과 유사한 정보를 노출하는 방식이 호버의 대안으로 흔히 채택된다.
논문에서는 이렇게 쓰입니다
아이콘 의미를 보완 설명한 것이 실제 이해도 향상에 기여한 사례를 다룬 연구이다.
작은 설명 요소 하나가 사용자의 기능 이해에 미치는 영향을 실증한 연구이다.
조금 더 깊게 보면
터치스크린 환경에서는 마우스 호버 동작 자체가 존재하지 않아 데스크톱에서 설계한 툴팁 패턴을 모바일에 그대로 옮기면 접근이 불가능해지는 문제가 생길 수 있다. 스낵바나 토스트메시지가 시스템 상태를 알리는 데 쓰인다면 툴팁은 특정 요소에 대한 즉각적 설명에 국한된다는 점에서 용도가 다르다. 툴팁은 나타나기까지의 지연 시간(호버 딜레이)을 짧게도 길게도 설정할 수 있는데, 지연이 너무 짧으면 마우스가 스쳐 지나갈 때마다 원치 않게 튀어나오고 너무 길면 정작 필요한 순간에 늦게 나타난다.
주의할 점
터치 기반 모바일 환경에서는 마우스 호버가 없어 툴팁 노출 방식을 별도로 설계해야 한다.