툴팁
툴팁 (Tooltip)
툴팁은 사용자의 집중을 기본 인터페이스에서 벗어나게 하지 않으면서 보조적이고 맥락적인 정보를 제공하는 요소예요. 도움은 되지만 필수는 아닌, 평이한 텍스트 힌트를 보여줄 때 사용하죠.
툴팁은 특히 앱 사용법을 가르쳐줄 때 유용해요. 동작 목록을 제공해야 한다면 팝업 메뉴를, 시스템이나 작업의 상태를 알려줘야 한다면 배너나 토스트 알림을 쓰는 쪽을 고려해보세요.
출처: 문서
본문
동작 (Behavior)
자동 트리거 (Automatic triggers)
툴팁은 앱의 경험이나 워크플로에 맞는 적절한 시점에 프로그래밍 방식으로 나타나도록 구성할 수 있어요. 새 기능에 대해 배우는 때처럼요. 다만 앱 온보딩에 툴팁을 너무 많이 쓰면 경험이 어수선해질 수 있어요. 더 집중된 접근을 선택하는 게 좋죠.
수동 트리거 (Manual triggers)
사용자가 필요할 때 열어 볼 수 있도록 추가 맥락을 툴팁에 담아두세요. 수동 트리거로 툴팁을 쓸 때는, 발견할 정보가 더 있다는 걸 알려주는 요소(정보 아이콘이나 "더 알아보기" 링크 같은)를 UI에 함께 넣어야 해요.
닫기 (Dismissal)
툴팁은 보통 사용자가 툴팁 바깥을 탭하면 닫혀요. 툴팁 자체를 탭하거나 툴팁이 고정된 요소를 탭해서 닫도록 구성할 수도 있고요. 기본 닫기 구성을 바꿨다면, 사용자에게 툴팁에서 나가는 방법을 알려줘야 해요.
레이아웃 (Layout)
한 번에 하나 (One at a time)
툴팁은 원래 맥락에서 너무 주의를 뺏지 않으면서 추가 정보를 주기 위한 거예요. 한 번에 하나의 툴팁만 보여줄 수 있어요. 두 번째 툴팁이 트리거되면 첫 번째 툴팁은 닫히고요. 화면을 가득 차지하지 않을 만큼 충분히 작은 툴팁을 사용해야 해요.
배치 (Positioning)
기본적으로 툴팁은 트리거될 때 대상 요소 옆에 배치돼요. 시스템 간격 토큰을 사용해 툴팁의 위치를 조정해서, 툴팁이 중요한 정보를 가리지 않게 하세요. 팁(tip)은 항상 대상 요소를 가리켜야 해요. 팁은 툴팁의 중앙에 두거나 레이아웃에 가장 잘 맞도록 오프셋할 수 있어요.
콘텐츠 (Content)
툴팁은 중복이 아닌 추가 정보를 제공하는 데 사용하세요. 툴팁의 콘텐츠는 필수적인 것만 담는 게 좋아요. 구성 요소에 라벨이 없다면, 문장형(sentence case)의 단순한 서술형 명사구를 끝 구두점 없이 사용해요. 시나리오상 제목이 필요하다면, 제목이 주요 메시지를 전달하게 해주세요.
설명이 도움이 될 수 있는 활성 구성 요소라면, 툴팁은 그 구성 요소가 사용자에게 무엇을 할 수 있게 하는지 설명해야 해요. 예를 들어 "이 파일에서 텍스트 찾기"처럼요. 완전한 문장이 하나 이상이 아니라면 끝 구두점을 쓰지 마세요. 비활성 구성 요소라면, 툴팁은 그 구성 요소가 활성화될 수 있는 상황을 제공해야 해요. 마침표는 완전한 문장에만 사용하세요.