툴팁

화면에 아이콘만 남기는 설계가 늘면서 문제가 생겼습니다. 글자를 빼면 자리를 적게 먹고 정돈돼 보이지만, 그 아이콘이 무엇을 하는지는 만든 사람 머릿속에만 있습니다. 화살표가 든 사각형이 내보내기인지 공유인지 업로드인지는 그림만으로 갈리지 않습니다.

설명을 화면에 같이 적으면 이번에는 자리가 없어집니다. 도구 모음에 버튼이 여덟 개 있고 그 아래마다 한 줄씩 설명이 붙으면 정작 작업할 영역이 줄어듭니다. 사용자를 붙잡고 물어보면 이 아이콘이 무슨 뜻인지 모른다고 답하는데, 설명을 붙이면 매일 쓰는 사람에게는 매번 읽히지 않는 글자가 남습니다.

툴팁은 그 설명을 요청한 사람에게만 보여 주는 장치입니다. 평소에는 아무것도 없고, 마우스를 올린 사람에게만 한 줄이 뜹니다. 아는 사람은 그대로 지나가고 모르는 사람만 답을 받는다는 점이 이 부품의 성격을 정합니다.

요소 위에 포인터가 머무르면 그 옆에 작은 상자가 뜨고, 포인터가 떠나면 사라집니다. 설계에서 정해야 하는 것은 다섯 가지입니다.

1. 무엇에 붙일지 정합니다. 이름이 없는 아이콘 버튼과 줄임표로 잘린 글자가 주된 대상입니다. 이미 글자로 이름이 붙어 있는 버튼에는 붙이지 않습니다. 같은 말을 두 번 보여 주게 됩니다.
2. 뜨는 시각을 정합니다. 즉시 뜨면 화면을 지나가는 포인터마다 상자가 튀어나와 어지럽고, 너무 늦으면 사용자가 이미 다른 곳을 봅니다. 0.3초에서 0.5초쯤 머물렀을 때 띄우는 것이 관행입니다. 같은 도구 모음 안에서 옮겨 다닐 때는 두 번째부터 곧바로 띄우는 규칙을 더하기도 합니다.
3. 길이를 제한합니다. 한 줄에서 두 줄, 대개 마흔 자 안쪽입니다. 그보다 길어지면 포인터를 유지한 채 읽어야 하는 부담이 생깁니다.
4. 뜰 방향을 정합니다. 화면 끝에 있는 요소에서는 상자가 잘리니, 공간을 보고 위아래나 좌우로 자리를 바꾸는 규칙을 넣습니다.
5. 포인터 없는 환경을 함께 정합니다. 손가락으로 쓰는 화면에는 올려놓는 동작이 없고, 키보드만 쓰는 사용자는 선택이 옮겨 갈 때 같은 정보를 받아야 합니다. 마우스 없이 조작하게 만드는 키보드 내비게이션에서 이 부품이 가장 자주 빠집니다.

마지막 항목이 이 부품의 가장 큰 제약입니다. 툴팁에만 들어 있는 정보는 손가락으로 쓰는 사용자와 화면 내용을 소리로 읽어 주는 스크린 리더 사용자에게 닿지 않을 수 있습니다. 그래서 여기에는 없어도 일이 되는 정보만 넣습니다. 반드시 알아야 하는 것은 화면에 적습니다.

이름 없는 아이콘이 모여 있는 자리가 첫째입니다. 편집 도구 모음, 표 머리의 정렬 버튼, 목록 오른쪽 끝의 더 보기 버튼처럼 그림만으로 뜻을 전해야 하는 곳입니다.

잘린 글자를 펴 보여 주는 자리가 둘째입니다. 목록에서 제목이 길어 줄임표로 끊겼을 때, 그 위에 올리면 전체 제목이 뜨는 식입니다. 파일 이름이나 사람 이름처럼 끝까지 봐야 구분되는 값에서 값어치가 큽니다. 2026년 3분기 보고서 초안과 2026년 3분기 보고서 최종본이 목록에서 같은 글자로 잘려 있으면 올려 보지 않고는 고를 수 없습니다.

숫자와 약어의 정의를 알려 주는 자리가 셋째입니다. 지표 화면에서 값 옆의 물음표 표시에 올리면 그 숫자가 무엇을 세는지 한 줄이 뜨는 형태입니다. 필요한 때에만 정보를 단계적으로 드러내는 점진적 노출의 가장 작은 단위가 이것입니다.

반대로 쓰면 안 되는 자리가 있습니다. 첫째, 누르기 전에 알아야 하는 경고는 툴팁에 넣지 않습니다. 되돌릴 수 없는 삭제라면 그 문구는 화면이나 모달 안에 있어야 합니다. 둘째, 입력 형식 안내를 여기에 두면 사용자가 입력하는 동안 볼 수 없습니다. 비밀번호 조건은 입력란 아래에 상시로 적습니다. 셋째, 안에 링크나 버튼을 넣지 않습니다. 포인터를 옮기는 동안 상자가 사라져 누를 수 없는 경우가 생기고, 그 경우에는 다른 부품을 써야 합니다.

"이 아이콘에는 툴팁 붙여 주세요. 뭘 하는 버튼인지 모르겠어요."

이름 없는 아이콘에 설명을 요청하는 말입니다.

"그 내용은 툴팁에 두면 모바일에서 안 보입니다."

포인터가 없는 환경에서는 닿지 않는 정보라는 지적입니다.

"툴팁 안에 링크를 넣지 말고 팝오버로 바꾸죠."

안에서 조작할 것이 있으면 다른 부품이라는 판단입니다.

페이지덱의 편집 도구 모음을 정리할 때 민서가 이 판단을 했습니다. 버튼 여덟 개 중 여섯 개가 아이콘만 있었고, 사용성 테스트에서 참가자 다섯 명 중 셋이 표 삽입 버튼을 찾지 못했습니다.

민서는 여덟 개 전부에 툴팁을 달고, 그중 두 개는 툴팁만으로 부족하다고 판단해 글자 이름을 함께 남겼습니다. 툴팁을 붙였다는 사실이 아이콘을 알아볼 수 있게 만들어 주지는 않기 때문입니다. 지현은 그 판단의 근거로 자주 쓰이는 두 버튼의 사용 기록을 가져왔습니다.

툴팁을 붙였으니 설명이 끝났다고 보는 경우가 가장 많습니다. 정보를 화면에 넣은 것은 사실이라 그렇게 느껴집니다. 하지만 이 상자는 찾아온 사람에게만 열립니다. 아이콘이 무엇인지 궁금하지 않았던 사람은 포인터를 올리지 않고, 결국 그 기능을 모른 채로 지나갑니다. 아이콘 자체가 알아보기 어렵다면 답은 툴팁이 아니라 이름을 화면에 적는 것입니다.

접근성을 챙긴 장치라고 읽는 것도 흔합니다. 설명을 제공하니 도움이 될 것처럼 보입니다. 그런데 이 부품은 잘못 만들면 접근성을 오히려 깎습니다. 포인터를 올려야만 뜨게 구현하면 키보드 사용자는 그 정보를 받지 못하고, 상자만 그려 놓고 보조 기술에 전달되지 않게 만들면 소리로 듣는 사용자에게는 없는 정보가 됩니다. 장애나 상황에 관계없이 쓸 수 있게 만드는 접근성 관점에서 이 부품은 이득이 아니라 점검 대상입니다.