제대로 알고 쓰자! - Tooltip과 Popover

이미지 출처 : Pixabay

제대로 알고 쓰자!
웹 사이트에 존재하는 수많은 Web Component. 얼핏 보면 비슷하지만 엄밀히 다르다.
모두 우리의 필요에 의해 만들어진 것으로 각각의 섬세한 특징과 사용법을 가지는 특별한 존재들이다.
이를 분명하게 구분하여 사용한다면 더 깔끔하고 효율적으로 동작하는 웹 사이트가 될 수 있을 것이다.
헷갈리는 컴포넌트를 대상으로 분명한 목적과 차이점을 생각해보는 시리즈를 써보고자 한다.

Tooltip과 Popover 컴포넌트는 마치 Toast와 Snackbar의 관계와 같다.

 

Popover는 Tooltip의 확장 형태로 더 많은 정보와 추가 콘텐츠를 포함할 수 있는 UI 요소로,

많은 UI 라이브러리나 디자인 시스템에서 둘을 구분하지 않고 하나의 컴포넌트로 표현하기도 한다.

다만 둘을 엄밀히 구분할 때 사용 목적이나 담고 있는 콘텐츠에서 차이가 있다는 것만 알아두면 좋을 것 같다.

- Tooltip: 버튼이나 아이콘 위로 마우스를 올렸을 때(hover) 짧은 설명이 나타나는 형태로, 주로 간단한 정보나 힌트를 제공할 때 사용한다

- Popover: 더 상세한 정보를 제공하거나 텍스트 외에 추가 콘텐츠(예: 이미지, 링크)를 포함할 수 있는 UI 요소다. 보통 클릭을 통해 활성화되고 위치나 크기도 Tooltip보다 다양하게 설정할 수 있다.

 

다음과 같은 구성으로 진행된다.

1. Tooltip의 특징
2. Popover의 특징
3. 두 컴포넌트의 차이

---

1. Tooltip의 특징

• 사용자 인터페이스의 보조 설명을 제공하는 GUI 요소
• 활용 범위
  • 추가 정보 : 기능 인지를 위한 보조 설명
  • 혜택 정보 : 기능을 인지하는 어려움은 없지만 기능 이용 시 혜택을 받을 수 있을 때 활용
  • 다음 행동 제시 : 사용자에게 다음에 해야 할 행동을 제시할 때 활용
• 사용 시 고려 사항
  1. Tooltip의 형태는 간결하고 적정 크기를 유지해야 한다.
     • 한시적이고 공간의 제약을 많이 받는 컴포넌트
     • 짧고 간결한 문장을 사용해야 하며, 많은 양의 정보를 제공해야 할 경우 Popover 컴포넌트나 다른 컴포넌트를 사용한다.
  2. 항상 제공해야 하는 필수 내용은 Tooltip에 넣지 않는다.
     • 보조 설명을 위한 목적을 가지기 대문에 인터페이스를 사용할 때 필수적이지 않아야 한다.
     • Tooltip 없이도 서비스 이용에 문제가 없어야 한다.
  3. 이미 존재하는 정보를 반복해서는 안 된다.
     • 사용자에게 유용한 정보를 제공해야 한다.
  4. 적게 사용해야 한다.
     • Tooltip의 형태나 크기에 따라 다른 콘텐츠를 가리며 띄워지기 때문에 목적 없이 사용하면 사용자에게 불쾌한 경험을 전달한다.
     • 여러 개를 동시에 사용하기 보다 한 화면에 하나의 Tooltip을 사용하는 것이 좋다.
  5. 경계 또는 페이지 밖으로 나가지 않도록 한다.

2. Popover의 특징

• Tooltip 보다 많은 보조 설명 또는 추가 정보를 제공한다.
• Tooltip의 변형/확장 형태로 스타일에 구분을 두어 사용하기도 한다.
• 타이틀, 이미지, 버튼, 링크 등 다양한 요소를 포함한다.
• PC 웹 화면에서 더 다양한 형태로 활용 가능하다.
• Trigger 요소를 클릭할 때 작게 떠서 화면의 전환 또는 이동 없이 보조 설명이나 추가 기능에 접근한다.
• 사용 시 고려 사항
  1. 소량의 정보 또는 기능을 노출하고 너무 크게 만들지 많아야 한다
     • 많은 양의 정보를 제공해야 할 경우 Dialog, Modal 등의 다른 컴포넌트를 사용한다.
  2. 한 번에 하나씩 표시한다
     • 여러 Popover가 표시되면 인터페이스가 흐트러져 사용성을 저해한다.
     • 새로운 Popover를 표시하기 위해서는 이전 것을 닫을 수 있도록 설계한다.
  3. 경고 표시에 Popover 컴포넌트를 사용하지 않는다.
     • 보다 중요한 정보인 경고 정보는 동일 화면 내 또는 Modal 컴포넌트를 활용한다.

3. Tooltip과 Popover 비교

Tooltip과 Popover의 특징을 표로 정리하면 다음과 같다.

 

속성	툴팁(Tooltip)	팝오버(Popover)
주요 목적	간단한 정보 제공	상세 정보나 다양한 상호작용 요소 제공
출현 방식	주로 요소 위에 마우스를 올리거나 포커스를 맞출 때 나타남	버튼 클릭이나 터치 등으로 사용자가 명시적으로 트리거
위치	주로 요소의 위, 아래, 좌우로 자동 위치 조정	위치 지정이 자유로우며, 커스텀 위치 지정이 가능
내용 길이	짧고 간단한 텍스트만 포함하는 것이 일반적	길거나 복잡한 내용, 텍스트와 함께 이미지, 링크 등이 포함 가능
상호작용 가능 여부	상호작용 불가능 (단순히 정보 제공)	상호작용 가능 (링크 클릭, 버튼 클릭 등)
자동 사라짐 여부	일정 시간 후 자동으로 사라짐	사용자가 외부를 클릭하거나 특정 조작을 통해 사라짐
사용 예	버튼 기능 설명, 약어 해석 등 짧은 정보 제공	카드 상세 정보, 유저 메뉴, 추가 정보와 같은 심화 정보 제공
애니메이션 효과	간단한 페이드 인/아웃 효과	다양한 애니메이션 적용 가능 (슬라이드, 페이드 등)
적용성	가볍고 단순한 구성 요소에 적합	복잡하고 다양한 정보를 필요로 하는 구성 요소에 적합

 

툴팁은 간단히 텍스트 정보만 제공하여 사용자 인터페이스에 가볍게 추가하는 용도로,

팝오버는 좀 더 풍부한 정보나 기능을 제공하는 용도로 적합하다.

 

보통 두 컴포넌트를 엄격하게 구분하지는 않기 때문에 용도에 맞게 적절한 내용을 선택하면 될 것 같다.