보조는 보조다

KRDS CP-083 — 브레드크럼으로 메인 메뉴나 사이드 메뉴를 대체하여 사용하고 있지 않다.

0. 들어가며 — 길 안내판이 지도를 대신할 순 없다

이번 203편은 브레드크럼으로 메인 메뉴나 사이드 메뉴를 대체하지 말라는 규칙입니다.

브레드크럼은 ’내가 지금 어디 있는지’를 알려주는 보조 내비게이션입니다. 메인 메뉴(사이트 전체 구조 탐색)나 사이드 메뉴(현재 섹션 내 탐색)와는 역할이 다르죠. 그런데 “브레드크럼이 경로를 보여주니 메뉴는 빼도 되겠지” 하고 메뉴를 없애면 사용자는 길을 잃습니다. CP-083은 이런 대체를 금지합니다. 이번 편을 풀어냅니다.

1. 규칙 원문 — 메뉴 대체 금지

CP-083 (컴포넌트 > 브레드크럼) “브레드크럼으로 메인 메뉴나 사이드 메뉴를 대체하여 사용하고 있지 않다.”

브레드크럼을 메인 메뉴/사이드 메뉴를 대신하는 용도로 쓰지 말고, 각 내비게이션을 본래 역할대로 함께 제공하라는 뜻입니다.

정리: 브레드크럼은 메뉴의 대체재가 아니다. 메인·사이드 메뉴는 별도로 제공하라. 이게 CP-083입니다.

2. 왜 대체하면 안 되나

각 내비게이션은 서로 다른 질문에 답합니다.

메인 메뉴는 “이 사이트에 뭐가 있지? 다른 데로 가려면?”에 답합니다 — 사이트 전체 구조를 펼쳐 보이는 탐색(exploration) 도구죠.

사이드 메뉴는 “지금 이 섹션 안에 또 뭐가 있지?”에 답합니다 — 현재 영역의 형제·하위 항목을 보여주는 국소 탐색 도구입니다.

브레드크럼은 “나 지금 어디 있지? 어떻게 여기 왔지?”에 답합니다 — 현재 위치와 상위 경로만 보여주는 위치 표시(orientation) 도구입니다.

브레드크럼은 위로 거슬러 올라가는 한 줄기 경로만 보여줄 뿐, 사이트의 다른 가지나 같은 섹션의 형제 항목은 보여주지 않습니다. 예를 들어 “홈 > 정책 > 보도자료”에 있을 때, 브레드크럼으론 ‘정책 아래에 보도자료 말고 또 뭐가 있는지’(사이드 메뉴의 역할)나 ‘정책 말고 다른 메뉴’(메인 메뉴의 역할)를 알 수 없죠. 그래서 브레드크럼만 남기고 메뉴를 없애면, 사용자는 현재 경로 외의 어디로도 이동할 수단을 잃습니다 — 뒤로 가는 것만 되고 ‘옆으로’나 ’다른 곳으로’ 가지 못합니다.

게다가 브레드크럼은 의도적으로 간결합니다(최대 4개·한 줄, CP-077·078). 사이트 전체 메뉴를 여기에 욱여 넣으면 그 간결함이 무너지고, 결국 메뉴도 브레드크럼도 제 역할을 못 하죠.

그래서 CP-083은 — 브레드크럼, 메인 메뉴, 사이드 메뉴를 각자 본래 역할로 공존시키라고 합니다. 브레드크럼은 ’위치 표시’에 집중하고, 탐색은 메뉴에 맡깁니다. 셋이 함께 있어야 사용자는 ’내가 어디 있고(브레드크럼), 이 섹션엔 뭐가 있고(사이드), 사이트 전체엔 뭐가 있는지(메인)’를 모두 알고 자유롭게 이동합니다. 어느 하나로 다른 것을 대신하려는 시도가 곧 위반입니다.

3. 점검 / 개선

무엇을 점검하나

메인 메뉴 존재 — 브레드크럼과 별개로 사이트 전체 메인 메뉴가 제공되는가.

사이드 메뉴 존재 — 섹션 내 탐색용 사이드 메뉴가 (필요한 곳에) 제공되는가.

역할 분리 — 브레드크럼이 위치 표시에 한정되고 메뉴 기능을 떠안지 않았는가.

개선 방향

페이지 템플릿에 메인 메뉴·(섹션) 사이드 메뉴·브레드크럼을 각각 배치.

브레드크럼에 형제·하위 항목 나열 같은 메뉴 기능을 넣지 않기.

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

역할	책임
기획/IA	내비게이션 3종 역할 분리 설계
디자이너/개발	메인·사이드 메뉴 + 브레드크럼 공존 구현

기관 유형	CP-083 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수

브레드크럼을 도입하면서 메뉴를 간소화하려는 사이트에서 특히 주의해야 합니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 브레드크럼과 별도로 메인 메뉴가 있나요?

□ 섹션 내 탐색용 사이드 메뉴가 (필요한 곳에) 있나요?

□ 브레드크럼이 위치 표시에만 쓰이고 메뉴 기능을 떠안지 않았나요?

❓ FAQ

Q1. 브레드크럼이 경로를 보여주니 사이드 메뉴는 빼도 되지 않나요? 안 됩니다. 브레드크럼은 위로 가는 경로만 보여주고, 같은 섹션의 형제 항목은 못 보여줍니다. 사이드 메뉴가 그 역할입니다. Q2. 모바일에서 공간이 좁은데요? 메뉴를 햄버거 등으로 접을 수는 있어도 ‘없애는’ 것은 아닙니다. 접근 수단은 유지해야 합니다. Q3. 셋 다 있으면 복잡하지 않나요? 역할이 달라 서로 보완합니다. 각자 간결하게 유지하면 오히려 탐색이 쉬워집니다.

6. 마무리

CP-083의 메시지:

보조는 보조다 — 브레드크럼은 메인·사이드 메뉴를 대신하지 않는다.

브레드크럼은 ’어디 있는지’를 알려주는 위치 표시 도구일 뿐, 사이트 전체 탐색(메인 메뉴)이나 섹션 내 탐색 (사이드 메뉴)을 대신하지 못합니다. 메뉴를 없애고 브레드크럼만 남기면 사용자는 옆·다른 곳으로 갈 수단을 잃죠. 셋을 각자 역할로 공존시켜야 합니다. 다음 편은 모바일에서의 브레드크럼 축약입니다.

다음 편 예고 ▶ 「204. (CP-084) [모바일] 화면 너비가 충분하지 않은 경우 첫 번째 경로와 마지막 경로만 표시하고 있다.」

ViewCheck는 브레드크럼이 메인·사이드 메뉴를 부당하게 대체하지 않는지를 진단합니다.

📚 참고 출처

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

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

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