Breadcrumb

브레드크럼 Breadcrumbs 디자인 팁

오늘은 브레드크럼에대해서 알아보려고합니다. 브레드크럼은 사이트내부에서 사용자가 자신이 위치한 페이지가 어딘지 알려주는 네비게이션 링크입니다. 한국말 그대로 직역하면 빵부스러기란 뜻을가지고 있고 동화책 헨젤과 그레텔에서 그레텔이 빵부스러기를 길에 뿌리면서 남매가 지나온길을 되돌아기위한 단서를 남겨놨는데 거기서부터 어원이 시작된것같습니다.






3단계 이상의 페이지 뎁스 (방문깊이)


페이지 뎁스(depth) 는 페이지별로 하위 페이지가 얼마나 종속되어 있는지를 보는 관점입니다. 일례로 홈페이지같은 상위 페이지아래 제품(PDP) / 회사소개(About) 등을 넣는다면 방문깊이 즉 depth는 2단계라고 표현하는 것입니다.

보통 페이지 뎁스가 2단계일 경우에는 사용자가 자신이 위치한 페이지를 알 수 있기에 궂이 브레드크럼을 넣을 필요가 없습니다. 하지만 페이지 뎁스가 3단계 이상일 경우에는 사용자가 여러 하위 페이지를 왔다갔다 하면서 자신이 위치를 금방 파악하기 어려워집니다. 그렇기에 3단계 이상의 페이지 뎁스에서는 브레드크럼을 넣는것이 사용자 경험측면에서 좋습니다.








홈링크는 브레드스크럼에서 항상 첫번째 위치


홈링크는 브레드스크럼에서 항상 첫번째 위치


홈(Home)링크 사용자가 사이트를 방문해서 보게되는 첫 시작 포인트이기에 브레드크럼안에서 항상 첫번째에 위치해야합니다. 그리고 홈(Home)링크는 현재 퍼블리싱되있는 모든 사이트에서 대명사처럼 사용되는 UI Convention이기에 궂이 텍스트로 홈(Home) 링크를 걸 필요없이 🏠 (홈 아이콘) 으로도 대체가 가능합니다.







화살표 기호가 브레드크럼에 적합


화살표 기호가 브레드크럼에 적합


종종 브레드크럼 사이에 슬래쉬 (/) 혹은 바 (l) 가 들어가는 경우를 보게되는데 앞서 말한 기호 보다는 화살표 기호가 브레드크럼안에서 사용하기에 적합합니다. 왜냐하면 슬래쉬는 보통 글자를 서로 구별하고 나누는 용도로 사용되지만 화살표는 직접적으로 방향을 표시하기때문에 사용자경험을 향상시켜주기 때문이죠.










현재 위치한 페이지의 링크는 다른 링크들과 구별하기


현재 위치한 페이지의 링크는 다른 링크들과 구별하기


브레드크럼안에서 현재 위치한 페이지 링크를 다른 링크들과 구별함으로 사용자가 한눈에 쉽게 자신의 페이지 위치를 파악해야합니다. 단순하게 글자색상과 두께만으로 쉽게 구별시킬 수 있습니다.



3단계 이상의 페이지 뎁스에서 브레드크럼의 사용은 페이지의 네비게이션 측면에서 사용자 경험을 크게 향상시킵니다. 브레드크럼에 대하여 더 자세한 내용을 알고싶다면 관련 리서치가 Nielsen Norman Group에 포스팅 되있으니 확인해보시면 좋을것같습니다.

SNS 공유하기

Share on facebook
Share on twitter
Share on linkedin

매주 주말마다 새로운 디자인 뉴스레터를 받아보세요 📪

Scroll to Top