누를 때만 바뀌게

KRDS CP-342 — 본문은 사용자가 특정 아이콘 버튼을 실행하는 경우에만 변경되도록 하고 있다.

0. 들어가며 — 패널이 멋대로 바뀌면

이번 462편은 패널 본문이 사용자가 특정 아이콘 버튼을 실행하는 경우에만 변경되게 하라는 규칙입니다.

도움 패널의 내용이 — 사용자 의도와 무관하게(필드에 포커스만 줘도, 마우스만 올려도) 자꾸 바뀌면, 사용자는 어지럽고 원하던 도움말을 잃죠. CP-342는 패널 본문을 ‘특정 아이콘 버튼을 명시적으로 눌렀을 때만’ 바꾸라고 규정합니다. 사용자 통제권을 지키는 규칙이죠. 이번 편을 풀어냅니다.

1. 원문 — 특정 아이콘 실행 시에만 변경

CP-342 (컴포넌트 > 도움 패널) “본문은 사용자가 특정 아이콘 버튼을 실행하는 경우에만 변경되도록 하고 있다.”

도움 패널의 본문(내용)을, 사용자가 특정 도움 아이콘 버튼을 명시적으로 실행(클릭/키보드)했을 때만 바뀌게 하라는 뜻입니다.

정리: 패널 본문은 아이콘 버튼을 누를 때만 바꿔라. 이게 CP-342입니다.

2. 왜 아이콘 실행 시에만 변경인가

도움 패널은 — 사용자가 특정 항목의 도움 아이콘(CP-337)을 누르면 그 항목 도움말로 본문이 바뀝니다. 이 변경 시점이 — 사용자의 명시적 행동(아이콘 클릭)에만 묶여야, 사용자가 패널을 통제하죠. CP-342는 이를 규정합니다.

의도치 않게 본문이 바뀔 때의 문제:

만약 — 패널 본문이 사용자의 명시적 클릭 없이도 바뀌면(예: 입력 필드에 포커스만 줘도, 마우스를 호버만 해도 그 항목 도움말로 자동 전환), 여러 문제가 생깁니다:

원하던 도움말 상실 — 사용자가 ‘A 항목’ 도움말을 보며 작업하는데 — ‘B 항목’ 필드로 포커스가 옮겨가자 패널이 ’B 도움말’로 휙 바뀌면, 보던 A 도움말을 잃죠. A를 다시 보려면 또 조작해야 합니다.

어지러운 전환 — 폼을 작성하며 필드를 옮길 때마다 — 패널이 계속 바뀌면, 깜빡이고 어지럽습니다. 사용자가 의도하지 않은 변화죠.

키보드 사용자 혼란 — 키보드로 필드 간 이동(Tab)할 때마다 패널이 바뀌면 — 특히 스크린 리더 사용자에게 혼란스럽고, 라이브 영역이 계속 읽혀 방해됩니다.

통제권 상실 — 사용자가 ’지금 이 도움말을 보겠다’고 선택하지 않았는데 패널이 바뀌면 — 패널을 통제하는 게 사용자가 아니라 시스템이 되죠.

그래서 CP-342는 — 패널 본문을 특정 아이콘 버튼을 실행했을 때만 바꾸라고 합니다:

명시적 실행 사용자가 도움 아이콘을 클릭(또는 키보드로 Enter/Space)해야만 그 항목 도움말로 본문이 바뀝니다. 포커스·호버 같은 비명시적 행동으론 안 바뀌죠.

사용자 통제 — 사용자가 ’이 항목 도움이 필요해’라고 의식적으로 아이콘을 눌렀을 때만 바뀌니 — 패널을 사용자가 통제합니다. 보던 도움말이 멋대로 사라지지 않죠.

WCAG 3.2.1 On Focus. 이는 — WCAG 3.2.1 초점 시(On Focus) 정신과 통합니다 — 요소에 초점이 가는 것만으로 예상 못한 맥락 변화가 일어나면 안 된다는 기준이죠. 필드 포커스만으로 패널이 바뀌면 이 기준에 어긋납니다. 명시적 활성화(클릭)에만 변경을 묶어야 하죠.

CP-336과의 흐름. 패널은 — 처음엔 기본 상태(CP-336)로 열리고, 사용자가 특정 아이콘을 눌렀을 때만(342) 그 항목 도움말로 바뀝니다. 즉 — 기본 상태(336) → 아이콘 클릭 → 항목 도움말(342)의 명확한 사용자 주도 흐름이죠.

이 규칙은 도움 패널의 ’사용자 통제권’을 담당합니다 — 본문 변경을 명시적 아이콘 실행에만 묶어(342), 사용자가 패널을 통제하고 보던 도움말을 잃지 않게 하죠. 예상 가능성과 통제권을 지키는 원칙입니다.

정리하면 — 패널 본문이 포커스·호버 등으로 멋대로 바뀌면 사용자가 도움말을 잃고 통제권을 상실하므로, 특정 아이콘 버튼을 명시적으로 실행했을 때만 본문이 변경되게 해야 합니다.

3. 점검 / 개선

무엇을 점검하나

명시적 변경 — 패널 본문이 아이콘 클릭(Enter/Space)에만 바뀌는가.

포커스·호버 배제 — 필드 포커스·마우스 호버만으로 본문이 바뀌지 않는가.

통제권 — 사용자가 보던 도움말이 의도 없이 사라지지 않는가.

개선 방향

패널 본문 변경을 도움 아이콘 click/keydown(Enter·Space)에만 바인딩.

필드 focus·hover 이벤트로 패널 전환 제거(WCAG 3.2.1).

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

역할	책임
퍼블리셔/개발	본문 변경 트리거(클릭만) 구현
QA/접근성	포커스·호버 시 미변경 검증

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

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 패널 본문이 아이콘 클릭(Enter/Space)에만 바뀌나요?

□ 필드 포커스·마우스 호버만으로 본문이 바뀌지 않나요?

□ 사용자가 보던 도움말이 의도 없이 사라지지 않나요?

❓ FAQ

Q1. 필드에 포커스 주면 자동으로 도움말이 뜨면 편하지 않나요? 편해 보이지만 보던 도움말이 멋대로 바뀌고 WCAG 3.2.1에 어긋납니다. 명시적 클릭에만 변경을 묶죠. Q2. 호버로 미리보기는요? 호버로 본문을 바꾸면 어지럽고 통제권을 잃습니다. 명시적 활성화(클릭)에만 변경하죠. Q3. CP-336과 어떤 흐름인가요? 처음엔 기본 상태(336), 아이콘을 누르면 그 항목 도움말로 변경(342)입니다. 사용자 주도 흐름이죠.

6. 마무리

CP-342의 메시지:

누를 때만 바뀌게 — 패널 본문은 특정 아이콘 버튼을 실행했을 때만 변경하라.

패널 본문이 포커스·호버로 멋대로 바뀌면 사용자가 도움말을 잃고 통제권을 상실합니다. 명시적 아이콘 실행에만 변경을 묶어 사용자 통제권을 지키는 게 핵심이죠. 다음 편은 모바일 패널 축약입니다.

다음 편 예고 ▶ 「463. (CP-343) [모바일] 화면 너비가 충분하지 않을 때 도움 패널 열기 버튼으로 축약하여 제공 하고 있다.」

ViewCheck는 패널 본문이 아이콘 실행 시에만 변경되는지를 진단합니다.

📚 참고 출처

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

WCAG 2.1 SC 3.2.1 On Focus — https://www.w3.org/WAI/WCAG21/Understanding/on-focus.html

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

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