빵 부스러기의 시작은 집

KRDS CP-069 — 브레드크럼 목록의 가장 첫 번째 항목으로 메인 화면 링크를 제공하고 있다.

0. 들어가며 — 브레드크럼이란

이번 189편부터는 브레드크럼(Breadcrumb) 그룹 20개(CP-069~088)입니다. CP에서 두 번째로 큰 그룹이죠.

브레드크럼은 “홈 > 정책정보 > 보도자료 > 현재 페이지”처럼 현재 위치까지의 경로를 보여주는 내비게이션 입니다. 동화 ’헨젤과 그레텔’에서 길을 찾으려 떨어뜨린 빵 부스러기(breadcrumb)에서 유래했죠. 사용자가 ’내가 어디 있고, 어떻게 여기 왔는지’를 알게 합니다. 그 첫 규칙 CP-069는 브레드크럼의 첫 항목으로 메인 화면 링크 를 두라고 규정합니다. 이번 편을 풀어냅니다.

1. 규칙 원문 — 첫 항목은 메인 링크

CP-069 (컴포넌트 > 브레드크럼) “브레드크럼 목록의 가장 첫 번째 항목으로 메인 화면 링크를 제공하고 있다.”

브레드크럼 경로의 맨 앞(첫 항목)에 메인 페이지(홈)로 가는 링크를 두라는 뜻입니다.

정리: 브레드크럼 첫 항목으로 메인 화면 링크를 제공하라. 이게 CP-069입니다.

2. 왜 첫 항목이 메인 링크인가

브레드크럼은 ’현재 위치까지의 경로’를 계층 순서대로 보여줍니다 — 홈(최상위) → 대분류 → 중분류 → … → 현재 페이지. 이 경로의 출발점은 항상 메인 화면(홈) 입니다. 사이트의 모든 페이지는 결국 홈에서 뻗어 나온 가지 이므로, 경로의 시작은 홈이죠.

그래서 브레드크럼의 첫 항목은 메인 화면(홈)으로 가는 링크여야 합니다. 이유는 두 가지입니다.

① 경로의 기준점입니다. 홈이 첫 항목에 있어야 사용자가 ’전체 사이트 구조 안에서 내가 어디쯤 있는지’를 파악합니다. “홈 > … > 현재”의 형태로, 홈을 기준으로 현재 위치까지의 깊이와 경로가 한눈에 보이죠. 홈이 없으면 경로의 출발점이 모호해집니다.

② 홈으로 가는 빠른 길입니다. 첫 항목이 ‘홈 링크’면, 사용자는 깊은 하위 페이지에서도 그 링크를 눌러 즉시 홈으로 돌아갈 수 있습니다. 헤더 로고도 홈 링크지만(CP-031), 브레드크럼 첫 항목도 홈 링크라 사용자에게 또 하나의 명확한 ’처음으로’ 통로가 되죠.

표현은 보통 “홈” 또는 홈 아이콘(집 모양)입니다. 텍스트 “홈”이 명확하고, 아이콘을 쓰면 대체 텍스트로 “홈”을 제공해야 하죠(CP-024 원리). 핵심은 사용자가 ’여기를 누르면 메인으로 간다’를 알 수 있어야 한다는 것입니다.

CP-069는 브레드크럼의 시작점을 정합니다 — 첫 항목은 홈. 다음 편들(CP-070·071)에서 브레드크럼의 끝(마지막 항목)을 어떻게 처리할지 다루죠. 시작(홈 링크)과 끝(상위 화면 경로)의 규칙이 함께 브레드크럼의 양 끝을 정의합니다. 브레드크럼은 ’홈에서 현재까지의 경로’라는 일관된 형식으로, 사용자의 위치 인식과 이동을 돕는 컴포넌트입니다.

3. 점검 / 개선

무엇을 점검하나

첫 항목 홈 — 브레드크럼 첫 항목이 메인 화면(홈) 링크인가.

링크 작동 — 누르면 메인 페이지로 가는가.

명확성 — “홈” 또는 명확한 홈 아이콘(+대체 텍스트)인가.

Before / After

<!-- ✅ 첫 항목 홈 링크 --> <nav aria-label="브레드크럼"> <ol> <li><a href="/">홈</a></li> <li><a href="/policy">정책정보</a></li> <li>보도자료</li> </ol> </nav>

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

역할	책임
퍼블리셔/개발	브레드크럼 첫 항목에 홈 링크 구현

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

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 브레드크럼 첫 항목이 메인 화면(홈) 링크인가요?

□ 누르면 메인 페이지로 가나요?

□ “홈” 또는 명확한 홈 아이콘인가요?

❓ FAQ

Q1. 브레드크럼이 뭔가요? “홈 > 정책 > 현재”처럼 현재 위치까지의 경로를 보여주는 내비게이션입니다. 위치 파악과 상위 이동을 돕습니다. Q2. 홈 아이콘만 써도 되나요? 됩니다. 단 대체 텍스트로 “홈”을 제공해 스크린리더가 읽게 해야 합니다. Q3. KRDS를 채택하면 자동인가요? 표준 브레드크럼은 첫 항목에 홈 링크를 제공합니다.

6. 마무리

CP-069의 메시지:

빵 부스러기의 시작은 집 — 브레드크럼 첫 항목은 언제나 홈 링크.

브레드크럼은 ’홈에서 현재까지의 경로’라, 첫 항목은 항상 메인 화면(홈) 링크입니다. 경로의 기준점이자 홈으로 가는 빠른 길이죠. 시작(홈)과 끝(상위 경로) 규칙이 브레드크럼의 양 끝을 정의합니다.

다음 편은 브레드크럼의 마지막 항목을 다룹니다. CP-070 — “브레드크럼 마지막 항목은 현재 화면의 상위 화면 링크를 제공한다.”

다음 편 예고 ▶ 「190. (CP-070) 브레드크럼 목록의 가장 마지막 항목은 현재 화면의 상위 화면 링크를 제공 하고 있다.」

ViewCheck는 브레드크럼 첫 항목이 메인 화면 링크인지를 진단합니다.

📚 참고 출처

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

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

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