by Aug 11. 2020

(출처 : 이 기사는 [Design Guide: Breadcrumbs], [Breadcrumbs For Web Sites: What, When and How], [atlassian.design/components/breadcrumbs/examples]를 번역 및 가공한 콘텐츠입니다.)

Breadcrumbs (빵부스러기)는 사이트 나 웹 앱에서 유저의 위치를 보여주는 보조 탐색 시스템입니다.

이 용어는 주인공이 집으로 돌아가기 위해 빵 부스러기 흔적을 만드는 헨젤과 그레텔 동화에서 왔습니다.

헨젤과 그레텔 동화와 마찬가지로 유저는 사이트의 정보 구조에서 자신의 위치를 알아야 합니다.
이 기사에서는 사이트에서 빵 부스러기를 사용하는 방법을 알아보고 자신의 웹 사이트에 빵 부스러기를 적용하는 베스트 케이스에 대해 설명하겠습니다.

빵 부스러기는 어떻게 생겼는가?

다른 용어들도 많이 있겠지만 여기서는 이 용어를 사용하겠습니다.

빵 부스러기 내비게이션을 사용해야 하는 이유

빵 부스러기는 유저가 사이트 내의 어떤 정보구조 내에 위치하는지를 알려주는 효과적인 시각적 도구입니다.

모든 앱에 빵 부스러기 내비게이션을 사용할 필요는 없지만, 빵 부스러기 내비게이션이 올드하다는 오해 때문에 사용을 꺼려서도 안됩니다.

만일 앱에 핵심적인 메뉴 구조가 있을 경우, 빵 부스러기를 잘 활용해야 합니다. 아마존이 빵 부스러기를 잘 활용하는 대표적인 예입니다.

빵 부스러기는 유저에게 정보의 콘텍스트를 알려주는 훌륭한 내비게이션으로 유저가 가진 다음과 같은 궁금증을 해결해 줍니다.

- 나의 위치는 어디인가?
빵 부스러기는 전체 사이트의 정보구조 안에서 유저의 현재 위치를 알려줍니다.

- 나는 어디로 가야 하는가?
빵 부스러기는 사이트 내 정보구조를 펼쳐 보여줌으로써 사이트의 구조를 더 쉽게 이해시키고, 페이지들을 찾기 쉽게 만들어줍니다. 유저는 빵 부스러기를 통해 본인이 가고 싶은 메뉴와 옵션을 제공받을 수 있으며 일일이 내비게이션을 클릭해서 찾는 수고를 덜 수 있습니다.
결과적으로 빵 부스러기는 유저가 페이지들을 탐색하는 브라우징 기능을 유도합니다.
예를 들어 이커머스 사이트의 유저가 특정 프로덕트 페이지에 랜딩 했다면, 그 프로덕트는 유저가 찾던 프로덕트가 아닐 수 있지만 빵 부스러기를 통해 같은 카테고리의 다른 프로덕트를 확인함으로써 사이트의 이탈률을 줄일 수 있습니다.

여기에 빵 부스러기를 썼을 경우 좋은 두 가지 좋은 점이 또 있습니다.

최소한의 공간을 차지한다.

빵 부스러기는 단지 링크들의 한 줄 조합이기 때문에 콤팩트 한 작동원리를 가지고 있어서 페이지의 많은 부분을 차지하지 않아도 됩니다. 빵 부스러기를 사용하면 시각적으로 무거워 보이거나 콘텐츠의 과한 요소가 거의 없습니다.

유저들에게 익숙한 패턴이다.

빵 부스러기는 인터넷의 초창기 때부터 존재해 왔기 때문에 대부분의 유저에게 익숙한 패턴으로, 사용하는데 어려움이 적습니다.

언제 빵 부스러기를 사용해야 하는가?

사이트가 빵 부스러기를 사용해서 좋을지를 정하는 좋은 방법은 사이트의 정보 구조를 나타내는 사이트 맵 또는 다이어그램을 구성한 다음 빵 부스러기가 정말 사용자의 탐색 기능을 높일 시킬 수 있는지 살펴보는 것입니다.

