UI & UX

[UI/UX] 툴 팁(Tooltip)에 대해 알아보자

디자이너 진희 in NZ 2020. 10. 7. 07:04

안녕하세요? 오늘은 툴팁에 대해 자세하게 알아보겠습니다.

 

툴팁이란?


툴팁(Tooltip), 인포팁(Infotip) 또는 힌트(Hint)라고 불리는 툴 팁은 마우스를 아이템에 갖다대었을 때(Hover) 나타나는 정보가 적혀 있는 박스입니다. 툴 팁은 정말 흔해서 아무곳에서나 찾을 수 있습니다.

 

가운데 정렬이라고 설명되어 있는 툴팁

 

 

마우스 커서가 아이템에 갖다대었을 때 나타나기 때문에 모바일 버전에서는 이 툴팁 기능을 활성화 시키기 위해서 아이콘으로 모바일 버전에서도 클릭할 수 있도록 고려하거나, 다른 행동, 예를 들어 길게 누르기(Long press)로 대처 합니다. 

 

https://www.pendo.io/glossary/tooltips/

 

툴팁의 장점은?


툴팁의 좋은 점은, 사용자들이 웹사이트나 앱(App)을 사용하면서 겪는 문제점 및 자주 묻는 질문들에 빠르게 대처할 수 있습니다. 그렇기 때문에 추가 인력을 요하는 서비스 서포트가 필요하지 않으며, 회사의 인력 리소스를 줄일 수 있습니다.

 

 

 

 

다양한 툴 팁 디자인 모습


툴 팁은 어느 곳에서나 볼 수 있기 때문에 다양한 모습을 하고 있습니다. 

 

다양한 툴 팁 디자인과 모양

 

툴 팁 디자인 시


툴 팁 디자인 시, 그 글씨체의 사이즈가 사람의 눈으로 쉽게 읽을 수 있는 폰트 사이즈이어야 합니다. 폰트 사이즈는 12px를 권장합니다. 툴팁의 내용을 적을 때, 실제 서비스 및 프로그램을 사용하는 사용자 입장에서 생각하여 쉽게 작성 합니다.

 

 

더 자세한 정보는 아래 사이트를 참조하면 좋을 것 같습니다.

 

 

Material Design

Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital experiences.

material.io

 

1 2 3 4 5 6