클릭 안 되면 클릭처럼 보이지 마라

KRDS CP-074 — 전체 계층 구조 중 연결되는 링크가 없는 메뉴는 밑줄, 마우스오버 효과를 사용하고 있지 않다.

0. 들어가며 — 보이는 대로 작동해야

이번 194편은 앞 편(CP-073)의 짝입니다. 링크가 없는 메뉴는 밑줄·마우스오버 효과를 쓰지 말라는 규칙이죠.

CP-073에서 “링크가 없는 단계도 경로에 표시하라”고 했습니다. 그런데 표시하되, 그 단계가 클릭되는 것처럼 보이면 사용자가 헷갈립니다. 밑줄이 있고 마우스를 올리면 색이 바뀌면 “아, 링크네” 하고 클릭하는데 아무 반응이 없죠. CP-074는 이 모순을 막아 — 클릭 안 되는 단계는 클릭처럼 보이지 않게 하라고 합니다.

1. 규칙 원문 — 비링크엔 링크 시각효과 금지

CP-074 (컴포넌트 > 브레드크럼) “전체 계층 구조 중 연결되는 링크가 없는 메뉴는 밑줄, 마우스오버 효과를 사용하고 있지 않다.”

링크가 없는(클릭 대상이 아닌) 단계에는 링크임을 나타내는 시각 신호 — 밑줄과 마우스오버(hover) 효과 — 를 적용하지 말라는 뜻입니다.

정리: 클릭 안 되는 단계엔 밑줄·hover를 빼라. 링크처럼 보이지 않게 하라. 이게 CP-074입니다.

2. 왜 비링크엔 링크 효과를 빼나

이 규칙은 UI의 가장 기본 원칙 하나에서 나옵니다 — “보이는 대로 작동해야 한다”(어포던스 일치). 어떤 요소가 밑줄이 있고 마우스를 올리면 색이 변하면, 사용자는 무의식적으로 ’이건 클릭 가능한 링크’라고 학습합니다. 웹에서 밑줄과 hover는 수십 년간 ’링크’의 시각 신호였죠.

그런데 CP-073에서 표시한 비링크 단계(예: ‘정책’ 카테고리)에 똑같이 밑줄과 hover를 주면, 사용자는 그것을 링크로 오인합니다. 클릭하면 — 아무 일도 안 일어나죠. 페이지가 안 바뀌고, 그대로입니다. 사용자는 “고장났나?”, “내가 잘못 눌렀나?” 하고 혼란스러워합니다. 시각 신호가 거짓말을 한 셈입니다.

그래서 CP-074는 비링크 단계의 밑줄과 hover를 제거하라고 합니다. 그러면 사용자는 그 단계가 ’경로를 보여 주는 텍스트일 뿐 클릭 대상은 아니다’라고 자연스럽게 인지하죠. 헛클릭과 혼란이 사라집니다. 즉 — 링크는 링크처럼, 텍스트는 텍스트처럼 보여야 합니다.

이는 바로 이어지는 CP-075·076의 거울입니다. CP-075·076은 실제 링크 단계에 명도 대비를 충족하는 밑줄과 마우스오버 효과를 줘서 “여긴 클릭됩니다”를 명확히 하라고 하죠. CP-074는 그 반대 — 클릭 안 되는 단계엔 그 신호를 빼라는 것입니다. 두 규칙이 합쳐져 ‘링크/비링크가 시각적으로 명확히 구분되는’ 브레드크럼이 완성됩니다.

참고로 보통 브레드크럼의 마지막 항목(현재 화면)도 링크가 아니므로(CP-070·071 참조), 여기에도 밑줄·hover를 빼는 것이 일반적입니다 — 현재 위치는 클릭할 필요가 없으니까요.

3. 점검 / 개선

무엇을 점검하나

비링크 밑줄 없음 — 링크 없는 단계에 밑줄이 적용되지 않았는가.

비링크 hover 없음 — 마우스를 올려도 색·스타일이 변하지 않는가.

커서 일관성 — 비링크 단계에 마우스를 올렸을 때 손가락(pointer) 커서가 아닌 기본 커서인가.

개선 방향

비링크 단계를 <span>으로 마크업(앵커 <a> 미사용)해 기본적으로 링크 스타일을 안 받게.

CSS에서 비링크 클래스에 text-decoration: none; cursor: default;, hover 시 색 변화 없음 지정.

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

역할	책임
디자이너	링크/비링크 단계의 시각 구분 정의
퍼블리셔/개발	비링크 단계 밑줄·hover·pointer 커서 제거 구현

기관 유형	CP-074 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (브레드크럼에 비링크 단계 존재 시)

CP-073에 따라 비링크 단계를 표시하는 사이트라면 반드시 함께 점검해야 합니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 링크 없는 단계에 밑줄이 없나요?

□ 마우스를 올려도 색·스타일이 변하지 않나요?

□ 비링크 단계에서 커서가 손가락 모양이 아닌 기본 커서인가요?

❓ FAQ

Q1. 비링크 단계도 강조하고 싶은데 밑줄을 못 쓰나요? 밑줄·hover는 ’링크 신호’라 오해를 부릅니다. 강조가 필요하면 굵기·색 등 링크와 다른 방식으로 하되, 클릭되는 것처럼 보이지 않게 합니다. Q2. 현재 화면(마지막 항목)도 해당되나요? 보통 마지막 항목은 링크가 아니므로 동일하게 밑줄·hover를 빼는 것이 일반적입니다. Q3. 그럼 링크 단계는 어떻게 하나요? 반대로 명도 대비를 충족하는 밑줄과 마우스오버 효과를 줍니다 — 바로 다음 편 CP-075·076입니다.

6. 마무리

CP-074의 메시지:

클릭 안 되면 클릭처럼 보이지 마라 — 비링크 단계엔 밑줄·마우스오버를 빼라.

밑줄과 hover는 웹에서 ’링크’의 시각 신호입니다. 클릭 안 되는 단계에 이를 주면 사용자가 링크로 오인해 헛클릭하고 혼란스러워하죠. 비링크는 이 신호를 빼서 ’텍스트일 뿐’임을 분명히 합니다. 다음 편부터는 반대로 — 실제 링크 단계를 명확히 보이게 하는 규칙입니다.

다음 편 예고 ▶ 「195. (CP-075) 텍스트 아래에 명도 대비 기준을 충족하는 밑줄을 사용하고 있다.」

ViewCheck는 브레드크럼의 비링크 단계에 링크 시각효과가 잘못 적용됐는지를 진단합니다.

📚 참고 출처

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

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

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