헤더 (앱바)

화면 맨 위 56px 띠. 좌 = 뒤로가기 또는 로고, 중 = 제목, 우 = 햄버거(전체 메뉴) 또는 주요 액션 1개. 햄버거는 항상 우측 상단입니다.

냉동창고 A평택공장 · 2026-09-29

정의

앱바는 현재 화면이 무엇인지(제목), 어디로 돌아가는지(뒤로), 무엇을 더 할 수 있는지(우측 액션)를 알려주는 고정 띠입니다. 폰·태블릿에서는 primary 색 앱바, 데스크톱 웹에서는 네이비 상단 바(사이드바와 한 벌)를 씁니다.

언제 쓰고 언제 쓰지 않나

쓴다	쓰지 않는다
모든 화면의 첫 줄 — 제목이 없는 화면은 없다	모달·시트 안 (모달은 자체 머리를 갖는다)
우측에 이 화면의 주요 액션 1개(저장·검색·필터)	우측에 아이콘 2개 이상 (더보기로 묶는다)
스크롤 시 고정(sticky)	스크롤에 따라 숨김·축소 (현장에서는 항상 보여야 한다)

해부도

냉동창고 A평택공장 · 2026-09-29

좌측 슬롯 44×44뒤로가기(하위 화면) 또는 로고(최상위). 비어 있어도 자리를 유지한다
제목17px 800, 한 줄, 넘치면 말줄임. 화면명과 동일
부제(선택)11px, 업체·사업장·날짜 등 맥락. 시니어 모드에서는 생략
우측 슬롯 44×44햄버거(전체 메뉴) 또는 주요 액션 1개. 둘 다 필요하면 액션이 우선하고 메뉴는 하단 탭 "더보기"로

변형

기본 (primary) — 폰·태블릿

냉장·냉동 현황

코드

<div class="fna-appbar"><span class="fna-appbar__left"></span><span class="fna-appbar__title">냉장·냉동 현황</span><button class="fna-appbar__right" aria-label="메뉴"><svg viewBox="0 0 24 24"><path d="M4 7h16M4 12h16M4 17h16"/></svg></button></div>

표면형 (surface) — 하위 화면, 콘텐츠가 이미 색을 많이 쓸 때

금속검출 일지

코드

<div class="fna-appbar fna-appbar--surface"><button class="fna-appbar__left" aria-label="뒤로"><svg viewBox="0 0 24 24"><path d="m15 5-7 7 7 7"/></svg></button><span class="fna-appbar__title">금속검출 일지</span><button class="fna-appbar__right fna-btn fna-btn--text" style="min-width:44px">저장</button></div>

시니어 — 높이 64, 제목만, 뒤로가기 글자 포함

냉동창고 A

코드

<div class="fna-appbar" style="min-height:64px"><button class="fna-appbar__left" aria-label="뒤로" style="min-width:auto;padding:0 8px;font-weight:800;font-size:17px"><svg viewBox="0 0 24 24"><path d="m15 5-7 7 7 7"/></svg>뒤로</button><span class="fna-appbar__title" style="font-size:22px">냉동창고 A</span><span class="fna-appbar__right"></span></div>

데스크톱 상단 바 (네이비) — 로고 · 업체 선택 · 검색 · 사용자

FNA 관제평택공장 ▾김품질 · 품질관리자

상태

기본

호버

포커스

메뉴 열림

치수

항목	기본	시니어	토큰
높이	56	64	`--fna-size-appbar-height` / `-large-height`
좌우 슬롯	44 × 44	44 × 64	`--fna-size-appbar-touch`
아이콘	24	28	`--fna-size-appbar-icon`
제목	17 / 800	22 / 800	`--fna-font-size-xl`
좌우 패딩	8	8	`--fna-space-sm`
배경 / 글자	primary / primary-on · surface 형은 surface / text + 하단 선

Do · Don't

일지 작성

Do 우측 액션은 하나, 라벨 있는 텍스트 버튼

일지 작성

Don't 우측에 아이콘 세 개44px 슬롯 밖으로 넘치고 뜻이 안 읽힌다

CCP

Do 제목 = 화면명 = 하단 탭 라벨

안녕하세요, 평택공장님

Don't 제목에 인사말·업체명만

접근성

앱바는 <header>, 제목은 <h1> (화면당 하나).
아이콘 버튼은 aria-label 필수: "뒤로", "메뉴 열기", "메뉴 닫기". 햄버거는 aria-expanded·aria-controls.
primary 배경 위 흰 글자 10.4:1. surface 형은 text 14.9:1.
터치 44 × 44 (KWCAG 2.2 지침 2.5.3 초과 충족). 시니어 44 × 64.

문구

슬롯	규칙	예
제목	명사구, 12자 이내, 화면 ID 와 대응	냉장·냉동 현황 · 금속검출 일지 · 경보 센터
우측 액션	동사 2~3자, 결과가 예측되는 말	저장 · 제출 · 필터
뒤로 (시니어)	"뒤로" 글자 동반	← 뒤로

코드

<header class="fna-appbar">
  <button class="fna-appbar__left" aria-label="뒤로"><svg …/></button>
  <h1 class="fna-appbar__title">냉동창고 A<span class="fna-appbar__sub">평택공장</span></h1>
  <button class="fna-appbar__right" aria-label="메뉴 열기" aria-expanded="false" aria-controls="drawer"><svg …/></button>
</header>
<!-- 변형: .fna-appbar--surface · 시니어: <html data-scale="large"> 에서 높이 64 자동 -->

안정마지막 갱신 2026-09-29담당 디자인시스템 TF · jjo831@farmzone.kr소스 components.css .fna-appbarComponents · FNA 디자인 시스템 v1.0