[Next.js] 검색 기능 사용을 유도하는 툴팁 구현하기

문제 상황

두 달 전에 웹소설 캘린더에 작가나 작품명을 검색할 수 있는 검색 기능을 추가했다.

이 서비스의 핵심 기능이라고 생각했기 때문에 많은 사용을 기대했다.

하지만 GA 데이터를 확인해 보니, 이용률이 거의 제로에 가까웠다.

 

사용자가 검색 기능의 존재를 인지하지 못하고 있다고 생각돼서

검색 기능의 사용을 유도하기 위해 검색 버튼 하단에 툴팁을 추가해보기로 했다.

 

툴팁 UI

툴팁은 기능에 대한 보조 설명을 제공하거나, 혜택 정보 제공, 다음 행동을 제시하는 경우에 사용할 수 있다.

나는 사용자들에게 검색 기능이 있다는 것을 알리고, 자연스러운 사용을 유도하기 위해 툴팁을 사용했다.

 

툴팁 컴포넌트 구현

import Image from "next/image";

export default function SearchTooltip({ onClose }: { onClose: () => void }) {
  return (
    <div className="absolute right-full top-1/2 -translate-y-1/2 mr-2 z-50">
      <div className="relative bg-purple-500 text-white text-sm pl-4 py-1.5 rounded-lg flex items-center whitespace-nowrap">
        <span>궁금한 작품을 검색해보세요!</span>
        <button onClick={onClose} className="flex items-center w-5 h-5 mx-1">
          <Image
            src="/images/close-white.svg"
            alt="닫기"
            width={16}
            height={16}
          />
        </button>
        <div className="absolute top-1/2 -right-2 -translate-y-1/2 w-0 h-0 border-t-8 border-b-8 border-l-8 border-transparent border-l-purple-500" />
      </div>
    </div>
  );
}

헤더의 검색 버튼 좌측에 다음과 같은 형태의 툴팁을 만들었다.

 

툴팁 노출 로직

const [showSearchTooltip, setShowSearchTooltip] = useState(false);

// 툴팁 닫거나 검색 버튼 클릭 시 호출되는 함수
const handleCloseTooltip = () => {
    if (!showSearchTooltip) return;
    setShowSearchTooltip(false);
    localStorage.setItem("searchTooltipDismissed", "true");
};

useEffect(() => {
    const isDismissed =
      localStorage.getItem("searchTooltipDismissed") === "true";
    // 이전에 툴팁을 닫았었다면 표시하지 않음
    if (!isDismissed) {
      setShowSearchTooltip(true);
    }
}, []);

사용자가 사이트에 접속할 때마다 툴팁을 노출하도록 기본값을 설정하고,

사용자가 툴팁을 닫거나, 검색 페이지로 이동한 이후에는 더 이상 툴팁이 보이지 않도록 처리했다.

 

상단의 두 가지 경우에 로컬 스토리지에 `searchTooltipDismissed = "true"` 값을 저장하고,
이 값이 존재하면 이후 방문 시 툴팁이 나타나지 않도록 제어한다.

 

참고

• 보조 설명을 제공하는 컴포넌트, Tooltip(1)
• 컴포넌트 스터디: ②바, 툴팁, 칩