아이콘만 있는 버튼에 이름표를

KRDS CP-376 — 텍스트 레이블 없는 아이콘 단독 컨트롤 요소에 레이블을 표시하고자 하는 경우 사용하고 있다.

0. 들어가며 — 아이콘 버튼이 무슨 뜻인지

이번 496편부터 툴팁(Tooltip) 그룹입니다(9개). 첫 규칙은 텍스트 레이블 없는 아이콘 단독 컨트롤에 레이블을 표시할 때 툴팁을 사용하라는 규칙입니다.

툴팁은 — 요소에 마우스를 올리거나 포커스하면 잠깐 뜨는 작은 설명 말풍선입니다. 특히 — 아이콘만 있고 글자가 없는 버튼(돋보기🔍, 톱니바퀴⚙️ 등)에 ‘이게 무슨 버튼인지’ 이름을 보여줄 때 유용하죠. CP-376은 툴팁의 핵심 용도를 규정합니다. 이번 편을 풀어냅니다.

1. 원문 — 아이콘 단독 컨트롤 레이블 표시 시 사용

CP-376 (컴포넌트 > 툴팁) “텍스트 레이블 없는 아이콘 단독 컨트롤 요소에 레이블을 표시하고자 하는 경우 사용하고 있다.”

글자 레이블 없이 아이콘만 있는 컨트롤(버튼 등)에 그 이름·용도를 보여주려는 경우, 툴팁을 사용하라는 뜻입니다.

정리: 아이콘만 있는 버튼의 이름을 보여줄 때 툴팁을 쓰라. 이게 CP-376입니다.

2. 왜 아이콘 단독 컨트롤에 툴팁인가

툴팁(Tooltip)은 요소에 마우스를 올리거나(hover) 키보드 포커스하면 잠깐 뜨는 작은 설명 말풍선입니다. 짧은 보충 정보를 그 자리에 보여주죠. 이 툴팁의 가장 전형적이고 핵심적인 용도가 아이콘만 있는 컨트롤의 레이블 표시입니다.

아이콘 단독 컨트롤의 문제. 화면에는 — 공간 절약·디자인을 위해 글자 없이 아이콘만 있는 버튼이 많습니다:

돋보기(🔍) = 검색, 톱니바퀴(⚙️) = 설정, X = 닫기, 햄버거(☰) = 메뉴, 점 3개(⋯) = 더보기 등.

이런 아이콘 버튼은 공간을 아끼지만, ‘무슨 버튼인지’ 글자로 안 쓰여 있어 사용자가 헷갈릴 수 있죠. 익숙한 아이콘(🔍=검색)은 대부분 알지만 덜 명확한 아이콘은 무슨 기능인지 모릅니다. 그래서 그 아이콘 버튼의 이름· 용도를 보여줄 방법이 필요하죠.

여기서 툴팁이 — 답입니다:

이름표 역할 — 아이콘 버튼에 마우스를 올리거나(또는 포커스하면) — ‘검색’, ‘설정’ 같은 그 버튼의 이름이 툴팁 말풍선으로 잠깐 뜹니다. 사용자가 ’아, 이게 검색 버튼이구나’를 알죠. 평소엔 깔끔하게 아이콘만, 필요하면 툴팁으로 이름을 보여주는 거죠.

툴팁의 용도 구분. 툴팁은 — 두 용도가 있습니다:

레이블 툴팁(CP-376의 핵심) — 아이콘 단독 컨트롤의 이름을 보여줌(‘검색’). 컨트롤이 무엇인지 식별하는 용도죠.

설명 툴팁(CP-378) — 요소에 대한 부가 설명을 보여줌. 추가 정보 전달 용도. 이건 다음 편(CP-378)에서요.

CP-376은 — 특히 ’아이콘 단독 컨트롤에 레이블 표시’라는 용도에 툴팁을 쓰라고 합니다. 아이콘만 있는 버튼의 정체를 알리는 게 툴팁의 대표 용도죠.

접근성 시각 툴팁 + 접근가능한 이름. 중요한 점 시각적 툴팁(호버 시 뜨는 말풍선)만으로는 부족합니다. 마우스 없는 사용자·스크린 리더 사용자에겐 호버 툴팁이 안 보이거나 안 읽히죠. 그래서 아이콘 버튼에는 ①시각적 툴팁과 함께 ②접근가능한 이름(aria-label 등, CP-382)을 줘야 합니다. 그래야 스크린 리더가 ’검색, 버튼’이라고 읽죠. 즉 툴팁은 시각 사용자용 이름표이고, 접근가능한 이름(CP-382)이 보조기술용입니다. 둘 다 필요하죠.

