상태·상세는 맥락적 도움말로

KRDS BP-028 — [맥락적 도움말] 컴포넌트의 상태나 관련된 상세 정보를 제공하는 데 사용하고 있다.

0. 들어가며 — 툴팁보다 풍부한 도움

이번 594편은 맥락적 도움말을 컴포넌트의 상태나 관련 상세 정보 제공에 사용하라는 규칙입니다.

툴팁(짧은 추가 정보, BP-027)보다 — 더 풍부한 도움(상태 설명, 상세 정보)이 필요하면 맥락적 도움말이 적합하죠. BP-028은 맥락적 도움말의 용도를 규정합니다. 맥락적 도움말 컴포넌트(CP-355~365)의 도움 패턴 정리이죠. 이번 편을 풀어냅니다.

1. 원문 — 상태·상세 정보에 맥락적 도움말

BP-028 (기본 패턴 > 도움 [맥락적 도움말]) “[맥락적 도움말] 컴포넌트의 상태나 관련된 상세 정보를 제공하는 데 사용하고 있다.”

맥락적 도움말을, 컴포넌트의 상태나 관련된 상세 정보 제공에 사용하라는 뜻입니다.

정리: 맥락적 도움말은 컴포넌트 상태·상세 정보에 쓰라. 이게 BP-028입니다.

2. 왜 맥락적 도움말을 상태·상세에 쓰나

도움 방식 선택 체계(BP-026~030)에서 맥락적 도움말은 툴팁과 도움 패널 사이의 위치죠. 툴팁(짧은 추가 정보) 보다 풍부하고, 도움 패널(큰 영역)보다는 가벼운 중간 규모의 도움입니다. BP-028은 이 맥락적 도움말을 컴포넌트 상태·상세 정보에 쓰라고 합니다.

맥락적 도움말의 특성(CP-355~365 복습). 맥락적 도움말은 — 요소 옆 ⓘ·? 아이콘을 클릭하면, 그 자리에 풍부한 팝오버로 도움말이 뜨는 컴포넌트입니다(CP-355). 툴팁(호버, 짧음)보다 — 클릭으로 열고, 더 많은 내용·링크를 담을 수 있죠.

맥락적 도움말에 적합한 정보 — 상태·상세:

컴포넌트의 상태 정보 — 어떤 컴포넌트·항목의 현재 상태를 설명할 때. 예: ‘이 신청은 현재 검토 중입니다. 처리 단계는…’, ‘이 항목은 ○○ 조건에서 활성화됩니다’ 같은 — 상태에 대한 맥락 설명이요.

관련 상세 정보 그 요소·항목에 대한 상세한 부가 정보. 툴팁의 한 줄로는 부족한, 몇 문장~단락의 설명· 예시·관련 안내죠. 예: 특정 입력 항목의 자세한 작성 방법, 예시, 유의사항.

이런 — 풍부하지만 부가적인(필수는 아닌) 정보가 맥락적 도움말의 영역이죠.

도움 방식별 차이 정리:

툴팁(BP-027) — 짧은 추가 정보(아이콘 이름, 한두 문장). 호버.

맥락적 도움말(BP-028) — 컴포넌트 상태·상세 정보(몇 문장~단락, 링크 포함 가능). 클릭 팝오버.

도움 패널(BP-029) — 많거나 복잡한 도움(여러 항목, 체계적). 큰 영역.

정보가 툴팁엔 너무 길고, 도움 패널엔 과한 중간 규모면 맥락적 도움말이 적합하죠. 요소별 상태·상세를 그 자리에서 클릭해 보게요.

필수 정보는 인라인(BP-026). 맥락적 도움말도 — 클릭해야 보이므로, 필수 정보는 거기 두지 않습니다(인라인 텍스트로, BP-026). 맥락적 도움말엔 — 부가적 상태·상세 정보(있으면 좋은)를 두죠.

가벼움 유지(CP-358·360). 맥락적 도움말은 — 중첩·모달 금지(CP-358), 도움 패널과 혼용 금지(CP-360)로 가볍게 유지합니다. 풍부하되 — 무겁지 않게요.

이 규칙은 도움 패턴의 ’맥락적 도움말 용도 정의’를 담당합니다 — 맥락적 도움말을 컴포넌트 상태·상세 정보에 써(028), 툴팁보다 풍부하되 도움 패널보다 가벼운 중간 규모 도움을 그 자리에서 주죠. 도움 방식 선택 체계의 한 부분입니다.

정리하면 — 맥락적 도움말은 툴팁보다 풍부하고 도움 패널보다 가벼운 중간 규모 도움이므로, 컴포넌트의 상태나 관련된 상세 정보 제공에 사용하고 필수 정보는 인라인으로, 많거나 복잡한 도움은 도움 패널로 제공해야 합니다.

3. 점검 / 개선

무엇을 점검하나

상태·상세 정보 — 맥락적 도움말이 컴포넌트 상태·상세 정보에 쓰이는가.

중간 규모 — 툴팁엔 길고 도움 패널엔 과한 정보를 맥락적 도움말로 주는가.

필수 배제 — 작업 필수 정보를 맥락적 도움말에만 두지 않는가(인라인으로).

개선 방향

컴포넌트 상태·요소별 상세 정보를 맥락적 도움말(클릭 팝오버)로.

짧은 건 툴팁(BP-027), 많거나 복잡하면 도움 패널(BP-029), 필수는 인라인(BP-026).

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

역할	책임
기획/UX	도움 방식 선택(맥락적 도움말 용도)
퍼블리셔/개발	맥락적 도움말 구현

기관 유형	BP-028 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 조건부 (맥락적 도움말 사용 시)

맥락적 도움말을 쓰는 사이트에 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 맥락적 도움말이 컴포넌트 상태·상세 정보에 쓰이나요?

□ 툴팁엔 길고 도움 패널엔 과한 정보를 맥락적 도움말로 주나요?

□ 작업 필수 정보를 맥락적 도움말에만 두지 않나요(인라인으로)?

❓ FAQ

Q1. 툴팁과 맥락적 도움말 차이가 뭔가요? 툴팁은 짧은 추가 정보(호버), 맥락적 도움말은 풍부한 상태·상세 정보 (클릭 팝오버)입니다. 정보 양·성격이 다르죠. Q2. 무엇을 맥락적 도움말로 주나요? 컴포넌트 상태(‘검토 중’)·요소별 상세 정보(작성 방법·예시)입니다. 중간 규모의 부가 정보죠. Q3. 필수 정보는요? 인라인 텍스트(BP-026)로요. 맥락적 도움말도 클릭해야 보여 필수엔 부적합합니다.

6. 마무리

BP-028의 메시지:

상태·상세는 맥락적 도움말로 — 컴포넌트 상태·상세 정보에 맥락적 도움말을 쓰라.

맥락적 도움말은 툴팁보다 풍부하고 도움 패널보다 가벼운 중간 규모 도움입니다. 컴포넌트 상태·상세 정보에 쓰고 필수는 인라인, 복잡한 건 도움 패널로 나누는 게 핵심이죠. 다음 편은 도움 패널 용도입니다.

다음 편 예고 ▶ 「595. (BP-029) [도움 패널] 도움말 콘텐츠의 양이 많거나 복잡한 과업에 사용하고 있다.」

ViewCheck는 맥락적 도움말이 상태·상세 정보에 적절히 사용되는지를 진단합니다.

📚 참고 출처

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

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

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