브레드크럼 내비게이션

왜 경로를 보여줄까

피롤리와 카드(1999)의 정보 채집 이론에 따르면 사람은 '정보 냄새'라는 단서를 따라 길을 찾아요. 검색이나 외부 링크로 깊은 상품 페이지에 바로 들어온 사람에게 브레드크럼은 '여기가 어디인지'와 '비슷한 것이 어디 있는지'를 한 줄로 알려 줘요. 밀러와 레밍턴(2004)의 모델처럼 계층이 깊을수록 길을 잃기 쉬워서, 3단계 이상인 정보 구조에서 특히 쓸모가 있어요.

모바일에서는 짧게

작은 화면에서는 시선이 위쪽에 몰려서(Kim et al., 2015) 긴 경로가 두 줄로 넘치면 정작 제목이 아래로 밀려요. 라우브하이머(2018)는 모바일에서 바로 위 단계 하나만 '‹ 카테고리'처럼 보여주거나, 가로로 스크롤되는 한 줄로 만드는 방법을 제안했어요. 링크 사이 간격이 좁으면 엉뚱한 단계를 누르기 쉬우니 파히와 동료들(2006)이 말한 엄지 타깃 크기를 지켜야 해요. 앱의 주요 이동은 하단 내비게이션이 맡고, 브레드크럼은 보조 역할로 두는 게 좋아요.

디자인과 마크업

현재 페이지는 마지막에 두되 링크로 만들지 않고, 구분자는 '>'나 '/'처럼 방향이 보이는 기호를 써요. 브레드크럼이 메인 메뉴를 대신하지 않게, 시각적 위계에서 작고 차분하게 둬요. 웹에서는 ARIA 패턴(W3C, n.d.)대로 nav 랜드마크에 'breadcrumb' 이름을 달고 현재 항목에 aria-current를 붙이면, WCAG 2.2(W3C, 2023)의 2.4.8 위치 기준도 함께 지킬 수 있어요.

자주 묻는 질문

모바일 앱에도 브레드크럼이 필요한가요?

계층이 얕은 앱은 뒤로 가기와 하단 내비게이션으로 충분해요. 상품 카테고리처럼 깊은 구조라면 상위 한 단계만 보여주는 형태가 도움이 돼요.

현재 페이지도 링크로 만들어야 하나요?

아니요. 마지막 항목은 텍스트로 두고 aria-current로 현재 위치임을 알려요.

출처 검토일: 2026-10-27

참고문헌

1. Laubheimer, P. (2018, December 23). Breadcrumbs: 11 design guidelines for desktop and mobile. Nielsen Norman Group. 데스크톱과 모바일 브레드크럼 지침 11가지를 정리한 글이라, 모바일에서 줄이는 방법을 정할 때 참고하면 도움이 돼요.
2. Pirolli, P., & Card, S. (1999). Information foraging. Psychological Review, 106(4), 643–675. 사람이 단서(정보 냄새)를 따라 정보를 찾는다는 이론이라, 브레드크럼이 위치 단서가 되는 이유로 참고하면 도움이 돼요.
3. Miller, C. S., & Remington, R. W. (2004). Modeling information navigation: Implications for information architecture. Human–Computer Interaction, 19(3), 225–271. 계층 구조의 깊이와 넓이가 탐색에 미치는 영향을 모델링한 연구라, 브레드크럼이 필요한 깊이를 판단할 때 참고하면 도움이 돼요.
4. Kim, J., Thomas, P., Sankaranarayana, R., Gedeon, T., & Yoon, H.-J. (2015). Eye-tracking analysis of user behavior and performance in web search on large and small screens. Journal of the Association for Information Science and Technology, 66(3), 526–544. 작은 화면에서 시선이 위쪽에 몰린다는 연구라, 모바일 브레드크럼의 위치와 크기를 정할 때 참고하면 도움이 돼요.
5. Parhi, P., Karlson, A. K., & Bederson, B. B. (2006). Target size study for one-handed thumb use on small touchscreen devices. In Proceedings of MobileHCI 2006 (pp. 203–210). ACM. 엄지 타깃 크기 연구라, 촘촘한 브레드크럼 링크의 누르는 영역을 정할 때 참고하면 도움이 돼요.
6. World Wide Web Consortium. (n.d.). Breadcrumb pattern. ARIA Authoring Practices Guide. nav 랜드마크와 aria-current 사용법이 있어, 접근 가능한 브레드크럼 마크업에 참고하면 도움이 돼요.
7. World Wide Web Consortium. (2023). Web Content Accessibility Guidelines (WCAG) 2.2. 사이트 안의 현재 위치를 알려 주라는 2.4.8 기준이 있어, 브레드크럼의 접근성 근거로 참고하면 도움이 돼요.