지금 여기를 표시하라

KRDS CP-091 — 현재 탐색 중인 화면에 대한 링크를 강조하여 표시하고 있다.

0. 들어가며 — 메뉴 목록에서 ‘내가 있는 곳’

이번 211편은 사이드 메뉴에서 현재 탐색 중인 화면 링크를 강조 표시하라는 규칙입니다.

사이드 메뉴는 한 섹션의 하위 화면들을 세로로 나열합니다 — “보도자료 / 입법예고 / 고시·공고 / 간행물”. 그런데 이 목록 중 지금 내가 보고 있는 화면이 어느 것인지 표시되지 않으면, 사용자는 자기 위치를 알 수 없죠. CP-091은 현재 화면에 해당하는 항목을 시각적으로 강조해, ’나는 지금 여기 있다’를 한눈에 보여주라고 규정합니다. 이번 편을 풀어냅니다.

1. 규칙 원문 — 현재 화면 강조

CP-091 (컴포넌트 > 사이드 메뉴) “현재 탐색 중인 화면에 대한 링크를 강조하여 표시하고 있다.”

사이드 메뉴 목록 중 사용자가 현재 보고 있는 화면에 해당하는 항목을 시각적으로 강조(색·굵기·배경·표시선 등)해, 현재 위치를 명확히 알리라는 뜻입니다.

정리: 사이드 메뉴에서 지금 보고 있는 화면 항목을 강조해 위치를 알려라. 이게 CP-091입니다.

2. 왜 현재 화면을 강조하나

내비게이션의 두 가지 핵심 기능은 ‘어디로 갈 수 있는가(탐색)’와’내가 지금 어디 있는가(위치 표시)’ 입니다. 사이드 메뉴는 하위 화면 목록을 보여줌으로써 첫 번째(탐색)를 충족하지만, 두 번째(위치)를 위해서는 현재 항목 강조가 필요하죠. 강조가 없으면 사이드 메뉴는 ’갈 곳 목록’일 뿐, ’내 위치’는 안 알려줍니다.

현재 화면을 강조하면 사용자는 여러 이점을 얻습니다. 첫째, 방향 감각입니다 “아, 나는 지금 ‘보도자료’를 보고 있고, 같은 섹션엔 입법예고·고시·간행물도 있구나”를 즉시 파악하죠. 둘째, 탐색 효율입니다 현재 위치를 기준으로 ’다음엔 어디로 갈지’를 빠르게 정합니다. 셋째, 혼란 방지입니다 강조가 없으면 비슷한 항목들 사이에서 ’내가 방금 어디서 왔지?’, ‘이거 아까 본 화면인가?’ 하는 혼동이 생깁니다.

강조 방식은 다양합니다 — 텍스트 색 변경, 굵게(bold), 배경색 하이라이트, 왼쪽 강조선(active indicator bar) 등이죠. 핵심은 다른 항목과 명확히 구별되어 한눈에 ’이게 현재’임을 알 수 있어야 한다는 점입니다. 너무 미세하면(예: 색이 한 단계만 진해짐) 강조 효과가 약합니다.

주의할 점 — 이 강조는 시각적 강조에 그치면 안 됩니다. 색·굵기만으로 현재를 표시하면 스크린 리더 사용자 에게는 전달되지 않죠. 그래서 사이드 메뉴 그룹의 뒤쪽 규칙 CP-100·101은 현재 항목에 aria-current="page" 속성을 부여해 보조기술에도 ‘현재 페이지’임을 전하라고 규정합니다(시각 강조 + ARIA의 이중 전달). 또한 시각 강조 자체도 색에만 의존하지 말고(KWCAG ’색 무관 인식’) 굵기·배경 등 형태 단서를 함께 주는 것이 안전 합니다. CP-091은 그중 ’시각적 강조’를 담당하고, ARIA 전달은 후속 규칙이 보완합니다.

정리하면 — 사이드 메뉴는 갈 곳을 보여줄 뿐 아니라 현재 위치를 표시해야 완성되고, 그 위치 표시의 시각적 출발점이 바로 ’현재 화면 강조’입니다.

3. 점검 / 개선

무엇을 점검하나

현재 항목 강조 — 사이드 메뉴에서 현재 화면 항목이 시각적으로 강조되는가.

명확성 — 다른 항목과 한눈에 구별될 만큼 강조가 분명한가.

색 비의존 — 색만이 아니라 굵기·배경 등 형태 단서도 함께 쓰는가.

개선 방향

현재 항목에 굵기·배경·강조선 등 분명한 시각 처리.

aria-current="page"(CP-100·101) 병행으로 보조기술 전달.

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

역할	책임
디자이너	현재 항목 강조 스타일(색·굵기·배경) 정의
퍼블리셔/개발	현재 화면 판별·강조 클래스·aria-current 적용

기관 유형	CP-091 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (사이드 메뉴 사용 시)

사이드 메뉴를 쓰는 모든 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 사이드 메뉴에서 현재 화면 항목이 강조되나요?

□ 다른 항목과 한눈에 구별될 만큼 분명한가요?

□ 색만이 아니라 굵기·배경 등도 함께 쓰나요?

❓ FAQ

Q1. 색만 살짝 바꾸면 되나요? 너무 미세하면 강조 효과가 약하고, 색만 쓰면 색각 이상 사용자에게 안 보입니다. 굵기·배경 등을 함께 씁니다. Q2. 스크린 리더에도 현재가 전달되나요? 시각 강조만으론 부족합니다. aria-current="page"(CP-100·101)로 보조기술에도 전달해야 합니다. Q3. 브레드크럼이 있으면 강조는 생략해도 되나요? 아닙니다. 사이드 메뉴는 형제 화면 맥락에서의 위치를, 브레드크럼은 상위 경로를 각각 보여줍니다. 둘 다 필요합니다.

6. 마무리

CP-091의 메시지:

지금 여기를 표시하라 — 사이드 메뉴에서 현재 화면 링크를 강조한다.

사이드 메뉴는 갈 곳 목록이자 내 위치 표시여야 합니다. 현재 화면 항목을 강조하면 방향 감각·탐색 효율이 살고 혼란이 줄죠. 단, 색만이 아니라 형태 단서를 함께 쓰고, aria-current로 보조기술에도 전달해야 완전합니다. 다음 편은 사이드 메뉴 계층의 깊이 제한 — 최대 2수준입니다.

다음 편 예고 ▶ 「212. (CP-092) 메뉴의 계층 구조는 최대 2개 수준까지 사용하고 있다.」

ViewCheck는 사이드 메뉴의 현재 화면 강조와 aria-current 적용을 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 사이드 메뉴(Side navigation) 가이드 — https://www.krds.go.kr/html/site/component/component_08.html

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

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