Tooltip(툴팁) — 버튼과 아이콘의 기능을 짧게 설명하는 안내 UI
업무 시스템을 사용하다 보면 아이콘만으로는 기능을 이해하기 어려운 순간이 있습니다. 물음표 모양의 아이콘이 무엇을 설명하는지, 작은 버튼을 누르면 어떤 작업이 실행되는지 망설이게 되기도 합니다.
이럴 때 도움을 주는 UI가 Tooltip(툴팁)입니다. 마우스를 올리거나 키보드 포커스를 두었을 때 짧은 설명이 나타나 사용자가 현재 요소의 기능을 이해하도록 돕습니다. 화면에 설명을 항상 표시하지 않아도 되므로 복잡한 업무 화면을 간결하게 유지할 수 있습니다.
1. 툴팁을 쉽게 이해하기
책이나 기계에 붙어 있는 작은 설명 라벨을 떠올려 보세요. 평소에는 눈에 띄지 않지만, 궁금한 부분을 살펴보면 필요한 설명을 확인할 수 있습니다.
툴팁도 비슷합니다. 버튼이나 아이콘 가까이에 짧은 설명을 잠시 보여주는 방식입니다.
병원 EMR 화면을 예로 들어보겠습니다.
간호기록 화면의 물음표 아이콘에 포커스를 두면 '간호기록 작성 기준 보기'라는 설명이 나타납니다.
저장 아이콘 위에 마우스를 올리면 '임시저장'이라는 기능명이 표시됩니다.
검사 결과 목록의 상태 아이콘에 포커스를 두면 '검사 결과 확인 필요'라는 설명이 나타납니다.
사용자는 버튼을 직접 눌러 보지 않아도 기능을 파악할 수 있습니다. 다만 툴팁은 짧은 보조 설명을 위한 UI이며, 긴 사용법이나 필수 안내를 툴팁에만 숨겨서는 안 됩니다.
2. 시각적 예시 방향
본문 이미지나 프로토타입은 병원 EMR의 간호기록 작성 화면을 중심으로 구성하면 좋습니다.
화면에는 환자 기본정보, 간호기록 입력 영역, 저장·수정·도움말 아이콘을 배치합니다.
도움말 아이콘 위에 마우스 커서가 위치한 상태를 표현합니다.
아이콘 바로 옆에 작은 말풍선 형태의 툴팁을 표시하고 '간호기록 작성 기준을 확인합니다'라는 짧은 문구를 넣습니다.
다른 예시로 저장 아이콘에는 '임시저장', 잠금 아이콘에는 '수정 권한이 없습니다'라는 설명을 보여줍니다.
마우스 오버뿐 아니라 키보드 Tab 키로 포커스를 이동했을 때도 같은 설명이 나타나는 모습을 함께 표현합니다.
화면 가장자리에서는 툴팁이 잘리지 않도록 위·아래·좌·우 위치가 자동 조정되는 예시를 추가합니다.
핵심은 툴팁이 화면의 주인공이 아니라는 점입니다. 원래의 버튼이나 아이콘을 가리지 않고, 필요한 순간에만 읽기 쉬운 크기로 나타나야 합니다.
3. 툴팁의 대표적인 유형
① 아이콘 툴팁
기능을 아이콘으로 표현한 버튼에 짧은 설명을 제공합니다. 예를 들어 연필 아이콘에는 '수정', 휴지통 아이콘에는 '삭제', 물음표 아이콘에는 '도움말'을 표시할 수 있습니다.
② 입력 항목 툴팁
입력 필드 옆의 도움말 아이콘이나 제목에 연결해 입력 기준을 설명합니다. 예를 들어 '체중' 항목에는 '최근 측정한 체중을 kg 단위로 입력합니다'라는 안내를 제공할 수 있습니다. 단, 입력에 반드시 필요한 조건은 툴팁에만 숨기지 말고 화면에 상시 표시해야 합니다.
③ 상태 툴팁
상태 아이콘이나 배지의 의미를 설명합니다. 예를 들어 동기화 아이콘에는 'EMR 연동 대기 중', 경고 아이콘에는 '확인할 항목이 있습니다'라고 표시할 수 있습니다.
④ 단축키 툴팁
버튼의 기능과 함께 키보드 단축키를 알려줍니다. 예를 들어 저장 버튼에 '임시저장 · Ctrl+S'를 표시할 수 있습니다. 단축키는 실제 구현된 기능과 일치해야 합니다.
4. 툴팁과 비슷한 UI는 어떻게 다를까?
툴팁(Tooltip): 특정 요소의 기능이나 의미를 짧게 설명합니다. 아이콘, 버튼, 상태 표시 등에 적합합니다.
팝오버(Popover): 클릭 등의 동작으로 열리며 설명뿐 아니라 링크, 버튼, 선택 항목 등 상호작용 요소를 포함할 수 있습니다.
인라인 도움말(Inline Help): 입력 항목이나 콘텐츠 가까이에 항상 표시되는 설명입니다. 필수 입력 기준이나 작성 규칙에 적합합니다.
모달·다이얼로그(Modal / Dialog): 사용자의 주의를 집중시켜 확인이나 입력을 받는 창입니다. 중요한 의사결정이나 작업 확인에 적합합니다.
예를 들어 '저장' 아이콘의 의미를 알려주는 데는 툴팁이 적합하지만, 간호기록 작성 절차 전체를 안내하려면 별도의 도움말 화면이나 단계별 가이드가 더 적절합니다.
5. AI에게 바로 요청하는 실전 프롬프트
아래 프롬프트를 복사해 바이브코딩 도구에 입력해 보세요.
병원 EMR의 간호기록 작성 화면에 Tooltip(툴팁) UI를 구현해줘.
화면에는 가상의 환자 기본정보, 간호기록 입력 영역, 임시저장 버튼, 수정 버튼, 도움말 아이콘을 배치해줘. 실제 환자 개인정보나 실제 임상 기록은 사용하지 말아줘.
도움말 아이콘에 마우스를 올리거나 키보드 포커스를 이동하면 '간호기록 작성 기준을 확인합니다'라는 툴팁이 나타나게 해줘. 임시저장 버튼에는 '간호기록을 임시저장합니다', 수정 버튼에는 '작성한 기록을 수정합니다'라는 설명을 연결해줘.
툴팁은 해당 요소 가까이에 표시하고, 화면 가장자리와 겹칠 경우 위·아래·좌·우 중 공간이 충분한 방향으로 자동 배치해줘. 화면 밖으로 잘리거나 주요 입력 내용을 가리지 않도록 해줘.
마우스 오버뿐 아니라 키보드 Tab 키로 포커스가 이동했을 때도 툴팁을 확인할 수 있게 해줘. 터치 기기에서는 툴팁을 확인할 수 있는 대체 동작을 제공하되, 실제 버튼의 실행 동작과 혼동되지 않도록 설계해줘.
툴팁 문구는 한두 문장 이내로 짧고 명확하게 작성해줘. 긴 설명이나 필수 입력 기준은 툴팁에 숨기지 말고 화면에 상시 표시하거나 별도 도움말로 제공해줘.
접근성을 위해 툴팁을 표시하는 요소와 설명을 연결하고, 키보드 사용자가 설명을 확인할 수 있도록 해줘. 색상 대비와 글자 크기를 충분히 확보하고, 움직임을 줄이도록 설정한 사용자의 환경도 존중해줘.
툴팁이 열리고 닫히는 동작을 자연스럽게 구현하고, 마우스가 설명 영역으로 이동할 때 갑자기 사라지지 않도록 해줘. 모바일과 태블릿에서도 사용하기 편하도록 반응형으로 구현해줘.
전체 디자인은 병원 업무 시스템에 어울리는 단정하고 가독성 높은 스타일로 만들어줘.
6. 결과를 더 좋게 만드는 개선 팁
설명은 짧고 구체적으로: '도움말'보다 '간호기록 작성 기준 보기'처럼 기능과 목적을 명확히 표현합니다.
필요한 요소에만 적용하기: 모든 버튼에 툴팁을 붙이면 오히려 화면이 복잡해집니다. 아이콘만으로 의미를 알기 어려운 요소에 우선 적용합니다.
마우스와 키보드를 모두 지원하기: 마우스 오버만 지원하면 키보드 사용자는 설명을 확인하기 어렵습니다. 포커스 상태에서도 툴팁을 제공해야 합니다.
화면 밖으로 잘리지 않게 하기: 화면 가장자리에서는 표시 방향을 자동으로 조정합니다.
터치 환경을 고려하기: 모바일에는 마우스 오버가 없습니다. 탭으로 설명을 확인하는 별도 동작이나 상시 표시되는 보조 설명을 고려합니다.
중요한 정보는 숨기지 않기: 필수 입력 조건, 환자안전 관련 주의사항, 권한 제한 등 중요한 내용은 툴팁에만 의존하지 않습니다.
접근성 연결을 확인하기: 설명이 보조기술에도 적절히 전달되도록 대상 요소와 설명의 관계를 명확히 설정합니다.
특히 병원 시스템에서는 툴팁에 환자 민감정보를 노출하지 않도록 주의해야 합니다. 툴팁은 기능 설명을 위한 것이므로 환자명, 진단명, 검사 결과 등 불필요한 개인정보를 넣지 않는 것이 바람직합니다.
7. 오늘의 핵심 정리
툴팁은 버튼과 아이콘의 의미를 필요한 순간에 짧게 알려주는 보조 UI입니다. 화면은 간결하게 유지하면서 사용자의 이해를 돕는 것이 핵심 가치입니다.
바이브코딩을 할 때는 '툴팁을 만들어줘'라고만 요청하지 말고, 어떤 요소에 어떤 설명을 연결할지, 마우스와 키보드에서 어떻게 동작할지, 모바일에서는 어떻게 대체할지까지 구체적으로 지정해야 합니다.
다음 편 예고
다음 16편에서는 Tabs(탭)를 살펴봅니다. 하나의 화면 안에서 관련 정보를 여러 영역으로 나누고, 사용자가 필요한 내용을 빠르게 전환해 볼 수 있도록 하는 방법을 병원 EMR의 환자 상세정보와 간호기록 사례로 알아보겠습니다.