이번 초간단 튜토리얼에서는 사용자가 이미지나 링크 같은 요소 위에 마우스를 올렸을 때(hover) 간단한 설명 텍스트, 즉 툴팁(tooltip)을 표시하는 방법을 알아봅니다.
툴팁을 추가하는 데 걸리는 시간은 단 몇 초입니다. HTML의 title 속성만 사용하면 되기 때문입니다.
마우스 오버 시 텍스트 표시하기
다음은 루빅스 큐브(Rubik's Cube) 이미지를 활용한 기본 예제입니다. 이미지 위로 마우스를 가져가면 잠시 후 루빅스 큐브에 대한 추가 정보가 나타납니다:
위 이미지 요소의 HTML 마크업은 다음과 같습니다:
<img
src="이미지-파일-url"
title="루빅스 큐브. 1974년 헝가리 조각가 에르뇌 루빅(Ernő Rubik)이 발명한 3차원 조합 퍼즐 장난감."
alt="루빅스 큐브"
/>이번에는 사용자가 링크(앵커) 요소 위로 마우스를 이동할 때 툴팁을 표시하고 싶다고 가정해 보겠습니다.
아래 링크 위로 마우스를 올려보세요. 툴팁이 나타납니다.
최신 글 보기
그리고 해당 링크의 HTML 마크업입니다:
<a href="https://techstacker.com" title="TechStacker 메인 페이지로 이동하는 링크"
>최신 글 보기</a
>이게 전부입니다. title 속성은 어떤 HTML 요소에든 추가할 수 있습니다.
요소 위에 마우스를 올렸을 때 텍스트를 표시하면 왜 좋을까?
어떤 요소는 지나치게 단순해서 일부 사용자에게 오히려 혼란을 줄 수 있습니다. 대표적인 예가 바로 아이콘입니다. 대부분의 사람들은 몇 가지 아이콘 정도만 인식할 수 있지만, 서구권만 해도 실제로 수천 가지의 다양한 아이콘이 사용되고 있습니다.
아이콘(예: 이미지 요소 내부)에 title 속성을 추가하기만 하면, UI 어디에서든 해당 아이콘의 기능에 대한 명확한 설명을 확인할 수 있는 선택지를 사용자에게 제공하게 됩니다.
"요소 위에 마우스를 올리면 추가 정보가 나타난다는 사실을 과연 얼마나 많은 사람들이 알고 있을까?"라고 생각할 수도 있습니다.
아주 좋은 질문입니다. 답은 타깃 오디언스에 따라 달라집니다. IT에 익숙한 대부분의 사람들은 요소 위에 마우스를 올리고 1~2초 정도 기다리면 해당 항목에 대한 추가 정보가 자주 표시된다는 것을 직관적으로 알고 있습니다.
하지만 만약 여러분의 오디언스가 IT에 익숙하지 않은 사람들이거나, 웹을 자주 사용하지 않는 사람들로 구성되어 있다면 어떻게 될까요?
그런 경우라면 UX 전문가 Luke Wroblewski의 보편적인 조언을 기본 원칙으로 삼는 것이 좋습니다:
명확한 것이 항상 이긴다(Obvious always wins).
아이콘이 명확하지 않거나, 최소한 상당수의 사람들에게 명확하지 않다면 더 나은 아이콘을 만들거나 그 아이콘에 간단한 설명을 함께 배치해야 합니다.
어쨌든 title 속성을 추가하는 것, 그리고 물론 시각장애인을 위한 스크린 리더를 고려한 ALT 속성을 추가하는 것은 장점만 있습니다. 모든 요소에 추가할 필요는 없지만, 확신이 서지 않는다면 추가하는 편이 좋습니다.
추가로, 적어도 ALT 속성은 SEO에도 영향을 미칩니다. 직접적이진 않지만 간접적으로, 어쩌면 직접적으로도 영향을 줄 가능성이 있습니다.
어떻게냐고요? ALT 설명은 접근성(accessibility) 카테고리에 속하는데, Google은 웹사이트 품질 평가에 접근성이 영향을 미친다는 점을 공공연히 밝혀왔습니다. 이는 결국 SEO 순위에도 영향을 미칩니다.
title 속성의 경우 과거에는 SEO에 영향을 미쳤지만, 최근 조사에 따르면 현재에도 영향을 미치는지는 불확실합니다. 하지만 역시 title 속성 사용에는 명확한 단점이 없으며 장점만 존재합니다.
대체 툴팁 구현 방법
HTML에 내장된 툴팁(title 속성)보다 더 커스터마이징된 버전이 필요할 수도 있습니다. 그런 경우 JavaScript와 CSS를 활용하면 다양한 사용 사례에 맞춰 툴팁의 등장 타이밍과 스타일을 모두 자유롭게 조절할 수 있습니다. 이 유용한 기술은 향후 튜토리얼에서 다룰 예정입니다(작성 목록에 이미 올려두었습니다!).