짧은 추가 정보엔 툴팁

KRDS BP-027 — [툴팁] 컨트롤 요소에 대한 레이블과 같이 간단한 추가 정보를 제공하는 데 사용하고 있다.

0. 들어가며 — 어떤 도움에 툴팁을 쓸까

이번 593편은 툴팁을 컨트롤 요소의 레이블 같은 간단한 추가 정보 제공에 사용하라는 규칙입니다.

도움 방식이 여럿(인라인·툴팁·맥락적 도움말·도움 패널)인데, 각각 적합한 용도가 있죠. 툴팁은 — 아이콘 버튼 이름 같은 짧은 추가 정보에 적합합니다. BP-027은 툴팁의 용도를 규정합니다. 툴팁 컴포넌트(CP-376·378)의 도움 패턴 정리 이죠. 이번 편을 풀어냅니다.

1. 원문 — 간단한 추가 정보에 툴팁

BP-027 (기본 패턴 > 도움 [툴팁]) “[툴팁] 컨트롤 요소에 대한 레이블과 같이 간단한 추가 정보를 제공하는 데 사용하고 있다.”

툴팁을, 아이콘 버튼의 이름 같은 컨트롤 요소의 간단한 추가 정보 제공에 사용하라는 뜻입니다.

정리: 툴팁은 컨트롤의 간단한 추가 정보(이름 등)에 쓰라. 이게 BP-027입니다.

2. 왜 툴팁을 간단한 추가 정보에 쓰나

도움 방식은 정보의 성격·양에 따라 적합한 게 다릅니다. BP-026(인라인=필수 중요 정보)에 이어, BP-027~030은 숨긴 도움(요청 시 보이는) 의 용도를 나눕니다. 그 첫째가 툴팁이죠. 툴팁은 짧은 추가 정보에 적합합니다.

툴팁의 특성(CP-376·378 복습). 툴팁은 — 요소에 호버/포커스하면 잠깐 뜨는 작은 말풍선입니다. 짧은 텍스트(150자 이내, CP-378)를 — 그 자리에 보여주죠. 가벼운 보조 정보용입니다.

툴팁에 적합한 정보 — 컨트롤 레이블 같은 간단한 것:

아이콘 버튼 이름 — 글자 없이 아이콘만 있는 버튼(🔍 검색, ⚙️ 설정)의 — 이름을 보여줄 때 툴팁이 가장 적합합니다(CP-376). 마우스를 올리면 ’검색’이라고 떠, 그 아이콘이 무엇인지 알죠.

짧은 보충 설명 — 컨트롤·용어에 대한 — 한두 문장의 짧은 추가 설명. ‘이 값은 ○○를 뜻합니다’ 정도요.

이런 — 간단하고 짧은 정보가 툴팁의 영역이죠.

툴팁에 부적합한 정보:

필수 중요 정보 — 작업 필수 정보는 — 툴팁(눌러야/호버해야 보임)이 아니라 인라인 텍스트로(BP-026). 툴팁은 안 볼 수 있으니 필수엔 부적합하죠.

긴/복잡한 도움 — 150자 넘는 풍부한 도움은 — 툴팁이 아니라 맥락적 도움말(BP-028)이나 도움 패널(BP-029)로. 툴팁에 긴 내용을 담으면 비대해지고 안 읽히죠(CP-378).

도움 방식 선택 체계. BP-026~030이 함께 — 도움 방식 선택 체계를 이룹니다:

인라인 텍스트(BP-026) — 작업 필수 중요 정보. 항상 보임.

툴팁(BP-027) — 컨트롤 이름·짧은 추가 정보. 호버/포커스 시.

맥락적 도움말(BP-028) — 컴포넌트 상태·상세 정보. 클릭 시 풍부한 팝오버.

도움 패널(BP-029) — 많거나 복잡한 도움. 큰 영역.

코치마크/따라하기(BP-030) — 단계별 안내. 복잡한 과업 온보딩.

정보의 성격·양·중요도에 맞는 방식을 고르죠. BP-027은 — 그중 ’간단한 추가 정보=툴팁’을 정합니다.

접근성 병행. 툴팁은 — 시각적 호버 외에 접근가능한 이름(aria-label, CP-382)을 병행해야 스크린 리더·터치 사용 자도 얻죠(CP-376·381). 툴팁을 쓰되 접근성을 챙깁니다.

이 규칙은 도움 패턴의 ’툴팁 용도 정의’를 담당합니다 — 툴팁을 컨트롤 이름·짧은 추가 정보에 써(027), 가벼운 보조 정보를 그 자리에서 주죠. 도움 방식 선택 체계의 한 부분입니다.

정리하면 — 툴팁은 짧은 추가 정보에 적합하므로, 아이콘 버튼 이름 같은 컨트롤의 간단한 추가 정보에 사용하고 필수 정보나 긴 도움은 다른 방식(인라인·맥락적 도움말·도움 패널)으로 제공해야 합니다.

3. 점검 / 개선

무엇을 점검하나

간단한 추가 정보 — 툴팁이 컨트롤 이름·짧은 추가 정보에 쓰이는가.

필수 정보 배제 — 작업 필수 정보를 툴팁에만 두지 않는가(인라인으로, BP-026).

긴 도움 배제 — 긴/복잡한 도움을 툴팁에 담지 않는가(맥락적 도움말·도움 패널로).

개선 방향

아이콘 버튼 이름·짧은 보충은 툴팁. 필수는 인라인(BP-026), 긴 도움은 맥락적 도움말·도움 패널.

툴팁 접근성(aria-label, 터치) 병행(CP-376·381·382).

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

역할	책임
기획/UX	도움 방식 선택(툴팁 용도)
퍼블리셔/개발	툴팁 구현·접근성

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

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 툴팁이 컨트롤 이름·짧은 추가 정보에 쓰이나요?

□ 작업 필수 정보를 툴팁에만 두지 않나요(인라인으로)?

□ 긴/복잡한 도움을 툴팁에 담지 않나요(맥락적 도움말·도움 패널로)?

❓ FAQ

Q1. 툴팁에 무엇을 담나요? 아이콘 버튼 이름 같은 컨트롤의 간단한 추가 정보입니다. 짧은(150자 이내) 보조 정보죠. Q2. 필수 정보를 툴팁에 두면 안 되나요? 툴팁은 호버/눌러야 보여 안 본 사용자가 막힙니다. 필수는 인라인 텍스트로 (BP-026)요. Q3. 긴 도움은 어디에? 맥락적 도움말(클릭 팝오버, BP-028)이나 도움 패널(큰 영역, BP-029)입니다. 툴팁에 긴 내용은 부적합하죠.

6. 마무리

BP-027의 메시지:

짧은 추가 정보엔 툴팁 — 컨트롤 이름 같은 간단한 추가 정보에 툴팁을 쓰라.

툴팁은 짧은 추가 정보에 적합합니다. 아이콘 버튼 이름 같은 간단한 정보에 쓰고 필수 정보·긴 도움은 다른 방식으로 주는 게 핵심이죠. 다음 편은 맥락적 도움말 용도입니다.

다음 편 예고 ▶ 「594. (BP-028) [맥락적 도움말] 컴포넌트의 상태나 관련된 상세 정보를 제공하는 데 사용하고 있다.」

ViewCheck는 툴팁이 간단한 추가 정보에 적절히 사용되는지를 진단합니다.

📚 참고 출처

KRDS 기본 패턴 — 도움 가이드 — https://www.krds.go.kr/html/site/pattern/pattern_02.html

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

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