- 빵 부스러기는 정리된 카테고리(더 많은 하위 콘텐츠로 나눌 수 있는 여러 섹션)를 가진 많은 양의 콘텐츠를 가지고 있을 때 사용하면 좋습니다. 좋은 예로는 다양한 제품이 논리적으로 정돈된 메뉴를 가진 이 커머스 사이트가 있을 수 있습니다.

- 그룹화할 수없거나 정보구조가 없는 단일 정보구조의 웹 사이트에는 빵 부스러기를 사용하면 안 됩니다.

빵 부스러기의 종류

빵 부스러기는 크게 위치기반, 경로 기반, 그리고 필터 기반의 3가지 타입이 있습니다.

1. 위치 기반의 빵 부스러기

위치 기반의 빵 부스러기는 사이트의 구조를 표현할 수 있습니다.

이 빵 부스러기를 사용하면 유저들이 여러 뎁스를 가진(보통 2 뎁스 이상 사이트의 정보구조를 더 잘 탐색하고 이해할 수 있습니다.

이 타입의 빵 부스러기는 외부 링크같이 깊은 뎁스를 통해(예를 들면 검색 결과) 방문한 유저들에게 매우 도움이 됩니다.

쿠팡

네이버 쇼핑

이 경우 텍스트들은 링크이며, 오른쪽에 있는 텍스트 링크가 왼쪽에 있는 링크보다 한 뎁스 더 높은 페이지의 링크입니다.

2. 히스토리 기반의 빵 부스러기

히스토리 기반의 빵 부스러기는 유저가 이용한 특정 페이지들의 경로를 보여줍니다. 이 타입의 빵 부스러기는 링크들이 유저의 흐름에 따라 동적으로 생성됩니다.

히스토리 기반의 빵 부스러기는 유저들에게 좋을 때도 있지만 대부분의 경우 별로 유용하지 않습니다.

유저들은 한 페이지에서 다른 페이지로 건너뛰는 경향이 있는데, 그 흔적이 빵 부스러기를 만든다면 이는 혼란을 일으킬 수 있기 때문입니다.

이럴 경우 히스토리 기반의 빵 부스러기보다 뒤로 가기 버튼이 더 도움이 됩니다.

또한 다른 링크를 통해 페이지로 바로 랜딩 한 유저의 경우 히스토리 기반의 빵 부스러기가 쓸모없을 수 있습니다.

아래 있는 예시는 시작점에서 현재 있는 페이지까지를 표시하는 히스토리 기반 빵 부스러기의 두 가지 유형을 보여줍니다.

3. 필터 기반의 빵 부스러기

필터 기반의 빵 부스러기는 이커머스 사이트에서 유용합니다.

이 타입의 빵 부스러기는 프로덕트 사이 관계를 이해하는데 도움이 되고 유저들에게 다른 페이지로의 접근을 제공해줍니다.

예를 들어, TM Lewin의 경우 필터 기반의 빵 부스러기를 사용하여 해당 페이지의 정보구조와 함께 어떤 필터가 적용되어 있는지를 알 수 있습니다.

정보구조 기반의 빵 부스러기를 사용할 것인가? 히스토리 기반의 빵 부스러기를 사용할 것인가?

빵 부스러기의 중요한 원칙 중 하나는 그것이 유저가 어떤 페이지를 방문했었는지가 아닌 사이트의 정보구조를 보여주는 데에 있습니다. 즉, 히스토리 기반의 빵 부스러기가 아닌 위치기반 혹은 필터 기반의 빵 부스러기를 사용하는 것이 훨씬 좋습니다.

빵 부스러기 내비게이션을 잘 적용한 사례

빵 부스러기를 디자인할 때, 다음과 같은 항목을 염두에 두고 작업해야 합니다.

1. 빵 부스러기를 메인 내비게이션의 대체제로 사용하지 말 것

빵 부스러기는 내비게이션 기능의 보조제이지 내비게이션 메뉴의 대체제가 아닙니다. 빵 부스러기는 그저 웹 사이트를 탐색하는 다른 방식이라고 생각해야 합니다.

애플은 메인 내비게이션을 서포트해주는 용도로 빵 부스러기를 활용하고 있습니다.

2. 현재 페이지의 링크를 넣지 마세요.

빵 부스러기의 마지막 요소(현재 유저의 위치)를 넣는 것은 선택사항입니다. 만약 이 항목을 넣는다면 클릭이 안되도록 만드세요. 유저가 이미 이 페이지에 있기 때문에 빵 부스러기 내비게이션에 있는 마지막 아이템에 굳이 현재 페이지의 링크를 넣을 필요가 없습니다.

빵 부스러기의 마지막 요소는 이미 유저가 들어와 있는 활성화된 페이지입니다. 이를 통해 사용자는 앱에서 자신의 위치를 빠르게 확인할 수 있습니다.

이 버튼을 클릭하면 페이지를 새로고침(새로고침 버튼을 통해서도 이 액션을 수행할 수 있음)할 뿐이며 여기에 링크가 들어가 있다면 사용자가 새 페이지가 또 있다는 혼동을 줄 수 있습니다.

따라서 색상이나 커서 유형을 추가하여 클릭할 수 없음을 유저가 인지할 수 있도록 합니다.

3. 움직임을 모방한 구분자를 사용하세요.

빵 부스러기의 링크들을 구분하는 구분자로서 가장 인지가 좋은 심벌은 '>' 표시입니다. '>' 표시는 정보구조를 함께 나타냅니다(상위 카테고리 > 하위 카테고리 같이). 구분자로 사용되는 다른 심벌들로는 '→' '»'등이 있습니다. 사이트의 미적 요소들에 맞추어 빵 부스러기 타입을 정하면 되겠습니다.

사용자는 페이지에서 페이지로 이동하므로 이동 경로에서 그 여정을 보여야 합니다. 이것은 미묘한 디자인적 차이지만 최소한의 노력을 필요로 합니다.

이 아이콘들은 움직임을 나타냅니다,

4. 적당한 사이즈와 패딩 값을 선택하세요.

디자인할 때 빵 부스러기의 사이즈와 패딩 값에 신경 쓰세요. 항목들 사이에 적당한 공간이 있어야 유저들이 항목을 찾기가 쉽습니다. 그렇지만 너무 큰 여백을 줘서 빵 부스러기가 페이지 전체를 잡아먹는다면 메인 내비게이션이 덜 중요해 보일 수도 있으니 주의하세요.

5. 너무 디자인에 신경 쓰지 마세요.

빵 부스러기의 사이즈와 스타일을 디자인할 때 주의할 점은 빵 부스러기가 유저의 시선을 제일 먼저 사로잡아서는 안된다는 것입니다. 빵 부스러기는 너무 안 보이지도, 너무 잘 보이지도 않게 디자인되어야 메인 콘텐츠와 메인 내비게이션이 돋보일 수 있습니다.

구글은 빵 부스러기가 팬시 하게 보이지 않지만 유저들은 쉽게 이 위치를 찾고 사용할 수 있습니다.

6. 빵 부스러기는 페이지의 절반을 넘지 않아야 합니다.

이것은 가독성을 위한 조치입니다. Christian Holst는 다음과 같이 말합니다.

너무 길 경우 : 만약 텍스트가 너무 길 경우, 유저들의 시선은 텍스트에 집중하기 어렵습니다. 이것은 긴 길이 때문에 어디서 텍스트가 시작되고 끝나는지 알기가 어렵기 때문입니다. 게다가 이것은 텍스트 블록이 커서 읽고 있는 줄을 지속적으로 읽기 어려울 수 있습니다.
너무 짧을 경우 : 만약 텍스트 길이가 너무 짧을 경우 유저들의 탐색 리듬이 자주 깨지게 됩니다. 너무 짧은 줄은 사람들에게 스트레스를 유도하며, 한 줄을 다 읽기 전에 다음 줄로 넘어가게 만듭니다. 그렇기 때문에 종종 중요한 문장을 놓치게 됩니다.
Christian Holst

빵 부스러기가 확대되거나 축소될 때도 이 사실은 동일하게 적용됩니다.

이 이미지는 빵 부스러기가 페이지의 반을 넘으면 다음 줄로 내려가게 되어 있습니다.

이 규칙을 따르지 않아야 하는 유일한 경우는 모바일 앱입니다. 모바일 앱의 경우 빵부스러기에 전체 화면 너비를 사용하세요.

휴대폰에서는 화면을 열로 나눌 필요가 없습니다.

7. 항목이 4개 이상인 경우 빵 부스러기를 축소하세요.

꼭 4개부터 축소할 필요는 없습니다. (저는 여기서 감으로 4개를 이야기했습니다)

다만 항목이 많아질 경우 그 항목을 모두 다 한 번에 보여줄 필요는 없습니다.

빵 부스러기를 축소했을 경우, 사용자가 이동 경로의 전체 경로를 보고 싶다면 그렇게 할 수 있는 옵션이 있어야 합니다.

아래 디자인에서 알 수 있듯이 클릭 가능한 영역을 추가하는 것이 해당 안을 구현하는 좋은 방법입니다.

여기 또 고려해야 할 작은 사항들이 있습니다.

메뉴를 줄일 경우 첫 번째 아이템에 가까운 쪽에 메뉴 줄임을 표시해 주는 것입니다.

마지막 아이템(현재 페이지)에 유저들이 가까울수록 유저들이 더 정보의 가중치를 더 많이 가지므로 최근 항목을 표시해 주도록 합니다.

뉴욕 지하철은 빵부스러기가 아닌 다른 콘텍스트지만 정류장이 여러 곳일 경우 줄임표를 사용하고 있습니다.

또한 메뉴 줄임을 첫 번째 아이템부터 사용하지 말아야 합니다.

유저들에게는 현재 페이지의 출처가 어디인지를 아는 것이 도움이 됩니다. 특별히 그들이 링크 등을 통해서 다른 페이지에서 디렉트로 들어왔을 때 더 도움이 됩니다.

마지막으로 새로고침이나, 페이지를 다시 탐색할 때 빵 부스러기가 줄어들어야 합니다.

빵 부스러기를 축소할 수 있는 확실한 방법은 없습니다(그리고 거기에 노력을 들여야 한다고 생각하지도 않습니다) 따라서 축소된 빵 부스러기를 디폴트 값으로 두고 이전에 빵 부스러기가 확장이 되었다 하더라도 기본값으로 축소될 수 있게 합니다.

8. 이름이 긴 항목은 줄임표를 사용하세요.

긴 페이지 이름을 사용해서 빵 부스러기의 가독성을 떨어트릴 이유가 없습니다. 만약 한 항목의 이름이 너무 길다면 페이지 이름 안에 말 줄임표를 사용하세요.

말 줄임 항목을 쓴 항목도 여전히 클릭커블하게 보여야 합니다.

atlassian 디자인 시스템에서의 예시

빵 부스러기 디자인의 기본

빵 부스러기가 길 경우

이동 경로에 8 개 이상의 항목이 포함된 경우 이동 경로가 자동으로 축소되고 줄임표를 사용하여 추가 정보를 나타냅니다.

기본적으로 첫 번째 항목과 마지막 항목이 표시됩니다. 사용자는 줄임표를 클릭하여 이동 경로를 확장합니다.

아이템의 숫자가 최대치일 때

이동 경로의 최대 항목 수를 사용자가 지정할 수 있습니다.
최대 개수보다 많으면 이동 경로가 자동으로 축소됩니다.

빵 부스러기가 다음 줄로 내려가야 할 때

빵 부스러기가 확장되면 페이지 너비를 초과할 경우, 다음 행으로 정보가 내려가게 됩니다.

읽어주셔서 감사합니다.

Breadcrumbs 디자인 가이드라인 - 빵 부스러기 내비게이션을 디자인할 때 주의해야 할 8가지

댓글