툴팁(Tooltip) 학습

툴팁(Tooltip)은 사용자가 특정 요소(버튼, 아이콘, 링크 등)에 마우스 커서를 올리거나(Hover) 포커스를 두었을 때 나타나는 짧은 설명 창입니다. 화면의 공간을 차지하지 않으면서도 필요할 때만 정보를 제공하는 점진적 열람(Progressive Disclosure)의 대표 사례입니다.

이미지

툴팁 UI 예시 이미지

설명

1. 툴팁의 핵심 UX 원칙

  • 보조적인 정보만 담기: 툴팁 없이도 서비스 이용이 가능해야 하며, 핵심 정보가 아니라 기능 보충 설명 용도로 사용해야 합니다.
  • 짧고 간결하게: 한 문장 이내, 단어 몇 개 수준으로 빠르게 이해 가능해야 합니다.
  • 시각적 방해 금지: 주요 클릭 요소를 가리지 않도록 상/하/좌/우 위치를 상황에 맞게 선택해야 합니다.

2. UI 디자인 체크리스트

  • 등장 방식: 마우스 오버 후 약 0.3~0.5초 지연 노출이 자연스럽습니다.
  • 대비(Contrast): 배경과 충분히 구분되는 색상 + 그림자(Shadow)를 사용합니다.
  • 꼬리표(Arrow): 어느 요소를 설명하는지 명확히 보여주는 삼각형 꼬리를 포함합니다.
  • 반응형: 모바일은 hover가 없으므로 클릭 기반 UI 또는 Bottom Sheet 등 대안이 필요합니다.

3. 툴팁 vs 팝오버

툴팁 짧은 텍스트 설명 중심, 마우스가 벗어나면 즉시 사라짐, 상호작용 없음
팝오버 이미지/버튼/링크 등 더 많은 정보 가능, 클릭으로 열고 닫는 경우가 많음

5. 교수님의 한마디 팁

"가장 좋은 UI는 설명이 필요 없는 UI입니다. 툴팁을 너무 많이 달아야 한다면, 레이아웃이나 아이콘의 직관성을 먼저 점검하세요. 툴팁은 친절한 보조 도구이지, 불친절한 디자인의 면죄부가 되어서는 안 됩니다."

코드

HTML

<button class="tooltip-btn" data-tooltip="작성한 내용이 서버에 저장됩니다.">
  저장하기
</button>

CSS (가상 요소 활용)

.tooltip-btn {
  position: relative;
  padding: 10px 20px;
  cursor: pointer;
}

.tooltip-btn::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 125%; left: 50%;
  transform: translateX(-50%);
  background: #333;
  color: #fff;
  padding: 8px 12px;
  border-radius: 5px;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
}

.tooltip-btn:hover::after {
  opacity: 1;
  visibility: visible;
}

jQuery (스크립트로 제어할 경우)

$(document).ready(function() {
  $('.tooltip-btn').on('mouseenter', function() {
    // 더 정교한 애니메이션/지연 로직을 여기에 구현할 수 있습니다.
    console.log('툴팁 표시 준비');
  });
});

실행