누를 때만 뜨게

KRDS CP-363 — 맥락적 도움말은 사용자가 요청한 경우에만 실행되게 구현하고 있다.

0. 들어가며 — 마우스만 올려도 도움말이 튀어나오면

이번 483편은 맥락적 도움말이 사용자가 요청한 경우에만 실행되게 구현하라는 규칙입니다.

맥락적 도움말이 — 사용자 의도와 무관하게(마우스 호버만, 필드 포커스만으로) 튀어나오면, 어지럽고 작업을 방해하죠. CP-363은 도움말을 ‘사용자가 명시적으로 요청(클릭)했을 때만’ 띄우라고 규정합니다. 도움 패널 CP-342와 닮은, 사용자 통제권 규칙이죠. 이번 편을 풀어냅니다.

1. 원문 — 요청 시에만 실행

CP-363 (컴포넌트 > 맥락적 도움말) “맥락적 도움말은 사용자가 요청한 경우에만 실행되게 구현하고 있다.”

맥락적 도움말 팝오버를, 사용자가 명시적으로 요청(아이콘 클릭/키보드 실행)했을 때만 띄우라는 뜻입니다.

정리: 맥락적 도움말은 사용자가 요청할 때만 띄워라. 이게 CP-363입니다.

2. 왜 요청 시에만 실행인가

맥락적 도움말은 — 아이콘을 눌러 팝오버로 뜨는 도움입니다. 이 팝오버가 — 언제 뜨느냐가 사용성을 좌우하죠. CP-363은 ’사용자가 요청했을 때만’으로 못 박습니다.

의도치 않게 도움말이 뜰 때의 문제:

만약 — 맥락적 도움말이 사용자의 명시적 요청 없이도 뜨면(예: 아이콘에 마우스 호버만 해도, 필드에 포커스만 줘도 팝오버가 자동으로 튀어나옴), 여러 문제가 생깁니다:

의도치 않은 출현 — 사용자가 — 마우스를 움직이다 아이콘 위를 스쳐 지나가기만 해도 도움말이 튀어나오면, 어지럽고 산만하죠. 보려던 게 아닌데 화면에 팝오버가 떴다 사라졌다 합니다.

작업 방해·가림 — 자동으로 뜬 팝오버가 — 작업하려던 콘텐츠를 가리면(CP-357), 사용자는 방해받습니다. 필드에 포커스를 주자(입력하려고) 도움말이 떠서 필드를 가리면 어이없죠.

키보드 사용자 혼란 — 키보드로 Tab 이동 중 — 아이콘에 포커스가 갈 때마다 팝오버가 자동으로 뜨면, 특히 스크린 리더 사용자에게 혼란스럽습니다. 의도하지 않은 도움말이 계속 읽히죠.

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

그래서 CP-363은 — 맥락적 도움말을 사용자가 요청했을 때만 띄우라고 합니다:

명시적 요청(클릭) 사용자가 ⓘ·? 아이콘을 클릭(또는 키보드로 Enter/Space)해야만 팝오버가 뜹니다. 호버·포커스 같은 비명시적 행동으론 안 뜨죠. 사용자가 ’이 도움이 필요해’라고 의식적으로 누를 때만요.

닫기도 통제 — 띄운 도움말을 — 사용자가 닫을 수 있어야 합니다(Esc, 닫기 버튼, 바깥 클릭 등). 띄우기·닫기를 사용자가 통제하죠.

호버 툴팁과의 구분. 짧은 툴팁(tooltip)은 관습적으로 호버로 뜨기도 합니다(별도 컴포넌트, CP-372~). 하지만 맥락적 도움말은 툴팁보다 풍부한 도움(팝오버)이라, 클릭(요청) 으로 띄우는 게 맞죠. 호버로 뜨는 짧은 툴팁과, 클릭으로 뜨는 맥락적 도움말은 용도·트리거가 다릅니다. CP-363은 맥락적 도움말을 ’요청(클릭) 기반’으로 규정하죠.

WCAG 3.2.1 On Focus. 이는 — WCAG 3.2.1(초점 시) 정신과 통합니다 — 포커스만으로 예상 못한 맥락 변화(팝오버 출현)가 일어나면 안 된다는 거죠. 명시적 활성화에만 도움말을 묶습니다. 도움 패널 CP-342와 같은 정신입니다.

이 규칙은 맥락적 도움말의 ’사용자 통제권’을 담당합니다 — 도움말을 사용자 요청(클릭)에만 띄워(363), 의도치 않은 출현·방해 없이 사용자가 도움말을 통제하게 하죠.

정리하면 — 맥락적 도움말이 호버·포커스로 멋대로 뜨면 어지럽고 작업을 방해하므로, 사용자가 아이콘을 명시적으로 클릭(요청)했을 때만 실행되게 구현해야 합니다.

3. 점검 / 개선

무엇을 점검하나

클릭 실행 — 도움말이 아이콘 클릭(Enter/Space)에만 뜨는가.

호버·포커스 배제 — 마우스 호버·필드 포커스만으로 뜨지 않는가.

닫기 통제 — 사용자가 도움말을 닫을 수 있는가(Esc·닫기·바깥 클릭).

개선 방향

도움말 실행을 아이콘 click/keydown(Enter·Space)에만 바인딩.

hover·focus 자동 출현 제거(WCAG 3.2.1). 닫기 수단 제공.

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

역할	책임
퍼블리셔/개발	요청(클릭) 기반 실행 구현
QA/접근성	호버·포커스 시 미출현 검증

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

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 도움말이 아이콘 클릭(Enter/Space)에만 뜨나요?

□ 마우스 호버·필드 포커스만으로 뜨지 않나요?

□ 사용자가 도움말을 닫을 수 있나요(Esc·닫기·바깥 클릭)?

❓ FAQ

Q1. 호버로 뜨면 편하지 않나요? 의도치 않게 튀어나와 어지럽고 작업을 방해합니다. 명시적 클릭(요청)에만 띄워야 하죠. Q2. 툴팁은 호버로 뜨던데요? 짧은 툴팁은 별도 컴포넌트로 호버가 관습이지만, 맥락적 도움말은 풍부한 팝오버라 클릭(요청)으로 띄웁니다. Q3. 어떤 WCAG 기준인가요? 3.2.1 초점 시(On Focus)입니다 — 포커스만으로 예상 못한 출현이 일어나면 안 되죠. 도움 패널 CP-342와 같은 정신입니다.

6. 마무리

CP-363의 메시지:

누를 때만 뜨게 — 맥락적 도움말은 사용자가 요청한 경우에만 실행하라.

도움말이 호버·포커스로 멋대로 뜨면 어지럽고 작업을 방해합니다. 사용자가 명시적으로 클릭(요청)했을 때만 띄워 통제 권을 지키는 게 핵심이죠. 다음 편은 아이콘 버튼과 팝오버의 순서·초점입니다.

다음 편 예고 ▶ 「484. (CP-364) 아이콘 버튼과 팝오버 콘텐츠를 적절한 순서로 제공하며, 키보드 초점은 논리적인 순서로 이동시키고 있다.」

ViewCheck는 맥락적 도움말이 사용자 요청 시에만 실행되는지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 맥락적 도움말(Contextual help) 가이드 — https://www.krds.go.kr/html/site/component/component_35.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컴포넌트,웹표준