경로는 넷까지

KRDS CP-078 — 화면 너비가 충분한 경우 메인 화면 링크를 포함하여 최대 4개의 링크를 표시하고 있다.

0. 들어가며 — 너무 많으면 경로가 아니라 미로

이번 198편은 화면 너비가 충분할 때 메인 링크 포함 최대 4개의 링크를 표시하라는 규칙입니다.

브레드크럼은 한 줄(CP-077)이어야 합니다. 그러려면 표시하는 링크 개수에 상한이 있어야 하죠. KRDS는 그 상한을 4개(메인 화면 링크 포함)로 정합니다. 경로가 5단계 이상으로 깊으면 중간을 말줄임으로 축약(CP-080)해서라도 4개 수준을 유지하라는 뜻입니다. 이번 편을 풀어냅니다.

1. 규칙 원문 — 최대 4개 링크

CP-078 (컴포넌트 > 브레드크럼) “화면 너비가 충분한 경우 메인 화면 링크를 포함하여 최대 4개의 링크를 표시하고 있다.”

데스크톱 등 화면이 충분히 넓은 환경에서, 브레드크럼에 노출하는 링크를 메인(홈) 링크를 포함해 4개 이내로 유지하라는 뜻입니다.

정리: 넓은 화면에서도 브레드크럼 링크는 메인 포함 최대 4개. 그 이상은 축약하라. 이게 CP-078입니다.

2. 왜 4개로 제한하나

이유는 두 갈래입니다 — 가독성과 레이아웃.

가독성 측면. 브레드크럼은 ’내가 어디 있는지’를 빠르게 알려주는 보조 내비게이션이지, 사이트 구조 전체를 펼쳐 보이는 지도가 아닙니다. 경로가 6단계, 7단계로 길게 나열되면 — “홈 > A > B > C > D > E > 현재” — 사용자는 오히려 어디가 핵심인지 헷갈리고, 긴 줄을 읽는 부담이 커집니다. 사람이 한눈에 처리하는 정보 단위에는 한계가 있어(작업 기억), 4개 정도가 ’한 번에 파악’되는 적정선이죠. 정작 중요한 건 출발점(메인)과 현재 근처 (상위 1~2단계)이고, 중간 단계는 덜 중요합니다.

레이아웃 측면. CP-077에서 본 ‘한 줄’ 원칙을 지키려면 길이를 통제해야 합니다. 링크가 무제한이면 넓은 화면 에서도 한 줄을 넘기기 쉽고, 좁은 화면에선 곧장 줄바꿈되죠. 4개로 상한을 두면 어떤 페이지든 브레드크럼 길이가 예측 가능해지고, 한 줄 유지가 쉬워집니다.

그래서 CP-078은 메인 링크 포함 최대 4개를 기준으로 둡니다. 경로가 4단계 이하면 그대로 다 보여주고, 5단계 이상이면 CP-080에 따라 메인 링크 다음 수준의 계층을 말줄임표(…)로 축약해 4개 수준으로 줄이죠. 예를 들어 “홈 > A > B > C > D > 현재”는 “홈 > … > D > 현재”처럼 압축됩니다 — 출발점, 생략 표시, 상위 1단계, 현재. 사용자에게 가장 중요한 정보(시작과 끝)는 살리고 중간만 접는 것입니다.

’화면 너비가 충분한 경우’라는 단서는 — 데스크톱 기준이라는 뜻입니다. 좁은 모바일에서는 4개도 많아, CP-084에 따라 첫·마지막만(2개) 표시하죠. 즉 넓으면 4개, 좁으면 2개로 단계적 대응을 합니다.

3. 점검 / 개선

무엇을 점검하나

링크 개수 — 넓은 화면에서 메인 포함 4개 이내인가.

5단계 이상 처리 — 깊은 경로에서 중간 말줄임 축약(CP-080)이 작동하는가.

메인 링크 포함 — 첫 항목 메인(홈) 링크가 항상 유지되는가(CP-069).

개선 방향

경로 노드 개수가 4 초과면 메인 다음 단계를 …로 합쳐 렌더링.

반응형 분기: 데스크톱 4개 / 모바일 2개(CP-084).

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

역할	책임
디자이너	최대 개수·축약 표현 설계
퍼블리셔/개발	개수 제한·말줄임 로직, 반응형 분기 구현

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

계층이 깊은(5단계 이상) 사이트에서 특히 중요합니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 넓은 화면에서 링크가 메인 포함 4개 이내인가요?

□ 5단계 이상 경로에서 중간이 말줄임 축약되나요?

□ 첫 항목 메인(홈) 링크가 항상 유지되나요?

❓ FAQ

Q1. 경로가 정확히 4단계면 다 보여주나요? 네. 4개 이하면 그대로 전부 표시합니다. 5개부터 축약합니다. Q2. 어떤 단계를 접나요? 메인 링크 ’다음 수준’의 중간 계층을 말줄임표로 접습니다(CP-080). 출발점(메인)과 현재 근처는 살립니다. Q3. 모바일도 4개인가요? 아닙니다. 좁은 화면은 첫·마지막만 2개로 줄입니다(CP-084).

6. 마무리

CP-078의 메시지:

경로는 넷까지 — 넓은 화면에서도 메인 포함 최대 4개 링크.

브레드크럼은 보조 내비게이션이라 한눈에 읽혀야 하고, 한 줄(CP-077)도 지켜야 합니다. 그래서 링크를 메인 포함 4개로 제한하고, 더 깊으면 중간을 말줄임으로 접습니다. 가장 중요한 시작점과 현재 근처는 살리죠. 다음 편은 ’4개 이내인데도 줄바꿈이 날 때’의 처리입니다.

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

ViewCheck는 브레드크럼 링크 개수가 기준(메인 포함 4개)을 넘는지를 진단합니다.

📚 참고 출처

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

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

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