두 개의 말풍선이 겹치지 않게

KRDS CP-379 — 툴팁 컴포넌트와 title 속성을 중첩하여 사용하지 않고 있다.

0. 들어가며 — 말풍선이 두 개 뜨면

이번 499편은 툴팁 컴포넌트와 HTML title 속성을 중첩하여 사용하지 않게 하라는 규칙입니다.

커스텀 툴팁 컴포넌트를 쓰면서 — 같은 요소에 HTML title 속성도 함께 두면, 브라우저 기본 툴팁과 커스텀 툴팁이 둘 다 떠 겹치거나 중복되죠. CP-379는 둘의 중첩을 금지합니다. 이번 편을 풀어냅니다.

1. 원문 — 툴팁·title 중첩 금지

CP-379 (컴포넌트 > 툴팁) “툴팁 컴포넌트와 title 속성을 중첩하여 사용하지 않고 있다.”

커스텀 툴팁 컴포넌트와 HTML title 속성을 같은 요소에 함께(중첩) 사용하지 말라는 뜻입니다.

정리: 툴팁 컴포넌트와 title 속성을 함께 쓰지 마라. 이게 CP-379입니다.

2. 왜 중첩을 금지하나

웹에서 — 툴팁을 구현하는 방법은 두 가지가 있습니다:

HTML title 속성 — 요소에 title="..."을 주면 — 브라우저가 기본 툴팁(작은 회색 말풍선)을 호버 시 자동 으로 띄웁니다. 가장 간단하지만, 스타일을 못 바꾸고, 모바일·키보드·스크린 리더에서 동작이 일관되지 않죠.

커스텀 툴팁 컴포넌트 — JavaScript/CSS로 직접 만든 툴팁. 스타일·동작을 제어할 수 있고, 접근성을 챙길 수 있어(aria 등) — KRDS 툴팁 규칙들이 다루는 게 이쪽입니다.

문제는 — 이 둘을 같은 요소에 함께(중첩) 쓸 때 생깁니다. 커스텀 툴팁을 만들면서, 같은 요소에 title 속성도 남겨두면:

두 개의 툴팁 사용자가 그 요소에 마우스를 올리면 커스텀 툴팁과 브라우저 기본 title 툴팁이 둘 다 뜹니다. 말풍선이 두 개 겹쳐 화면이 지저분하고 혼란스럽죠. 같은 내용이면 중복이고, 다른 내용이면 어느 게 맞는지 헷갈립니다.

스크린 리더 중복 읽기 title 속성은 스크린 리더가 접근가능한 이름/설명으로 읽기도 합니다. 커스텀 툴팁의 aria 연결(CP-383)과 title이 겹치면 스크린 리더가 같은 내용을 두 번 읽거나, 충돌하죠.

일관성 깨짐 — 브라우저 기본 title 툴팁은 — 스타일·타이밍이 커스텀 툴팁과 달라, 둘이 섞이면 일관성이 없습니다.

그래서 CP-379는 — 툴팁 컴포넌트와 title을 중첩하지 말라고 합니다:

하나만 사용 커스텀 툴팁 컴포넌트를 쓰면 그 요소의 title 속성을 제거합니다. 커스텀 툴팁이 모든 걸 담당하죠. 반대로 간단히 title만 쓸 거면 커스텀 툴팁을 안 만들고요. 한 요소에 둘 다 두지 않습니다.

접근성은 aria로 — 커스텀 툴팁의 접근가능한 이름·설명은 — title이 아니라 aria-label/aria-describedby (CP-382·383)로 줍니다. title에 의존하지 않죠.

왜 title을 빼야 하나 title의 한계. title 속성 자체가 접근성 면에서 권장되지 않습니다(호버에서만 보임, 키보드·터치 접근 어려움, 스크린 리더 지원 불일관). 그래서 제대로 된 툴팁은 커스텀 컴포넌트 + aria로 만들고, title은 빼는 게 맞죠. 중첩 금지는 결국 ’title 대신 제대로 된 툴팁을 쓰라’는 방향입니다.

실무 주의. 개발 중 디버깅이나 습관으로 title을 남겨두기 쉽습니다. 커스텀 툴팁을 붙인 요소에 title이 남아 있지 않은지 점검해야 하죠. 특히 컴포넌트 라이브러리나 아이콘에 기본 title이 박혀 있을 수 있으니 확인 합니다.

이 규칙은 툴팁의 ’중복 방지·일관성’을 담당합니다 — 툴팁 컴포넌트와 title을 안 섞어(379), 말풍선 두 개·스크린 리더 중복을 없애고 한 가지 방식으로 일관되게 하죠.

정리하면 — 커스텀 툴팁과 title 속성을 같은 요소에 두면 말풍선이 두 개 뜨고 스크린 리더가 중복 읽으므로, 커스텀 툴팁을 쓸 때는 title을 제거해 한 가지 방식으로만 제공해야 합니다.

3. 점검 / 개선

무엇을 점검하나

중첩 없음 — 커스텀 툴팁 요소에 title 속성이 남아 있지 않은가.

말풍선 1개 — 호버 시 툴팁이 하나만 뜨는가(브라우저 기본 + 커스텀 중복 아님).

접근성 aria — 툴팁 접근성을 title이 아닌 aria로 제공하는가(CP-382·383).

개선 방향

커스텀 툴팁 요소의 title 속성 제거. 라이브러리·아이콘 기본 title도 확인.

접근가능한 이름·설명을 aria-label/aria-describedby로(CP-382·383).

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

역할	책임
퍼블리셔/개발	title 제거·툴팁 단일화 구현
QA/접근성	말풍선 중복·스크린 리더 중복 검증

기관 유형	CP-379 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 조건부 (커스텀 툴팁 사용 시)

커스텀 툴팁을 쓰는 사이트에 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 커스텀 툴팁 요소에 title 속성이 남아 있지 않나요?

□ 호버 시 툴팁이 하나만 뜨나요(중복 아님)?

□ 툴팁 접근성을 title이 아닌 aria로 제공하나요?

❓ FAQ

Q1. title과 커스텀 툴팁을 같이 두면 왜 안 되나요? 호버 시 말풍선이 두 개 뜨고, 스크린 리더가 중복 읽습니다. 커스텀 툴팁을 쓰면 title을 빼죠. Q2. title만 쓰면 안 되나요? title은 접근성 한계(호버만·키보드/터치 어려움·스크린 리더 불일관)가 있습니다. 제대로 된 툴팁은 커스텀 + aria로 만들죠. Q3. 어디에 title이 남아 있나요? 개발 중 습관이나 라이브러리·아이콘 기본값으로 남기 쉽습니다. 커스텀 툴팁 요소를 점검하죠.

6. 마무리

CP-379의 메시지:

두 개의 말풍선이 겹치지 않게 — 툴팁 컴포넌트와 title 속성을 함께 쓰지 마라.

커스텀 툴팁과 title을 같은 요소에 두면 말풍선이 두 개 뜨고 스크린 리더가 중복 읽습니다. 커스텀 툴팁을 쓸 때는 title을 제거해 한 방식으로 일관되게 하는 게 핵심이죠. 다음 편은 툴팁과 다른 도움 컴포넌트 혼용 금지입니다.

다음 편 예고 ▶ 「500. (CP-380) 한 화면에 아이콘 툴팁과 맥락적 도움말 또는 도움말 패널을 혼용하여 사용하지 않는다.」

ViewCheck는 툴팁 컴포넌트와 title 속성의 중첩을 진단합니다.

📚 참고 출처

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

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

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