Breadcrumbs 디자인 가이드라인
빵 부스러기 내비게이션을 디자인할 때 주의해야 할 8가지
(출처 : 이 기사는 [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 개 이상의 항목이 포함된 경우 이동 경로가 자동으로 축소되고 줄임표를 사용하여 추가 정보를 나타냅니다.
기본적으로 첫 번째 항목과 마지막 항목이 표시됩니다. 사용자는 줄임표를 클릭하여 이동 경로를 확장합니다.
아이템의 숫자가 최대치일 때
이동 경로의 최대 항목 수를 사용자가 지정할 수 있습니다.
최대 개수보다 많으면 이동 경로가 자동으로 축소됩니다.
빵 부스러기가 다음 줄로 내려가야 할 때
빵 부스러기가 확장되면 페이지 너비를 초과할 경우, 다음 행으로 정보가 내려가게 됩니다.
읽어주셔서 감사합니다.
