올리면 반응해야 링크

KRDS CP-076 — 마우스오버 효과를 적용하여 링크로 작동함을 사용자가 명확하게 인지할 수 있게 사용하고 있다.

0. 들어가며 — 반응이 있어야 ‘눌러도 되겠구나’

이번 196편은 브레드크럼 링크에 마우스오버(hover) 효과를 적용해 ’클릭 가능한 링크’임을 명확히 인지시키라는 규칙입니다.

앞 편(CP-075)에서 밑줄로 링크임을 정적으로 알렸다면, 이번엔 동작 신호입니다 — 마우스를 올렸을 때 색이 바뀌거나 밑줄이 진해지는 등의 반응이 있으면, 사용자는 “아, 여기 눌러도 되는구나”를 확신하죠. CP-074(비링크엔 hover 금지)의 정반대 짝으로, 진짜 링크엔 hover 반응을 주라는 것입니다.

1. 규칙 원문 — hover로 링크 작동 인지

CP-076 (컴포넌트 > 브레드크럼) “마우스오버 효과를 적용하여 링크로 작동함을 사용자가 명확하게 인지할 수 있게 사용하고 있다.”

링크 단계에 마우스를 올렸을 때(hover) 시각적 변화 — 색 변화, 밑줄 강조 등 — 를 주어, 그 단계가 클릭 가능한 링크임을 분명히 느끼게 하라는 뜻입니다.

정리: 링크 단계엔 마우스오버 효과를 줘서 ’클릭됩니다’를 명확히 알려라. 이게 CP-076입니다.

2. 왜 마우스오버 효과가 필요한가

이 규칙의 핵심은 어포던스(affordance) — ’UI가 어떻게 작동할지를 사용자에게 암시하는 단서’입니다. 정적 신호(밑줄, 색)만으로는 “정말 눌러도 되나?” 하는 확신이 약할 수 있죠. 그런데 마우스를 올렸을 때 요소가 반응하면, 사용자는 “이건 살아 있는 인터랙티브 요소다 = 클릭된다”를 즉각 인지합니다. 반응은 곧 ’클릭 가능’의 강력한 증거가 됩니다.

브레드크럼은 링크 단계와 비링크 단계(카테고리, 현재 화면)가 섞여 있습니다. 정적 상태에서 둘을 구분했더라도, hover 반응의 유무가 추가 단서를 줍니다 — 올렸을 때 변하는 것은 링크, 변하지 않는 것은 비링크. CP-074에서 비링크의 hover를 뺐기 때문에, CP-076으로 링크에 hover를 주면 둘의 대비가 선명해집니다. 사용자는 마우스를 훑으며 ’어디가 클릭되는지’를 자연스럽게 파악하죠.

마우스오버 효과는 보통 — 텍스트 색 변화(예: 진한 파랑 → 더 진한 파랑), 밑줄 추가/강조, 배경 하이라이트 등으로 구현합니다. 중요한 것은 변화가 눈에 띄게 명확해야 한다는 점입니다. 색이 1~2단계만 미세하게 바뀌어 거의 구분이 안 되면 어포던스 역할을 못 하죠. 동시에 — hover 효과도 변화 전후 모두 명도 대비 기준을 지켜야 합니다 (색 변화로 오히려 대비가 떨어지면 안 됨).

한 가지 주의 — hover는 마우스 사용자에게만 작동합니다. 키보드 사용자에게는 포커스(focus) 상태가 같은 역할을 하므로, hover 효과와 함께 focus 시 동일한(또는 더 강한) 시각 변화를 주는 것이 접근성상 바람직합니다. 터치 기기에는 hover가 없으므로, 정적 밑줄(CP-075)이 기본 어포던스를 담당하죠. 즉 hover는 마우스 환경의 ’추가 확신’이고, 밑줄·focus가 전체를 받칩니다.

3. 점검 / 개선

무엇을 점검하나

hover 반응 존재 — 링크 단계에 마우스를 올리면 시각 변화가 일어나는가.

명확성 — 변화가 눈에 띄게 분명한가(미세한 변화 지양).

focus 동등성 — 키보드 포커스 시에도 같은(또는 더 강한) 시각 변화가 있는가.

개선 방향

CSS :hover와 :focus에 색 변화·밑줄 강조 등 명확한 스타일 지정.

hover 전후 색이 모두 명도 대비 기준을 충족하는지 확인.

비링크 단계엔 hover 효과 미적용 유지(CP-074)로 대비 확보.

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

역할	책임
디자이너	링크 hover·focus 시각 변화 정의
퍼블리셔/개발	:hover/:focus 스타일 구현, 대비 검증

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

브레드크럼에 클릭 가능한 링크 단계가 있는 모든 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 링크 단계에 마우스를 올리면 시각 변화가 일어나나요?

□ 그 변화가 눈에 띄게 명확한가요(미세하지 않은가요)?

□ 키보드 포커스 시에도 동일한 시각 변화가 있나요?

❓ FAQ

Q1. 밑줄(CP-075)이 있는데 hover까지 꼭 필요한가요? 밑줄은 정적 신호, hover는 동작 신호입니다. 둘이 합쳐지면 링크임을 더 확실히 전달하고, 비링크와의 대비도 선명해집니다. Q2. hover는 터치·키보드에서 안 되는데요? 맞습니다. 그래서 정적 밑줄(터치)과 focus 스타일(키보드)이 함께 어포던스를 받칩니다. hover는 마우스 환경의 추가 확신입니다. Q3. 색만 살짝 바꾸면 되나요? 변화가 너무 미세하면 인지가 안 됩니다. 명확히 보이게 하되, 변화 전후 모두 명도 대비 기준을 지켜야 합니다.

6. 마무리

CP-076의 메시지:

올리면 반응해야 링크 — 마우스오버 효과로 ’클릭됩니다’를 명확히 인지시켜라.

정적 신호(밑줄)에 더해 hover 반응이 있으면, 사용자는 ’여긴 살아 있는 링크’임을 확신합니다. 비링크엔 hover를 빼고(CP-074) 링크엔 hover를 주면 둘의 대비가 선명해지죠. 다만 hover는 마우스 전용이므로, 밑줄과 focus 스타일이 터치·키보드를 함께 받쳐야 합니다. 이로써 브레드크럼의 링크/비링크 시각 구분(CP-073~076) 4편이 마무리됩니다.

다음 편 예고 ▶ 「197. (CP-077) 브레드크럼을 단일 행으로 제공하고 있다.」

ViewCheck는 브레드크럼 링크에 마우스오버·포커스 어포던스가 적용됐는지를 진단합니다.

📚 참고 출처

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

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

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