[UI 디자인] 사용자가 탐색하게 하기: 탭, 브레드크럼, 내비게이션 바(GBN)

서비스가 커질수록 사용자는 자주 길을 잃습니다.
이때 중요한 역할을 하는 것이 탐색을 위한 UI 컴포넌트입니다.
대표적으로 **탭(Tab), 브레드크럼(Breadcrumb), 내비게이션 바(GNB)**가 있습니다.

 

 

1. 탭(Tab) – 빠른 계층 간 전환

1️⃣ 특징

• 같은 레벨의 콘텐츠를 빠르게 전환
• 보통 화면 상단에 고정
• 현재 선택된 탭이 명확히 표시됨

2️⃣ 활용

• 인기곡 / 최신음악 / 차트
• 카테고리별 콘텐츠 분리

핵심: “같은 깊이의 화면을 빠르게 오갈 때”

탭 예시

 

2. 브레드크럼(Breadcrumb) – 길찾기 UI

1️⃣ 특징

• 현재 위치를 계층 구조로 표시
• 사용자가 어디서 왔는지 한눈에 파악 가능
• 상위 단계로 즉시 이동 가능

2️⃣ 활용

• 쇼핑몰 카테고리
• 문서, 리소스, 자료 구조가 깊은 서비스

핵심: “계층이 있는 구조에서 길을 잃지 않게”

브레드크럼 예시

 

3. 내비게이션 바(GNB) – 서비스 전체 이동

1️⃣특징

• 서비스의 최상위 탐색 수단
• 다른 주제·섹션으로 이동
• 데스크톱에서는 상단, 모바일에서는 햄버거 메뉴로 많이 사용

2️⃣ 활용

• 제품 / 솔루션 / 커뮤니티 / 리소스
• 서비스의 큰 흐름을 이동할 때

핵심: “주제가 완전히 다른 영역으로 이동”

네비게이션바 예시

 

정리하면

컴포넌트	역할	사용 목적
탭	빠른 전환	같은 레벨 콘텐츠
브레드크럼	위치 안내	계층 구조 길찾기
GNB	전체 이동	다른 주제 탐색

 

좋은 탐색 UI는
사용자가 ‘어디에 있는지’와
‘어디로 갈 수 있는지’를 항상 알려준다.

 

• 빠르게 바꾸고 싶으면 → 탭
• 지금 위치를 알고 싶으면 → 브레드크럼
• 다른 세계로 가고 싶으면 → GNB