주로 web.dev 사이트의 pattern 탭에서 breadcrumbs 아티클을 읽어보면서 약간의 참고 자료(MDN), 약간의 GPT, 그리고 구글링을 한 후
나만의 방식으로 정리했다.
Breadcrumbs
빵부스러기로 표시한 길.(헨젤과 그레텔에 나온 그거임)
이게 뭐냐면
쿠팡에 들어가보면 카테고리 → 패션의류/잡화 → 여성패션 → 의류 로 소비자는 내가 어느 카테고리 계층에 있는 지 확인할 수 있다.
그리고 ‘난 남성패션만 보고 싶다’라고 한다면 다른 계층인 여성 패션에 있다가도 바로바로 카테고리를 통해서 들어갈 수 있다.
그리고 남성 패션 → 의류로 들어오면 위 캡처처럼 유저는 내가 어디에 있는지 확실하게 알 수 있다.
현재의 위계, 맥락을 알려주고 유저가 원하는 위치로 들어갈 수 있도록 하는 컴포넌트가 Breadcrumb다.
특징
상위 페이지로 이동하고 내려가는 과정을 생략할 수 있기 때문에 유저 이탈을 줄일 수 있다.
계층이 딱딱딱 나눠져있고 간결하게 계층을 설명해야하는 쿠팡같은 사이트에서 요긴하게 쓰인다.
뒤로가기 없이 이전 페이지, 상위 페이지에 접근할 수 있다.
SEO 측면에서 검색 엔진이 사이트의 구조를 이해하는데에 도움을 줄 수 있다.
주의해야할 점
시작점이 명확해야한다. (주로 홈페이지가 될 것 같다.)
중복이 없어야하고 계층이 명확해야한다.
현재 유저가 있는 위치가 정확하게 어디인지 짚어줘야한다.
너무 눈에 띄어서 (색이 튄다거나) 페이지에서 보여줘야하는 정보보다 강조되면 안된다.
Background UX
Breadcrumb는 사용자가 해당 사이트의 위계를 확인하고 현재는 어디에 있는지 확인할 수 있다.
이 위계를 파악하고 원하는 계층으로 빠르게 넘어가기(jumping branches, selecting pages) 좋다.
web.dev에서는 움짤로 아래와 같은 그림을 확인할 수 있다.
(RPG에서 Dungeon Crawler 계층으로 넘어간다.)
Information architecture
Collections와 Items로 생각해보자.
Collections는 선택할 수 있는 배열이다. 메인페이지에서 본다면 위계상 FPS, RPG … Puzzle을 선택할 수 있다.
Items는 Collentions 하나에 들어가 있는 항목이다. 한 항목은 또 다른 Collection이 될 수 있다.
→ 예를 들면 RPG 안에는 {AAA, Indie, Self Published}라는 항목이 들어있고, Indie라는 항목(item)은 컬렉션이 되어 {New, On Sale, Under 5} 를 선택할 수 있게 된다.
따라서 다차원 배열로 Breadcrumb의 위계를 표현한다.
Learn JavaScript Multidimensional Array By Examples
const rawBreadcrumbData = {
"FPS": {...},
"RPG": {
"AAA": {...},
"indie": {
"new": {...},
"on sale": {...},
"under 5": {...},
},
"self published": {...},
},
"brawler": {...},
"dungeon crawler": {...},
"sports": {...},
"puzzle": {...},
}
Layouts
레이아웃은 만들기 나름이다.
현재의 위치까지의 위계 순서를 보여주고, 계층간의 구분자를 둬서 가독성을 높히는 방식을 보여주는 것으로 보인다. (가독성은 높혔지만 너무 눈에 띄는 UI가 나오면 메인 정보에 집중할 수 없다.)
<nav class="breadcrumbs" role="navigation"></nav>
HTML5 부터는 nav 태그를 사용하면 자연스럽게 네비게이션임을 알 수 있다.
그렇지 않은 경우 태그에서 ARIA를 지정해줘야하기에 role=”navigation”을 사용하게 된다.
web.dev 사이트에서 데모를 살펴보자.
소스코드는 아래와 같다.
nav 태그 안에서 collection이 item이 되어 링크를 타고 들어가기도 하고, Select를 눌러서 item을 선택할 수도 있다.
뒷 정리
카테고리가 많고, 위계도 많은 쿠팡, 무신사같은 이커머스에서 정말 쓰일 수 밖에 없는 형태이다. 알아두면 요긴하게 쓰일 컴포넌트 패턴이다.
모바일처럼 볼 수 있는 화면이 한정된 상황에서는 메인 정보에 집중하기 위해서, 화면이 복잡해보이지 않기 위해서 네비게이션 요소를 최대한 줄인다고 한다. → 메뉴버튼, 드롭다운, 탭 네비게이션, 검색 기능 등으로 대체
mdn을 많이 읽어야한다는 것을 알았지만, web.dev도 정말 읽기 좋은 글이 많은 것 같다.
