밑줄은 ’누를 수 있다’는 약속이다

KRDS DS-042 — 글자 밑줄을 텍스트 링크에만 사용하고, 강조하는 부분에서 사용하지 않고 있다.

0. 들어가며 — 타이포그래피의 마침표

타이포그래피 16개 규칙(027~042)의 마지막입니다. 그리고 이 마지막 규칙은 작지만 중요한 약속에 관한 것입니다 — 밑줄(underline)의 용도.

DS-042는 밑줄을 텍스트 링크에만 쓰고, 강조에는 쓰지 말라고 규정합니다. 무언가를 강조하고 싶을 때 밑줄을 긋는 건 흔한 습관인데, 왜 하지 말라고 할까요? 답은 하나 — 밑줄은 ’여기를 누를 수 있다’는 약속 이기 때문입니다. 그 약속을 강조용으로 남용하면, 사용자가 누를 수 없는 것을 링크로 착각합니다. 이번 편은 밑줄이라는 작은 신호를 지키는 절제의 의미를 풀어내며, 타이포그래피를 마무리합니다.

1. 규칙 원문 — 밑줄의 전용 용도

DS-042 (디자인 스타일 > 타이포그래피) “글자 밑줄을 ① 텍스트 링크에만 사용하고, ② 강조하는 부분에서 사용하지 않고 있다.”

① “텍스트 링크에만 사용”

밑줄은 링크를 표시하는 데만 쓰라는 뜻입니다. 본문 속 클릭 가능한 텍스트 링크에 밑줄을 긋는 것이죠.

② “강조하는 부분에서 사용하지 않고”

강조하고 싶은 단어·문구에는 밑줄을 쓰지 말라는 뜻입니다. 강조는 두께(Bold)나 색으로 하되, 밑줄로는 하지 말라는 것이죠.

정리: 밑줄은 링크 전용 — 강조에는 쓰지 말라. 이게 DS-042입니다.

2. 왜 밑줄은 링크 전용인가 — 신호의 일관성

밑줄을 링크에만 써야 하는 이유는 ‘신호의 일관성’ 입니다.

웹에서 밑줄은 오랫동안 ’링크’를 뜻하는 관습적 신호였습니다. 사용자는 밑줄 친 텍스트를 보면 ’아, 누를 수 있구나’라고 학습되어 있죠. 이 학습된 약속이 일관되게 지켜지면, 사용자는 밑줄만 보고도 링크를 즉시 알아 봅니다. 별도 설명 없이도요.

그런데 강조하려고 밑줄을 쓰면 이 약속이 깨집니다. 누를 수 없는 강조 단어에 밑줄이 있으면, 사용자는 그걸 링크로 착각해 누르려 합니다. 눌러도 아무 일이 없으면 “왜 안 되지?” 하고 혼란스러워하죠. 반대로 정말 링크인데 밑줄이 강조용처럼 보이면, 링크인지 강조인지 헷갈립니다. 밑줄이 ‘링크’와 ’강조’ 두 의미로 쓰이면, 어느 쪽도 명확하지 않게 됩니다.

그래서 밑줄은 한 가지 의미(‘링크’)만 갖게 해야 합니다. 이는 색상에서 본 원리와 같습니다 — System 색을 그 의미에만 쓰라고 했듯(빨강=위험만), 밑줄도 그 의미(링크)에만 써야 신호가 명확합니다. 신호는 한 가지 의미를 일관되게 가질 때 강력합니다.

3. 그럼 강조는 어떻게 — 밑줄 말고 다른 도구로

“밑줄로 강조하지 말라면, 강조는 어떻게?” 강조 도구는 밑줄 말고도 많습니다(이 시리즈 내내 본 것처럼).

두께(Bold) — 강조의 가장 기본 도구(30편). 굵게 하면 강조됩니다.

색 — 강조색(point 등)으로(41편). 단, 색만으로는 색약자 못 봄(6편).

크기 — 더 크게(37편).

