⑤ 모바일 내비게이션 — 탭바 vs 드로어
모바일에서 주요 메뉴를 상단에 두지 않습니다. 화면이 커지면서 엄지가 상단에 닿지 않기 때문입니다.
판단 기준 — 개수 하나로 갈립니다
| 주요 메뉴 | 패턴 |
|---|---|
| 5개 이하 | 하단 탭바 .jt-tabbar |
| 6개 이상 | 탭바 4개 + “더보기” → 드로어, 또는 드로어 단독 |
⚠️
탭바에 6개를 밀어 넣지 마세요. 한 칸이 좁아져 터치 타깃 44px가 깨지고, 라벨이 잘립니다. 정말 6개가 필요하면 “무엇이 정말 주요 메뉴인지”를 먼저 줄이세요.
하단 탭바
<nav class="jt-tabbar" aria-label="주요 메뉴">
<a class="jt-tabbar-item" href="/items" aria-current="page">
<span class="jt-ico-mask" style="--jt-ico-url:url(/brand/icons/inventory_2.svg)" aria-hidden="true"></span>
<span class="jt-tabbar-label">품목</span>
</a>
…
</nav>세 가지가 자동으로 처리됩니다.
| 홈바 회피 | env(safe-area-inset-bottom) — iPhone 하단 바에 가리지 않습니다 |
| 본문 여백 | body:has(.jt-tabbar) .jt-main이 하단 여백을 자동으로 만듭니다. 앱이 계산할 필요 없습니다 |
| 데스크톱 숨김 | 모바일 폭에서만 나타납니다 |
🚫
탭바 아이콘은 SVG 방식(.jt-ico-mask)을 쓰세요.
아이콘 폰트는 CDN이 막히면 안 뜹니다. 주요 내비게이션이 안 보이면 앱을 쓸 수 없습니다.
핵심 29종이 /brand/icons/에 준비돼 있습니다.
라벨 없이 아이콘만 두지 마세요. 아이콘만으로 뜻이 통하는 경우는 생각보다 적습니다.
드로어
- 딤은
--color-dim-weak(.24) — 바텀시트·드로어는 뒤가 보여야 어디에 있었는지 잊지 않습니다 - 모달용
--color-overlay(.48)를 쓰면 너무 어두워 맥락이 끊깁니다 - 열림 상태는
data-open="true"로 토글합니다 - 모달과 같은 규칙 — 열릴 때 포커스를 안으로, 닫을 때 원래 버튼으로,
Esc로 닫기
함께 바뀌는 것들
모바일로 내려가면 내비게이션만 바뀌는 게 아닙니다.
| 데스크톱 | 모바일 |
|---|---|
| 사이드바 | 하단 탭바 또는 드로어 |
| 표 (열 5개) | .jt-card-row 카드 목록 |
| 모달 | 하단에서 올라오는 시트로 자동 전환 |
| hover 툴팁 | 토글팁 — hover가 없습니다 |
| 라벨-값 목록 2열 | 라벨이 위로 자동 전환 |
하지 말 것
- 주요 메뉴를 상단 햄버거에만 두기 — 한 번 더 눌러야 보입니다
- 탭바에 6개 이상
- 아이콘만, 라벨 없이
- 탭바 아이콘을 폰트로 (CDN 차단 시 사라집니다)
- 딤을 진하게 (
--color-overlay) — 드로어는 뒤가 보여야 합니다 - 브레드크럼을 모바일에서 통째로 숨기기 — 마지막 2단계만 남기세요
접근성
<nav aria-label="주요 메뉴">로 감싸기- 현재 위치에
aria-current="page" - 각 항목 최소 44×44px — 탭바 높이
--jt-tabbar-h(56px)가 이미 충족합니다 - 드로어를 열면 뒤 콘텐츠는
inert또는aria-hidden으로 잠급니다