툴팁이 하는 일
노먼(1999)이 말했듯 화면 요소는 관례에 기대는데, 아이콘은 관례가 없으면 뜻이 잘 전달되지 않아요. 툴팁은 이런 아이콘 옆에 '공유', '필터' 같은 이름을 잠깐 붙여 줘요. 켄드릭(2019)은 툴팁을 꼭 필요하지 않은 보조 설명에만 쓰고, 짧게, 그리고 이미 보이는 레이블을 반복하지 말라고 정리했어요. 그로스먼과 피츠모리스(2010)는 툴팁을 넓혀 짧은 영상까지 보여주면 기능 이해가 높아진다고 보였는데, 이렇게 필요할 때만 정보를 꺼내는 건 점진적 공개와 같은 생각이에요.
모바일에는 호버가 없다
터치 화면에는 마우스를 올리는 동작이 없어서, 데스크톱 툴팁을 그대로 옮기면 아무도 볼 수 없어요. 머티리얼 디자인(Google, n.d.)은 길게 누르기로 일반 툴팁을 띄우지만, 사용자가 이걸 알기는 어려워요. 그래서 모바일에서는 아이콘 아래에 짧은 레이블을 항상 보여주거나, 'ⓘ' 버튼을 눌러 설명을 여는 방식이 더 확실해요. 이때 'ⓘ'는 작아도 파히와 동료들(2006)의 연구처럼 엄지로 누를 만한 영역을 가져야 해요. 어포던스가 약한 아이콘일수록 레이블을 함께 쓰는 게 좋아요.
넣지 말아야 할 것과 접근성
툴팁은 금방 사라지므로 비밀번호 규칙, 오류 메시지, 수수료처럼 반드시 봐야 하는 정보를 넣으면 안 돼요. 툴팁 안에 링크나 버튼을 두는 것도 피해요. 웹에서는 ARIA 패턴(W3C, n.d.)대로 role=tooltip을 주고 aria-describedby로 연결하며 Esc로 닫을 수 있게 해요. WCAG 2.2(W3C, 2023)의 1.4.13 기준은 호버·초점으로 나타나는 내용이 닫을 수 있고, 그 위로 포인터를 옮겨도 사라지지 않고, 사용자가 치울 때까지 유지되기를 요구해요. 확대해서 보는 저시력 사용자를 위해서도 중요해요.
자주 묻는 질문
- 모바일에서 툴팁을 써도 되나요?
- 길게 누르기 툴팁은 발견하기 어려워요. 중요한 아이콘에는 레이블을 늘 보여주거나 ⓘ 버튼으로 설명을 여는 편이 나아요.
- 툴팁에 링크를 넣어도 되나요?
- 피하는 게 좋아요. 상호작용이 필요하면 팝오버나 바텀 시트 같은 다른 컴포넌트를 써요.
출처 검토일: 2026-10-27
참고문헌
- Kendrick, A. (2019, January 27). Tooltip guidelines. Nielsen Norman Group. 툴팁에 넣을 내용과 넣지 말아야 할 내용을 정리한 지침이라, 툴팁 문구를 정할 때 참고하면 도움이 돼요.
- Google. (n.d.). Tooltips. Material Design 3. 일반 툴팁과 리치 툴팁, 모바일에서 길게 누르기로 띄우는 방식을 다뤄, 플랫폼별 동작을 정할 때 참고하면 도움이 돼요.
- World Wide Web Consortium. (n.d.). Tooltip pattern. ARIA Authoring Practices Guide. role=tooltip과 aria-describedby 연결, Esc로 닫기 규칙이 있어, 접근 가능한 툴팁 구현에 참고하면 도움이 돼요.
- Grossman, T., & Fitzmaurice, G. (2010). ToolClips: An investigation of contextual video assistance for functionality understanding. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems (pp. 1515–1524). ACM. 기존 툴팁을 확장한 맥락 도움말이 기능 이해를 높인다는 연구라, 툴팁이 할 수 있는 일의 범위를 볼 때 참고하면 도움이 돼요.
- Norman, D. A. (1999). Affordance, conventions, and design. Interactions, 6(3), 38–43. 아이콘만으로는 기능이 전달되지 않을 수 있다는 관례 논의라, 툴팁이 아이콘을 보완하는 이유로 참고하면 도움이 돼요.
- Parhi, P., Karlson, A. K., & Bederson, B. B. (2006). Target size study for one-handed thumb use on small touchscreen devices. In Proceedings of MobileHCI 2006 (pp. 203–210). ACM. 엄지 타깃 크기 연구라, 작은 정보 아이콘(ⓘ)의 누르는 영역을 정할 때 참고하면 도움이 돼요.
- World Wide Web Consortium. (2023). Web Content Accessibility Guidelines (WCAG) 2.2. 호버·초점 시 나타나는 콘텐츠는 닫을 수 있고, 위에 머물 수 있고, 유지돼야 한다는 1.4.13 기준이 있어, 툴팁 동작에 참고하면 도움이 돼요.