부가 정보를 짧게

KRDS CP-378 — 툴팁은 부가적인 정보를 전달하는데 사용하며, 150자 이내의 설명을 사용하고 있다.

0. 들어가며 — 툴팁에 무엇을, 얼마나

이번 498편은 툴팁을 부가적인 정보 전달에 사용하며, 150자 이내의 설명을 사용하라는 규칙입니다.

툴팁은 — 부가(있으면 좋은) 정보를 짧게 전하는 것입니다. 필수 정보를 담거나, 너무 길게 쓰면 안 되죠. CP-378은 툴팁의 용도(부가 정보)와 글자 수(150자 이내)를 규정합니다. 이번 편을 풀어냅니다.

1. 원문 — 부가 정보 + 150자 이내

CP-378 (컴포넌트 > 툴팁) “툴팁은 부가적인 정보를 전달하는데 사용하며, 150자 이내의 설명을 사용하고 있다.”

툴팁을 부가적인(보조) 정보 전달에 쓰고, 그 설명을 150자 이내로 간결하게 제공하라는 뜻입니다.

정리: 툴팁은 부가 정보를 150자 이내로 전하라. 이게 CP-378입니다.

2. 왜 부가 정보·150자 이내인가

툴팁은 — 호버/포커스 시 잠깐 뜨는 가벼운 말풍선입니다. 그 특성상 — 담을 수 있는 정보의 성격과 양에 제약이 있죠. CP-378은 둘을 규정합니다: ①부가 정보 용도, ②150자 이내.

① 부가적인 정보 전달. 툴팁은 — 부가(supplementary) 정보를 전합니다. 부가 정보란 — 있으면 도움이 되지만, 없어도 작업할 수 있는 보조 정보죠. 예: 아이콘 버튼 이름(CP-376), 용어 풀이, 입력 형식 힌트 등.

필수 정보는 안 됨 작업에 반드시 필요한 필수 정보를 툴팁에만 두면 안 됩니다. 툴팁은 호버해야 보이고, 잠깐 떴다 사라지며, 터치 환경(CP-381)·스크린 리더에서 접근이 제한적이라, 모든 사용자가 본다고 보장 못 하죠. 필수 정보는 본문에 직접 제공해야 합니다(도움 패널 CP-340의 ‘필수는 본문에’ 정신). 툴팁은 보조 정보만요.

부가 정보 예 — ‘이 값은 ○○ 형식으로 입력하면 좋습니다’(힌트), ‘이 용어는 ○○를 뜻합니다’(풀이) 같은 — 알면 도움되지만 없어도 되는 정보죠.

② 150자 이내의 설명. 툴팁 텍스트는 — 150자 이내로 짧아야 합니다.

잠깐 뜨는 특성 툴팁은 호버 중에만 잠깐 뜹니다. 사용자가 그 짧은 시간에 읽어야 하니, 길면 다 못 읽죠. 150자 이내면 슬쩍 보고 파악합니다.

작은 말풍선 — 툴팁은 작은 말풍선이라 — 긴 텍스트를 담으면 비대해지고 화면을 가립니다(CP-377). 짧아야 작고 깔끔하죠.

150자 한계 KRDS는 툴팁 설명을 150자 이내로 정합니다. 한두 문장 정도의 간결한 보조 설명이죠. 이를 넘으면 툴팁이 아니라 다른 컴포넌트(맥락적 도움말의 팝오버, 도움 패널)가 적합합니다.

150자 넘는 정보면 — 다른 컴포넌트. 설명할 게 150자를 넘거나, 풍부한 도움(링크·여러 단락)이 필요하면 — 툴팁이 아니라:

맥락적 도움말(Contextual help) — 클릭으로 여는 풍부한 팝오버(CP-355~365). 더 많은 내용·링크를 담죠.

도움 패널(Help panel) — 체계적인 큰 도움 영역(CP-335~348).

즉 — 정보량·성격에 맞는 컴포넌트를 고릅니다. 짧은 부가 정보는 툴팁, 풍부한 도움은 맥락적 도움말·도움 패널이죠. 이 구분이 — 툴팁과 맥락적 도움말의 혼용 금지(CP-380)와도 통합니다.

이 규칙은 툴팁의 ’용도·분량 정의’를 담당합니다 — 툴팁에 부가 정보를 150자 이내로 담아(378), 잠깐 뜨는 가벼운 보조 설명으로 유지하죠. 필수는 본문에, 풍부한 도움은 다른 컴포넌트에 맡깁니다.

정리하면 — 툴팁은 잠깐 뜨는 작은 말풍선이라 필수 정보를 담거나 길면 안 되므로, 부가적인 보조 정보를 150자 이내로 간결하게 전하고 그 이상은 본문이나 다른 도움 컴포넌트로 제공해야 합니다.

3. 점검 / 개선

무엇을 점검하나

부가 정보 — 툴팁이 보조 정보를 담고, 필수 정보를 툴팁에만 두지 않는가.

150자 이내 — 툴팁 설명이 150자 이내인가.

넘침 처리 — 150자 넘는 도움은 맥락적 도움말·도움 패널로 했는가.

개선 방향

툴팁에 부가 정보만 150자 이내로. 필수 정보는 본문에(CP-340 정신).

풍부한 도움은 맥락적 도움말/도움 패널로 분리.

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

역할	책임
콘텐츠/UX	부가 정보 선별·150자 이내 작성
퍼블리셔/개발	툴팁 구현

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

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 툴팁이 보조 정보를 담고, 필수 정보를 툴팁에만 두지 않나요?

□ 툴팁 설명이 150자 이내인가요?

□ 150자 넘는 도움은 맥락적 도움말·도움 패널로 했나요?

❓ FAQ

Q1. 필수 정보를 툴팁에 두면 안 되나요? 안 됩니다. 툴팁은 호버해야 보이고 잠깐 떴다 사라져 모든 사용자가 본다고 보장 못 합니다. 필수는 본문에 두죠. Q2. 왜 150자인가요? 툴팁은 잠깐 뜨는 작은 말풍선입니다. 길면 다 못 읽고 비대해지죠. 한두 문장(150자)이 한계 입니다. Q3. 150자 넘으면요? 툴팁이 아니라 맥락적 도움말(클릭 팝오버)이나 도움 패널이 적합합니다. 정보량에 맞는 컴포 넌트를 고르죠.

6. 마무리

CP-378의 메시지:

부가 정보를 짧게 — 툴팁은 보조 정보를 150자 이내로 전하라.

툴팁은 잠깐 뜨는 작은 말풍선이라 필수 정보를 담거나 길면 안 됩니다. 부가 정보를 150자 이내로 간결히 전하고 그 이상은 본문·다른 컴포넌트로 하는 게 핵심이죠. 다음 편은 툴팁과 title 속성 중첩 금지입니다.

다음 편 예고 ▶ 「499. (CP-379) 툴팁 컴포넌트와 title 속성을 중첩하여 사용하지 않고 있다.」

ViewCheck는 툴팁이 부가 정보를 150자 이내로 전하는지를 진단합니다.

📚 참고 출처

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

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

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