네이버 툴팁 만들기

리뉴얼된 네이버의 메인페이지를 보니, 툴팁이 정말 많이 사용되었다는 것이 느껴졌다.

 

그래서 네이버는 툴팁을 어떻게 관리하는지 확인해보고 싶어졌다.

 

툴팁이란, 사용자 인터페이스 요소로 해당 기능에 대한 보충설명을 나타낼 수 있는 말풍선등을 의미한다.

 

툴팁을 이용하면, 신규 사용자에게 서비스의 중요한 기능/가치를 쉽게 알려줄 수 있다. 

 

각각의 툴팁은 쿠기에서 관리가 되는데, 예시로 "더 많은 콘텐츠를 둘러볼 수 있어요!" 라는 툴팁을 제거하자

 

tooltip_paging_close: 1이 설정되었다.

 

이후엔 새로고침을 해도 해당 툴팁은 다시 나타나지 않았다.

 

tooltip_setting_close, tooltip_shoppingbox_close, tooltip_paging_close 와 같이 각각하나씩 저장되어 관리가 되고 있는 것을 확인할 수 있다.

 

아래 코드펜 예시 코드를 통해, 아래와 같은 전체적인 로직을 확인할 수 있다.

 

툴팁이 꺼졌는지 확인 -> 꺼진 적이 없다면 툴팁을 삽입 -> 사용자가 툴팁을 닫음 -> 쿠기에 저장 -> 새로고침시에도 다시 툴팁이 나타나지 않도록 설정

 

 

See the Pen Untitled by younggil (@zel0rd) on CodePen.