헤더 링크도 또렷이

KRDS DS-110 — 선명한 화면 모드에서 헤더의 유틸리티 링크에 윤곽선 또는 배경색을 표시하고 있다.

0. 들어가며 — 헤더의 유틸리티 링크

이번 110편은 선명한 화면 모드에서 헤더의 유틸리티 링크(로그인·회원가입·검색·언어 변경 등 상단 보조 링크)에 윤곽선 또는 배경색을 표시하는 규칙입니다.

헤더 상단의 작은 유틸리티 링크들은 일반 모드에서도 크기가 작아 잘 안 보일 수 있습니다. 선명한 화면 모드 (저시력 사용자)에서는 더욱 그렇죠. DS-110은 이 링크들에 윤곽선이나 배경색을 더해 또렷이 보이게 하라고 규정합니다. 이번 편은 헤더 유틸리티 링크의 가시성 강화를 풀어냅니다.

1. 규칙 원문 — 윤곽선/배경색

DS-110 (디자인 스타일 > 선명한 화면 모드) “선명한 화면 모드에서 헤더의 유틸리티 링크에 윤곽선 또는 배경색을 표시하고 있다.”

선명한 화면 모드에서 헤더의 유틸리티 링크에 테두리나 배경색을 더해 또렷이 표시하라는 뜻입니다.

정리: 선명한 화면 모드에서 헤더 유틸리티 링크에 윤곽선·배경색을 더해 가시성을 강화하라. 이게 DS-110입니다.

2. 왜 윤곽선·배경색을 더하나

헤더의 유틸리티 링크(로그인·검색 등)는 보통 작은 텍스트 링크입니다. 일반 모드에서는 색·밑줄로 표시되지만, 선명한 화면 모드의 저시력 사용자에게는 작은 텍스트 링크가 잘 안 보일 수 있죠. 텍스트 대비를 높여도(21편) 작은 링크는 여전히 찾기 어렵습니다.

그래서 윤곽선(테두리)이나 배경색을 더하면, 링크가 ‘버튼처럼’ 명확한 영역을 가져 또렷이 보입니다. 작은 텍스트보다 영역(박스)이 인지하기 쉽죠. 이는 22·23편(입력칸을 대비·두께로 명확히)과 같은 원리입니다 — 중요한 상호작용 요소를 박스 형태로 명확히 해 가시성을 높이는 것이죠. 특히 헤더 링크는 로그인·검색처럼 자주 쓰는 기능이라, 저시력 사용자가 쉽게 찾을 수 있어야 합니다.

이는 선명한 화면 모드가 ’대비 강화’를 넘어 ’요소 형태 강화’까지 한다는 것을 보여줍니다. 글자 대비(21편), 입력칸 두께(23편), 그리고 헤더 링크의 윤곽선·배경(110편) — 모두 저시력 사용자가 요소를 쉽게 인지하도록 형태를 보강하는 것이죠. 색만이 아니라 형태로도 가시성을 높이는, 다중 채널 강화(6편·13편) 원리입니다.

3. 점검 / 개선

무엇을 점검하나

윤곽선·배경 — 선명한 화면 모드에서 헤더 유틸 링크에 테두리·배경이 있는가.

가시성 — 저시력 사용자가 헤더 링크를 쉽게 찾을 수 있는가.

Before / After

/* ✅ 선명모드 헤더 유틸 링크 윤곽선/배경 */ [data-mode="high-contrast"] .header-util-link { border: 2px solid var(--gray-5); /* 윤곽선 */ /* 또는 background: ... */ }

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

역할	책임
디자이너	선명모드 헤더 링크 윤곽선·배경 설계
퍼블리셔/개발	모드별 헤더 링크 스타일 구현

기관 유형	DS-110 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (선명모드 제공 시)

선명한 화면 모드를 제공하고 헤더 유틸 링크가 있는 사이트 = 해당.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 선명모드에서 헤더 유틸 링크에 윤곽선·배경이 있나요?

□ 저시력 사용자가 헤더 링크를 쉽게 찾나요?

□ 작은 텍스트 링크가 묻히지 않나요?

❓ FAQ

Q1. 윤곽선과 배경 중 뭘 쓰나요? 둘 중 하나면 됩니다. 링크가 명확한 영역(박스)을 갖게 하는 것이 핵심 입니다. 디자인에 맞게 선택하세요. Q2. 일반 모드에도 적용하나요? DS-110은 선명한 화면 모드에 적용됩니다. 일반 모드는 색·밑줄로 충분할 수 있으나, 선명모드는 형태 강화가 필요합니다. Q3. KRDS를 채택하면 자동인가요? KRDS 헤더 컴포넌트는 선명모드에서 유틸 링크 가시성을 강화합니다.

6. 마무리

DS-110의 메시지:

헤더 유틸 링크도 또렷이 — 선명모드에선 윤곽선·배경으로 형태를 보강한다.

작은 헤더 링크는 선명한 화면 모드의 저시력 사용자에게 잘 안 보일 수 있어, 윤곽선·배경으로 명확한 영역을 만들어 가시성을 높입니다. 색만이 아니라 형태로 강화하는 다중 채널 원리죠.

다음 편은 푸터 링크를 다룹니다. DS-111 — “선명한 화면 모드에서 푸터 내 모든 링크에 밑줄을 표시한다.”

다음 편 예고 ▶ 「111. 선명한 화면 모드에서 푸터 내 모든 링크에 밑줄을 표시하고 있다.」

ViewCheck는 선명한 화면 모드에서 헤더 유틸 링크에 윤곽선·배경이 표시되는지를 진단합니다.

📚 참고 출처

KRDS 선명한 화면 모드 가이드 — https://www.krds.go.kr/html/site/style/style_02.html

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

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