빵부스러기

Breadcrumb

개념

지금 보고 있는 화면이 전체 구조에서 어디인지를 상위 경로와 함께 한 줄로 보여 주는 표시입니다.

등장 배경

깊이가 세 단을 넘는 제품에서는 사용자가 중간에 떨어지는 일이 흔합니다. 검색 결과나 동료가 보낸 링크를 눌러 들어오면 첫 화면을 거치지 않으므로, 지금 보는 문서가 어느 갈래에 속한 것인지 알 길이 없습니다. 브라우저의 뒤로 가기는 지나온 길만 알려 주고 구조상의 위가 어디인지는 말해 주지 않습니다.

페이지덱 도움말에서 그 차이가 드러났습니다. 민서가 관찰한 참가자는 검색으로 들어온 문서에서 같은 주제의 다른 글을 찾으려고 뒤로 가기를 눌렀고, 돌아간 곳은 검색 결과였습니다. 세 번을 그렇게 반복한 뒤에 창을 닫았습니다. 필요한 것은 직전 화면이 아니라 이 문서가 얹혀 있는 상위 주제였습니다.

빵부스러기는 온 길 대신 구조상의 자리를 적어 두는 줄입니다. 어디서 들어왔든 같은 경로가 보이고, 그 경로의 각 항목이 위로 올라가는 문이 됩니다.

작동 방식

최상위부터 현재 화면까지의 경로를 한 줄로 늘어놓습니다. 정해 둘 것은 여섯 가지입니다.

  1. 구분 기호를 하나로 정합니다. 화살괄호나 사선 가운데 무엇을 쓰든 제품 전체에서 같아야 합니다.
  2. 마지막 항목은 현재 위치이므로 링크를 걸지 않습니다. 눌러도 같은 화면으로 가는 링크는 사용자에게 눌러 볼 이유를 하나 만들어 놓고 아무것도 주지 않습니다.
  3. 항목은 셋에서 다섯 개로 유지합니다. 그보다 깊으면 가운데를 줄임표로 접고 최상위와 직속 상위만 남깁니다.
  4. 경로는 지나온 순서가 아니라 구조를 적습니다. 검색으로 들어온 사람과 목록에서 눌러 들어온 사람에게 같은 줄이 보여야 이 표시가 위치를 알려 주는 구실을 합니다.
  5. 자리는 제목 위 왼쪽으로 고정합니다. 화면마다 자리가 바뀌면 사용자는 이 줄을 찾지 않게 됩니다.
  6. 좁은 화면에서는 두 줄로 흐르게 두지 않고 뒤에서 한두 개만 남깁니다. 세로로 놓인 사이드바가 접히는 크기에서는 이 줄이 위치를 알려 주는 유일한 장치가 되기도 합니다.

실무 용례

"이 화면은 세 단 깊이라 빵부스러기가 있어야 합니다. 뒤로 가기만으로는 위로 못 올라가요."

같은 화면으로 돌아가는 것과 상위로 올라가는 것이 다른 일이라는 지적입니다.

"마지막 항목에는 링크를 걸지 마세요. 지금 보고 있는 화면이에요."

현재 위치와 이동할 곳을 한 줄 안에서 갈라 두라는 말입니다.

"경로를 사용자가 지나온 순서로 만들었는데, 구조상 위치로 바꿔야 합니다."

이 표시가 기록이 아니라 지도라는 뜻입니다.

민서가 도움말 화면에 이 줄을 넣은 뒤에 상위 주제로 올라가는 이동이 늘었습니다. 같은 검색어를 다시 넣는 횟수는 줄었습니다. 문서를 못 찾아 검색을 반복하던 사람들이 한 단 위로 올라가 목록에서 고르는 쪽으로 옮겨 간 것입니다.

자주 헷갈리는 용어

용어무엇을 보여 주는가빵부스러기와의 차이
사이트맵화면 전체의 구조를 나무 형태로 펼친 도식구조 전체를 한 번에 보여 주고 대개 한 화면에만 놓입니다. 빵부스러기는 그 나무에서 현재 위치까지의 한 줄기만 떼어 모든 화면에 붙입니다

같이 보면 좋은 페이지

  • 내비게이션

    이 표시가 어느 장치 묶음의 한 형태인지 봅니다

  • 탭 바

    같은 갈래에서 이동을 맡는 다른 형태를 봅니다

마지막 업데이트 2026-09-16