하나만 골라서

KRDS CP-360 — 맥락적 도움말과 도움 패널을 함께 사용하지 않고 있다.

0. 들어가며 — 두 가지 도움이 섞이면

이번 480편은 맥락적 도움말과 도움 패널을 함께 사용하지 않게 하라는 규칙입니다.

맥락적 도움말(그 자리 팝오버)과 도움 패널(옆에 펼쳐지는 큰 영역)은 — 둘 다 도움을 주지만 방식이 다르죠. 한 화면에 둘이 섞이면 — 사용자가 ‘도움이 어디서 어떻게 나오는지’ 헷갈립니다. CP-360은 둘을 함께 쓰지 말라고 규정합니다. 도움 방식의 일관성 규칙이죠. 이번 편을 풀어냅니다.

1. 원문 — 맥락적 도움말·도움 패널 병용 금지

CP-360 (컴포넌트 > 맥락적 도움말) “맥락적 도움말과 도움 패널을 함께 사용하지 않고 있다.”

같은 화면(또는 맥락)에서 맥락적 도움말과 도움 패널을 동시에 사용하지 말고, 한 가지 도움 방식으로 통일하라는 뜻입니다.

정리: 맥락적 도움말과 도움 패널을 함께 쓰지 마라. 이게 CP-360입니다.

2. 왜 병용을 금지하나

KRDS에는 — 도움을 주는 컴포넌트가 여럿입니다. 그중 둘이 비슷하면서도 다르죠:

맥락적 도움말(Contextual help) — 요소 옆 아이콘(ⓘ·?)을 누르면 — 그 자리에 작은 팝오버(말풍선)로 뜨는 가벼운 인라인 도움. 그 요소에 대한 짧은 도움을 그 자리에서요.

도움 패널(Help panel) — 본문 옆에 펼쳐지는 큰 영역(CP-335~348). 여러 항목 도움을 한곳에 모아 보여주는 무거운 도움.

둘은 — 도움을 준다는 목적은 같지만, 방식·위치·무게가 다릅니다. 이 둘을 한 화면에 섞어 쓰면 문제가 생기죠.

병용의 문제:

혼란 사용자가 어떤 도움은 그 자리 팝오버(맥락적)로, 어떤 도움은 옆 패널(도움 패널)로 나오면, ‘도움이 어디서 어떻게 나오는지’ 예측 못 합니다. 어떤 아이콘은 팝오버를 열고, 어떤 아이콘은 패널을 바꾸면 일관성이 없어 헷갈리죠.

중복·충돌 — 같은 항목에 대해 — 맥락적 도움말과 도움 패널이 둘 다 도움을 주면, 정보가 중복되거나 어디를 봐야 할지 모릅니다. 화면도 복잡해지고요.

유지보수 부담 — 두 도움 시스템을 — 한 화면에 함께 운영하면, 콘텐츠 관리·일관성 유지가 어렵습니다.

그래서 CP-360은 — 한 화면(맥락)에서 한 가지 도움 방식으로 통일하라고 합니다:

하나 선택 — 그 화면의 도움 성격에 맞는 한 방식을 고릅니다.

맥락적 도움말 — 각 요소에 대한 짧은 도움을 그 자리에서 주면 충분할 때. 가벼운 인라인 도움이 맞죠.

도움 패널 — 여러 항목의 풍부한 도움을 한곳에 모아 보여줘야 할 때(복잡한 신청서 등). 큰 영역이 맞죠.

일관 적용 고른 방식을 그 화면 전체에 일관되게 적용합니다. 도움이 항상 같은 방식으로 나오면 사용자가 예측하죠.

왜 통일이 사용성에 좋은가. 도움 방식이 일관되면 — 사용자는 ‘도움이 필요하면 이렇게 하면 된다’를 한 번 익혀 계속 씁니다. 두 방식이 섞이면 — 매번 ’이건 팝오버인가 패널인가’ 추론해야 하죠. 일관성이 인지 부담을 줄입니다.

선택 기준. 화면의 도움 성격으로 고릅니다 — 짧은 단편 도움이 곳곳에 필요하면 맥락적 도움말, 여러 항목의 체계적 도움이 필요하면 도움 패널. 둘 다 필요해 보이면 — 보통 도움 패널이 더 포괄적이라, 그쪽으로 통일하는 게 낫죠.

이 규칙은 맥락적 도움말의 ’도움 방식 일관성’을 담당합니다 — 맥락적 도움말과 도움 패널을 안 섞어(360), 사용자가 도움이 어떻게 나올지 예측하게 하죠. 컴포넌트 선택의 일관성(라디오/체크박스/셀렉트 용도 구분 정신)을 도움 영역에 적용한 것입니다.

정리하면 — 맥락적 도움말과 도움 패널을 한 화면에 섞으면 도움이 어디서 나올지 예측 못 하고 중복·혼란이 생기므로, 화면 성격에 맞는 한 가지 도움 방식으로 통일해야 합니다.

3. 점검 / 개선

무엇을 점검하나

병용 없음 — 한 화면에 맥락적 도움말과 도움 패널이 함께 있지 않은가.

방식 통일 — 화면 성격에 맞는 한 도움 방식으로 일관되는가.

예측 가능 — 도움이 항상 같은 방식으로 나오는가.

개선 방향

화면 성격으로 한 방식 선택: 짧은 단편 도움=맥락적 도움말, 체계적 도움=도움 패널.

고른 방식을 화면 전체에 일관 적용. 병용 제거.

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

역할	책임
기획/UX	화면별 도움 방식 선택·통일 정책
퍼블리셔/개발	단일 도움 방식 구현

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

도움 컴포넌트를 쓰는 사이트에 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 한 화면에 맥락적 도움말과 도움 패널이 함께 있지 않나요?

□ 화면 성격에 맞는 한 도움 방식으로 일관되나요?

□ 도움이 항상 같은 방식으로 나오나요?

❓ FAQ

Q1. 둘 다 쓰면 더 친절하지 않나요? 오히려 도움이 어디서 나올지 예측 못 하고 중복·혼란이 생깁니다. 한 방식으로 통일하는 게 사용성에 낫죠. Q2. 어떤 걸 고르나요? 짧은 단편 도움이 곳곳에 필요하면 맥락적 도움말, 여러 항목의 체계적 도움이면 도움 패널 입니다. 둘 다 필요하면 보통 도움 패널로 통일하죠. Q3. 사이트 전체에서 하나만 써야 하나요? 화면(맥락) 단위로 통일하면 됩니다. 다른 성격의 화면은 다른 방식일 수 있되, 한 화면 안에선 섞지 않죠.

6. 마무리

CP-360의 메시지:

하나만 골라서 — 맥락적 도움말과 도움 패널을 함께 쓰지 마라.

두 도움 방식을 섞으면 도움이 어디서 나올지 예측 못 하고 중복·혼란이 생깁니다. 화면 성격에 맞는 한 방식으로 통일해 예측 가능성을 주는 게 핵심이죠. 다음 편은 아이콘 명도 대비입니다.

다음 편 예고 ▶ 「481. (CP-361) 아이콘과 인접 배경 간 명도 대비를 3:1 이상으로 준수하고 있다.」

ViewCheck는 맥락적 도움말과 도움 패널이 병용되지 않는지를 진단합니다.

📚 참고 출처

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

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

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