툴팁

정의

툴팁은 어떤 요소에 마우스를 올리거나 키보드로 포커스했을 때 그 옆에 잠깐 떠오르는 아주 짧은 설명입니다. 특히 글자 라벨 없이 그림만 있는 아이콘 버튼처럼, 뜻이 한눈에 들어오지 않는 요소의 의미를 보충하는 데 씁니다. 예를 들어 톱니바퀴 아이콘 위에 '설정' 이라는 툴팁을 붙이면, 사용자가 그림만 보고 헤매지 않게 됩니다. 트리거가 되는 요소의 위·아래·왼쪽·오른쪽 어디에나 배치할 수 있고, 보통 화면 경계에 닿지 않는 방향으로 자동으로 자리를 잡습니다. 크기는 작고, 표시되는 시간도 사용자가 그 요소에 머무는 동안으로 짧아, 화면 흐름을 거의 건드리지 않는 것이 특징입니다.

왜 중요한가

툴팁은 화면을 어지럽히지 않으면서 필요한 사람에게만 정보를 건네는 조용한 도우미입니다. 모든 아이콘 옆에 글자 설명을 붙이면 화면이 금세 빽빽해지지만, 툴팁은 평소엔 숨어 있다가 사용자가 궁금해할 때만 나타나 공간을 아껴 줍니다. 덕분에 툴바나 좁은 화면에서 깔끔함을 유지하면서도 각 버튼의 뜻을 확실히 전할 수 있습니다. 다만 툴팁은 어디까지나 '있으면 좋은' 보조 수단이라는 점이 중요합니다. 툴팁을 봐야만 다음 행동을 알 수 있게 설계하면, 툴팁이 뜨지 않는 상황에서 사용자는 길을 잃습니다. 마우스가 없는 사람이나 화면을 소리로 듣는 사람에게는 이 문제가 더 크게 다가옵니다. 그래서 툴팁은 이해를 돕는 덤이지, 핵심 정보를 숨겨 두는 금고가 아니라는 감각을 가지고 써야 합니다. 이 원칙만 지키면 툴팁은 화면을 가볍게 유지하는 아주 든든한 조력자가 됩니다.

흔한 실수

• 터치 기기에는 마우스 호버가 없다는 사실을 잊는 경우입니다. 휴대폰 사용자는 요소에 마우스를 올릴 방법이 없어 툴팁을 아예 못 보므로, 중요한 정보를 툴팁에만 담으면 그 정보가 통째로 사라지는 셈이 됩니다.
• 툴팁 안에 문단 수준의 긴 글이나 버튼·링크 같은 조작 요소를 넣는 것입니다. 툴팁은 한 줄짜리 설명을 위한 자리라, 내용이 길거나 클릭이 필요하면 팝오버나 본문 도움말로 옮기는 편이 맞습니다.
• 마우스를 올리자마자 곧바로 뜨고 조금만 벗어나도 사라지게 만드는 것입니다. 지연 없이 반응하면 커서가 지나가기만 해도 툴팁이 깜빡여 오히려 신경을 어지럽힙니다.

실무 팁

• 중요한 정보는 절대 툴팁에만 의존하지 마세요. 툴팁 내용은 한 줄로 짧게 유지하고, 길어질 것 같으면 팝오버나 화면에 늘 보이는 도움말 텍스트로 옮기는 편이 안전합니다.
• 마우스 호버뿐 아니라 키보드 포커스로도 툴팁이 뜨게 만드세요. 키보드만 쓰는 사용자와 스크린 리더 이용자도 같은 설명을 받을 수 있어 접근성이 크게 좋아집니다.
• 나타날 때 아주 짧은 지연을 두어, 커서가 잠깐 스칠 때는 뜨지 않고 머무를 때만 뜨게 하세요. 이 작은 시간차 하나가 화면을 훨씬 차분하게 만들어 줍니다.

관련 개념