좁으면 양 끝만

KRDS CP-084 — [모바일] 화면 너비가 충분하지 않은 경우 첫 번째 경로와 마지막 경로만 표시하고 있다.

0. 들어가며 — 작은 화면엔 핵심 두 개만

이번 204편은 모바일처럼 화면이 좁을 때 브레드크럼을 첫 경로와 마지막 경로만 표시하라는 규칙입니다.

데스크톱에선 메인 포함 4개까지 보여줬습니다(CP-078). 하지만 모바일은 너비가 좁아 4개도 한 줄에 안 들어가죠. 그래서 좁은 화면에서는 가장 중요한 양 끝 — 첫 번째 경로(메인/홈)와 마지막 경로(현재 근처) 만 남기고 나머지는 축약합니다. 데스크톱 4개 → 모바일 2개로 단계적 대응하는 것이죠. 이번 편을 풀어냅니다.

1. 규칙 원문 — 모바일은 첫·마지막만

CP-084 (컴포넌트 > 브레드크럼) [모바일] “화면 너비가 충분하지 않은 경우 첫 번째 경로와 마지막 경로만 표시하고 있다.”

모바일 등 좁은 화면에서는 브레드크럼의 첫 경로(메인/홈)와 마지막 경로(현재 근처) 만 노출하고, 중간은 생략(말줄임 등)해 한 줄을 유지하라는 뜻입니다.

정리: 좁은 화면에선 양 끝(첫·마지막)만 표시하라. 이게 CP-084입니다.

2. 왜 양 끝만 남기나

브레드크럼의 한 줄 원칙(CP-077)은 화면 너비와 무관하게 지켜야 합니다. 그런데 모바일은 가용 너비가 데스크톱의 1/3~1/4 수준이라, 데스크톱 기준 4개 링크(CP-078)는 십중팔구 한 줄을 넘기죠. 그렇다고 줄바꿈을 허용하면 좁은 화면에서 브레드크럼이 두세 줄을 차지해 본문을 밀어내고, 경로의 선형 흐름도 깨집니다.

그래서 모바일에서는 가장 정보 가치가 높은 두 단계만 남깁니다 — 첫 경로(메인/홈)와 마지막 경로(현재 근처). 앞서 CP-080에서 봤듯, 사용자가 브레드크럼으로 하는 행동은 주로 ‘홈으로 돌아가기’(첫 경로)와 ‘바로 위로 올라가기’(마지막 근처)입니다. 둘 다 양 끝이죠. 중간 단계는 모바일의 제한된 공간에서 우선순위가 가장 낮으므로, 첫 번째로 희생됩니다.

표현은 보통 “홈 > … > 현재상위” 처럼 — 첫 경로, 말줄임표(생략 표시), 마지막 경로 순입니다. 중간을 완전히 없애지 않고 …로 ’생략됐음’을 알리는 게 핵심이죠. 이상적으로는 그 …를 탭하면 접힌 중간 경로가 펼쳐지거나 (드롭다운), 스크린 리더가 생략을 인지하게 합니다 — CP-080의 모바일 버전이라 볼 수 있습니다.

이 규칙은 반응형 분기의 전형입니다. 같은 브레드크럼이라도 데스크톱(넓음)에서는 4개(CP-078), 모바일(좁음) 에서는 2개(CP-084)로 표시 항목을 달리하죠. 미디어 쿼리나 컨테이너 너비 기준으로 화면이 좁아지면 중간을 접도록 구현합니다. 단, 어느 쪽이든 첫(메인)과 마지막은 항상 유지 — 메인은 홈 복귀(CP-069), 마지막은 상위 이동(CP-070)이라는 핵심 행동을 받치기 때문입니다.

주의 — ‘첫과 마지막’은 메인 링크(CP-069로 항상 첫 항목)와 현재의 상위 화면(CP-070·071로 마지막 항목)을 뜻합니다. 즉 모바일 축약도 앞서 정한 ’첫=메인, 마지막=상위 화면’ 구조 위에서 작동합니다. 양 끝의 의미가 다른 규칙들과 일관되게 맞물리죠.

3. 점검 / 개선

무엇을 점검하나

모바일 축약 — 좁은 화면에서 첫·마지막 경로만 표시되는가.

중간 생략 표시 — 생략된 중간이 …로 표시되는가(완전 삭제 아님).

양 끝 유지 — 메인(첫)과 현재 근처(마지막)가 항상 남는가.

(권장) 펼침 — … 탭 시 중간 경로 펼침 또는 스크린 리더 생략 인지.

개선 방향

반응형 분기: 데스크톱 4개(CP-078) / 모바일 [첫, …, 마지막].

… 에 펼침 상호작용 또는 aria-label로 생략 안내.

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

역할	책임
디자이너	모바일 축약 규칙·펼침 표현 설계
퍼블리셔/개발	반응형 분기·중간 생략·펼침 구현

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

모바일 트래픽 비중이 높은 공공 사이트에서 필수입니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 좁은 화면에서 첫·마지막 경로만 표시되나요?

□ 생략된 중간이 … 로 표시되나요(완전히 사라지지 않나요)?

□ 메인(첫)과 현재 근처(마지막)는 항상 남나요?

□ (권장) … 를 탭하면 중간 경로를 알 수 있나요?

❓ FAQ

Q1. 왜 중간이 아니라 양 끝을 남기나요? 홈 복귀(첫)와 상위 이동(마지막)이 사용자가 가장 많이 하는 행동 입니다. 중간 단계는 우선순위가 낮아 먼저 접습니다. Q2. 중간을 아예 지워도 되나요? … 로 ’생략됐음’을 알려야 합니다. 가능하면 탭해서 펼칠 수 있게 합니다. Q3. 데스크톱과 모바일을 따로 만들어야 하나요? 같은 컴포넌트에서 화면 너비에 따라 표시 항목만 분기하면 됩니다(반응형).

6. 마무리

CP-084의 메시지:

좁으면 양 끝만 — 모바일 브레드크럼은 첫·마지막 경로만 표시한다.

모바일의 좁은 너비에선 데스크톱 4개를 한 줄에 담기 어렵습니다. 그래서 사용자가 가장 많이 쓰는 양 끝 메인 (홈 복귀)과 현재 근처(상위 이동) 만 남기고 중간은 …로 접죠. 한 줄 원칙(CP-077)을 화면 너비와 무관하게 지키는 반응형 대응입니다. 다음 편은 브레드크럼의 마크업 <nav> 구획과 aria-label입니다.

**다음 편 예고 ▶ 「205. (CP-085) 브레드크럼 목록을

구획으로 감싸고 aria-label=“브레드크럼”으로 구획 제목을 제공하고 있다.」**

ViewCheck는 모바일에서 브레드크럼이 첫·마지막 경로만으로 축약되는지를 진단합니다.

📚 참고 출처

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

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

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