텍스트 레이블이 있으면 불필요. 버튼에 — 이미 글자 레이블(’검색’이라는 텍스트)이 있으면, 툴팁으로 또 이름을 보여줄 필요가 없죠(중복). 툴팁 레이블은 — 글자 없는 아이콘 단독 컨트롤에 쓰는 것입니다.

이 규칙은 툴팁의 ’용도 정의’를 담당합니다 — 아이콘 단독 컨트롤의 이름을 툴팁으로 보여줘(376), 글자 없는 버튼의 정체를 알리죠. 이후 툴팁 규칙들(위치·길이·중첩·혼용·모바일·이름·연결·순서)이 이 위에 쌓입니다.

정리하면 — 글자 없이 아이콘만 있는 컨트롤은 무슨 버튼인지 헷갈리므로, 그 이름·용도를 툴팁으로 표시해 사용자가 식별하게 하고 접근가능한 이름(CP-382)도 함께 제공해야 합니다.

3. 점검 / 개선

무엇을 점검하나

아이콘 버튼 툴팁 — 글자 없는 아이콘 단독 컨트롤에 이름 툴팁이 있는가.

접근가능한 이름 병행 — 시각 툴팁과 함께 aria-label 등 접근가능한 이름이 있는가(CP-382).

중복 배제 — 이미 텍스트 레이블이 있는 버튼에 불필요한 툴팁은 없는가.

개선 방향

아이콘 단독 컨트롤에 이름 툴팁(호버/포커스). 접근가능한 이름(aria-label) 병행.

텍스트 레이블 있는 버튼엔 중복 툴팁 제거.

4. 누가 담당하나 / 우리 사이트에 해당될까?

역할	책임
퍼블리셔/개발	툴팁·접근가능한 이름 구현
콘텐츠/UX	아이콘 버튼 이름 텍스트

기관 유형	CP-376 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 조건부 (아이콘 단독 컨트롤 사용 시)

아이콘 버튼·툴팁을 쓰는 사이트에 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 글자 없는 아이콘 단독 컨트롤에 이름 툴팁이 있나요?

□ 시각 툴팁과 함께 aria-label 등 접근가능한 이름이 있나요(CP-382)?

□ 이미 텍스트 레이블이 있는 버튼에 불필요한 툴팁은 없나요?

❓ FAQ

Q1. 툴팁이 뭔가요? 요소에 마우스 올리거나 포커스하면 잠깐 뜨는 작은 설명 말풍선입니다. 아이콘 버튼 이름 표시에 주로 쓰죠. Q2. 시각 툴팁만 있으면 되나요? 아닙니다. 마우스 없는·스크린 리더 사용자에겐 호버 툴팁이 안 통합니다. aria-label 등 접근가능한 이름을 병행해야 하죠(CP-382). Q3. 글자 레이블 있는 버튼에도 툴팁을 다나요? 불필요합니다. 이미 이름이 보이니 중복이죠. 툴팁 레이블은 아이콘 단독 컨트롤용입니다.

6. 마무리

CP-376의 메시지:

아이콘만 있는 버튼에 이름표를 — 아이콘 단독 컨트롤의 레이블을 툴팁으로 표시하라.

글자 없는 아이콘 버튼은 정체가 헷갈립니다. 그 이름을 툴팁으로 보여주고 접근가능한 이름(CP-382)도 함께 줘 모든 사용자가 식별하게 하는 게 핵심이죠. 다음 편은 툴팁 팝오버 위치입니다.

다음 편 예고 ▶ 「497. (CP-377) 팝오버 영역이 화면을 벗어나지 않도록 표현하고 있으며, 본문의 중요 콘텐츠를 가리지 않고 표현하고 있다.」

ViewCheck는 아이콘 단독 컨트롤에 레이블 툴팁이 제공되는지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 툴팁(Tooltip) 가이드 — https://www.krds.go.kr/html/site/component/component_37.html

KRDS #ViewCheck #공공웹사이트 #전자정부 #디지털정부 #웹접근성 #디자인시스템 #UIUX #UI컴포넌트 #웹표준

KRDS,ViewCheck,공공웹사이트,전자정부,디지털정부,웹접근성,디자인시스템,UIUX,UI컴포넌트,웹표준