누를 만한 크기로

KRDS CP-264 — 링크를 적절한 크기로 제공하고 있다.

0. 들어가며 — 너무 작은 링크는 못 누른다

이번 384편은 링크를 적절한 크기로 제공하라는 규칙입니다.

링크(특히 독립적으로 클릭하는 링크·버튼형 링크)가 너무 작으면 — 마우스로도 겨냥하기 어렵고, 특히 모바일 터치 에서 정확히 누르기 힘들죠. 작은 링크가 다닥다닥 붙어 있으면 옆 링크를 잘못 누르기도 합니다. CP-264는 링크를 충분히 누를 만한 크기로 제공하라고 규정합니다. 페이지네이션 크기(CP-131), 탭 바(CP-134), 캐러셀(CP-217) 정신이죠. 이번 편을 풀어냅니다.

1. 규칙 원문 — 적절한 크기

CP-264 (컴포넌트 > 링크) “링크를 적절한 크기로 제공하고 있다.”

링크(특히 독립 클릭 대상)를 마우스·터치로 쉽게 누를 수 있는 적절한 크기·터치 영역으로 제공하라는 뜻입니다.

정리: 링크를 누를 만한 적절한 크기로 제공하라. 이게 CP-264입니다.

2. 왜 적절한 크기여야 하나

링크는 클릭/터치 대상입니다. 이를 정확히 누를 수 있어야 — 사용자가 원하는 곳으로 이동하죠. 링크가 너무 작으면 — 타깃 크기 문제(피츠의 법칙)로 누르기 어려워집니다(페이지네이션 CP-131, 탭 바 CP-134, 캐러셀 CP-217에서 반복).

작은 링크의 문제:

겨냥 어려움 — 작은 링크는 마우스로도 정확히 겨냥하기 번거롭습니다. 여러 번 시도하거나 빗나가죠.

모바일 터치 실패 — 특히 모바일 터치는 손가락 접촉면이 넓어(약 9~10mm), 작은 링크를 정확히 누르기 어렵 습니다. 작은 텍스트 링크들이 붙어 있으면 옆 링크를 잘못 누르기 쉽죠.

운동 장애 사용자 — 손 떨림 등으로 정밀한 조작이 어려운 사용자는 작은 타깃을 더욱 못 누릅니다.

그래서 CP-264는 링크를 적절한 크기로 제공하라고 합니다. 웹 접근성의 타깃 크기 기준(WCAG SC 2.5.5/ 2.5.8, 보통 최소 24×24~44×44px)이 기준이죠:

충분한 클릭/터치 영역 — 링크 텍스트가 작아도 클릭 영역(패딩 포함)을 충분히 키우면 누르기 쉬워집니다. 특히 버튼형 링크·메뉴 링크는 충분한 크기·패딩으로.

링크 간 간격 — 인접 링크 사이에 충분한 간격을 둬 옆 링크 오클릭 방지(브레드크럼 링크 간격 CP-082 정신).

모바일 고려 — 모바일에서 특히 충분한 크기·간격.

인라인 링크는 좀 다르다. 한 가지 — 본문 속 인라인 링크는 주변 본문과 같은 크기(CP-254)라, 본문 글자 크기 자체가 작으면 인라인 링크도 작죠. 하지만 인라인 링크는 — 문장 흐름 속에 있어 맥락으로 위치를 알고, 보통 한 줄에 하나씩이라 옆 링크 오클릭 위험이 적습니다. 그래서 인라인 링크의 ’크기’는 본문 크기를 따르되, 독립 적으로 배치된 링크·버튼형 링크(메뉴, CTA, 목록 행동 링크 등)는 충분한 타깃 크기를 확보하는 게 CP-264의 주 초점이죠. WCAG 타깃 크기 기준도 인라인 텍스트 링크에는 예외를 두기도 합니다.

크기와 위계. 링크 크기는 — 위계(CP-255)와도 연결됩니다. 주요 링크(CTA)는 크고 강조되게, 보조 링크는 작게. 단 보조 링크도 ‘너무 작아 못 누를’ 정도는 안 되죠 — 위계상 작더라도 최소 타깃 크기는 지킵니다.

이 규칙은 링크의 ’물리적 사용성’을 담당합니다 — 키보드 접근(CP-261)이 키보드 사용자를 위한 것이라면, 적절한 크기(264)는 마우스·터치 사용자, 특히 운동 장애·모바일 사용자를 위한 것이죠. 함께 링크를 모든 입력 환경에서 쓰게 합니다.

정리하면 — 링크는 클릭/터치 대상이므로, 독립 링크·버튼형 링크를 충분한 타깃 크기·간격으로 제공해 마우스·터치 모두에서 쉽게 누르게 해야 합니다(인라인 링크는 본문 크기 기준).

3. 점검 / 개선

무엇을 점검하나

타깃 크기 — 독립·버튼형 링크의 클릭/터치 영역이 충분히 큰가(최소 권장 크기).

링크 간 간격 — 인접 링크 사이 간격이 충분해 오클릭이 없는가.

모바일 — 모바일 터치에서 정확히 누를 수 있는가.

개선 방향

독립·버튼형 링크에 충분한 패딩으로 클릭/터치 영역 확보. 링크 간 간격.

모바일 타깃 크기 점검. 위계상 작은 링크도 최소 크기 유지.

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

역할	책임
디자이너	링크 크기·터치 영역·간격 정의
퍼블리셔/개발	타깃 크기·간격 구현

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

특히 모바일 지원 사이트에서 중요합니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 독립·버튼형 링크의 클릭/터치 영역이 충분히 큰가요?

□ 인접 링크 사이 간격이 충분해 오클릭이 없나요?

□ 모바일 터치에서 정확히 누를 수 있나요?

❓ FAQ

Q1. 본문 인라인 링크도 키워야 하나요? 인라인 링크는 본문 크기를 따릅니다(CP-254). CP-264의 주 초점은 독립·버튼형 링크의 타깃 크기죠. Q2. 텍스트가 작은 링크는요? 텍스트는 작아도 클릭 영역(패딩)을 키우면 누르기 쉬워집니다. Q3. 보조 링크는 작아도 되나요? 위계상 작더라도 너무 작아 못 누를 정도는 안 됩니다. 최소 타깃 크기는 지켜야죠.

6. 마무리

CP-264의 메시지:

누를 만한 크기로 — 링크를 적절한 타깃 크기로 제공하라.

링크가 너무 작으면 겨냥이 어렵고, 특히 모바일 터치·운동 장애 사용자가 못 누릅니다. 독립·버튼형 링크에 충분한 크기·터치 영역·간격을 줘 쉽게 누르게 하죠(인라인은 본문 크기 기준). 다음 편은 링크 그룹의 마지막 — 스크린 리더 링크 인지입니다.

다음 편 예고 ▶ 「385. (CP-265) 링크로 작동하는 모든 요소는 스크린 리더에서 링크로 인지될 수 있도록 하고 있다.」

ViewCheck는 링크가 적절한 크기로 제공되는지를 진단합니다.

📚 참고 출처

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

WCAG 2.2 SC 2.5.8 Target Size (Minimum) — https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html

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

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