경로와 제목은 붙어 있어야

KRDS CP-072 — 브레드크럼과 본문 제목 사이에 다른 요소가 존재하지 않게 사용하고 있다.

0. 들어가며 — 짝은 붙어 있어야

이번 192편은 브레드크럼과 본문 제목 사이에 다른 요소가 없게 하는 규칙입니다.

브레드크럼(상위 경로)과 본문 제목(현재 위치)은 함께 ’내가 어디 있는지’를 전달하는 짝입니다(CP-070·071). 이 둘이 붙어 있어야 사용자가 경로-위치를 자연스럽게 연결해 읽죠. CP-072는 둘 사이에 다른 요소가 끼지 않게 하라고 규정합니다. 이번 편을 풀어냅니다.

1. 규칙 원문 — 사이에 다른 요소 없음

CP-072 (컴포넌트 > 브레드크럼) “브레드크럼과 본문 제목 사이에 다른 요소가 존재하지 않게 사용하고 있다.”

브레드크럼과 본문 제목을 바로 붙여 배치하고, 그 사이에 다른 요소를 끼우지 말라는 뜻입니다.

정리: 브레드크럼과 본문 제목 사이에 다른 요소가 존재하지 않게 하라. 이게 CP-072입니다.

2. 왜 붙어 있어야 하나

KRDS 브레드크럼 구조에서 브레드크럼(상위 경로)과 본문 제목(현재 위치)은 한 쌍입니다 — 브레드크럼이 “홈 > 정책 > 보도자료”로 경로를 보여주고, 바로 아래 본문 제목 <h1>이 “○○ 보도자료 제목”으로 현재 위치를 보여 주죠. 이 둘을 함께 읽어야 ’아, 나는 정책 > 보도자료 안의 이 글에 있구나’가 완성됩니다.

그래서 이 둘은 시각적·구조적으로 붙어 있어야 합니다. 브레드크럼 바로 아래(또는 인접)에 본문 제목이 와야, 사용자가 경로와 제목을 하나의 ’위치 정보 묶음’으로 인지하죠(게슈탈트 근접성). 둘이 가까이 있으면 “경로 + 현재 = 내 위치”가 자연스럽게 연결됩니다.

문제는 이 둘 사이에 다른 요소가 끼는 경우입니다 — 예: 브레드크럼과 본문 제목 사이에 배너, 광고, 공유 버튼, 날짜, 부가 정보 등이 들어가는 것이죠. 그러면 경로(브레드크럼)와 위치(제목)가 시각적으로 분리되어, 사용자가 둘을 연결해 읽기 어렵습니다. “홈 > 정책 > 보도자료” 다음에 엉뚱한 요소가 나오고 한참 뒤에 제목이 나오면, 경로-제목의 짝이 깨지죠. 위치 정보의 흐름이 끊깁니다.

CP-072는 이를 막아 — 브레드크럼 바로 다음에 본문 제목이 오게 합니다. 그 사이엔 아무것도 끼지 않죠. 그러면 사용자는 경로를 보고 바로 이어서 현재 제목을 읽어, 위치를 즉시 파악합니다. 부가 요소(공유·날짜 등)는 제목 아래나 다른 위치로 보내야 하죠.

이는 ‘관련 정보는 인접하게’(근접성 원리, 레이아웃 편)의 적용입니다 — 경로와 제목은 의미상 한 묶음이라 붙여야 하고, 무관한 요소로 분리하면 안 됩니다. 브레드크럼-본문 제목의 인접 배치는 KRDS 브레드크럼 구조(CP-070·071) 가 제대로 작동하기 위한 전제이고, CP-081(브레드크럼은 본문 제목 왼쪽 상단)과도 연결됩니다.

3. 점검 / 개선

무엇을 점검하나

인접 배치 — 브레드크럼 바로 다음에 본문 제목이 오는가.

사이 요소 없음 — 둘 사이에 배너·버튼·부가 정보가 끼지 않았는가.

묶음 인지 — 경로-제목이 하나의 위치 정보로 읽히는가.

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

역할	책임
디자이너	브레드크럼-본문 제목 인접 배치 설계
퍼블리셔/개발	둘 사이 요소 배제 구현

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

브레드크럼을 사용하는 사이트 = 해당.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 브레드크럼 바로 다음에 본문 제목이 오나요?

□ 둘 사이에 배너·버튼·부가 정보가 끼지 않았나요?

□ 경로-제목이 하나의 위치 정보로 읽히나요?

❓ FAQ

Q1. 공유 버튼·날짜는 어디 두나요? 본문 제목 아래나 다른 위치로 보냅니다. 브레드크럼과 제목 사이엔 두지 않습니다. Q2. 왜 붙여야 하나요? 경로(브레드크럼)와 위치(제목)는 한 묶음이라, 붙어 있어야 사용자가 연결해 읽습니다. 무관한 요소가 끼면 흐름이 끊깁니다. Q3. KRDS를 채택하면 자동인가요? 표준 레이아웃은 브레드크럼-본문 제목을 인접 배치합니다.

6. 마무리

CP-072의 메시지:

경로와 제목은 붙어 있어야 — 브레드크럼과 본문 제목 사이엔 아무것도 끼지 않는다.

브레드크럼(경로)과 본문 제목(현재)은 ‘위치 정보’ 한 묶음이라, 바로 붙여야 사용자가 연결해 읽습니다. 사이에 배너·버튼이 끼면 경로-제목의 짝이 깨지죠. 근접성 원리의 적용이고, KRDS 브레드크럼 구조의 전제입니다.

다음 편은 링크 없는 계층의 표시를 다룹니다. CP-073 — “전체 계층 구조 중 연결되는 링크가 없는 메뉴도 표시 한다.”

다음 편 예고 ▶ 「193. (CP-073) 전체 계층 구조 중 연결되는 링크가 없는 메뉴도 표시하고 있다.」

ViewCheck는 브레드크럼과 본문 제목 사이에 다른 요소가 없는지를 진단합니다.

📚 참고 출처

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

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

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