하단 내비게이션 시스템
목적
하단 내비게이션 시스템은 모바일 웹 인터페이스 및 프로그레시브 웹 앱(PWA)에서 하단 내비게이션 바, 탭 바 및 영구 액션 독을 위한 표준화된 모바일 퍼스트 디자인 프레임워크를 제공합니다. 최신 모바일 기기의 큰 화면 비율은 상단 헤더를 편안한 한 손 조작 범위("썸 존") 밖에 위치시킵니다. 하단 내비게이션은 주요 애플리케이션 목적지와 중요한 전환 액션을 사용자의 엄지손가락이 자연스럽게 닿는 곳에 고정합니다.
효과적인 하단 내비게이션 시스템을 설계하려면 항목 밀도(3~5개), 활성/비활성 상태 시각적 위계, 터치 대상 크기, 배지 표시기 배치, 뷰포트 세이프 에어리어 인셋(env(safe-area-inset-bottom)), 플로팅 액션 버튼(FAB) 통합 및 원활한 데스크톱 적응 규칙 간의 균형이 필요합니다. 이 스킬은 WCAG AA 접근성 표준을 엄격히 준수하여 모바일 UX 디자인과 기술 구현을 연결합니다.
사용 사례
- 전자상거래 모바일 웹 앱: 홈, 검색/찾아보기, 저장한 항목, 장바구니(항목 개수 배지 포함), 계정에 대한 즉각적인 1탭 썸 액세스 제공.
- SaaS 모바일 웹 애플리케이션 및 PWA: 모바일 생산성 앱(예: 오늘의 작업, 피드, 빠른 추가 [+], 메시지, 설정)을 위한 기본 내비게이션 구조화.
- 소셜 및 콘텐츠 플랫폼: 홈 피드, 탐색, 만들기/업로드, 활동 알림, 사용자 프로필 간의 빈번한 전환 관리.
- 주문형 및 물류 웹 서비스: 활성 추적 중에 주요 상태 탭(주문, 활성 배송 지도, 받은 편지함, 프로필)을 하단 뷰포트에 지속적으로 유지.
- 현장 작업 및 검사 양식: 긴 모바일 양식 하단에 영구 액션 버튼(초안 저장, 사진 업로드, 양식 제출) 고정.
사용하지 말아야 할 경우
- 데스크톱 우선 엔터프라이즈 웹 앱: 와이드스크린 레이아웃(>1024px)의 경우 세로 사이드바 또는 상단 헤더 바가 공간 효율성이 더 우수하므로
sidebar-navigation-system또는site-navigation-system을 사용하세요. - 페이지 내 콘텐츠 전환: 특정 페이지 섹션이나 카드 내부에서 보기를 전환하거나 콘텐츠를 필터링하려면
tab-ui-system또는segmented-control-system을 사용하세요. - 컨텍스트 액션 시트 및 모달: 페이지 콘텐츠 위에 팝업으로 표시되는 임시 작업별 오버레이 패널의 경우
accessible-bottom-sheet-implementation또는overlay-and-dialog-system을 사용하세요. - 플로팅 보조 액션 트리거: 단일 플로팅 도움말 버튼, 맨 위로 가기 버튼 또는 채팅 버블의 경우
sticky-and-floating-ui-system을 사용하세요.
입력
- 정보 아키텍처(IA) 분류: 최상위 기본 목적지 목록(최대 3~5개 항목) 및 해당 아이콘/레이블 메타데이터.
- 알림 및 배지 요구 사항: 읽지 않은 표시기(점 배지 vs. 숫자 카운터 배지)에 대한 사양.
- 기본 액션 강조(선택 사항): 중간 슬롯이 주요 생성 작업을 위해 상승된/플로팅 액션 버튼(FAB)을 필요로 하는지 여부.
- 디자인 토큰: 색상 팔레트, 그림자/고도 토큰, 유동적 타이포그래피, 아이콘 세트 및 간격 변수 (
accessible-color-system,elevation-and-depth-system,iconography-system에서). - 반응형 데스크톱 전략: 데스크톱 적응 모드 선택(데스크톱에서 숨기기, 사이드바에 도킹 또는 헤더 내비게이션으로 변환).
출력
- 하단 내비게이션 바 구조 명세: 항목 너비, 아이콘-투-레이블 세로 스태킹, 타이포그래피 토큰, 배지 배치 좌표 및 세이프 에어리어 패딩을 포함한 높이 계산을 정의하는 상세 레이아웃 청사진.
- 대화형 상태 토큰 맵: 기본/비활성, 활성/선택됨, 호버, 포커스-가시, 비활성화된 항목에 대한 색상 대비 정의 및 시각적 상태.
- 썸 존 접근성 매핑: 가장 빈도가 높은 탭을 중앙 썸 도달 영역으로 최적화하는 공간 배치 규칙.
- 세이프 에어리어 및 뷰포트 인셋 가이드라인:
env(safe-area-inset-bottom)을 사용하여 테두리 없는 모바일 디스플레이 노치 영역(iOS 홈 표시기 및 Android 제스처 바)을 처리하는 CSS 구현 규칙. - 반응형 중단점 및 데스크톱 전환 청사진: 태블릿 및 데스크톱 화면에서 하단 바를 숨기거나 전환하기 위한 반응형 미디어 쿼리 및 레이아웃 규칙.
워크플로우
1. 항목 수 및 공간 그리드 설정
하단 내비게이션 바를 3~5개의 최상위 항목으로 제한하십시오.
- 3개 항목: 동일 너비 플렉스 분배(
width: 33.33%). 뚜렷한 핵심 보기가 있는 컴팩트 웹 앱에 가장 적합합니다. - 4개 항목: 동일 너비 플렉스 분배(
width: 25%). 전자상거래 및 SaaS 모바일 앱에 이상적인 균형입니다. - 5개 항목: 동일 너비 플렉스 분배(
width: 20%). 모바일 화면 너비(320px~430px)에 대한 권장 최대 한도입니다. - 5의 법칙: 항목이 5개를 초과하지 마십시오. 목적지가 6개 이상인 경우 보조 페이지를 "더 보기" 또는 "계정" 메뉴 탭으로 그룹화하거나 우선순위가 낮은 링크를 사이드 드로어로 이동하십시오.
2. 수직 구조 및 높이 토큰 정의
뷰포트 하단에 고정된 하단 컨테이너를 구성하십시오.
- 컨테이너 위치 지정:
position: fixed; bottom: 0; left: 0; right: 0; z-index: 1000;을 사용하십시오. - 기본 높이: 표준 탭 바의 경우 기본 콘텐츠 높이를 56px~64px로 설정하고, iOS 홈 표시기 또는 Android 제스처 핸들로 인한 터치 가림을 방지하기 위해
padding-bottom: env(safe-area-inset-bottom, 0px)를 추가하십시오. - 항목 스태킹 레이아웃:
- 아이콘 크기: 24x24px SVG 아이콘으로 표준화하십시오(
iconography-system). - 레이블 타이포그래피: 11px~12px 글꼴 크기를 사용하십시오(
font-size: 0.75rem; font-weight: 500; line-height: 1.2). - 세로 간격: 상단에 아이콘 배치(상단 패딩 4px), 아이콘과 레이블 사이 2px 간격, 하단 패딩 4px.
- 터치 대상 최소 크기: 각 탭 항목이 전체 높이, 전체 너비 터치 영역을 제공하는지 확인하십시오(
min-height: 48px,min-width: 48px).
- 아이콘 크기: 24x24px SVG 아이콘으로 표준화하십시오(
3. 활성 및 비활성 상태 위계 설정
활성 탭과 비활성 탭 사이에 강력한 시각적 대비를 적용하십시오.
- 비활성 상태:
- 아이콘 채우기/획: 미묘한 보조 색상(예:
var(--text-tertiary, #6B7280)). - 레이블 색상: 보조 텍스트 색상(
var(--text-secondary, #4B5563)). - 글꼴 두께: 보통 또는 중간(
400또는500).
- 아이콘 채우기/획: 미묘한 보조 색상(예:
- 활성/선택됨 상태:
- 아이콘 채우기/획: 브랜드 기본색 또는 높은 대비 악센트(
var(--brand-primary, #2563EB)). 가능하면 채워진 아이콘 변형을 사용하십시오. - 레이블 색상: 기본 텍스트 또는 브랜드 색상(
var(--text-primary, #111827)또는var(--brand-primary)). - 글꼴 두께: 세미볼드(
600). - 활성 표시기(선택 사항): 3px 상단 테두리 또는 알약 표시기(
background: var(--brand-primary)) 또는 미묘한 배경 캡슐 채우기(var(--brand-subtle, #EFF6FF)).
- 아이콘 채우기/획: 브랜드 기본색 또는 높은 대비 악센트(
- 대비 요구 사항: 비활성 텍스트와 활성 텍스트 모두 WCAG AA 최소 대비비(바의 배경색 대비 4.5:1)를 통과해야 합니다.
4. 배지 및 알림 표시기 통합
배지는 사용자에게 읽지 않은 메시지, 보류 중인 작업 또는 장바구니 항목 수량을 알려줍니다.
- 배지 위치: 탭의 24x24px 아이콘 컨테이너 오른쪽 상단 모서리를 기준으로 배치합니다(
position: absolute; top: -2px; right: -6px;). - 점 배지(읽지 않음 표시기): 8x8px 단색 원형 점(
background: var(--badge-danger, #EF4444)). - 숫자 배지(개수 표시기): 알약 배지(
height: 16px; min-width: 16px; padding: 0 4px; border-radius: 999px; font-size: 10px; font-weight: 700; color: #FFFFFF; background: var(--badge-danger);). 99를 초과하는 개수는99+로 줄입니다. - 접근성 텍스트: 배지 내부 또는 옆에 항상 화면 판독기 전용 텍스트를 포함하십시오(
<span class="sr-only">3개의 읽지 않은 알림</span>).
5. 뷰포트 세이프 에어리어 및 표면 스타일링 처리
스크롤 콘텐츠 위에서도 하단 내비게이션 표면이 읽기 쉽도록 유지하십시오.
- 배경 블러 및 반투명: 반투명 표면 배경과 배경 필터링을 적용합니다(
background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(12px); border-top: 1px solid var(--border-subtle, #E5E7EB);). 다크 모드의 경우 (background: rgba(17, 24, 39, 0.85))를 사용하십시오. - 세이프 에어리어 인셋 규칙: CSS 사용:
.bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; padding-bottom: env(safe-area-inset-bottom, 0px); background: var(--nav-bg); border-top: 1px solid var(--nav-border); } - 페이지 하단 여백: 하단 바 높이 + 세이프 에어리어 인셋과 동일한 하단 패딩을 기본 스크롤 가능 본문 컨테이너에 추가하여(
padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px))) 고정된 바 뒤에서 콘텐츠가 잘리는 것을 방지합니다.
6. 반응형 데스크톱 적응 구현
하단 내비게이션 바는 터치 스크린에 최적화되어 있으며, 넓은 데스크톱 뷰포트(>1024px)에서 펼쳐지면 부자연스러워 보입니다.
- 중단점 전략:
- 모바일(<768px): 고정 하단 내비게이션 바를 렌더링합니다.
- 태블릿(768px – 1023px): 하단 바를 중앙에 배치/제한(
max-width: 480px; margin: 0 auto; border-radius: 16px 16px 0 0;)하거나 상단 헤더로 변환합니다. - 데스크톱(≥1024px): 하단 내비게이션 바를 숨깁니다(
display: none). 기본 목적지는 상단 헤더(site-navigation-system) 또는 세로 사이드바(sidebar-navigation-system)로 전환됩니다.
의사 결정 규칙
하단 바 레이아웃 패턴 선택
| 패턴 | 항목 구조 | 이상적인 사용 사례 | 주요 상호 작용 |
|---|---|---|---|
| 표준 탭 바 | 아이콘 + 텍스트 레이블이 있는 3~5개의 동일 너비 항목. | 전자상거래, SaaS 내비게이션, 콘텐츠 포털. | 1탭 즉시 보기 전환. |
| 중앙 FAB 독 | 4개 탭 + 1개의 상승된 중앙 액션 버튼(예: "+ 만들기"). | 소셜 게시, 작업 추적, 미디어 제작 앱. | 중앙 버튼은 생성 모달/시트를 열고, 외부 탭은 보기를 탐색합니다. |
| 레이블이 있는 아이콘 바 | 지속적인 아이콘과 보이는 11px 텍스트 레이블이 있는 4~5개 항목. | 대부분의 모바일 웹 앱에 대한 기본값, 가장 높은 사용성 및 명확성. | 아이콘 추측 없이 즉시 인식 가능. |
| 아이콘 전용 컴팩트 바 | 아이콘만 있는 4~5개 항목(레이블은 aria-label에 표시). | 매우 친숙한 소비자 앱(예: Instagram 스타일 인터페이스). | 주의: 아이콘이 보편적으로 인식되는 경우에만 사용하십시오. |
배지 스타일 선택
- 점 배지(빨간색/악센트 점): "새 활동이 있음"을 사용자에게 알려야 하지만 정확한 수량은 중요하지 않은 경우에 사용합니다(예: 새 블로그 게시물 가능, 시스템 업데이트).
- 숫자 배지(개수): 정확한 항목 개수가 사용자 작업에 직접적인 영향을 미치는 경우에 사용합니다(예: "장바구니에 3개 항목", "5개의 읽지 않은 메시지").
제약 조건
- 접근성(WCAG 2.1 / 2.2 AA):
- SC 2.1.1 키보드 접근성: 하단 내비게이션 탭은 표준
<nav>와 함께 의미론적<a>링크 또는<button role="tab">컨트롤을 사용하여 구현해야 하며,Tab키 또는Arrow키로 탐색할 수 있어야 합니다. - SC 2.4.7 포커스 가시: 포커스된 하단 내비게이션 항목은 배경에 대해 최소 3:1 대비비를 가진 잘리지 않은 포커스 링을 표시해야 합니다.
- SC 2.5.8 대상 크기(최소): 터치 대상은 최소 48x48px(또는 48px 터치 영역을 보장하는 주변 간격이 있는 24x24px) 이상이어야 합니다.
- SC 1.4.3 시각적 대비: 비활성 탭 레이블과 아이콘은 배경 채우기 대비 최소 4.5:1을 유지해야 합니다.
- SC 2.1.1 키보드 접근성: 하단 내비게이션 탭은 표준
- 스크롤 동작: 하단 내비게이션 바는 터치 모멘텀 스크롤 중에 깜빡임이나 수직 떨림 없이 안정적으로 고정(
position: fixed)되어야 합니다. - 세이프 에어리어 인셋: 제스처 기반 모바일 뷰포트에서 하드웨어 홈 표시기와 겹치는 것을 방지하려면
env(safe-area-inset-bottom)을 포함해야 합니다.
일반적인 실패 패턴
- 세이프 에어리어 간격 누락:
env(safe-area-inset-bottom)을 적용하지 않아 하단 내비게이션 레이블이 iOS 제스처 바나 화면 컷아웃과 겹치는 현상. - 과도한 항목 밀도: 6~7개의 항목을 하단 바에 강제로 넣어 터치 대상을 40px 미만으로 압축하고 빈번한 실수로 잘못 탭하는 현상.
- 데스크톱에서 늘어난 바: 4개 항목 하단 바가 데스크톱 모니터에서 1920px 너비로 펼쳐져 아이콘 사이에 거대한 빈 간격이 생기는 현상.
- 라벨 없는 미스터리 아이콘: 모호한 아이콘에 텍스트 레이블을 생략하는 경우(예: 별 아이콘이 "즐겨찾기", "리뷰" 또는 "보상" 중 무엇을 의미하는지 표시하지 않음).
- 고정 내비게이션 뒤 콘텐츠 잘림: 페이지 컨테이너에
padding-bottom을 추가하는 것을 잊어 바닥글 콘텐츠와 기본 양식 제출 버튼이 고정된 하단 바 뒤에 영구적으로 가려지는 현상.
검증 기준
- 하단 내비게이션에 3~5개의 기본 목적지가 포함되어 있습니다.
- 각 탭은 48x48px 이상의 터치 대상 영역을 제공합니다.
- 활성 및 비활성 상태가 시각적으로 구별되며 WCAG AA 4.5:1 대비 요구 사항을 통과합니다.
- CSS에 세이프 에어리어 인셋 지원을 위한
padding-bottom: env(safe-area-inset-bottom)이 포함되어 있습니다. - 기본 페이지 콘텐츠 컨테이너에 하단 패딩이 포함되어 페이지 콘텐츠가 고정된 바 뒤에 숨겨지지 않습니다.
- 배지에는 접근 가능한 화면 판독기 전용 텍스트(예:
sr-only)가 포함되어 있습니다. - 내비게이션은 키보드(
Tab및Shift+Tab또는Arrow키 + 명확한:focus-visible표시기)로 완전히 접근 가능합니다. - ≥1024px 뷰포트에서 하단 바가 깔끔하게 숨겨지거나 데스크톱 헤더 또는 사이드바로 전환됩니다.