브레드크럼

정의

브레드크럼은 지금 보고 있는 화면이 전체 구조 안에서 어디에 있는지를, '홈 > 카테고리 > 상세'처럼 상위부터 현재까지 한 줄로 이어 보여 주는 길잡이입니다. 각 단계는 구분자로 연결되어 계층의 깊이를 드러내고, 앞쪽 항목들은 눌러서 상위로 거슬러 올라갈 수 있습니다. 이름은 동화에서 길을 잃지 않으려고 빵 부스러기를 떨어뜨린 데서 왔는데, 실제로도 사용자가 지나온 경로를 되짚어 손쉽게 위층으로 돌아가도록 돕는 역할을 합니다. 화면 맨 위 제목 바로 근처에 놓여, 페이지를 열자마자 자연스럽게 눈에 들어옵니다.

왜 중요한가

쇼핑몰이나 문서 사이트처럼 계층이 여러 겹으로 깊은 곳에서는, 링크를 몇 번 타고 들어가다 보면 자신이 어디쯤 있는지 감을 잃기 쉽습니다. 브레드크럼은 현재 위치를 계층 경로로 항상 보여 줘서 이 방향 감각을 되찾아 줍니다. 덕분에 사용자는 뒤로 가기 버튼을 여러 번 누르지 않고도 한 번에 원하는 상위 단계로 점프할 수 있어 탐색이 훨씬 가벼워집니다. 화면 상단에 한 줄로 얌전히 놓여 공간을 거의 차지하지 않으면서도, 사이트의 전체 구조를 은근히 알려 주는 효과까지 있습니다. 다만 이 모든 장점은 계층이 실제로 깊을 때 의미가 있고, 구조가 얕은 곳에서는 오히려 군더더기가 됩니다.

흔한 실수

• 마지막 항목, 즉 현재 위치까지 눌리는 링크로 만드는 경우입니다. 지금 보고 있는 바로 그 페이지로 다시 이동하는 링크는 아무 의미가 없어, 사용자를 헷갈리게 하고 링크를 눌렀는데 아무 일도 일어나지 않는다는 인상을 줍니다. 마지막 항목은 링크가 아닌 현재 상태로 두어야 합니다.
• 계층이 한두 단계뿐인 얕은 구조에 굳이 브레드크럼을 넣는 경우입니다. 돌아갈 상위가 거의 없으면 경로 표시가 정보를 주기보다 화면만 복잡하게 만들어, 오히려 없느니만 못한 장식이 됩니다.
• 브레드크럼을 뒤로 가기 버튼과 같은 것으로 여겨 방문 순서대로 나열하는 경우입니다. 브레드크럼은 사이트의 고정된 계층 구조를 보여 주는 것이지, 사용자가 실제로 지나온 방문 이력이 아닙니다. 둘을 섞으면 경로가 매번 달라져 오히려 혼란을 줍니다.

실무 팁

• 마지막 항목은 현재 위치이므로 링크가 아닌 일반 텍스트로 두고, 그 앞의 상위 항목들만 눌러서 올라갈 수 있게 하세요. 계층이 얕은 화면이라면 브레드크럼 자체를 생략하는 편이 낫습니다.
• 구분자는 화살표나 슬래시처럼 방향이 느껴지는 기호를 일관되게 쓰세요. 왼쪽이 상위, 오른쪽이 하위라는 흐름이 분명해야 사용자가 경로를 직관적으로 읽고, 어느 쪽을 눌러야 위로 올라가는지 헷갈리지 않습니다.
• 경로가 아주 길면 중간 단계를 …로 접어 처음과 현재 근처만 보이게 하세요. 한 줄 안에 깔끔하게 담기면서도 필요하면 펼쳐서 전체 계층을 확인할 수 있습니다.

관련 개념