도움이 필요한 그 항목 옆에

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

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

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

도움 패널은 각 입력 항목에 대한 도움말을 제공하는데, 그걸 여는 ’도움 아이콘(?)’이 도움이 필요한 그 항목 옆에 있어야 ’이게 이 항목의 도움말’임을 알죠. 엉뚱한 곳에 있으면 어느 항목 도움인지 헷갈립니다. CP-337은 아이콘 버튼의 근접 배치를 규정합니다. 단계 표시기 CP-306, 토글 CP-314의 근접 정신이죠. 이번 편을 풀어냅니다.

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

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

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

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

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

도움 패널의 작동 방식은 — 각 입력 항목·요소 옆에 도움 아이콘 버튼(보통 ‘?’나’ⓘ’)이 있고, 그걸 누르면 패널에 그 항목의 도움말이 표시되는 것입니다(CP-342). 그래서 — 이 아이콘 버튼이 어디 있느냐가 ’어느 항목의 도움말 인지’를 결정하죠.

아이콘이 대상에서 멀 때:

연결 모호 도움 아이콘이 그 도움이 설명하는 항목에서 멀리 떨어져 있으면, 사용자는 ‘이 아이콘이 어느 항목의 도움인지’ 모릅니다. 여러 항목이 있는 폼에서 아이콘이 엉뚱한 곳에 모여 있으면 더 헷갈리죠.

도움 요청 어려움 특정 항목에서 막혔을 때 그 항목 옆에 아이콘이 없으면, 도움을 어떻게 얻을지 모릅니다. 항목 옆에 아이콘이 있어야 막힌 그 자리에서 바로 도움을 청하죠.

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

그래서 CP-337은 — 도움 아이콘 버튼을 도움 대상 요소 주변에 두라고 합니다:

항목 옆 배치 도움이 필요한 입력 항목(레이블·필드)의 바로 옆(보통 레이블 끝이나 필드 옆)에 도움 아이콘을 둡니다. ‘주민등록번호’ 레이블 옆 ’?’처럼요. 사용자가 그 항목을 보면서 옆의 아이콘으로 바로 도움을 청하죠.

일관 위치 — 여러 항목의 도움 아이콘을 — 일관된 위치(모두 레이블 끝 등)에 둡니다. 들쭉날쭉하면 찾기 어렵죠(토글 레이아웃 일관 CP-315 정신).

명확한 연결 — 아이콘과 항목이 시각적으로 한 묶음으로 보이게(가까운 간격). 어느 항목의 도움인지 분명하게.

도움이 필요한 항목에만. 모든 항목에 도움 아이콘을 다는 게 아니라 — 실제로 도움이 필요한(복잡·생소한) 항목에 둡니다. 자명한 항목(‘이름’)엔 불필요하죠. 도움이 필요한 항목을 선별해, 그 옆에 아이콘을 배치합니다.

섹션 제목 일치(CP-338 연계). 아이콘을 누르면 패널에 뜨는 도움말의 섹션 제목이 — 그 항목의 레이블과 일치해야 하죠(CP-338). 즉 아이콘 위치(337)와 패널 도움말 제목(338)이 함께 ’어느 항목 도움인지’를 명확히 합니다.

이 규칙은 도움 패널의 ’도움 연결 명료성’을 담당합니다 — 도움 아이콘을 대상 항목 옆에 둬(337), 어느 항목의 도움 인지 분명히 하고 막힌 자리에서 바로 도움을 청하게 하죠.

정리하면 — 도움 아이콘이 대상 항목에서 멀면 어느 항목 도움인지 헷갈리므로, 도움이 필요한 항목 주변에 일관된 위치로 아이콘 버튼을 배치해 연결을 분명히 해야 합니다.

3. 점검 / 개선

무엇을 점검하나

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

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

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

개선 방향

도움 아이콘을 대상 항목 레이블·필드 옆에 배치, 위치 일관화.

도움 필요한 항목 선별. 패널 도움말 제목을 항목 레이블과 일치(CP-338).

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

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

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

도움 패널을 쓰는 사이트에 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

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

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

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

❓ FAQ

Q1. 도움 아이콘을 한 곳에 모아두면 안 되나요? 그러면 어느 항목 도움인지 헷갈립니다. 각 항목 옆에 둬야 연결이 분명하죠. Q2. 모든 항목에 도움 아이콘을 다나요? 아닙니다. 복잡·생소해 도움이 필요한 항목에만 둡니다. 자명한 항목엔 불필요하죠. Q3. 아이콘과 패널 도움말은 어떻게 연결되나요? 아이콘을 누르면 그 항목 도움말로 패널이 바뀌고(CP-342), 도움말 제목이 항목 레이블과 일치하죠(CP-338).

6. 마무리

CP-337의 메시지:

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

도움 아이콘이 대상 항목에서 멀면 어느 항목 도움인지 헷갈립니다. 도움 필요한 항목 옆에 일관된 위치로 두어 연결을 분명히 하는 게 핵심이죠. 다음 편은 패널 섹션 제목과 항목 레이블 일치입니다.

다음 편 예고 ▶ 「458. (CP-338) 도움 패널의 섹션 제목은 아이콘 버튼과 관련된 본문 섹션 헤딩/레이블 텍스트와 일치하게 제공하고 있다.」

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

📚 참고 출처

KRDS 컴포넌트 — 도움 패널(Help panel) 가이드 — https://www.krds.go.kr/html/site/component/component_33.html

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

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