깊으면 중간을 접어라

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

0. 들어가며 — 200편, 깊은 경로를 한 줄로

이번 200편은 경로가 5개 이상이면 메인 다음 수준의 계층을 말줄임표로 접어 브레드크럼을 한 줄로 유지하라는 규칙입니다. 시리즈 200편을 이 규칙으로 맞습니다.

CP-078에서 ’최대 4개’를 봤다면, CP-080은 그 4개를 어떻게 만드느냐의 구체 방법입니다. 경로가 깊어 5단계, 6단계가 되면 — “홈 > A > B > C > D > 현재” — 다 보여줄 수 없으니, 중간 단계를 말줄임표(…)로 접어 “홈 > … > D > 현재” 처럼 압축하죠. 이번 편을 풀어냅니다.

1. 규칙 원문 — 5개 이상 시 중간 말줄임

CP-080 (컴포넌트 > 브레드크럼) “경로가 5개 이상인 경우, 메인 화면 링크 다음 수준의 계층 구조를 말줄임표로 축약함으로써 브레드크럼이 한 줄로 사용하고 있다.”

경로 단계가 5개 이상으로 깊을 때, 메인(홈) 링크 바로 다음의 중간 계층들을 말줄임표(…)로 합쳐 표시함으로써 브레드크럼을 한 줄로 유지하라는 뜻입니다.

정리: 5단계 이상이면 메인 다음의 중간 계층을 … 로 접어 한 줄을 유지하라. 이게 CP-080입니다.

2. 왜 ’메인 다음 중간’을 접나

브레드크럼이 보여줘야 할 정보의 우선순위는 분명합니다 — 출발점(메인/홈)과 현재 근처(상위 1~2단계와 현재)가 가장 중요하고, 그 사이의 중간 계층은 덜 중요하죠. 사용자가 브레드크럼으로 하는 행동은 보통 두 가지 입니다: (1) 홈으로 한 번에 돌아가기, (2) 바로 위 상위 화면으로 올라가기(CP-070). 둘 다 양 끝에 해당하는 정보고, 중간 단계로 점프하는 경우는 상대적으로 드뭅니다.

그래서 CP-080은 — 5단계 이상으로 깊으면 메인 링크는 살리고(출발점·홈 복귀, CP-069), 현재 근처도 살리되, 그 사이의 중간 계층을 말줄임표 하나로 압축합니다. 예: “홈 > 정책 > 보건 > 건강증진 > 금연사업 > 상세” (6단계) → “홈 > … > 금연사업 > 상세”. 이렇게 하면 가장 중요한 양 끝(홈, 현재 근처)은 유지하면서 한 줄에 들어가죠.

’메인 링크 다음 수준’을 접는다는 표현이 핵심입니다 — 첫 항목(메인/홈)은 항상 보이고(CP-069·078), 그 바로 다음부터 현재 근처 전까지의 중간을 …로 합칩니다. 메인을 접으면 ’홈 복귀’라는 가장 흔한 행동을 못 하게 되니 안 되고, 현재 근처를 접으면 ’바로 위로 가기’가 막히니 안 됩니다. 둘 다 보존하고 가운데만 접는 것이죠.

이상적으로는 그 말줄임표(…) 자체를 클릭/포커스하면 접힌 중간 단계들이 펼쳐지거나(드롭다운), 적어도 스크린 리더가 ‘생략된 항목 있음’을 인지할 수 있게 하는 것이 접근성상 권장됩니다 — 정보가 완전히 사라지는 게 아니라 ’접혀’ 있을 뿐이어야 하니까요. 다만 KRDS 본 규칙의 1차 목표는 ’한 줄 유지’이며, 펼침 상호작용은 구현 품질을 높이는 추가 요소입니다.

CP-079와의 차이를 다시 짚으면 — CP-079는 개수는 적은데(4 이하) 텍스트가 길어 넘칠 때 마지막을 줄이고, CP-080은 개수 자체가 많을 때(5 이상) 중간을 접습니다. 원인(길이 vs 개수)과 대상(마지막 vs 중간)이 다릅니다. 둘이 합쳐져 어떤 깊이·길이의 경로도 한 줄(CP-077)로 수렴시키죠.

3. 점검 / 개선

무엇을 점검하나

5단계 이상 축약 — 깊은 경로에서 중간이 말줄임표로 접히는가.

양 끝 보존 — 메인(홈) 링크와 현재 근처가 유지되는가.

한 줄 결과 — 축약 후 브레드크럼이 실제로 한 줄인가.

(권장) 펼침 — … 가 접힌 단계를 펼치거나 스크린 리더가 생략을 인지하는가.

개선 방향

경로 노드 > 4면 [메인, …, (상위1), 현재] 형태로 렌더링.

… 에 펼침(드롭다운) 또는 aria-label로 생략 안내.

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

역할	책임
디자이너	중간 말줄임·펼침 표현 설계
퍼블리셔/개발	5단계 이상 축약 로직·펼침 상호작용 구현

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

5단계 이상 깊은 메뉴 구조를 가진 사이트에서 필수입니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 경로가 5개 이상일 때 중간이 … 로 축약되나요?

□ 축약 후에도 메인(홈)과 현재 근처는 보이나요?

□ 축약 결과 브레드크럼이 한 줄인가요?

□ (권장) … 를 클릭/포커스하면 생략된 단계를 알 수 있나요?

❓ FAQ

Q1. 왜 중간만 접나요? 사용자는 보통 홈(출발점)이나 바로 위(현재 근처)로 이동합니다. 양 끝이 핵심이고 중간은 덜 쓰이므로 중간을 접습니다. Q2. CP-079와 같이 적용되나요? 상황이 다릅니다. 개수가 5 이상이면 CP-080(중간 축약), 개수는 적은데 길이가 길면 CP-079(마지막 축약)입니다. 둘 다 한 줄 유지가 목표입니다. Q3. 접힌 단계 정보는 영영 못 보나요? 권장 구현에서는 … 를 펼쳐 볼 수 있습니다. 최소한 스크린 리더가 생략을 인지하게 합니다.

6. 마무리

CP-080의 메시지:

깊으면 중간을 접어라 — 5단계 이상은 메인 다음 중간을 … 로 축약해 한 줄로.

깊은 경로를 한 줄로 만들려면 가장 덜 중요한 중간 계층을 접어야 합니다. 출발점(홈)과 현재 근처는 사용자가 실제 이동에 쓰는 핵심이라 보존하고, 가운데만 말줄임표로 압축하죠. CP-079(길이→마지막 축약)와 함께 어떤 경로든 한 줄(CP-077)로 수렴시킵니다. 다음 편은 브레드크럼의 위치 — 본문 제목 왼쪽 상단 배치입니다.

다음 편 예고 ▶ 「201. (CP-081) 브레드크럼은 항상 본문 제목의 왼쪽 상단에 표시하고 있다.」

ViewCheck는 깊은 경로의 중간 말줄임 축약과 한 줄 유지를 진단합니다.

📚 참고 출처

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

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

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