링크끼리 붙으면 잘못 누른다

KRDS CP-082 — 브레드크럼 경로 링크 간 간격을 충분히 제공하고 있다.

0. 들어가며 — 손가락이 두 개를 한 번에 누르지 않게

이번 202편은 브레드크럼 경로 링크들 사이에 충분한 간격을 두라는 규칙입니다.

“홈 > 정책 > 보도자료” 의 각 링크가 서로 너무 붙어 있으면, 마우스나 손가락이 옆 링크를 잘못 누르기 쉽습니다. 특히 모바일에서 손가락 터치는 정밀하지 않아, 링크가 다닥다닥 붙으면 의도와 다른 곳으로 이동하죠. CP-082는 링크 사이(구분자 포함)에 충분한 간격을 두어 정확한 조작을 보장합니다. 이번 편을 풀어냅니다.

1. 규칙 원문 — 링크 간 충분한 간격

CP-082 (컴포넌트 > 브레드크럼) “브레드크럼 경로 링크 간 간격을 충분히 제공하고 있다.”

브레드크럼의 각 경로 링크(와 구분자) 사이에 여백을 충분히 두어, 인접 링크를 잘못 누르지 않게 하라는 뜻입니다.

정리: 경로 링크끼리 충분히 띄워라. 붙어 있어 오클릭 나지 않게 하라. 이게 CP-082입니다.

2. 왜 간격이 필요한가

이 규칙은 두 가지 사용성 원리에 닿아 있습니다 — 타깃 정확도와 시각적 분리.

타깃 정확도 측면. 클릭/터치 대상이 작고 서로 붙어 있으면 오조작이 늘어납니다(피츠의 법칙 대상이 작고 멀수록, 또 인접 대상과 가까울수록 정확히 누르기 어렵다). 브레드크럼 링크는 보통 텍스트라 크지 않은데, 그마저 서로 바짝 붙으면 “정책”을 누르려다 옆의 “보도자료”를 누르는 일이 생기죠. 특히 모바일 터치는 손가락 접촉면이 넓어(약 9~10mm) 정밀도가 낮습니다. KWCAG·WCAG의 ‘타깃 크기’ 기준(충분한 터치 영역, 보통 44×44px 권장)도 이런 맥락입니다 링크 자체의 클릭 영역과 그 사이 여백이 충분해야 손가락이 하나만 정확히 누릅니다.

시각적 분리 측면. 간격은 오조작 방지뿐 아니라 가독성에도 기여합니다. 링크와 구분자(>)가 적절히 띄워져 있으면 “홈 / > / 정책 / > / 보도자료” 의 각 단위가 또렷이 구분되어 경로가 한눈에 읽히죠. 반대로 다 붙어 있으면 “홈>정책>보도자료” 처럼 뭉쳐 보여 단계 구분이 흐려집니다. 적절한 간격은 각 경로 단계를 ’독립된 단위’로 인지하게 합니다.

그래서 CP-082는 링크 사이(그리고 링크와 구분자 사이)에 충분한 여백을 두라고 합니다. 구체적으로는 좌우 패딩/마진을 통해 각 링크의 클릭 영역을 넓히고, 인접 링크와의 거리를 확보하죠. 디자인 토큰의 간격 체계(8pt 그리드 등, DS 레이아웃 편 참조)를 따르면 일관된 간격이 보장됩니다. 너무 좁아 오클릭이 나거나, 단계가 뭉쳐 보이면 위반입니다.

연결해서 — 이 규칙은 CP-076(hover로 링크 인지)·CP-075(밑줄 가시성)와 함께 ‘링크를 정확히 인지하고 정확히 누르게’ 하는 사용성 묶음을 이룹니다. 보이는 것(밑줄·hover)과 누르는 것(간격)이 함께 충족돼야 링크가 제 역할을 하죠.

3. 점검 / 개선

무엇을 점검하나

링크 간 여백 — 인접 링크(구분자 포함) 사이가 충분히 띄워졌는가.

터치 영역 — 모바일에서 각 링크의 터치 영역이 충분한가(오클릭 방지).

시각 분리 — 단계들이 뭉치지 않고 또렷이 구분되는가.

개선 방향

각 링크에 좌우 패딩/마진 부여(예: 8pt 그리드 기반 간격 토큰).

모바일에서 링크 클릭 영역 확대(상하 패딩 포함)로 터치 정확도 확보.

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

역할	책임
디자이너	링크·구분자 간 간격(토큰) 정의
퍼블리셔/개발	패딩·마진·터치 영역 구현

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

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 경로 링크들 사이가 충분히 띄워져 있나요?

□ 모바일에서 옆 링크를 잘못 누르지 않을 만한 터치 영역인가요?

□ 단계들이 뭉쳐 보이지 않고 또렷이 구분되나요?

❓ FAQ

Q1. 간격이 얼마면 충분한가요? 정해진 절댓값보다 ‘오클릭이 안 나고 단계가 또렷이 구분되는’ 수준이 기준 입니다. 8pt 그리드 등 간격 토큰을 따르면 일관됩니다. Q2. 데스크톱은 마우스라 괜찮지 않나요? 마우스도 작고 붙은 링크는 잘못 누릅니다. 게다가 같은 페이지가 모바일에서도 쓰이므로 간격은 공통으로 확보합니다. Q3. 구분자(>)도 간격에 포함되나요? 네. 링크-구분자-링크 사이 모두 적절히 띄워야 경로가 또렷합니다.

6. 마무리

CP-082의 메시지:

링크끼리 붙으면 잘못 누른다 — 경로 링크 간 간격을 충분히 둔다.

링크가 다닥다닥 붙으면 오클릭이 나고 단계 구분도 흐려집니다. 특히 모바일 터치는 정밀도가 낮죠. 링크 사이에 충분한 여백과 터치 영역을 두면 정확히 누르고 경로도 또렷이 읽힙니다. 다음 편은 브레드크럼의 역할 한계 — 메인/사이드 메뉴 대체 금지입니다.

다음 편 예고 ▶ 「203. (CP-083) 브레드크럼으로 메인 메뉴나 사이드 메뉴를 대체하여 사용하고 있지 않다.」

ViewCheck는 브레드크럼 경로 링크 간 간격과 터치 영역이 충분한지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 브레드크럼(Breadcrumb) 가이드 — https://www.krds.go.kr/html/site/component/component_07.html

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

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