내가 지금 어디 있지?

KRDS CP-056 — 링크의 활성화 상태, 선택 상태가 명확히 구분되도록 표현하고 있다.

0. 들어가며 — 길을 잃지 않게

이번 176편은 메뉴 링크의 활성화·선택 상태를 명확히 구분하는 규칙입니다.

사이트를 탐색하다 보면 ’내가 지금 어느 메뉴에 있지?’를 알아야 길을 잃지 않습니다. 현재 보고 있는 페이지의 메뉴가 다른 메뉴와 구분되게 표시되면, 사용자는 자기 위치를 인지하죠. CP-056은 메뉴의 활성/선택 상태를 명확히 표현하라고 규정합니다. 이번 편을 풀어냅니다.

1. 규칙 원문 — 상태 명확 구분

CP-056 (컴포넌트 > 메인 메뉴) “링크의 활성화 상태, 선택 상태가 명확히 구분되도록 표현하고 있다.”

메뉴 링크의 활성화(현재 위치)·선택 상태를 다른 상태와 명확히 구분되게 표현하라는 뜻입니다.

정리: 링크의 활성화·선택 상태가 명확히 구분되도록 표현하라. 이게 CP-056입니다.

2. 왜 현재 위치를 표시하나

내비게이션 메뉴에서 사용자가 가장 알고 싶은 것 하나가 ’내가 지금 어디 있는가’입니다. 사이트는 여러 페이지로 이뤄져 있고, 사용자는 메뉴를 따라 이동하는데 — 현재 어느 섹션·페이지에 있는지 메뉴에 표시되지 않으면, 사용자는 방향 감각을 잃죠.

활성화/선택 상태는 이를 해결합니다. 사용자가 현재 보고 있는 페이지에 해당하는 메뉴 항목을, 다른 항목과 시각적으로 다르게 표시하는 것이죠 — 예: 색을 진하게, 굵게, 밑줄·하단 바, 배경 강조 등. 그러면 사용자는 메뉴를 보고 “아, 나는 지금 ‘정책정보’ 메뉴 안에 있구나”를 즉시 알 수 있습니다. 지도에서 ‘현재 위치’ 핀과 같은 역할이죠.

이것이 없으면 — 사용자는 페이지를 옮길 때마다 ‘여기가 어느 메뉴 소속이지?’ 헷갈리고, 사이트 구조 안에서 길을 잃습니다. 특히 깊은 하위 페이지에서는 더욱 그렇죠. 현재 위치 표시는 사용자가 사이트를 ‘지도처럼’ 인지 하고 자신 있게 탐색하게 합니다(닐슨의 사용성 휴리스틱 ‘시스템 상태의 가시성’).

‘명확히 구분’ 이 핵심입니다 — 활성 상태가 미묘하게만 다르면(예: 아주 약간 진한 색) 사용자가 알아채지 못합니다. 충분한 대비와 분명한 시각 차이로 ’여기가 현재 위치’임이 한눈에 보여야 하죠. 또 색만으로 구분하면 색약 사용자가 못 알아보므로(6편 색만 의존 금지), 색 + 굵기/밑줄/바 등 다중 신호로 표시하는 것이 좋습니다.

접근성 측면에서는 시각 표시뿐 아니라 스크린리더에도 현재 위치를 전달해야 합니다 — aria-current="page" 속성으로 ’이 링크가 현재 페이지’임을 알리죠(CP-066에서 활성 메뉴의 스크린리더 전달을 더 다룸). 시각·스크린 리더 모두에게 현재 위치가 전달되어야 완전합니다.

이는 hover/focus 상태 표시(BP 편)와도 연결됩니다 — 메뉴 링크는 기본·hover·focus·활성(현재)·선택 등 여러 상태를 명확히 구분해, 사용자가 상호작용과 위치를 모두 인지하게 해야 합니다.

3. 점검 / 개선

무엇을 점검하나

현재 위치 표시 — 현재 페이지의 메뉴가 다른 메뉴와 구분되는가.

명확한 구분 — 충분한 대비·다중 신호(색+굵기/바)로 분명한가.

스크린리더 — aria-current="page"로 현재 위치를 전달하는가.

Before / After

<!-- ✅ 활성 메뉴 시각 + 스크린리더 표시 --> <a href="/policy" class="active" aria-current="page">정책정보</a>

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

역할	책임
디자이너	활성/선택 상태 시각 표현 설계(다중 신호)
퍼블리셔/개발	상태 클래스 + aria-current 구현

기관 유형	CP-056 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수

행정·공공기관 디지털 정부서비스 = 전부 해당.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 현재 페이지의 메뉴가 다른 메뉴와 구분되나요?

□ 충분한 대비·다중 신호(색+굵기/바)로 명확한가요?

□ aria-current="page"로 스크린리더에 전달되나요?

❓ FAQ

Q1. 색만으로 표시하면 안 되나요? 색약 사용자가 못 알아봅니다. 색 + 굵기/밑줄/바 등 다중 신호가 좋습니다 (6편). Q2. 스크린리더에도 알려야 하나요? 네. aria-current="page"로 현재 위치를 전달해야 시각장애 사용자도 위치를 압니다(CP-066). Q3. KRDS를 채택하면 자동인가요? 표준 메뉴는 활성/선택 상태 표시를 제공합니다.

6. 마무리

CP-056의 메시지:

내가 지금 어디 있지? — 현재 위치를 명확히 표시해 사용자가 길을 잃지 않게.

메뉴의 활성/선택 상태로 현재 위치를 표시하면, 사용자가 사이트를 지도처럼 인지하고 자신 있게 탐색합니다. 충분한 대비·다중 신호로 명확히 하고, aria-current로 스크린리더에도 전달해야 완전하죠. ‘시스템 상태의 가시성’ 원리입니다.

다음 편은 드롭다운 영역의 제목을 다룹니다. CP-057 — “드롭다운 영역에 제목을 제공한다.”

다음 편 예고 ▶ 「177. (CP-057) 드롭다운 영역에 제목을 제공하고 있다.」

ViewCheck는 메뉴 링크의 활성/선택 상태가 명확히 구분되는지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 메인 메뉴(Main menu) 가이드 — https://www.krds.go.kr/html/site/component/component_06.html

WAI-ARIA aria-current

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

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