추가 정보를 제공하는 컴포넌트, Popover
잘 써먹기 위해 정리하는 UI 4편
앞서 3편에서 보조 설명을 제공하는 컴포넌트, Tooltip을 이야기하면서 Popover에 관해 잠깐 언급했었다.
마지막으로 정보 아이콘이나 도움말 아이콘을 통해 작동되는 Tooltip이 있다. 마우스 호버 인터랙션으로 작동되는 PC에서는 Tooltip으로 정의하지만, 모바일에서는 터치(클릭) 인터랙션으로 작동되기에 Popover 컴포넌트로 정의한다. - 보조 설명을 제공하는 컴포넌트, Tooltip (1)
4편으로 Popover 컴포넌트를 준비하면서 고민이 참 많았다. 'Tooltip과 Popover가 어떻게 다른가?', '내가 찾은 레퍼런스는 Tooltip 인가 Popover 인가', '내가 정리하는 방향이 정답이긴 할까?'. 먼저 자세한 이야기를 하기에 앞서 이 두 요소를 꼭 나눠서 명명할 필요가 없다는 것을 말해두고 싶다. 디자인 시스템이나 프로덕트에 따라 두 요소를 Tooltip 컴포넌트로 정의하고 스타일1, 스타일2 등으로 나눠서 정리하기도 한다. 정답은 없다. 방법이 어떻든 가장 중요한 것은 요소의 형태를 잘 분리하고, 정의해서, 알맞게 활용하는 것이다.
내가 정리하는 방향은 Tooltip과 Popover를 나눠서 명명하고, 두 요소의 차이를 이야기하려 한다. Tooltip 컴포넌트가 짧고 간략한 보조 설명을 제공한다면, Popover 컴포넌트는 좀 더 많은 보조 설명 또는 추가 정보를 제공하는데 활용된다. 그중 Infotip으로도 불리는, 정보 아이콘 또는 도움말 아이콘을 클릭했을 때 나오는 Popover를 중점적으로 살펴보고자 한다. Tooltip과 Popover를 간단히 비교하면 아래와 같이 정리할 수 있다.
Tooltip
- 텍스트 요소만 담을 수 있다.
- 단어 또는 짧고 간결한 하나의 문장 형태로 제공한다.
- 마우스 호버 인터랙션으로 작동된다.
Popover
- 타이틀, 이미지, 버튼, 링크 등 다양한 요소를 포함할 수 있다.
- 좀 더 많은 보조 설명 또는 추가 정보를 제공한다.
- 클릭 인터랙션으로 작동된다.
1. 클릭했을 때 나오는 메시지, Popover
Popover는 버튼 또는 아이콘 요소(Tigger)를 클릭했을 때 주위에서 작게 뜨는 컴포넌트이다. 화면의 전환 또는 이동 없이 사용자가 현재의 위치를 잃지 않고 보조 설명을 제공받거나, 추가 기능에 접근해야 할 경우에 사용된다. 또한 Popover 컴포넌트는 Tooltip 컴포넌트와 달리 타이틀, 이미지, 버튼, 링크 등의 다양한 요소를 담을 수 있다. 이러한 Popover 컴포넌트는 모바일보다 PC에서 더 다양한 형태로 활용된다.
2. 정보 아이콘 또는 도움말 아이콘을 클릭했을 때 나오는 Popover(Infotip)
모바일에서 찾아볼 수 있는 대표적인 Popover는 정보 아이콘 또는 도움말 아이콘을 클릭(터치)했을 때 나오는 추가 정보이다. 이 Popover는 Infotip으로도 불린다. 정보의 내용이 화면에 꼭 노출될 필요 없이, 일시적으로만 필요한 경우에 활용하여 사용자 인터페이스를 간소화하는데 도움을 준다. 하지만 앞서 Tooltip에서 이야기했듯이 Popover 컴포넌트도 다른 콘텐츠를 가리고 띄워지기 때문에 크기가 너무 크지 않아야 하며 적절한 양의 내용을 담아야 한다. 한 화면을 덮을 정도로 많은 양의 내용을 담아야 한다면, Popover 컴포넌트 대신 Modal(Dialog, Popup) 컴포넌트를 고려하는 것이 좋다.
3. Popover(Infotip)의 형태
위에서 찾아본 레퍼런스를 참고하여 Popover(Infotip)의 기본적인 형태를 살펴보면 아래와 같다.
(1) Trigger icon : Popover를 활성화시키는 클릭 요소를 Trigger라고 하며, 아이콘 또는 버튼이 대상이 될 수 있다.
(2) Title(or Header) : 추가 정보의 제목으로 짧고 간결한 단어를 사용하여 콘텐츠의 주목도를 높인다.
(3) Info message : 추가 정보의 내용으로 텍스트, 이미지, 버튼, 링크 등 다양한 요소를 포함할 수 있다.
(4) Close button : Popover를 해제하는 방법으로는 2가지가 제공되는데, 하나는 Tigger를 클릭하는 방법과 다른 하나는 Close button을 제공하는 것이다. 즉, Trigger icon은 활성과 해제 2가지 역할을 하는 토글 기능을 갖는다.
(5) Container : Popover가 Tooltip 보다 많은 내용을 담을 수 있지만, Popover 컴포넌트도 너무 크지 않는 적절한 크기를 유지해야 한다. 가이드를 설계하여 알맞은 여백과 폰트 크기를 사용하는 것이 매우 중요하다.
Popover 배치는 Tooltip과 동일하게 Top / Bottom / Left / Right 기본 방향이 있고, 길이나 위치에 따라 12가지 배치가 나올 수 있다. (3편 Tooltip에 정리했던 12가지 배치)
4. Popover(Infotip) 컴포넌트 사용 시 고려사항
(1) 소량의 정보 또는 기능을 노출하고, 너무 크게 만들지 말아야 한다.
Popover 컴포넌트도 공간의 제약을 받는 컴포넌트이다. 많은 양의 정보를 제공하거나, 크기가 크면 오히려 불편한 경험을 전달할 수 있다.
(2) 한 번에 하나씩 표시한다.
여러 Popover가 표시되면 인터페이스가 흐트러지고 혼동을 발생한다. 계단식이나 계층 형태로 제공하지 말아야 하며, 새로운 Popover를 표시하기 위해서는 이전에 열었던 Popover를 닫을 수 있도록 설계하는 것이 좋다.
(3) 경고 표시에 Popover 컴포넌트를 사용하지 않는다.
Popover는 클릭을 통해 제공되는 보조 설명 또는 추가 정보이다. 경고는 중요한 정보이며, 이것을 클릭을 통해 제공된다면 매우 불쾌한 사용자 경험이 될 수 있다. 경고는 동일 화면 내 또는 Modal 컴포넌트를 활용하는 것이 좋다.
사용 시 고려해야 할 사항은 Apple의 Human Interface Guidelines를 참고하여 정리하였다. 위 3가지 이외에 몇 가지 더 있으니 읽어보면 좋을 것 같다. 링크는 아래의 참고 자료로 첨부해두었다:)
[참고자료]
1. Balsamiq Wireframing Academy Articls - Tooltip and Popover Guidelines by Tess Gadd
2. MindSphere Design System - Infotip
3. Adobe Spectrum - Contextual help
4. Human Interface Guidelines (HIG) - Popovers
[레퍼런스 서비스]
네이버
밀리의 서재
네이버 날씨
