본문 속 링크는 본문과 같은 크기로

KRDS CP-254 — 링크가 인라인으로 사용될 때 링크 텍스트를 주변 텍스트와 동일한 크기로 제공하고 있다.

0. 들어가며 — 링크 그룹의 첫 규칙

이번 374편부터 링크(Link) 그룹(CP-254~265, 12개)으로 들어갑니다. 첫 규칙은 인라인 링크의 텍스트를 주변 텍스트와 동일한 크기로 제공하라는 내용이죠.

링크는 웹의 가장 기본 요소입니다 — 클릭하면 다른 곳으로 이동하죠. 본문 문장 속에 링크가 끼어 있는 ’인라인 링크’는, 그 글자 크기가 주변 본문과 같아야 자연스럽게 읽힙니다. 링크만 크거나 작으면 문장 흐름이 깨지죠. CP-254는 인라인 링크의 크기 일치를 규정합니다. 이번 편을 풀어냅니다.

1. 규칙 원문 — 인라인 링크 주변과 동일 크기

CP-254 (컴포넌트 > 링크) “링크가 인라인으로 사용될 때 링크 텍스트를 주변 텍스트와 동일한 크기로 제공하고 있다.”

본문 문장 속에 들어간 인라인 링크의 글자 크기를 주변 본문 텍스트와 같게 해, 문장이 자연스럽게 읽히게 하라는 뜻입니다.

정리: 인라인 링크는 주변 본문과 같은 글자 크기로 제공하라. 이게 CP-254입니다.

2. 왜 동일 크기여야 하나

링크는 사용 위치에 따라 두 종류로 나눌 수 있습니다 — 인라인 링크(본문 문장 속에 끼인 링크)와 독립 링크 (버튼·메뉴처럼 별도로 존재하는 링크). 이 중 인라인 링크는 — 본문 문장의 일부로 흐름 속에서 읽히죠. 예를 들어 “자세한 내용은 신청 안내를 참고하세요”에서 ’신청 안내’가 인라인 링크입니다.

왜 본문과 같은 크기인가:

읽기 흐름 유지 — 인라인 링크는 문장의 일부라, 주변 글자와 크기가 같아야 한 문장으로 자연스럽게 읽힙니다. 링크만 크거나 작으면 — 그 부분에서 글자 크기가 튀어 읽기 흐름이 끊기고, 줄 높이(line-height)가 들쭉날쭉해져 문단이 어수선해지죠. 같은 크기면 링크가 문장에 매끄럽게 녹아듭니다.

링크는 다른 방식으로 구분 ’링크임을 표시’하려고 크기를 키울 필요가 없습니다. 링크는 밑줄·색 등 다른 시각 단서로 구분하죠(CP-256 색만이 아닌 단서). 크기로 구분하면 오히려 읽기를 방해합니다. 크기는 주변과 맞추고, 링크 구분은 밑줄·색으로 하는 게 맞죠.

시각적 위계 혼란 방지 — 글자 크기는 보통 ’중요도·위계’를 표현합니다(제목 크게, 본문 작게). 본문 속 인라인 링크를 크게 하면 — 그 링크가 본문보다 더 중요한 것처럼 잘못 보이죠. 인라인 링크는 본문의 일부이므로 같은 위계(크기)여야 합니다.

구현. 인라인 링크(<a>)는 — 별도 크기 지정 없이 부모 텍스트의 크기를 상속받게 두면 자연히 같은 크기가 됩니다. 디자인상 링크를 키우거나 줄이는 스타일을 피하죠. 링크 구분은 밑줄(text-decoration)·링크색으로 합니다.

독립 링크는 다르다. 이 규칙은 ’인라인’으로 한정합니다 — 본문 문장 속 링크요. 버튼형 링크, 메뉴 링크, 독립적으로 배치된 링크는 — 그 맥락에 맞는 크기를 가질 수 있죠(버튼은 적절한 크기 CP-264, 메뉴는 메뉴 크기). 이들은 문장 흐름의 일부가 아니라 독립 요소라, 위계·역할에 맞는 크기를 갖습니다(CP-255의 위계 구분). 인라인 링크만 ’주변과 동일’이 적용되죠.

이 규칙은 링크의 ’시각적 자연스러움’을 담당합니다 — 인라인 링크가 본문에 녹아들되(254), 색만이 아닌 단서로 구분되고(256), 적절한 크기(264)를 가지며, 위계가 구분되게(255) 하죠. 링크 그룹의 시각 표현 규칙들의 하나 입니다.

정리하면 — 인라인 링크는 본문 문장의 일부이므로 주변 텍스트와 같은 크기로 제공해 읽기 흐름을 유지하고, 링크 구분은 크기가 아닌 밑줄·색으로 해야 합니다.

3. 점검 / 개선

무엇을 점검하나

크기 일치 — 인라인 링크가 주변 본문과 같은 글자 크기인가.

흐름 유지 — 링크 부분에서 글자 크기가 튀어 읽기 흐름이 끊기지 않는가.

구분 방식 — 링크 구분이 크기가 아닌 밑줄·색으로 되는가(CP-256).

개선 방향

인라인 링크에 별도 크기 지정 제거(부모 크기 상속). 링크 구분은 밑줄·색으로.

독립 링크(버튼·메뉴)는 맥락·위계에 맞는 크기(CP-255·264).

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

역할	책임
디자이너	인라인 링크 크기·구분 스타일 정의
퍼블리셔/개발	크기 상속·링크 스타일 구현

기관 유형	CP-254 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (인라인 링크 사용 시)

본문에 인라인 링크를 쓰는 모든 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 인라인 링크가 주변 본문과 같은 글자 크기인가요?

□ 링크 부분에서 글자 크기가 튀어 읽기 흐름이 끊기지 않나요?

□ 링크 구분이 크기가 아닌 밑줄·색으로 되나요?

❓ FAQ

Q1. 링크를 크게 해서 눈에 띄게 하면 안 되나요? 본문 속 인라인 링크는 같은 크기여야 자연스럽습니다. 구분은 밑줄·색으로 하죠(CP-256). Q2. 버튼 링크도 본문과 같은 크기인가요? 아닙니다. 이 규칙은 인라인(본문 속) 링크만입니다. 버튼·메뉴 링크는 맥락·위계에 맞는 크기를 갖죠(CP-255·264). Q3. 크기를 어떻게 맞추나요? 인라인 링크에 별도 크기 지정 없이 부모 텍스트 크기를 상속받게 둡니다.

6. 마무리

CP-254의 메시지:

본문 속 링크는 본문과 같은 크기로 — 인라인 링크를 주변 텍스트와 동일 크기로 제공하라.

인라인 링크는 본문 문장의 일부라, 주변과 같은 크기여야 읽기 흐름이 유지됩니다. 링크 구분은 크기가 아닌 밑줄· 색으로 하죠. 독립 링크(버튼·메뉴)는 맥락에 맞는 크기를 갖고요. 다음 편은 링크 위계 구분입니다.

다음 편 예고 ▶ 「375. (CP-255) 링크와 관련된 사용자 과업, 플로(Flow)의 중요도에 따라 위계를 명확하게 구분하고 있다.」

ViewCheck는 인라인 링크가 주변 텍스트와 동일한 크기인지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 링크(Link) 가이드 — https://www.krds.go.kr/html/site/component/component_24.html

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

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