breadcrumbs

breadcrumbs란??

브레드크럼(빵부스러기로 표시한 길)이란 핸젤과 그레텔에서 따온 용어로, 사이트나 웹 앱에서 유저의 위치를 보여주는 부차적인 내비게이션 시스템을 뜻한다

브레드크럼 내비게이션은 유저에게 ‘맥락 정보’의 훌륭한 소스가 되며, 유저가 다음 질문에 대한 답을 찾을 수 있도록 도와준다고 합니다.

• 지금 어디에 있는가? 사이트 전체 구조 안에서 어디에 위치했는지 알려준다고 합니다.
• 어디로 갈 수 있는가? 사이트의 검색 가능성을 높여주며, 펼쳐서 보여주어 메뉴보다 사이트 구 조를 더 이해하기 쉽게 해준다고 합니다.
• 거기로 가야 하는가? 콘텐츠의 가치를 알려주고 브라우징을 독려한다고 합니다. 예를 들어 상품을 검색해서 마음에 안 들면 쉽게 상위 카테고리로 들어가서 살펴볼 수 있게 해주어 사이트 이탈률을 줄여준다고 합니다.

---

브레드크럼 내비게이션의 장점
1. 유저가 상위 페이지로 가기 위해 취해야 하는 행동의 수를 줄여준다고 합니다. 뒤로 가기 버튼이나 전체 내비게이션을 이용하지 않고 한 번에갈 수 있기 때문입니다.
2 최소한의 공간을 차지한다고 합니다. 링크가 걸린 텍스트를 가로로 펼쳐서 보여주기 때문에 콘텐츠를 지나치게 많이 주지 않는 것이 장점이라고 합니다.

3. 절대 잘못 이해하거나 조작하지 못할 일이 없다고 합니다.

---

언제 브레드크럼을 이용해야 하는가?
브레드크럼 내비게이션이 사이트에 도움이 되는지 안되는지 판단하기 위해서는 유저가 카테고리 내에서 혹은 카테고리 사이에서 필요한 것을 더 잘 찾는지 직접 테스트해봐야 한다고 합니다.

많은 양의 콘텐츠가 수직형 구조 혹은 계층 구조로 이루어져 있으면 반드시 브레드크럼 내비게이션을 이용해야 한다고 합니다.(예: 이커머스 사이트)
논리적 계층구조나 그룹핑이 없는 단일 레벨 웹사이트에서는 이용하면 안 된다고 합니다.

        <div class="area">
            <!-- 사용자에게 aria-label을 통해서 gnb같은 네비게이션이 아닌 사이트 이동을 위해 네비게이션임을 알려준다. -->
            <nav class="breadcrumb" aria-label="사이트 이동">  
                <ol>
                    <li>
                        <a href="#">
                           <span class="blind_i">홈</span>
                        </a>
                    </li>
                    <li>depth1</li>
                    <!-- aria-current="page"는 현재페이지임을 알려준다. -->
                    <li aria-current="page">depth2</li>
                </ol>
            </nav>
            <h3 class="sub_tit txt_center">제목2</h3>
        </div>