늘 제목 위 왼쪽에

KRDS CP-081 — 브레드크럼은 항상 본문 제목의 왼쪽 상단에 표시하고 있다.

0. 들어가며 — 찾으러 가지 않아도 거기 있어야

이번 201편은 브레드크럼을 항상 본문 제목의 왼쪽 상단에 두라는 규칙입니다.

브레드크럼이 어떤 페이지는 제목 위에, 어떤 페이지는 오른쪽에, 또 어떤 페이지는 본문 한복판에 있으면 사용자는 매번 ‘내 위치 정보가 어디 있더라’ 하고 찾아야 하죠. CP-081은 위치를 본문 제목 왼쪽 상단으로 고정해, 어느 페이지든 같은 자리에서 경로를 보게 합니다. 이번 편을 풀어냅니다.

1. 규칙 원문 — 본문 제목 왼쪽 상단

CP-081 (컴포넌트 > 브레드크럼) “브레드크럼은 항상 본문 제목의 왼쪽 상단에 표시하고 있다.”

브레드크럼을 본문 제목(<h1>)의 바로 위, 왼쪽 정렬 위치에 두고, 모든 페이지에서 이 위치를 일관되게 유지하라는 뜻입니다.

정리: 브레드크럼은 늘 본문 제목 위·왼쪽에. 페이지마다 위치가 바뀌면 안 된다. 이게 CP-081입니다.

2. 왜 위치를 고정하나

내비게이션 요소의 가치는 예측 가능성에서 나옵니다. 사용자가 ’내 위치를 알고 싶다’고 생각했을 때, 시선을 어디로 둘지 이미 알고 있어야 0.5초 만에 경로를 읽죠. 그런데 브레드크럼 위치가 페이지마다 다르면, 사용자는 매번 화면을 훑어 브레드크럼을 찾는 추가 작업을 해야 합니다. 보조 내비게이션이 오히려 부담이 되는 거죠.

왜 하필 본문 제목 왼쪽 상단일까요? 두 가지 이유입니다. 첫째, 읽기 흐름입니다. 한국어·영어 등은 위 →아래, 왼→오로 읽습니다. 사용자가 콘텐츠 영역에 시선을 두는 첫 지점이 좌측 상단이죠. 경로(브레드크럼)를 먼저 보고 바로 아래 제목(현재 위치)을 읽는 ‘맥락 → 본문’ 순서가 자연스럽습니다. 둘째, 제목과의 짝입니다. CP-072에서 봤듯 브레드크럼(경로)과 본문 제목(현재)은 한 쌍입니다 — 둘이 위아래로 붙어 있어야 ’경로 + 현재 = 내 위치’가 완성되죠. 그래서 제목 바로 위, 같은 왼쪽 정렬선에 둡니다.

이 위치 고정은 사이트 전체 일관성의 문제이기도 합니다. 목록 페이지든 상세 페이지든 정책 페이지든, 브레드 크럼이 늘 같은 자리에 있으면 사용자는 한 번 학습한 패턴을 모든 페이지에 적용합니다. “위치 정보는 제목 위 왼쪽” 이라는 규칙이 몸에 배면, 더는 찾을 필요가 없죠. 디자인 시스템 관점에서 이는 페이지 템플릿(레이아웃 공통 영역)에 브레드크럼 슬롯을 못 박아 두는 것으로 보장됩니다.

연결 규칙도 정리해 둡니다 — CP-072(브레드크럼과 제목 사이에 다른 요소 없음)는 ‘둘 사이 간섭 금지’, CP-081은 ‘그 묶음을 제목 위 왼쪽에 고정’입니다. 둘이 합쳐져 ’브레드크럼-제목’ 묶음이 일관된 자리에 깔끔하게 놓이죠. 오른쪽 정렬, 중앙 정렬, 본문 중간 삽입 등은 모두 이 규칙 위반입니다.

3. 점검 / 개선

무엇을 점검하나

위치 고정 — 모든 페이지에서 브레드크럼이 본문 제목 위·왼쪽에 있는가.

정렬 — 왼쪽 정렬이며 제목과 같은 정렬선을 공유하는가.

일관성 — 페이지 유형(목록/상세/정책 등)에 관계없이 동일 위치인가.

개선 방향

공통 페이지 템플릿(레이아웃)에 브레드크럼 슬롯을 제목 위 고정 배치.

개별 페이지에서 위치를 임의 변경하지 못하게 컴포넌트화.

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

역할	책임
디자이너	브레드크럼 고정 위치(제목 위 왼쪽) 정의
퍼블리셔/개발	공통 템플릿에 위치 못 박기, 일관성 보장

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

여러 페이지 유형을 가진 모든 사이트가 해당됩니다(일관성 핵심).

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 브레드크럼이 본문 제목 바로 위·왼쪽에 있나요?

□ 모든 페이지 유형에서 같은 위치인가요?

□ 오른쪽·중앙·본문 중간에 놓이지 않았나요?

❓ FAQ

Q1. 디자인상 오른쪽에 두면 안 되나요? 읽기 흐름(좌상단 시작)과 제목과의 짝 때문에 왼쪽 상단이 표준입니다. 오른쪽 정렬은 위반입니다. Q2. 페이지마다 위치가 조금 달라도 되나요? 안 됩니다. 일관성이 핵심이라 모든 페이지에서 같은 자리여야 사용자가 찾지 않습니다. Q3. 모바일에서도 같은가요? 위치 원칙(제목 위 왼쪽)은 동일하며, 표시 항목은 CP-084에 따라 축약됩니다.

6. 마무리

CP-081의 메시지:

늘 제목 위 왼쪽에 — 브레드크럼 위치를 고정해 예측 가능하게.

내비게이션은 예측 가능할 때 빛납니다. 브레드크럼을 본문 제목 위 왼쪽에 고정하면, 읽기 흐름에 맞고 제목과 짝을 이루며, 모든 페이지에서 사용자가 찾지 않아도 경로를 봅니다. 위치가 흔들리면 보조 내비게이션이 부담이 되죠. 다음 편은 경로 링크 사이의 간격입니다.

다음 편 예고 ▶ 「202. (CP-082) 브레드크럼 경로 링크 간 간격을 충분히 제공하고 있다.」

ViewCheck는 브레드크럼이 본문 제목 왼쪽 상단에 일관되게 배치됐는지를 진단합니다.

📚 참고 출처

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

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

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