링크 사이의 작은 선

KRDS CP-021 — 유틸리티 링크 그룹을 디바이더로 구분하여 표현하고 있다.

0. 들어가며 — 붙어 있는 링크들을 나누기

이번 141편은 유틸리티 링크 그룹을 디바이더로 구분하는 규칙입니다.

유틸리티 링크는 로그인·회원가입·언어 변경 등 여러 개가 우측 상단에 모여 있습니다(140편). 이들이 아무 구분 없이 붙어 있으면 어디까지가 한 링크인지 헷갈리죠. CP-021은 링크들 사이에 디바이더(구분선)를 두어 명확히 나누라고 규정합니다. 이번 편을 풀어냅니다.

1. 규칙 원문 — 디바이더로 구분

CP-021 (컴포넌트 > 헤더) “유틸리티 링크 그룹을 디바이더로 구분하여 표현하고 있다.”

여러 유틸리티 링크 사이에 디바이더(구분선)를 넣어 각 링크를 명확히 구분하라는 뜻입니다.

정리: 유틸리티 링크 그룹을 디바이더로 구분하여 표현하라. 이게 CP-021입니다.

2. 디바이더란, 왜 필요한가

디바이더(divider)는 요소 사이를 나누는 가느다란 구분선입니다. 흔히 유틸리티 링크 사이에 세로 막대(|) 형태로 들어가죠 — “로그인 | 회원가입 | 언어” 처럼요.

왜 필요할까요? 여러 텍스트 링크가 가로로 나란히 붙어 있으면, 시각적으로 어디까지가 한 링크이고 어디서 다음 링크가 시작하는지 모호합니다. 특히 링크 텍스트가 짧거나 간격이 좁으면 “로그인회원가입언어”처럼 한 덩어리로 읽힐 수 있죠. 디바이더는 링크 사이에 명확한 경계를 만들어, 각 링크가 독립된 항목임을 시각적으로 알립니다.

이는 게슈탈트 원리의 ’근접성·분리’와 관련됩니다 — 가까이 붙은 것은 한 그룹으로 보이고, 구분선이 있으면 별개로 인식되죠. 디바이더는 적은 공간으로 효율적으로 링크들을 구분하는 장치입니다. 간격(여백)만으로 구분할 수도 있지만, 좁은 헤더 공간에서는 디바이더가 더 명확하고 공간 효율적입니다.

주의할 점은, 디바이더는 장식이자 구분 보조일 뿐 의미 있는 콘텐츠가 아니라는 것입니다. 그래서 스크린리더 가 디바이더(|)를 일일이 읽지 않도록, CSS 배경·가상요소(::before)나 aria-hidden으로 처리하는 것이 접근성 측면에서 좋습니다. 텍스트 | 문자를 그대로 넣으면 스크린리더가 “막대” “버티컬 바” 등으로 읽어 오히려 방해될 수 있죠. 시각적으로는 구분선, 스크린리더에는 무시되게 하는 것이 모범입니다.

3. 점검 / 개선

무엇을 점검하나

디바이더 존재 — 유틸리티 링크 사이에 구분선이 있는가.

명확한 구분 — 각 링크가 독립 항목으로 보이는가.

접근성 처리 — 디바이더가 스크린리더에 불필요하게 읽히지 않는가.

Before / After

<!-- ✅ CSS 디바이더 (스크린리더 무시) --> <ul class="utility"> <li><a href="/login">로그인</a></li> <li><a href="/join">회원가입</a></li> <!-- li 사이 CSS border-left로 디바이더 --> </ul>

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

역할	책임
디자이너	유틸리티 링크 디바이더 디자인
퍼블리셔/개발	CSS 디바이더 구현(스크린리더 무시 처리)

기관 유형	CP-021 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (유틸리티 링크가 여럿일 때)

유틸리티 링크가 여러 개인 사이트 = 해당.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 유틸리티 링크 사이에 디바이더(구분선)가 있나요?

□ 각 링크가 독립 항목으로 명확히 보이나요?

□ 디바이더가 스크린리더에 불필요하게 읽히지 않나요?

❓ FAQ

Q1. 디바이더가 꼭 세로선이어야 하나요? 일반적으로 세로 구분선(|)이지만, 형태보다 ’명확히 구분’이 핵심 입니다. 표준 스타일을 따르면 됩니다. Q2. 텍스트 | 문자를 쓰면 안 되나요? 시각적으론 되지만 스크린리더가 읽어 방해될 수 있어, CSS로 처리하는 것이 권장됩니다. Q3. KRDS를 채택하면 자동인가요? 표준 유틸리티 그룹은 디바이더로 구분돼 제공됩니다.

6. 마무리

CP-021의 메시지:

링크 사이의 작은 선 — 디바이더가 붙어 있는 링크들을 독립 항목으로 나눈다.

여러 유틸리티 링크가 붙어 있으면 구분이 모호하므로, 디바이더로 경계를 만들어 각 링크를 독립 항목으로 보이게 합니다. 좁은 헤더 공간에서 효율적인 구분 장치죠. 단, 스크린리더에는 무시되게 처리하는 것이 접근성 모범입니다.

다음 편은 유틸리티가 많을 때의 드롭다운을 다룹니다. CP-022 — “유틸리티 링크가 5개 이상이면 드롭다운 메뉴를 사용한다.”

다음 편 예고 ▶ 「142. (CP-022) 유틸리티 링크가 5개 이상 필요한 경우 드롭다운 메뉴를 사용하여 제공하고 있다.」

ViewCheck는 유틸리티 링크 그룹이 디바이더로 구분되는지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 헤더(Header) 가이드 — https://www.krds.go.kr/html/site/component/component_03.html

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

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