본문 속 링크도 빠짐없이 밑줄

KRDS DS-113 — 선명한 화면 모드에서 본문에 사용된 모든 인라인 유형의 링크에 밑줄을 표시하고 있다.

0. 들어가며 — 본문 속 링크의 밑줄

이번 113편은 선명한 화면 모드에서 본문의 모든 인라인 링크에 밑줄을 표시하는 규칙입니다.

인라인 링크는 문장 안에 들어간 링크입니다 — “자세한 내용은 여기를 참고하세요”의 ’여기’처럼요. 42편 에서 본문 링크에 밑줄을 권했는데, 선명한 화면 모드에서는 본문의 모든 인라인 링크에 밑줄이 필수입니다. 헤더(110편)·푸터(111편)에 이어 본문 링크까지, 화면 전체의 링크 식별을 강화하는 것이죠. 이번 편은 인라인 링크 밑줄을 풀어냅니다.

1. 규칙 원문 — 인라인 링크 밑줄

DS-113 (디자인 스타일 > 선명한 화면 모드) “선명한 화면 모드에서 본문에 사용된 모든 인라인 유형의 링크에 밑줄을 표시하고 있다.”

선명한 화면 모드에서 본문 문장 안의 모든 링크에 밑줄을 더하라는 뜻입니다.

정리: 선명한 화면 모드에서 본문 인라인 링크에 모두 밑줄을 표시하라. 이게 DS-113입니다.

2. 왜 인라인 링크에 밑줄인가

본문 문장 안의 링크는 특히 식별이 어렵습니다. 메뉴·버튼처럼 위치·형태로 명백히 구분되는 링크와 달리, 인라인 링크는 일반 텍스트 흐름 안에 섞여 있어 색만으로는 ’여기가 링크’임을 알기 어렵죠(42편). 색약자·저시력 사용자에게는 더욱 그렇습니다.

선명한 화면 모드에서 본문의 모든 인라인 링크에 밑줄을 더하면, 일반 텍스트와 링크가 형태로 명확히 구분 됩니다. 밑줄이 있으면 ’이 단어는 누를 수 있는 링크’임이 분명하죠. 이는 6편(색만 의존 금지)·42편(밑줄은 링크)의 원리가 선명한 화면 모드에서 본문 링크에 강하게 적용된 것입니다.

110~113편을 모으면, 선명한 화면 모드에서 화면 전체의 링크 식별이 강화됩니다 — 헤더 유틸 링크(윤곽선·배경, 110), 푸터 링크(밑줄, 111), 컴포넌트·링크(굵게·대비, 112), 본문 인라인 링크(밑줄, 113). 화면 어느 곳의 링크든 저시력 사용자가 명확히 식별하게 하는 것이죠. 링크는 사용자가 다음으로 나아가는 통로라, 모든 링크가 보여야 사용자가 길을 잃지 않습니다.

3. 점검 / 개선

무엇을 점검하나

인라인 링크 밑줄 — 선명모드에서 본문 모든 인라인 링크에 밑줄이 있는가.

식별성 — 본문 속 링크가 일반 텍스트와 구분되는가.

Before / After

/* ✅ 선명모드 본문 인라인 링크 밑줄 */ [data-mode="high-contrast"] .article-body a { text-decoration: underline; }

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

역할	책임
퍼블리셔/개발	선명모드 본문 인라인 링크 밑줄 구현

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

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 선명모드에서 본문 인라인 링크에 밑줄이 있나요?

□ 본문 속 링크가 일반 텍스트와 구분되나요?

□ 색만으로 인라인 링크를 표시하지 않나요?

❓ FAQ

Q1. 일반 모드 본문 링크도 밑줄인가요? 본문 인라인 링크는 일반 모드에서도 밑줄이 권장됩니다(42편). 선명한 화면 모드에서는 모든 인라인 링크에 밑줄이 필수입니다. Q2. 111편(푸터)과 다른가요? 111편은 푸터 링크, 113편은 본문 인라인 링크입니다. 화면 영역별로 링크 식별을 강화하는 것이죠. Q3. KRDS를 채택하면 자동인가요? KRDS는 선명모드에서 본문 링크 밑줄을 적용합니다.

6. 마무리

DS-113의 메시지:

본문 속 링크도 빠짐없이 밑줄 — 텍스트 흐름에 섞인 링크를 명확히 식별되게.

인라인 링크는 일반 텍스트에 섞여 식별이 어려운데, 선명한 화면 모드에서 모든 인라인 링크에 밑줄을 더하면 명확히 구분됩니다. 헤더·푸터·컴포넌트·본문의 링크 식별을 함께 강화하는 것이죠.

다음 편은 흰 배경 제한을 다룹니다. DS-114 — “선명한 화면 모드에서 넓은 면적의 요소에 흰 배경 사용을 제한한다.”

다음 편 예고 ▶ 「114. 선명한 화면 모드에서 넓은 면적의 요소에 흰 배경 색상 사용을 제한하고 있다.」

ViewCheck는 선명한 화면 모드에서 본문 인라인 링크에 밑줄이 표시되는지를 진단합니다.

📚 참고 출처

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

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

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