배경 강조 — 형광펜처럼 배경색을 입히기(highlight).

강조에는 이런 도구를 쓰고, 밑줄은 링크에 남겨두면 됩니다. 특히 Bold가 강조의 표준 도구입니다 — 밑줄 없이 굵게만 해도 충분히 강조되고, 링크와 혼동되지 않죠. 밑줄을 빼앗긴다고 강조를 못 하는 게 아니라, 더 적절한 도구로 강조하게 되는 것입니다.

이는 6편(색약)·8편(강조)에서 본 “여러 강조 도구가 있다”는 원리의 연장입니다. 강조 수단은 다양하므로, 밑줄이라는 한 도구를 링크 전용으로 비워둬도 강조에는 전혀 지장이 없습니다. 오히려 각 신호가 한 가지 의미를 가져 화면이 더 명확해집니다.

4. 링크에는 밑줄이 ’필요’하다 — 6편과의 연결

DS-042의 또 다른 면은, 밑줄을 강조에서 빼는 것만이 아니라 링크에는 밑줄을 주는 것이기도 합니다.

6편(색약)에서 봤듯, 본문 속 링크를 색만으로 표시하면 색약자·흑백 환경에서 링크를 못 알아봅니다. 그래서 링크에는 색 + 밑줄을 함께 줘야 하죠. DS-042가 ‘밑줄을 링크에만’이라고 한 것은, 역으로 ’링크에는 밑줄을’ 이라는 의미도 담습니다. 밑줄이 링크 전용이 되면, 링크는 밑줄로 확실히 식별되고, 사용자는 색을 못 봐도 밑줄로 링크를 압니다.

즉 DS-042는 밑줄을 ’링크의 전용 식별 신호’로 확립합니다. 강조에서 빼고 링크에 집중함으로써, 밑줄이 링크를 가리키는 명확하고 일관된 신호가 되는 것이죠. 이는 색약 대응(6편)과 신호 일관성을 동시에 달성하는 영리한 절제입니다. 작은 밑줄 하나의 용도를 명확히 하는 것이, 링크 식별과 접근성을 함께 챙깁니다.

5. 흔한 위반 패턴 / 점검 / 개선

흔한 위반 패턴

함정 ① 강조에 밑줄. 강조 단어에 밑줄 → 링크로 오인. → Bold·색으로 강조. 함정 ② 링크에 밑줄 없음. 링크를 색만으로 → 색약자 못 알아봄. → 링크에 밑줄. 함정 ③ 밑줄 혼용. 밑줄이 링크·강조 둘 다 → 신호 모호. → 링크 전용으로. 함정 ④ 제목에 밑줄 장식. 제목을 밑줄로 꾸밈 → 링크 오인. → 밑줄 제거.

무엇을 점검하나

밑줄 용도 — 밑줄이 링크에만 쓰였는가.

강조 도구 — 강조에 밑줄 대신 Bold·색이 쓰였는가.

링크 밑줄 — 본문 링크에 밑줄이 있는가(6편).

신호 일관성 — 밑줄이 ’링크’라는 한 의미만 갖는가.

Before / After

/* ❌ Before: 강조에 밑줄, 링크엔 색만 */ .emphasis { text-decoration: underline; } /* 강조 — 링크 오인 */ a { color: blue; text-decoration: none; } /* 링크 — 색약자 못 봄 */ /* ✅ After: 강조는 Bold, 밑줄은 링크 전용 */ .emphasis { font-weight: 700; } /* 강조는 Bold */ a { color: var(--primary-60); text-decoration: underline; /* 링크에 밑줄 */ }

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

역할	책임
디자이너	밑줄은 링크에만, 강조는 다른 도구로 설계
퍼블리셔/개발	링크에 밑줄, 강조에 Bold·색 구현

기관 유형	DS-042 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수

링크·강조가 있는 모든 사이트 = 해당.

7. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 밑줄을 링크에만 쓰나요?

□ 강조를 밑줄이 아니라 Bold·색으로 하나요?

