보조 설명을 제공하는 컴포넌트, Tooltip(2)
잘 써먹기 위해 정리하는 UI 3편
[3-1편] Tooltip 컴포넌트의 이해와 활용
[3-2편] Tooltip 컴포넌트의 형태와 고려 사항
3. Tooltip 컴포넌트의 형태
(1) Label : 단어 또는 문장이 들어간다. 문장은 한 문장으로, 짧고 간결해야 한다. 잘 정제된 하나의 문장을 만들기 위해서는 UX Writing 전략이 매우 중요하다.
(2) Container : 적절한 여백을 찾아 컨테이너의 크기가 커지지 않도록 가이드를 설계해야 한다.
(3) Tip : 방향을 나타내며, 설명하고자 하는 인터랙션 도구를 정확히 가리켜야 한다.
(4) Close button : 해제 가능한 Tooltip에 들어가는 요소로, 사용자가 닫기 버튼을 클릭하여 Tooltip을 해제할 수 있다.
Tooltip의 배치는 위와 같이 Top / Bottom / Left / Right 기본 방향이 있고, 길이나 위치에 따라 아래와 같이 12가지 배치가 나올 수 있다.
4. Tooltip 컴포넌트 사용 시 고려사항
(1) Tooltip의 형태는 간결하고 적정 크기를 유지해야 한다.
위에서 이야기했듯이 Tooltip은 한시적이며 공간의 제약을 많이 받는 컴포넌트이다. 따라서 짧고 간결한 문장을 사용해야 하며, 많은 양의 정보를 제공해야 할 경우 Popover 컴포넌트나 다른 컴포넌트를 고려하는 것이 좋다.
(2) 항상 제공해야 하는 필수 내용을 Tooltip으로 제공하지 않는다.
글의 제목처럼 Tooltip은 보조 설명을 제공하는 컴포넌트이다. 따라서 명확하고 유익해야 하지만, 인터페이스를 사용할 때 필수적이지 않아야 한다. Tooltip 없이도 서비스 이용에 문제가 되지 않아야 한다.
(3) Tooltip은 이미 존재하는 정보를 반복해서는 안된다.
'수정하기'라는 텍스트 버튼이 있다고 가정하자. 여기에 '수정하기', '수정하시려면 클릭하세요'와 같은 Tooltip을 제공하는 것은 의미가 없다. 남용하는 것이다. Tooltip은 사용자에게 유용한 정보를 제공해야 함을 잊지 말아야 한다.
(4) Tooltip은 적게 사용해야 한다.
Tooltip 컴포넌트는 '펼쳐진다'보다는 '띄운다'라는 표현이 더 잘 어울리는데, Tooltip의 형태나 크기에 따라 다른 콘텐츠를 가리며 띄워지기 때문에 목적 없이 사용하면 사용자에게 불쾌한 경험을 전달하게 된다. 따라서 꼭 필요한 맥락이라 판단될 때 활용해야 하며, 여러 개를 동시에 사용하기보다는 한 화면 하나의 Tooltip을 사용하는 것이 좋다.
(5) 경계 또는 페이지 밖으로 나가지 않도록 한다.
마지막으로 고려해야 할 사항은 Tooltip이 경계 또는 페이지 밖으로 나가 잘리는지 검수해야 한다. 프로젝트를 할 때 Tooltip을 테스트하고 검수하는 일이 많이 놓치고 가는 부분이라 생각한다. 응당 모든 컴포넌트가 그러하겠지만, Tooltip 컴포넌트가 잘린 채 사용자에게 제공된다면 서비스 이미지에 많은 손상을 줄 것이다.
3-1편과 3-2편까지 Tooltip 컴포넌트에 관해 긴 글을 써내려왔다. 기존에 알고 있던 지식이 아니라 공부하면서 터득하는 지식을 적어내느라 속도가 뎌디고 지칠 때가 있는데, '잘 써먹을 수 있겠다'라는 마음 하나로 4편 Popover도 써본다. 디자인이라는 큰 숲에서 나무 하나하나를 들여다볼 수 있는 시각이 자라나고 있음을 확신하면서.
[참고자료]
1. Goldman Sachs Design System
2. Workday Canvas Design System
