1. 브레드크럼이란 무엇인가?
브레드크럼(Breadcrumb) 내비게이션은 웹사이트나 애플리케이션에서 사용자의 현재 위치를 계층 구조상 어디에 있는지 보여주는 길잡이 역할의 UI 요소입니다. 이름은 동화 헨젤과 그레텔에서 아이들이 길을 찾기 위해 빵 부스러기를 떨어뜨린 데서 유래했듯이, 브레드크럼은 사용자가 지나온 경로를 추적할 수 있도록 돕습니다. 보통 페이지 상단, 전체 메뉴 바로 아래에 “홈 > 상위 섹션 > 하위 섹션 > 현재 페이지”처럼 일렬로 링크들이 나열되며 “>” 또는 “/” 기호로 구분합니다.
REI 쇼핑몰의 상품 페이지 예시. 최상단 글로벌 메뉴 아래에 브레드크럼 경로(“Camping & Hiking > Tents > Backpacking Tents”)가 표시되어 현재 페이지의 상위 범주들을 보여준다.
브레드크럼은 보조 내비게이션 수단으로서, 메인 메뉴나 사이드바 메뉴를 보완하는 역할을 합니다. 특히 콘텐츠가 여러 단계로 깊게 구조화된 웹사이트에서 유용합니다. 예를 들어, 뉴스 사이트의 기사를 읽는 도중 상단에 표시된 브레드크럼 “뉴스 > 국제 > 아시아”를 보면 해당 기사가 국제 카테고리의 아시아 섹션에 있음을 알 수 있고, 사용자는 상위 카테고리로 쉽게 이동해 관련 기사 목록을 볼 수 있습니다. 또한 사용자가 검색엔진 등의 외부 경로를 통해 바로 깊숙한 페이지로 들어온 경우에도 브레드크럼은 현재 위치의 상위 주제를 보여주어 길잡이(wayfinding) 역할을 합니다. 이러한 이유로 브레드크럼은 최소한의 UI 차지로 높은 UX 향상 효과를 주는 요소로 평가됩니다.
2. 구글 머터리얼, 애플 HIG, MS 플루언트의 브레드크럼 설계 원칙
주요 디자인 시스템에서도 브레드크럼 사용 지침을 제시하고 있습니다. Google 머터리얼 디자인은 모바일 퍼스트 철학에 따라 모바일 앱에서는 브레드크럼보다 상단 앱바의 뒤로가기(Up) 등을 주로 사용하지만, 웹 환경이나 대화면에서는 브레드크럼을 활용하여 계층 구조를 표시하는 것을 권장합니다. 머터리얼 디자인 가이드에서는 브레드크럼을 현재 위치를 나타내는 작은 텍스트 링크 모음으로 간주하며, 사용자에게 사이트 구조를 이해시키는 보조 수단으로 삼습니다. 다만 머터리얼 디자인 컴포넌트에는 브레드크럼이 주요 요소로 두드러지지는 않아서, 실제 구현 시 개발 프레임워크(Material-UI 등)의 컴포넌트를 사용하는 경우가 많습니다. 핵심은 머터리얼 디자인 철학상 브레드크럼은 간결하고 눈에 많이 띄지 않게 디자인하여 콘텐츠 탐색을 조용히 지원해야 한다는 점입니다 (예: 작은 글씨, 기본 컬러로 처리하고 현재 페이지는 볼드 처리 등).
Apple의 휴먼 인터페이스 가이드라인(HIG)에서는 플랫폼별로 브레드크럼 적용이 다릅니다. iOS(iPhone/iPad)에서는 화면 크기가 작고 단일 화면 전환 구조를 갖기 때문에 브레드크럼보다는 Navigation Bar의 뒤로 버튼이나 탭 바로 탐색하는 패턴을 사용합니다. 반면 macOS에서는 Finder(파인더) 등에서 브레드크럼에 해당하는 경로 막대(Path Control)를 찾아볼 수 있습니다. 예를 들어 맥의 Finder에서 하단에 경로 막대를 켜면 “Macintosh HD > Users > Documents > … > 현재 폴더” 식으로 현 위치까지의 폴더 경로를 보여줍니다. 애플 HIG에서는 이 경로 표시 요소를 통해 사용자가 파일 시스템 내 위치를 알기 쉽게 하며, 경로가 길 경우 처음과 끝만 표시하고 중간 경로는 생략하는 등 가독성을 유지하는 디자인을 권장합니다. 또한 각 경로 조각에 아이콘+레이블을 함께 표기하여 시각적 단서를 제공하고, 현재 위치는 강조 표시하되 클릭은 불가능하게 처리하는 등 사용성 원칙을 제시하고 있습니다. 요약하면, Apple은 모바일에선 브레드크럼을 지양하고 데스크톱 환경에선 명료한 경로 표시에 중점을 둡니다.
Microsoft Fluent Design에서는 브레드크럼을 중요한 내비게이션 패턴으로 취급하며, BreadcrumbBar라는 공식 컴포넌트를 제공합니다. Windows 파일 탐색기의 주소 표시줄이 대표적인 브레드크럼 UI로, Fluent Design 가이드에 따르면 계층 깊이가 많은 애플리케이션에서 사용자가 현재 위치를 파악하고 상위 단계로 이동할 수 있게 해주는 도구로 브레드크럼을 활용합니다. Fluent 지침에는 몇 가지 핵심 원칙이 있는데, 두 단계 정도의 얕은 구조에서는 굳이 브레드크럼을 쓰지 말고 “뒤로 가기”로 충분하다는 점과, 브레드크럼은 항상 현재 위치를 마지막 아이템으로 표시하되 현재 항목 자체는 클릭되지 않도록 해야 한다는 것입니다. 또한 화면 크기에 따라 브레드크럼이 잘리지 않도록 반응형 동작(좌측 아이템부터 생략 후 ‘…’ 메뉴 제공)을 내장하여 작은 창에서도 사용성이 유지되도록 설계되어 있습니다. 전반적으로 MS Fluent에서는 브레드크럼을 데스크톱 및 복잡한 정보 구조를 가진 앱에서 필수적인 내비게이션 요소로 강조하고 있습니다.
이 세 가지 디자인 시스템을 비교하면 아래와 같습니다:
3. 실제 서비스 사례 분석
실제 서비스들에서도 브레드크럼 내비게이션을 통해 사용자 경험을 개선하고 있습니다. 여기서는 이커머스 웹사이트, 포털 사이트, 데스크톱 애플리케이션 세 가지 경우로 나누어 살펴보겠습니다.
- 이커머스 사이트 (예: Amazon 아마존, Coupang 쿠팡): 온라인 쇼핑몰에서는 상품이 다양한 카테고리에 속해 있기 때문에, 브레드크럼을 통해 사용자가 보고 있는 상품이나 목록이 어떤 카테고리 경로에 속하는지 보여줍니다. 예를 들어 아마존의 한 노트북 상품 페이지 상단에 “Electronics > Computers > Laptops > Gaming Laptops”와 같은 브레드크럼이 나타나 해당 상품이 전자제품의 컴퓨터/노트북 카테고리 내에 있음을 알려줍니다. 이를 통해 사용자는 상위 카테고리로 이동하여 다른 관련 상품을 살펴볼 수 있고, 현재 페이지가 어느 범주에 있는지 인지할 수 있습니다. 쿠팡 등 국내 쇼핑몰도 유사하게 상품 리스트나 상세 페이지에 “홈 > 여성패션 > 원피스 > 민소매 원피스” 등의 브레드크럼을 제공하여 쇼핑 탐색 경로를 제시합니다. 이러한 브레드크럼의 장점은 빠른 역방향 탐색(사용자가 방금 본 상위 목록으로 쉽게 돌아가기)과 맥락 제공이라는 점입니다. 다만 상품이 여러 카테고리에 걸쳐 있을 경우 브레드크럼이 한 가지만 표시되기 때문에, 사용자가 다른 경로로 들어온 경우 혼란이 생길 수 있다는 한계가 있습니다. 또한 모바일 앱에서는 화면 공간 제약으로 브레드크럼을 생략하거나 간략히 표시하는 경우가 많습니다.
- 포털 사이트 (예: 네이버, 구글 검색): 포털이나 검색 서비스에서는 브레드크럼이 주로 콘텐츠 서비스의 하위 섹션 구조를 나타내는 데 활용됩니다. 네이버의 예를 들면, 뉴스 기사 페이지 상단에 “네이버 뉴스 > 경제 > 글로벌경제 > …” 식으로 표시되어 해당 기사의 위치를 보여주고, 사용자가 상위 섹션으로 이동할 수 있게 합니다. 또 네이버 카페나 지식인(Q&A)과 같은 서비스 내 게시물 화면에서도 카페 메인이나 질문 목록으로 돌아갈 수 있는 경로를 상단에 제공하는데, 이것도 브레드크럼의 일종입니다. 한편 구글 검색 결과 페이지에서는 구글 자체의 브레드크럼은 없지만, 각 검색결과 아래에 그 사이트의 경로가 표시되어 사용자가 해당 결과가 어느 사이트의 어떤 섹션에서 나온 것인지 알 수 있도록 합니다 (예:
example.com > Products > Laptops > ...). 이처럼 포털 맥락에서 브레드크럼은 사용자에게 현재 정보의 분류 체계를 인식시키고 상위로 거슬러 올라가는 탐색을 가능하게 합니다. 다만 포털 메인 페이지처럼 1~2단계로 이루어진 단순 구조에서는 브레드크럼이 거의 쓰이지 않으며, 주로 깊이가 있는 정보 서비스에 한정됩니다. - 데스크톱 애플리케이션 (예: Windows 파일 탐색기, macOS Finder): 운영체제의 파일 탐색기는 브레드크럼 UI의 대표적인 예시입니다. 윈도우 파일 탐색기(Explorer)에서는 상단 주소 표시줄이 폴더 구조를 브레드크럼 형태로 보여줍니다. 예를 들어 “내 PC > 문서 > 프로젝트 > 보고서.pdf”처럼 현재 폴더 경로가 > 기호로 구분되어 표시되고, 각 경로 조각을 클릭하면 그 상위 폴더로 바로 이동할 수 있습니다. 심지어 경로 구간 사이의 화살표를 클릭하면 해당 단계의 하위 항목 목록이 드롭다운으로 나타나 원하는 폴더로 곧장 이동할 수도 있는데, 이는 브레드크럼을 통한 신속한 임의 단계 탐색이 가능하다는 장점입니다. 경로가 너무 길 경우 앞쪽 일부 경로는
...으로 축약되고 클릭 시 전체 경로를 보여주는 방식으로 구현되어 공간 제약도 해결합니다. 맥OS의 Finder 역시 하단에 경로 막대를 활성화하거나 상단 제목 표시줄을 Command-클릭하여 현재 폴더의 상위 경로들을 볼 수 있습니다. 다만 맥의 경로 표시 기능은 윈도우처럼 항상 보이는 기본 UI라기보다 옵션에 가깝고, 기본 설정에서는 사용자가 상위 폴더로 이동할 때 뒤로가기 버튼이나 사이드바를 이용하는 편입니다. 정리하면, 데스크톱 환경에서는 파일 시스템처럼 깊은 계층 구조를 갖는 경우 브레드크럼을 통해 빠른 탐색과 현재 위치 인지를 돕고 있지만, 구현 방식은 플랫폼마다 차이가 있습니다. 윈도우는 항상 표시되는 상단 경로 바로 적극 활용하는 반면, 맥은 필요할 때 표시하는 접근법을 취합니다.
4. 최신 UI 트렌드와 브레드크럼의 변화
반응형 디자인의 시대에 브레드크럼도 유연하게 변화하고 있습니다. 화면 크기에 따라 동일한 브레드크럼이라도 축약되거나 형태가 바뀌는데, 대표적으로 모바일 화면에서는 브레드크럼을 간소화하는 경향이 있습니다. 작은 화면에 긴 경로를 모두 보여주면 한두 줄을 차지하여 공간을 낭비하고 가독성을 떨어뜨리기 때문입니다. 예를 들어 Best Buy 쇼핑몰의 경우 데스크톱 웹사이트에서는 “Best Buy > Drones, Toys & Collectibles > Drones & Drone Accessories > Toy Drones”처럼 풀 경로를 상단에 보여주지만, 모바일 웹에선 바로 상위 카테고리인 “< See Toy Drones” 한 단계만 표시하고 나머지 상위 경로는 생략합니다. 이렇게 하면 화면을 아끼면서도 사용자가 한 단계 위로 올라갈 수 있는 최소한의 맥락은 제공하게 됩니다. 아래 이미지는 이 예시를 잘 보여줍니다. (모바일에선 빨간 ①처럼 상위 한 단계 ‘Toy Drones’만 링크로 표시되고, 데스크톱에선 ②처럼 전체 경로가 보이는 모습):
BestBuy 모바일 웹(위)에서는 브레드크럼으로 직상위 카테고리만 보여주고, 데스크톱 웹(아래)에서는 전체 계층을 표시한 예. 모바일에서는 제한된 화면을 고려해 경로를 축약했다.
이처럼 축소형 브레드크럼은 모바일이나 작은 창에서 흔히 보입니다. 경우에 따라 아예 브레드크럼을 아이콘 하나로 대체하기도 하는데, 예를 들어 “홈” 링크는 집 모양 아이콘으로, 그 외 경로는 햄버거 메뉴 아이콘 안에 숨기는 식입니다. 최근 반응형 웹 디자인에서는 화면이 작을 때 브레드크럼을 숨기거나 핵심 단계만 남기고, 화면이 클 때 자동으로 전체 경로가 보이도록 스크립트로 제어하기도 합니다.
모바일 앱 환경에서는 브레드크럼이 거의 등장하지 않으며, 대신 화면 전환 내비게이션 패턴들이 그 역할을 대신합니다. 앞서 언급한 것처럼 상단의 뒤로가기 버튼, 하단의 탭 바, 또는 화면 스와이프로 이전 화면으로 돌아가는 제스처 등이 모바일에서는 주 탐색 방법입니다. 이는 모바일 앱 구조가 깊어봐야 몇 단계 수준이거나, 계층적이라기보다 플로우(flow)에 가깝기 때문입니다. 예를 들어 쇼핑 앱에서 “카테고리 -> 하위카테고리 -> 상품상세”로 들어갔다면, 브레드크럼 없이도 단순히 뒤로 버튼을 누르면 이전 단계로 돌아갈 수 있고, 처음부터 다른 카테고리를 보고 싶다면 하단 탭이나 햄버거 메뉴로 홈이나 메인 카테고리로 갈 수 있습니다. 모바일 웹에서도 종종 브레드크럼 대신 상단에 “< 카테고리명” 형태의 단일 뒤로가기 링크를 제공하여 한 단계 위로 이동시키는 경우가 많습니다. 즉 모바일 환경에선 “현재 화면의 부모로 가기” 기능만으로도 충분히 네비게이션이 가능하므로, 브레드크럼 전체 경로를 굳이 표시하지 않는 것입니다.
한편 AI 및 개인화된 내비게이션이 도입되면서 브레드크럼의 역할에도 변화가 생기고 있습니다. 사용자의 선호나 맥락에 따라 콘텐츠를 재구성해 보여주는 인터페이스에서는, 전통적인 고정된 계층 구조의 브레드크럼이 항상 들어맞지는 않을 수 있습니다. 예를 들어 음악 스트리밍 앱이 사용자 맞춤 플레이리스트를 보여줄 때는 “홈 > 취향 추천 > 최신 인기곡” 같은 고정 경로보다, 사용자별로 동적으로 생성된 컬렉션이기 때문에 브레드크럼을 표시하기 모호합니다. 이런 경우 앱은 브레드크럼 대신 “당신을 위한 추천” 같은 문구만 표시하거나, 콘텐츠에 태그를 달아 유사 콘텐츠를 탐색하도록 유도합니다. 그럼에도 불구하고 복잡한 정보 구조를 가진 서비스에서 브레드크럼의 가치는 여전합니다. AI가 아무리 개인화된 정보를 보여주더라도, 그 정보가 전체 시스템에서 어떤 범주에 속하는지 표시해주면 사용자는 더 많은 맥락을 얻을 수 있습니다. 또한 AI가 사용자 행동을 분석하여 맞춤형 브레드크럼 경로를 제안하는 시도도 가능할 것입니다. 예를 들어 전자상거래 사이트에서 AI가 “최근에 본 카테고리 > 추천 상품”과 같은 사용자별 맥락 경로를 생성해주는 식입니다. 앞으로 개인화가 발전하더라도 브레드크럼은 정보 구조의 시각화라는 본연의 강점을 살려, 적절한 상황에서 사용자에게 길잡이 역할을 계속 수행할 것으로 보입니다.
5. 브레드크럼 설계 시 주의할 점과 실무 팁
효과적인 브레드크럼 디자인을 위해서는 몇 가지 UX 원칙과 실무상의 팁을 염두에 두어야 합니다. 우선 브레드크럼은 보조 내비게이션이므로, 사이트의 주 내비게이션(예: 상단 글로벌 메뉴나 사이드 메뉴)을 대체해서는 안 됩니다. 브레드크럼은 언제나 현재 위치까지의 계층 구조를 보여주는 부차적인 안내 역할을 해야지, 이를 통해 사이트의 모든 이동을 해결하려 해서는 안 됩니다.
또한 브레드크럼은 사이트의 구조를 반영해야 하며, 사용자의 이동 경로(히스토리)를 따라가도록 만들면 안 됩니다. 일부 잘못된 설계에서는 사용자가 페이지를 이동한 순서대로 브레드크럼을 나열하기도 하는데, 이렇게 하면 브라우저의 뒤로가기 기능과 중복될 뿐 아니라 외부에서 바로 들어온 경우 유용하지도 않기 때문에 피해야 합니다. 항상 한 가지 계층 경로만을 일관되게 보여주도록 합니다.
현재 페이지 표시 방법도 중요합니다. 일반적으로 브레드크럼의 마지막 요소는 현재 페이지명을 나타내며, 이 항목에는 링크를 걸지 않아 클릭되지 않게 처리합니다. 만약 현재 페이지도 잘못해서 링크로 만들어 놓으면 사용자가 클릭 시 페이지를 리로드하게 되어 혼란을 줄 수 있습니다. 대신 필요하다면 별도의 ‘새로고침’ 버튼을 제공하는 편이 좋습니다. 반대로 브레드크럼 중간 단계들은 반드시 클릭 가능하도록 하여, 사용자들이 상위 페이지로 자유롭게 이동할 수 있게 해야 합니다. 예를 들어 “홈 > 제품 > TV > 상세” 브레드크럼에서 “제품”이나 “TV” 단계가 클릭 안 된다면 브레드크럼의 내비게이션 기능이 반감됩니다.
각 레이블(항목명)은 되도록 짧고 이해하기 쉽게 써야 합니다. 브레드크럼에 긴 문장을 넣으면 한 줄에 다 담기 어려워지고 가독성이 떨어지므로, 카테고리명을 축약하거나 핵심 단어만 사용합니다. 불가피하게 길어질 경우 CSS 등을 통해 중간을 “…“로 생략하는 방식으로 표시할 수 있습니다. 예를 들어 “International Business Machines Corporation” 대신 “IBM”으로 축약하거나, “전자제품 > 컴퓨터 및 주변기기” 대신 “전자제품 > 컴퓨터…”로 생략해 표시하는 식입니다.
시각 디자인 측면에서는 브레드크럼이 너무 도드라지지 않게 하면서도 분명히 인식되도록 해야 합니다. 보통 일반 텍스트보다 약간 작은 글자 크기, 눈에 많이 띄지 않는 색상(예: 회색톤)으로 스타일링하여 콘텐츠보다 시선이 먼저 가지 않도록 조정합니다. 대신 사용자가 봤을 때 “아, 이건 현재 내가 있는 위치를 나타내는구나” 하고 알아볼 수 있게 아이콘(예: 집 아이콘)이나 ‘>’ 구분자를 일관되게 사용합니다. 구분자는 통일된 기호를 쓰는 게 좋은데, 일반적으로 “>” 기호가 많이 쓰이며 가독성도 좋습니다.
나쁜 사례와 개선 방안도 살펴보겠습니다. 한 예로, 어떤 사이트는 브레드크럼을 단순 경로 표시 대신 드롭다운 메뉴로 만들어 현재 페이지의 형제 목록까지 한 번에 보여주려고 시도했습니다. 실제 사례로 Travelsouthdakota.com 사이트는 “Home / Explore / Itineraries / Cultural Immersion” 대신 “Home / Explore ▼ / Itineraries” 형태로 중간에 드롭다운을 넣어 형제 페이지들을 펼쳐볼 수 있게 했는데, 이렇게 하면 브레드크럼과 로컬 내비게이션이 혼합되어 오히려 혼란을 줍니다. Nielsen Norman Group 등 UX 전문가들은 이처럼 브레드크럼을 변칙적으로 사용하기보다는 형제 페이지로 이동은 별도의 사이드바 메뉴나 다른 UI로 분리하고, 브레드크럼은 순수하게 현재 페이지의 상위 계층 경로만 보여주도록 권장합니다. 그밖에 흔한 잘못된 사례로는 브레드크럼을 아예 글자 색만 바꿔서 구분자도 없이 나열한다든지, 현재 페이지를 빠뜨리고 “홈 > … > (현재 페이지 제목은 헤드라인으로만 표시)”처럼 설계하는 경우가 있습니다. 구분자가 없으면 각 단어가 하나의 경로 단계인지 구별이 어렵고, 현재 페이지가 브레드크럼에 포함되지 않으면 사용자에 따라 마지막 링크를 현재 위치로 오인할 수 있으므로 피해야 합니다. 항상 구분자 기호를 명확히 넣고, 현재 페이지도 브레드크럼에 포함하되 비활성 상태로 표시하는 것이 일관된 UX에 좋습니다.
마지막으로 실무 적용 팁으로, 브레드크럼에 구조화 데이터(schema)를 첨부하면 검색 엔진에서 사이트 링크이나 경로를 잘 인식해 SEO 측면에서도 이점이 있습니다. 예를 들어 HTML에 schema.org의 BreadcrumbList 마크업을 추가하면 구글 검색 결과에 사이트의 브레드크럼 경로가 함께 노출되어 가시성이 높아집니다. 그리고 반응형 구현 시 CSS 미디어쿼리나 자바스크립트로 화면 크기별 표시 방식을 미리 계획해야 합니다 (예: 모바일에선 숨기기, 태블릿에선 일부만 보여주기 등). 디자인 단계에서 브레드크럼이 들어갈 자리를 페이지 레이아웃에 미리 확보해두면 개발 시 일관성이 높아집니다. 작은 것이지만 “›” 같은 기호를 쓸지 “/”를 쓸지, 혹은 아이콘을 사용할지 등 디테일도 팀 내 가이드로 정해 두는 것이 좋습니다.
6. 정리 및 마무리
브레드크럼 내비게이션은 사이트의 정보 구조를 시각화하여 사용자에게 현재 위치와 상위 구조를 알려주는 중요한 UI 패턴입니다. 특히 콘텐츠 깊이가 깊은 웹사이트나 앱에서 사용자 경험(UX)을 향상시키는 데 큰 역할을 합니다. 구글 머터리얼 디자인, 애플 HIG, MS 플루언트 등 디자인 시스템마다 강조점은 다르지만, 공통적으로 사용자가 길을 잃지 않도록 계층적 맥락을 제공한다는 목적은 동일합니다. 디자인할 때는 간결성, 일관성, 가시성 원칙을 기억하고, 사용자가 필요할 때 부담 없이 브레드크럼을 활용할 수 있게 배치하는 것이 중요합니다. 작은 모바일 화면부터 큰 데스크톱 화면까지 반응형으로 잘 동작하도록 신경 쓰고, 본문보다 앞서 있되 주연이 아닌 조연으로서 역할을 하도록 비주얼 밸런스를 맞추는 것도 포인트입니다.
마지막으로, 브레드크럼은 잘 설계되면 사용자는 의식하지 못해도 자연스럽게 사이트 구조를 이해하고 탐색에 도움을 얻지만, 없으면 불편을 느낄 수 있는 숨은 조력자입니다. 현재 디자인하려는 서비스가 다단계 구조를 가진다면 브레드크럼 도입을 고려해 보고, 위에서 언급한 원칙들을 적용하여 사용자에게 편리하고 친절한 길잡이를 제공해 보세요.
#UI디자인 #브레드크럼 #웹내비게이션 #UX디자인 #구글머터리얼 #애플HIG #MS플루언트 #반응형디자인 #모바일UI #웹UI #정보구조 #UI패턴