도움이 필요한 그 자리에

KRDS CP-356 — 아이콘 버튼은 도움 정보를 제공하고자 하는 요소 주변에 배치하고 있다.

0. 들어가며 — 어느 항목의 도움말인지

이번 476편은 맥락적 도움말 아이콘 버튼을 도움 정보를 제공하고자 하는 요소 주변에 배치하라는 규칙입니다.

맥락적 도움말은 — ’맥락(context)’에 맞는 도움이라, 그 도움이 설명하는 요소 바로 옆에 아이콘이 있어야 의미가 있죠. 엉뚱한 곳에 있으면 — 어느 요소의 도움인지 모르고, ’맥락적’이라는 본질이 깨집니다. CP-356은 아이콘의 근접 배치를 규정합니다. 도움 패널 CP-337과 평행한 규칙이죠. 이번 편을 풀어냅니다.

1. 원문 — 도움 대상 요소 주변 배치

CP-356 (컴포넌트 > 맥락적 도움말) “아이콘 버튼은 도움 정보를 제공하고자 하는 요소 주변에 배치하고 있다.”

맥락적 도움말 아이콘 버튼을, 그 도움이 설명하는 대상 요소(입력 항목 등) 가까이에 배치하라는 뜻입니다.

정리: 도움 아이콘 버튼을 도움 대상 요소 옆에 배치하라. 이게 CP-356입니다.

2. 왜 대상 요소 주변 배치인가

맥락적 도움말의 핵심은 — 이름 그대로 ’맥락(context)’에 맞는 도움입니다. 특정 요소(입력 항목·용어·버튼)에 대한 도움을, 그 요소 바로 옆에서 그 자리에 맞게 제공하는 것이죠. 그래서 — 아이콘이 대상 요소 주변에 있어야 ’맥락적’이라는 본질이 성립합니다.

아이콘이 대상에서 멀 때:

맥락 상실 — 맥락적 도움말 아이콘이 — 설명 대상에서 멀리 떨어져 있으면, ‘맥락’이 사라집니다. 사용자는 ’이 아이콘이 어느 요소의 도움인지’ 모르죠. ’맥락적’이라는 이름이 무색해집니다.

연결 모호 — 여러 항목이 있는 폼에서 — 아이콘이 엉뚱한 곳에 있으면, 어느 항목 도움인지 헷갈립니다.

도움 요청 어려움 — 특정 항목에서 막혔을 때 — 그 항목 옆에 아이콘이 없으면, 도움을 어떻게 얻을지 모르죠.

이는 — 근접성의 원리(Gestalt)입니다. 도움 아이콘과 그 대상은 가까이 둬야 ’한 묶음’으로 인지되죠(도움 패널 CP-337, 단계 표시기 CP-306, 토글 CP-314와 같은 정신).

그래서 CP-356은 — 맥락적 도움말 아이콘을 도움 대상 요소 주변에 두라고 합니다:

요소 옆 배치 — 도움이 필요한 입력 항목(레이블·필드)·용어·버튼의 — 바로 옆(레이블 끝, 필드 옆 등)에 ⓘ/? 아이콘(CP-355)을 둡니다. 사용자가 그 요소를 보면서 옆 아이콘으로 바로 도움을 청하죠.

팝오버 위치도 근처 — 맥락적 도움말은 — 아이콘을 누르면 그 근처에 팝오버(말풍선)로 뜹니다(CP-357). 즉 아이콘도 대상 옆, 뜨는 도움말도 그 자리라, 시선 이동 없이 맥락 안에서 도움을 받죠. 도움 패널(옆 큰 영역)과 다른 ‘그 자리’ 특성입니다.

일관 위치 — 여러 아이콘을 일관된 위치에 둡니다(토글 레이아웃 일관 CP-315 정신).

도움이 필요한 요소에만. 모든 요소에 다는 게 아니라 — 실제로 부가 설명·도움이 필요한(복잡·생소한) 요소에 둡 니다. 자명한 것엔 불필요하죠.

고유 이름과 연계(CP-362). 아이콘 위치(356)로 시각적 연결을 하고, 각 아이콘에 고유 이름(CP-362)을 줘 스크린 리더에도 어느 요소 도움인지 전합니다. 위치(356)+이름(362)으로 연결하죠.

이 규칙은 맥락적 도움말의 ’맥락 연결’을 담당합니다 — 아이콘을 대상 요소 옆에 둬(356), ’맥락적’이라는 본질을 살리고 어느 요소 도움인지 분명히 하죠. 도움 패널 CP-337과 같되, 맥락적 도움말은 그 자리 팝오버라 근접성이 더 본질적 입니다.

정리하면 — 맥락적 도움말은 그 요소에 맞는 도움이 본질이므로, 아이콘 버튼을 도움 대상 요소 주변에 배치해 맥락 연결을 분명히 하고 그 자리에서 도움을 받게 해야 합니다.

3. 점검 / 개선

무엇을 점검하나

요소 옆 배치 — 아이콘이 도움 대상 요소 주변에 있는가.

일관 위치 — 여러 아이콘이 일관된 위치인가.

필요 요소 선별 — 도움이 필요한 요소에 아이콘을 두었는가(불필요 남발 아님).

개선 방향

아이콘을 대상 요소 레이블·필드 옆에 배치, 위치 일관화.

도움 필요한 요소 선별. 팝오버도 그 근처에 표시(CP-357).

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

역할	책임
기획/UX	도움 필요 요소 선별·아이콘 위치
퍼블리셔/개발	아이콘 버튼 배치 구현

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

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 아이콘이 도움 대상 요소 주변에 있나요?

□ 여러 아이콘이 일관된 위치인가요?

□ 도움이 필요한 요소에 아이콘을 두었나요(불필요 남발 아님)?

❓ FAQ

Q1. 도움 패널 CP-337과 같나요? 같은 근접 배치 정신입니다. 맥락적 도움말은 그 자리에 팝오버로 떠서 근접성이 더 본질적이죠. Q2. 아이콘을 한 곳에 모으면 안 되나요? 그러면 ’맥락’이 사라지고 어느 요소 도움인지 헷갈립니다. 각 요소 옆에 둬야 하죠. Q3. 모든 요소에 다나요? 아닙니다. 복잡·생소해 도움이 필요한 요소에만 둡니다. 자명한 것엔 불필요하죠.

6. 마무리

CP-356의 메시지:

도움이 필요한 그 자리에 — 아이콘 버튼을 도움 대상 요소 주변에 배치하라.

맥락적 도움말은 그 요소에 맞는 도움이 본질입니다. 아이콘을 대상 요소 옆에 둬 맥락 연결을 분명히 하고 그 자리에서 도움을 받게 하는 게 핵심이죠. 다음 편은 팝오버 영역 표시입니다.

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

ViewCheck는 맥락적 도움말 아이콘이 대상 요소 주변에 배치됐는지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 맥락적 도움말(Contextual help) 가이드 — https://www.krds.go.kr/html/site/component/component_35.html

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

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