brunch

라이킷 54 댓글 2

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by Bella Sujin May 25. 2022

보조 설명을 제공하는 컴포넌트, Tooltip(1)

잘 써먹기 위해 정리하는 UI 3편

1편 Badge와 2편 Tag 컴포넌트에 이어 3편 Tooltip 컴포넌트에 관해 이야기해보려 한다. 이번 3편 Tooltip은 정리하다보니 내용이 많아져 두 편의 글로 나눠 적어본다.

[3-1편] Tooltip 컴포넌트의 이해와 활용

[3-2편] Tooltip 컴포넌트의 형태와 고려사항

도구 설명이라는 뜻의 Tooltip은 사용자 인터페이스의 보조 설명을 제공하는 GUI 요소이다. 컴퓨터의 운영체제가 텍스트 기반의 명령 줄 인터페이스(CUI)에서 그래픽 기반의 그래픽 유저 인터페이스(GUI)로 발전하면서 그래픽 형태의 UI 도구를 정확히 인지하기 위해 보조 설명이 필요해졌다.

1. PC에서의 Tooltip과 모바일에서의 Tooltip

Tooltip은 PC와 모바일에 따라 작동 원리가 다르다. 마우스 장치가 있는 PC에서는 텍스트, 아이콘, 버튼 등의 UI 요소에 마우스 포인트를 올려놓으면 나타나고 포인트를 떼면 사라지는 마우스 호버 인터랙션에 의해 작동된다. 그래서 PC 환경의 Tooltip 컴포넌트를 설계할 때에는 마우스 장치가 없을 환경을 고려하여 키보드 장치로도 작동될 수 있도록 접근성이 함께 고려되어야 한다.

모바일에서는 두 가지 방식이 있다. 하나는 사용자가 화면에 접속했을 때 나타났다가 몇 초 후 자동으로 사라지는 방식과 다른 하나는 화면에 고정으로 보이다가 사용자가 닫기 버튼을 실행했을 때 제거되는 방식이다. 나타났다 사라지는 방식은 사용자의 시선을 불필요하게 주목시킬 수 있고, 고정으로 보이는 방식은 매번 사용자가 닫기를 클릭해야 하는 번거로움이 있을 수 있다. 그래서 모바일 환경의 Tooltip은 '사용자 경험 흐름에 얼마나 영향을 미치는가'를 충분히 분석한 뒤 올바르게 사용해야 한다.

마지막으로 정보 아이콘이나 도움말 아이콘을 통해 작동되는 Tooltip이 있다. 마우스 호버 인터랙션으로 작동되는 PC에서는 Tooltip으로 정의하지만, 모바일에서는 터치(클릭) 인터랙션으로 작동되기에 Popover 컴포넌트로 정의한다. Popover 컴포넌트에 대해서는 다음 편에서 자세히 이야기해보겠다.

2. Tooltip 컴포넌트의 활용

Tooltip 레퍼런스를 찾아 분석해 본 결과, Tooltip 컴포넌트는 어떤 맥락에 사용할 것인가에 따라 아래와 같이 3가지 활용으로 정리해 볼 수 있다.

Additional Information

Benefit

Next Step

(1) 정확한 기능 인지를 위한 보조 설명 제공(Additional Information)

기능 인지를 위한 보조 설명은 Tooltip 컴포넌트가 갖는 대표적인 기능이다. 텍스트 없이 그래픽 형태로만 이루어진 아이콘이나 서비스에 따라 특별히 사용되는 버튼명인 경우 그 기능을 정확히 알기는 어렵다. 그래서 Tooltip 컴포넌트를 활용하여 보조 설명을 제공한다. 서비스를 처음 이용하는 고객에게 제공하거나, 기존 서비스에서 새로운 기능을 추가한 경우에 활용한다. Tooltip을 한 번만 제공할 수 있고, 횟수를 정해 노출되는 기간을 정할 수 있다. 서비스를 자주 이용하는 고객에게는 어느 시점부터는 Tooltip이 불필요한 요소가 될 수 있기 때문에 시각적인 설계 못지않게 운영에 대한 설계도 깊이 있게 이뤄져야 한다.

- 실시간 주가변동을 차트로 확인해 보세요!
- 나만의 사진, 영상으로 특별한 메시지카드를 만들어보세요.
- 관심주제를 설정해보세요!

(2) 혜택 정보 제공(Benefit)

혜택 정보를 제공하는 Tooltip은 기능을 인지하는데 어려움은 없지만, 기능을 이용하면 혜택을 받을 수 있다고 알려주고자 할 때 활용한다. 적절한 맥락에 잘 활용한다면 더할 나위 없이 좋은 마케팅 요소가 될 수 있다. 하지만 Tooltip이 다른 콘텐츠를 가리며 띄우는 컴포넌트이기 때문에 고객에게 불필요한 정보가 될 경우 매우 불쾌한 경험을 전달할 수 있다. 그래서 이러한 Tooltip을 설계할 때에는 UX 라이팅 전략이 매우 중요하다. 아래에 찾아본 레퍼런스는 UX 라이팅 전략이 잘 적용된 예시라 생각한다. Tooltip의 내용이 군더더기 없이 간결하며, 전환율을 높이는 적절한 맥락에 잘 활용되었다고 생각하기 때문이다.

- 사전 동의하면 혜택 이벤트 자동 응모
- 구매확정 및 리뷰 작성 완료시 포인트 최대 2,598원!
- 방금 708건 이상 구매된 상품이에요.

(3) 다음 행동 제시(Next Step)

Tooltip 컴포넌트는 정보를 제공하는 기능 이외에 사용자에게 다음에 해야 할 행동을 제시할 때에도 활용된다. 배달의민족이나 요기요 서비스에서 상단의 주소 정보 밑에 '잠깐 이 주소가 맞나요?', '배달 받으시는 주소가 맞나요?'가 나타났다 사라지는 것을 찾아볼 수 있다. 이 Tooltip은 배달 메뉴를 찾기 전 배달될 주소가 맞는지 먼저 확인하도록 행동을 유도하는 기능을 한다. 사용자가 주소를 한 번 더 확인할 수 있는 기회를 제공하며, 잘못된 장소로 배달되는 것을 사전에 방지할 수 있다.

또 다른 예는 Pay 앱에서 찾아볼 수 있다. 네이버 쇼핑이나 다른 쇼핑몰에서 상품을 구입할 때 Pay 앱으로 결제하는 경우가 있다. 이때 Pay 앱에서 결제 인증을 하고 해당 앱으로 돌아가야 결제가 성공적으로 마무리된다. 앱에 따라 자동으로 돌아가도록 설계되기도 하지만 그렇지 않은 경우에는 사용자가 직접 앱으로 돌아가야 한다. 이때, 아래의 레퍼런스와 같이 '상단의 버튼 눌러 결제를 완료해주세요'를 띄워 행동을 유도한다.