제목이 길어 넘칠 땐 끝을 줄여라

KRDS CP-079 — 4개 이내의 경로만 표시하고 있음에도 줄바꿈이 발생하는 경우 가장 마지막 링크를 축약하여 사용하고 있다.

0. 들어가며 — 개수가 적어도 글자가 길면 넘친다

이번 199편은 4개 이내인데도 줄바꿈이 생기면 가장 마지막 링크를 축약하라는 규칙입니다.

CP-078에서 링크를 4개 이내로 제한했습니다. 그런데 개수가 적어도 — 각 단계의 이름(텍스트)이 길면 한 줄을 넘길 수 있죠. 예를 들어 “홈 > 정책정보 > 국민건강증진종합계획수립및추진현황보고” 처럼 마지막 항목 제목이 아주 길면, 4개도 안 되는데 줄바꿈이 납니다. CP-079는 이때 마지막 링크를 축약해 한 줄을 지키라고 규정합니다.

1. 규칙 원문 — 줄바꿈 시 마지막 링크 축약

CP-079 (컴포넌트 > 브레드크럼) “4개 이내의 경로만 표시하고 있음에도 줄바꿈이 발생하는 경우 가장 마지막 링크를 축약하여 사용하고 있다.”

링크 개수는 기준(4개 이내)을 지켰지만 텍스트 길이 때문에 줄바꿈이 일어나면, 가장 마지막 링크(현재 위치 근처)의 텍스트를 줄여서 한 줄에 맞추라는 뜻입니다.

정리: 개수가 적어도 길이 때문에 넘치면, 마지막 링크를 말줄임으로 줄여 한 줄을 유지하라. 이게 CP-079입니다.

2. 왜 ‘마지막’ 링크를 줄이나

브레드크럼의 한 줄 원칙(CP-077)을 깨는 요인은 두 가지입니다 — 개수와 길이. CP-078이 개수를 잡았다면, CP-079는 길이를 잡습니다. 단계마다 이름 길이는 천차만별이라, 4개 이하여도 어느 한 단계의 이름이 유난히 길면 한 줄을 넘기죠. 특히 공공 사이트는 부서명·사업명·정책명이 길어(“○○종합계획수립추진단” 등) 이런 일이 잦습니다.

이때 KRDS는 가장 마지막 링크를 줄이라고 합니다. 왜 하필 마지막일까요? 브레드크럼에서 마지막 항목 근처는 ’현재 위치(또는 그 상위)’입니다. 그런데 사용자는 이미 그 페이지에 와 있어서 그곳의 전체 제목을 브레드크럼 에서 다 읽을 필요가 없습니다 — 본문의 <h1> 제목이 전체 이름을 또렷이 보여주니까요(CP-072의 인접 배치). 즉 마지막 링크의 텍스트는 중복 정보에 가까워, 줄여도 정보 손실이 가장 적습니다.

반대로 앞쪽 단계(메인, 상위 카테고리)는 사용자가 ’여기서 어디로 돌아갈 수 있는지’를 판단하는 핵심 단서라 함부로 줄이면 안 되죠. 그래서 줄여야 한다면 정보 가치가 가장 낮은 마지막부터 줄이는 게 합리적입니다. 축약은 보통 말줄임표(…)로 — “…추진현황보고” → “…보고” 식으로 뒤를 자르거나, text-overflow: ellipsis로 일정 너비에서 잘라 “…”를 붙입니다.

주의할 점 — 축약해도 원문 전체를 알 수 있는 수단을 남기는 게 좋습니다. 마우스오버 시 title 속성으로 전체 이름을 보여주거나, 어차피 본문 제목에 전체가 있으니 그것으로 대체되죠. 그리고 이건 ’CP-080(5개 이상일 때 중간 축약)’과 다릅니다 — CP-080은 개수가 많을 때 중간 단계를 접고, CP-079는 개수는 적은데 길이가 길 때 마지막 단계를 줄입니다. 줄이는 대상과 상황이 다르죠.

정리하면 — 한 줄을 못 지키게 하는 원인이 ’길이’라면, 정보 가치가 낮고 본문 제목과 중복되는 마지막 링크부터 줄여 한 줄을 회복합니다.

3. 점검 / 개선

무엇을 점검하나

길이 줄바꿈 대응 — 4개 이하인데도 긴 텍스트로 줄바꿈될 때 축약이 작동하는가.

축약 대상 — 줄이는 것이 ’마지막 링크’인가(앞 단계 보존).

원문 접근 — 축약된 마지막 항목의 전체 이름을 본문 제목·title 등으로 알 수 있는가.

개선 방향

마지막 항목에 max-width + text-overflow: ellipsis + white-space: nowrap 지정.

title 속성으로 전체 텍스트 제공(또는 본문 <h1>이 전체 제목 표시).

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

역할	책임
디자이너	길이 초과 시 마지막 링크 축약 규칙 정의
퍼블리셔/개발	ellipsis·max-width·title 구현

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

긴 정책명·사업명이 마지막 단계에 오는 공공 사이트에서 특히 빈번합니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 링크가 4개 이하인데 긴 텍스트로 줄바꿈되나요? 그럴 때 축약되나요?

□ 줄이는 대상이 마지막 링크인가요(앞 단계는 보존)?

□ 축약된 항목의 전체 이름을 본문 제목·title로 알 수 있나요?

❓ FAQ

Q1. 왜 첫 단계가 아니라 마지막을 줄이나요? 마지막은 현재 위치라 본문 제목과 중복되어 정보 손실이 가장 적습니다. 앞 단계는 돌아갈 경로 단서라 보존합니다. Q2. CP-080(중간 축약)과 뭐가 다른가요? CP-080은 개수가 5개 이상일 때 중간 단계를 접고, CP-079는 개수는 적은데 길이가 길 때 마지막 단계를 줄입니다. Q3. 전체 이름을 못 보면 불편하지 않나요? 본문 <h1>에 전체 제목이 있고, title 속성으로도 제공하므로 정보는 접근 가능합니다.

6. 마무리

CP-079의 메시지:

제목이 길어 넘칠 땐 끝을 줄여라 — 마지막 링크를 축약해 한 줄을 지킨다.

한 줄을 깨는 원인이 ‘개수’가 아니라 ’길이’일 때를 다룹니다. 마지막 링크는 현재 위치라 본문 제목과 중복되어 줄여도 손실이 적죠. 앞 단계는 돌아갈 경로 단서라 보존합니다. 다음 편은 개수가 5개 이상일 때의 ’중간 축약’ 입니다.

다음 편 예고 ▶ 「200. (CP-080) 경로가 5개 이상인 경우, 메인 화면 링크 다음 수준의 계층 구조를 말줄임표로 축약함으로써 브레드크럼이 한 줄로 사용하고 있다.」

ViewCheck는 긴 텍스트로 인한 브레드크럼 줄바꿈과 마지막 링크 축약 적용을 진단합니다.

📚 참고 출처

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

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

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