내비게이션

정의

언제 쓰고 언제 쓰지 않나

• 하단 탭은 영역을 바꾼다. 필터·기간 전환에 쓰지 않는다(→ 알약 탭·세그먼트).
• 드로어는 가끔 쓰는 것을 담는다. 매일 쓰는 기능이 드로어 안에만 있으면 안 된다.
• 탭은 같은 대상의 다른 보기다. 서로 무관한 화면을 탭으로 묶지 않는다.
• 사이드바는 데스크톱 전용. 1024 미만에서는 드로어로 바뀐다.

해부도 — 드로어

1. 머리: 업체 · 사업장지금 어느 데이터를 보고 있는지. 사업장 전환 버튼
2. 섹션 제목11px 대문자 자간 .08em, muted
3. 항목 (≥44, 시니어 64)아이콘 22 + 라벨 15px 700. 활성은 primary-container 배경
4. 꼬리 요소배지(미처리 건수) 또는 스위치(설정). 하나만
5. 푸터사용자·역할, 로그아웃(위험 색 글자). safe-area 패딩

변형

<div class="fna-appbar"><span class="fna-appbar__left"></span><span class="fna-appbar__title">홈</span><button class="fna-appbar__right" aria-label="메뉴" data-toggle="#nav-drawer"><svg viewBox="0 0 24 24"><path d="M4 7h16M4 12h16M4 17h16"/></svg></button></div>
  <div class="phone__body"><p class="fna-muted">우측 상단 메뉴를 눌러 드로어를 열어 보세요.</p></div>
  <nav class="fna-bottom-nav" style="position:relative"><a class="is-active" href="#"><svg class="icon-row" viewBox="0 0 24 24"><path d="M3 11 12 4l9 7v9H3z"/></svg>홈</a><a href="#"><svg class="icon-row" viewBox="0 0 24 24"><path d="M12 3v11"/><circle cx="12" cy="17" r="3"/></svg>센서</a><a href="#"><svg class="icon-row" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="m8 12 3 3 5-6"/></svg>CCP</a><a href="#"><svg class="icon-row" viewBox="0 0 24 24"><path d="M6 3h9l5 5v13H6z"/></svg>일지</a><a href="#"><svg class="icon-row" viewBox="0 0 24 24"><circle cx="5" cy="12" r="1.5"/><circle cx="12" cy="12" r="1.5"/><circle cx="19" cy="12" r="1.5"/></svg>더보기</a></nav>
  <div class="fna-drawer" id="nav-drawer" hidden><div class="fna-drawer__panel"><div class="fna-drawer__head"><span class="fna-drawer__tenant">(주)한결식품</span><span class="fna-drawer__facility">평택공장</span></div><div class="fna-drawer__list"><a class="fna-drawer__item is-active" href="#">일지</a><a class="fna-drawer__item" href="#">결재</a><a class="fna-drawer__item" href="#">경보 센터</a><a class="fna-drawer__item" href="#">서명 등록</a></div><div class="fna-drawer__foot"><button class="fna-btn fna-btn--outline fna-btn--block" data-toggle="#nav-drawer">닫기</button></div></div></div>

<div class="fna-tabs" role="tablist"><button class="fna-tab" role="tab" aria-selected="true">오늘</button><button class="fna-tab" role="tab" aria-selected="false">이번 주</button><button class="fna-tab" role="tab" aria-selected="false">이력 <span class="fna-tab__count">128</span></button></div>

<div class="fna-tabs fna-tabs--pill" role="tablist"><button class="fna-tab is-active" role="tab">오늘</button><button class="fna-tab" role="tab">7일</button><button class="fna-tab" role="tab">30일</button><button class="fna-tab" role="tab">90일</button><button class="fna-tab" role="tab">직접 입력</button></div>

상태

치수

Do · Don't

접근성

• 하단 탭·사이드바는 <nav aria-label="주 메뉴">, 현재 항목 aria-current="page".
• 드로어는 role="dialog" aria-modal="true", 열릴 때 닫기 버튼으로 포커스 이동, 닫히면 햄버거로 복귀, ESC 로 닫힘, 포커스 트랩.
• 탭은 role="tablist"/"tab"/"tabpanel", aria-selected, 좌우 화살표 이동.
• 활성 표시는 색 + 굵기 + 밑줄(또는 배경) — 색만이 아니다.

문구

하단 탭 라벨은 2~3자 명사: 홈 · 센서 · CCP · 일지 · 더보기. 드로어 섹션은 기록 · 관리 · 설정. "마이페이지"·"메뉴" 같은 빈 말 대신 내용을 쓴다. 탭은 "오늘 / 이력", "차트 / 표"처럼 대등한 짝.

코드

<nav class="fna-bottom-nav" aria-label="주 메뉴">
  <a href="/home" class="is-active" aria-current="page"><svg …/>홈</a> …
</nav>

<div class="fna-drawer" id="drawer" hidden>
  <div class="fna-drawer__panel" role="dialog" aria-modal="true" aria-label="전체 메뉴">
    <div class="fna-drawer__head"><span class="fna-drawer__tenant">(주)한결식품</span>…</div>
    <div class="fna-drawer__list"><div class="fna-drawer__section">기록</div><a class="fna-drawer__item is-active">일지</a>…</div>
    <div class="fna-drawer__foot">…</div>
  </div>
</div>

<div class="fna-tabs" role="tablist"><button class="fna-tab" role="tab" aria-selected="true">오늘</button>…</div>
<div class="fna-tabs fna-tabs--pill">…</div>

안정마지막 갱신 2026-09-29담당 디자인시스템 TF · jjo831@farmzone.kr소스 components.css .fna-bottom-nav · .fna-drawer · .fna-tabs · docs/index.html 사이드바 크롬Components · FNA 디자인 시스템 v1.0