경로는 한 줄로

KRDS CP-077 — 브레드크럼을 단일 행으로 제공하고 있다.

0. 들어가며 — 한 줄이어야 경로다

이번 197편은 브레드크럼을 한 줄(단일 행)로 제공하라는 규칙입니다.

브레드크럼은 “홈 > 정책 > 보도자료 > 상세”처럼 경로를 수평으로 한 줄에 늘어놓는 컴포넌트입니다. 이게 두 줄, 세 줄로 줄바꿈되면 경로가 흐트러져 한눈에 읽기 어렵죠. CP-077은 브레드크럼이 항상 한 줄을 유지하도록 규정합니다. 이후 CP-078~080(개수 제한·축약)은 모두 ’이 한 줄을 어떻게 지키느냐’에 대한 구체 규칙입니다.

1. 규칙 원문 — 단일 행 제공

CP-077 (컴포넌트 > 브레드크럼) “브레드크럼을 단일 행으로 제공하고 있다.”

브레드크럼의 경로 전체(메인 링크부터 현재 위치까지)를 여러 줄로 나누지 말고 한 줄에 표시하라는 뜻입니다.

정리: 브레드크럼은 한 줄로 유지하라. 줄바꿈으로 흐트러지지 않게 하라. 이게 CP-077입니다.

2. 왜 한 줄이어야 하나

브레드크럼의 시각적 본질은 ’수평 경로’입니다 — 왼쪽(상위, 메인)에서 오른쪽(하위, 현재)으로 이어지는 선형 흐름이죠. 사용자는 이 한 줄을 왼→오로 훑으며 “홈에서 출발해 정책을 거쳐 보도자료의 이 글까지 왔구나”를 즉시 읽습니다. 한 줄이기 때문에 경로 전체가 한 번의 시선 이동으로 파악되죠.

그런데 이 경로가 두세 줄로 줄바꿈되면 여러 문제가 생깁니다. 첫째, 선형 흐름이 깨집니다 한 줄을 채우고 다음 줄로 넘어가면, 어디서 끊겨 어디로 이어지는지 시선이 한 번 멈칫하죠. 둘째, 다른 페이지 요소와 혼동될 수 있습니다 두 줄짜리 텍스트 덩어리는 경로가 아니라 본문이나 목록처럼 보일 수 있습니다. 셋째, 레이아웃이 불안정해집니다 페이지마다 경로 길이가 달라 브레드크럼 높이가 들쭉날쭉하면, 그 아래 본문 제목 위치도 흔들립니다.

그래서 CP-077은 브레드크럼을 항상 한 줄로 유지하라고 합니다. 문제는 경로가 길거나 화면이 좁으면 자연히 줄바꿈이 일어난다는 점이죠. 이를 막기 위한 구체 전략이 바로 뒤따르는 규칙들입니다 — CP-078은 ‘최대 4개 링크 표시’로 개수를 제한하고, CP-079·080은 ’줄바꿈이 생기면 마지막 링크 축약’ 또는 ’5개 이상이면 중간을 말줄임’으로 한 줄을 강제하며, CP-084는 ’모바일에선 첫·마지막만 표시’로 좁은 화면에 대응합니다. 즉 CP-077은 목표(한 줄), 나머지는 수단(개수 제한·축약)입니다.

정리하면 — 브레드크럼은 길이와 화면 너비에 관계없이 한 줄을 유지해야 하고, 그러기 위해 개수 제한과 축약 기법을 동원합니다. ’한 줄’이라는 원칙이 흔들리면 브레드크럼은 경로로서의 명료함을 잃습니다.

3. 점검 / 개선

무엇을 점검하나

단일 행 유지 — 다양한 경로 길이에서 브레드크럼이 한 줄을 유지하는가.

줄바꿈 발생 여부 — 긴 경로·좁은 화면에서 두 줄로 넘어가지 않는가.

축약 연동 — 한 줄을 못 지킬 때 축약 규칙(CP-078~080·084)이 작동하는가.

개선 방향

컨테이너에 white-space: nowrap + 오버플로 처리(말줄임/축약)로 한 줄 강제.

경로 개수 제한·말줄임 로직(CP-078~080)과 결합.

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

역할	책임
디자이너	단일 행 레이아웃·축약 규칙 설계
퍼블리셔/개발	nowrap·오버플로·축약 로직 구현

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

브레드크럼을 쓰는 모든 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 브레드크럼이 한 줄로 유지되나요?

□ 경로가 길어도 두 줄로 줄바꿈되지 않나요?

□ 한 줄을 못 지킬 때 축약이 작동하나요?

❓ FAQ

Q1. 경로가 길면 한 줄이 안 되는데요? 그래서 개수 제한(CP-078)과 축약(CP-079·080)이 있습니다. 길어도 한 줄을 유지하도록 중간을 줄입니다. Q2. 모바일에서도 한 줄인가요? 좁은 화면은 CP-084에 따라 첫·마지막 경로만 표시해 한 줄을 지킵니다. Q3. 두 줄로 나오면 큰 문제인가요? 경로의 선형 흐름이 깨지고 레이아웃이 불안정해집니다. 한 줄이 브레드크럼의 기본 형태입니다.

6. 마무리

CP-077의 메시지:

경로는 한 줄로 — 브레드크럼은 단일 행을 유지한다.

브레드크럼은 왼→오 수평 경로라 한 줄일 때 한 번의 시선으로 읽힙니다. 줄바꿈되면 흐름이 깨지고 레이아웃이 흔들리죠. 그래서 개수 제한·축약 기법으로 길이와 화면 너비에 관계없이 한 줄을 강제합니다. 다음 편은 그 첫 수단 — 최대 링크 개수 제한입니다.

다음 편 예고 ▶ 「198. (CP-078) 화면 너비가 충분한 경우 메인 화면 링크를 포함하여 최대 4개의 링크를 표시하고 있다.」

ViewCheck는 브레드크럼이 단일 행을 유지하는지를 진단합니다.

📚 참고 출처

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

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

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