같은 이름으로 짝지어

KRDS CP-338 — 도움 패널의 섹션 제목은 아이콘 버튼과 관련된 본문 섹션 헤딩/레이블 텍스트와 일치하게 제공하고 있다.

0. 들어가며 — 패널 도움말이 어느 항목인지

이번 458편은 도움 패널의 섹션 제목을 아이콘 버튼과 관련된 본문 섹션 헤딩/레이블 텍스트와 일치하게 제공하라는 규칙입니다.

도움 아이콘을 눌러 패널에 도움말이 떴을 때 — 그 도움말의 제목이 본문 항목 레이블과 다르면, 사용자는 ‘이게 내가 누른 그 항목 도움말인지’ 헷갈리죠. CP-338은 패널 섹션 제목을 본문 레이블과 일치시키라고 규정합니다. CP-337(아이콘 배치)의 짝이죠. 이번 편을 풀어냅니다.

1. 원문 — 패널 섹션 제목 = 본문 헤딩/레이블

CP-338 (컴포넌트 > 도움 패널) “도움 패널의 섹션 제목은 아이콘 버튼과 관련된 본문 섹션 헤딩/레이블 텍스트와 일치하게 제공하고 있다.”

도움 패널에 표시되는 도움말의 섹션 제목을, 그 도움이 연결된 본문 항목의 헤딩·레이블 텍스트와 동일하게 제공하라는 뜻입니다.

정리: 패널 도움말 제목을 본문 항목 레이블과 일치시켜라. 이게 CP-338입니다.

2. 왜 제목 일치인가

도움 패널의 작동은 — 본문의 어떤 항목 옆 도움 아이콘(CP-337)을 누르면, 패널에 그 항목의 도움말이 표시되는 것 입니다. 이때 — 패널 도움말의 섹션 제목과 본문 항목의 레이블/헤딩이 일치해야, 사용자가 ’이게 내가 누른 그 항목의 도움말’임을 확신하죠.

제목이 일치하지 않을 때:

연결 혼란 사용자가 ‘주민등록번호’ 항목 옆 도움 아이콘을 눌렀는데 패널에 ‘신원 확인 정보’라는 다른 제목의 도움말이 뜨면, ’이게 내가 누른 항목 도움말이 맞나?’ 헷갈립니다. 같은 내용이어도 제목이 다르면 다른 항목으로 오인하죠.

여러 도움말 중 혼동 — 패널에 여러 항목 도움말이 누적·전환될 때 — 제목이 본문 레이블과 일치해야, 지금 보는 도움말이 어느 항목인지 분명합니다.

재탐색 어려움 — 나중에 다시 그 도움말을 찾을 때 — 본문 레이블과 패널 제목이 같으면 쉽게 매칭하죠. 다르면 헷갈립니다.

그래서 CP-338은 — 패널 섹션 제목을 본문 항목 레이블/헤딩과 일치시키라고 합니다:

동일 텍스트 — 본문 항목 레이블이 ‘주민등록번호’면 — 패널 도움말 제목도 ’주민등록번호’. 같은 텍스트로요. 변형·요약·다른 표현을 쓰지 않습니다.

명확한 매칭 — 사용자가 본문 레이블과 패널 제목을 보고 — ’아, 이 도움말이 그 항목 거구나’를 즉시 매칭하게요.

**왜 ‘일치’가 중요한가 인지 부담 감소.** 같은 대상을 가리키는데 본문에선 ’A’, 패널에선 ’A의 다른 표현’이면, 사용자는 둘이 같은 건지 매번 추론해야 하죠. 텍스트가 일치하면 추론 없이 즉시 연결됩니다. 일관된 용어(텍스트 목록 CP-249 정신)의 도움 패널 적용이죠.

스크린 리더에도 유리. 제목이 일치하면 — 스크린 리더 사용자도 본문 항목명과 패널 도움말 제목을 같은 텍스트로 들어, 연결을 명확히 인지합니다(아이콘 버튼 이름 CP-345와도 연계).

CP-337·338의 짝:

CP-337 — 도움 아이콘을 대상 항목 옆에 배치(위치로 연결).

CP-338 — 패널 도움말 제목을 항목 레이블과 일치(텍스트로 연결).

위치(337)와 텍스트(338) 두 차원으로 — ’어느 항목의 도움인지’를 명확히 하죠.

이 규칙은 도움 패널의 ’도움-항목 매칭’을 담당합니다 — 패널 제목을 본문 레이블과 일치시켜(338), 사용자가 도움말과 항목을 혼란 없이 연결하게 하죠. 일관된 용어로 인지 부담을 줄입니다.

정리하면 — 패널 도움말 제목이 본문 항목 레이블과 다르면 어느 항목 도움인지 헷갈리므로, 섹션 제목을 본문 헤딩/ 레이블 텍스트와 동일하게 제공해 명확히 매칭되게 해야 합니다.

3. 점검 / 개선

무엇을 점검하나

제목 일치 — 패널 도움말 섹션 제목이 본문 항목 레이블/헤딩과 동일한가.

변형 배제 — 요약·다른 표현으로 제목이 달라지지 않았는가.

매칭 명확 — 사용자가 본문과 패널 제목을 즉시 연결하는가.

개선 방향

패널 섹션 제목을 본문 항목 레이블과 동일 텍스트로.

변형·요약 제목 제거. 일관 용어로 본문↔패널 매칭.

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

역할	책임
콘텐츠/UX	패널 제목 ↔ 본문 레이블 일치 작성
퍼블리셔/개발	제목 매칭 구현

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

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 패널 도움말 섹션 제목이 본문 항목 레이블/헤딩과 동일한가요?

□ 요약·다른 표현으로 제목이 달라지지 않았나요?

□ 사용자가 본문과 패널 제목을 즉시 연결하나요?

❓ FAQ

Q1. 제목을 좀 더 설명적으로 쓰면 안 되나요? 본문 레이블과 다르면 어느 항목 도움인지 헷갈립니다. 동일 텍스트로 매칭을 분명히 해야 하죠. Q2. 같은 내용이면 제목은 달라도 되지 않나요? 내용이 같아도 제목이 다르면 사용자가 둘이 같은 건지 추론해야 합니다. 텍스트 일치가 인지 부담을 줄이죠. Q3. CP-337과 뭐가 다른가요? CP-337은 아이콘 위치(대상 항목 옆), CP-338은 패널 제목 텍스트(본문 레이블과 일치)입니다. 위치+텍스트로 연결하죠.

6. 마무리

CP-338의 메시지:

같은 이름으로 짝지어 — 패널 도움말 제목을 본문 항목 레이블과 일치시켜라.

패널 제목이 본문 레이블과 다르면 어느 항목 도움인지 헷갈립니다. 섹션 제목을 본문 헤딩/레이블과 동일 텍스트로 제공해 명확히 매칭하는 게 핵심이죠. 다음 편은 패널 정보의 간결성입니다.

다음 편 예고 ▶ 「459. (CP-339) 사용자가 패널 영역을 스크롤 하지 않고 정보를 훑어볼 수 있도록 간결한 문장 으로 제공하고 있다.」

ViewCheck는 패널 섹션 제목이 본문 레이블과 일치하는지를 진단합니다.

📚 참고 출처

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

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

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