링크가 없어도 경로엔 나와야

KRDS CP-073 — 전체 계층 구조 중 연결되는 링크가 없는 메뉴도 표시하고 있다.

0. 들어가며 — 빈칸 없는 경로

이번 193편은 계층 구조 중 연결되는 링크가 없는 메뉴도 브레드크럼에 표시하라는 규칙입니다.

브레드크럼은 “홈 > 정책 > 보도자료” 처럼 현재 위치까지의 경로를 단계별로 보여줍니다. 그런데 중간 단계 중에 클릭해서 갈 페이지가 없는 단계가 있을 수 있죠 — 예를 들어 ’정책’은 묶음(카테고리)일 뿐 독립 페이지가 없는 경우입니다. 이때 “정책을 빼고 홈 > 보도자료로 표시하면 되지 않나?” 싶지만, CP-073은 링크가 없어도 단계는 표시하라고 규정합니다. 이번 편을 풀어냅니다.

1. 규칙 원문 — 비링크 단계도 표시

CP-073 (컴포넌트 > 브레드크럼) “전체 계층 구조 중 연결되는 링크가 없는 메뉴도 표시하고 있다.”

브레드크럼은 현재 위치까지의 전체 계층 경로를 보여주는데, 그 경로 안에 클릭 대상(링크)이 없는 단계가 있더라도 그 단계를 생략하지 말고 표시하라는 뜻입니다.

정리: 경로상의 모든 계층 단계를 표시하라. 링크가 없는 단계도 텍스트로 보여라. 이게 CP-073입니다.

2. 왜 링크 없는 단계도 표시하나

브레드크럼의 핵심 가치는 ’내가 사이트 구조의 어디에 있는지’를 빠짐없이 보여주는 데 있습니다. 경로 “홈 > 정책 > 보도자료”에서 ’정책’은 사용자가 자신의 위치를 이해하는 데 꼭 필요한 정보죠 — ’정책 안의 보도자료’라는 맥락을 만듭니다. 그런데 ’정책’에 연결할 독립 페이지가 없다는 이유로 이를 빼버리면, 경로는 “홈 > 보도자료”가 되어 계층 한 단계가 사라집니다.

이렇게 되면 두 가지 문제가 생깁니다. 첫째, 사용자가 사이트 구조를 잘못 이해합니다 — 보도자료가 홈 바로 아래에 있는 것처럼 보이지만, 실제로는 정책 카테고리 안에 있죠. 둘째, 다른 페이지와 깊이가 어긋나 보입니다 — 같은 깊이의 다른 보도자료는 3단계인데 이 페이지만 2단계라면 일관성이 깨집니다.

그래서 CP-073은 링크가 없는 단계도 텍스트로 표시하라고 합니다 — ‘정책’을 클릭은 안 되지만 경로에는 글자로 남겨두는 것이죠. 그러면 사용자는 전체 계층을 정확히 인지하고, 자신이 ’정책 > 보도자료’ 안에 있음을 이해합니다. 클릭 가능 여부와 무관하게 위치 정보는 온전해야 합니다.

핵심은 ’링크의 유무’와 ’경로 표시의 유무’를 분리하는 것입니다. 링크가 없으면 클릭만 안 될 뿐, 단계 자체는 경로의 일부로 살아 있어야 하죠. 다만 링크가 없는 단계는 클릭되는 것처럼 보이면 안 되므로, 시각적으로 구분해야 합니다 — 이건 다음 편 CP-074(비링크는 밑줄·마우스오버 미적용)에서 다룹니다.

3. 점검 / 개선

무엇을 점검하나

단계 누락 없음 — 경로상의 모든 계층 단계가 표시되는가(링크 없는 것 포함).

깊이 일관성 — 같은 깊이의 다른 페이지와 단계 수가 일치하는가.

비링크 처리 — 링크 없는 단계는 클릭처럼 보이지 않게 텍스트로만 표시되는가(→ CP-074).

개선 방향

링크 없는 단계를 <a> 대신 <span>(또는 비링크 <li>)으로 마크업해 텍스트로 표시.

경로 데이터에서 ‘독립 페이지 없음’ 단계도 노드로 포함시켜 렌더링.

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

역할	책임
기획/IA	계층 구조 정의 시 비링크 단계도 경로 노드로 포함
퍼블리셔/개발	링크 없는 단계를 텍스트(span)로 렌더링

기관 유형	CP-073 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (브레드크럼 사용 시)

카테고리 단계에 독립 페이지가 없는 구조라면 특히 해당됩니다. 모든 단계가 링크인 사이트는 자연히 충족됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 경로상의 모든 계층 단계가 빠짐없이 표시되나요?

□ 링크 없는 단계를 생략하지 않았나요?

□ 같은 깊이의 다른 페이지와 단계 수가 일치하나요?

❓ FAQ

Q1. 링크가 없으면 차라리 빼는 게 깔끔하지 않나요? 아닙니다. 그 단계가 빠지면 사용자가 계층을 잘못 이해하고, 다른 페이지와 깊이가 어긋납니다. 클릭은 안 돼도 경로에는 남겨야 합니다. Q2. 링크 없는 단계는 어떻게 표시하나요? 텍스트(<span>)로 표시하되, 클릭되는 것처럼 보이지 않게 합니다(밑줄·마우스오버 미적용 → CP-074). Q3. 모든 단계가 링크인데도 점검해야 하나요? 그 경우 자연히 충족이지만, 구조 변경으로 비링크 단계가 생길 때를 대비해 규칙을 알아두면 좋습니다.

6. 마무리

CP-073의 메시지:

링크가 없어도 경로엔 나와야 — 계층의 모든 단계를 빠짐없이 표시한다.

브레드크럼은 사이트 구조 안 내 위치를 빠짐없이 보여주는 도구입니다. 중간에 클릭할 페이지가 없는 단계라도 생략하면 계층이 어긋나고 사용자가 위치를 잘못 이해하죠. 링크 유무와 무관하게 경로는 온전해야 합니다. 단, 링크 없는 단계는 클릭처럼 보이면 안 되며, 그 처리는 다음 편으로 이어집니다.

다음 편 예고 ▶ 「194. (CP-074) 전체 계층 구조 중 연결되는 링크가 없는 메뉴는 밑줄, 마우스오버 효과를 사용하고 있지 않다.」

ViewCheck는 브레드크럼 경로에 링크 없는 단계가 누락되지 않았는지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 브레드크럼(Breadcrumb) 가이드 — https://www.krds.go.kr/html/site/component/component_07.html

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

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