빵부스러기
Breadcrumb
개념
지금 보고 있는 화면이 전체 구조에서 어디인지를 상위 경로와 함께 한 줄로 보여 주는 표시입니다.
등장 배경
깊이가 세 단을 넘는 제품에서는 사용자가 중간에 떨어지는 일이 흔합니다. 검색 결과나 동료가 보낸 링크를 눌러 들어오면 첫 화면을 거치지 않으므로, 지금 보는 문서가 어느 갈래에 속한 것인지 알 길이 없습니다. 브라우저의 뒤로 가기는 지나온 길만 알려 주고 구조상의 위가 어디인지는 말해 주지 않습니다.
페이지덱 도움말에서 그 차이가 드러났습니다. 민서가 관찰한 참가자는 검색으로 들어온 문서에서 같은 주제의 다른 글을 찾으려고 뒤로 가기를 눌렀고, 돌아간 곳은 검색 결과였습니다. 세 번을 그렇게 반복한 뒤에 창을 닫았습니다. 필요한 것은 직전 화면이 아니라 이 문서가 얹혀 있는 상위 주제였습니다.
빵부스러기는 온 길 대신 구조상의 자리를 적어 두는 줄입니다. 어디서 들어왔든 같은 경로가 보이고, 그 경로의 각 항목이 위로 올라가는 문이 됩니다.
작동 방식
최상위부터 현재 화면까지의 경로를 한 줄로 늘어놓습니다. 정해 둘 것은 여섯 가지입니다.
- 구분 기호를 하나로 정합니다. 화살괄호나 사선 가운데 무엇을 쓰든 제품 전체에서 같아야 합니다.
- 마지막 항목은 현재 위치이므로 링크를 걸지 않습니다. 눌러도 같은 화면으로 가는 링크는 사용자에게 눌러 볼 이유를 하나 만들어 놓고 아무것도 주지 않습니다.
- 항목은 셋에서 다섯 개로 유지합니다. 그보다 깊으면 가운데를 줄임표로 접고 최상위와 직속 상위만 남깁니다.
- 경로는 지나온 순서가 아니라 구조를 적습니다. 검색으로 들어온 사람과 목록에서 눌러 들어온 사람에게 같은 줄이 보여야 이 표시가 위치를 알려 주는 구실을 합니다.
- 자리는 제목 위 왼쪽으로 고정합니다. 화면마다 자리가 바뀌면 사용자는 이 줄을 찾지 않게 됩니다.
- 좁은 화면에서는 두 줄로 흐르게 두지 않고 뒤에서 한두 개만 남깁니다. 세로로 놓인 사이드바가 접히는 크기에서는 이 줄이 위치를 알려 주는 유일한 장치가 되기도 합니다.
실무 용례
"이 화면은 세 단 깊이라 빵부스러기가 있어야 합니다. 뒤로 가기만으로는 위로 못 올라가요."
같은 화면으로 돌아가는 것과 상위로 올라가는 것이 다른 일이라는 지적입니다.
"마지막 항목에는 링크를 걸지 마세요. 지금 보고 있는 화면이에요."
현재 위치와 이동할 곳을 한 줄 안에서 갈라 두라는 말입니다.
"경로를 사용자가 지나온 순서로 만들었는데, 구조상 위치로 바꿔야 합니다."
이 표시가 기록이 아니라 지도라는 뜻입니다.
민서가 도움말 화면에 이 줄을 넣은 뒤에 상위 주제로 올라가는 이동이 늘었습니다. 같은 검색어를 다시 넣는 횟수는 줄었습니다. 문서를 못 찾아 검색을 반복하던 사람들이 한 단 위로 올라가 목록에서 고르는 쪽으로 옮겨 간 것입니다.
자주 헷갈리는 용어
| 용어 | 무엇을 보여 주는가 | 빵부스러기와의 차이 |
|---|---|---|
| 사이트맵 | 화면 전체의 구조를 나무 형태로 펼친 도식 | 구조 전체를 한 번에 보여 주고 대개 한 화면에만 놓입니다. 빵부스러기는 그 나무에서 현재 위치까지의 한 줄기만 떼어 모든 화면에 붙입니다 |
같이 보면 좋은 페이지
마지막 업데이트 2026-09-16