□ 본문 링크에 밑줄이 있나요(색약 대응)?

□ 누를 수 없는 텍스트에 밑줄이 없나요?

□ 밑줄이 ’링크’라는 한 의미만 갖나요?

❓ FAQ

Q1. 강조하려고 밑줄을 긋는 게 습관인데요? 밑줄은 ’링크’를 뜻하는 신호라, 강조에 쓰면 사용자가 링크로 착각합니다. 강조는 Bold나 색으로 하세요. 밑줄을 강조에서 빼면 화면 신호가 명확해집니다.

Q2. 링크에 밑줄이 답답해 보이는데 빼도 되나요? 본문 속 링크는 밑줄을 권장합니다(6편). 색만으로는 색약자·흑백에서 못 알아봅니다. 메뉴·버튼처럼 위치·형태로 명백한 링크는 밑줄이 없어도 되지만, 문장 안 링크는 밑줄이 안전합니다.

Q3. 밑줄 말고 다른 장식(점선 등)은요? 점선 밑줄 등도 링크나 특정 의미와 혼동될 수 있으니 신중해야 합니다. 강조는 Bold·색처럼 명확한 도구를 쓰고, 밑줄류 장식은 절제하세요.

Q4. 제목에 밑줄 장식을 넣고 싶어요. 제목에 밑줄을 넣으면 링크로 오인될 수 있습니다. 제목 강조는 크기·두께로, 구분이 필요하면 밑줄 대신 여백이나 구분선(별도 요소)을 쓰세요.

Q5. hover 시 밑줄을 추가하는 건요? 링크에 hover 시 밑줄을 강화하는 것은 좋은 방식입니다(상태 표현, 26편). 핵심은 밑줄이 ’링크’와 연결되는 것이지, 강조에 쓰지 않는 것입니다.

8. 마무리 — 타이포그래피 16편을 마치며

DS-042의 메시지로 타이포그래피를 닫습니다.

밑줄은 ’누를 수 있다’는 약속이다 — 그 약속을 강조용으로 흩뜨리지 말고, 링크 전용으로 지켜라.

작은 밑줄 하나도 일관된 신호로 지킬 때 가장 강력합니다. 밑줄을 링크에만 쓰면, 사용자는 밑줄로 링크를 즉시 알아보고, 색약자도 링크를 식별합니다. 강조는 Bold·색이라는 더 적절한 도구가 담당하죠. 신호를 한 가지 의미로 지키는 절제 — 이는 System 색을 그 의미에만 쓴 것(13편)과 같은 원리입니다.

여기까지 타이포그래피 16개 규칙(027~042) 을 모두 마쳤습니다. 글꼴(Pretendard GOV·고딕)에서 시작해 두께·줄간격·크기·계층·색·밑줄까지, 글자를 ‘읽히게’ 만드는 모든 요소를 다뤘습니다. 색상(26편)에 이어 타이포그래피(16편)까지, 디자인 스타일의 ‘기본 재료’ 두 축이 정리됐습니다.

다음 편부터는 디자인 스타일의 세 번째 분류, 형태(8개 규칙) 로 넘어갑니다. DS-043 — “레디어스를 컴포넌트의 사이즈 기준 5단계로 구성한다.” 모서리의 둥글기(border-radius)를 체계화하는 이야기입니다.

다음 편 예고 ▶ 「043. 레디어스를 컴포넌트의 사이즈 기준 5단계로 구성하고 있다.」

우리 사이트의 밑줄 사용이 올바른지 확인하려면? ViewCheck는 밑줄이 링크에만 쓰였는지, 강조에 밑줄이 오용되지 않았는지, 링크에 밑줄이 있어 색약자도 식별 가능한지를 진단합니다.

📚 참고 출처

KRDS 서체(Typography) 스타일 가이드 — https://www.krds.go.kr/html/site/style/style_03.html

WCAG 2.1 Understanding 1.4.1 Use of Color — https://www.w3.org/WAI/WCAG21/Understanding/use-of-color.html

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

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