Layout

폰(<600) · 태블릿(600~1023) · 데스크톱(≥1024) 세 구간. 폰은 하단 탭 + 우측 드로어, 태블릿은 마스터-디테일, 데스크톱은 네이비 사이드바입니다.

폰

태블릿

데스크톱

브레이크포인트

구간	폭	내비게이션	본문 폭	차트 높이	대표 화면
폰	< 600	하단 탭 4~5개 + 우측 상단 햄버거 → 우측 드로어	전체 − 32	170	현장 작업자 앱
태블릿	600 ~ 1023	좌 마스터(380) + 우 디테일 (≥900) · 그 아래는 폰과 같음	720 (content-max)	220	품질관리자 태블릿·키오스크
데스크톱	≥ 1024	좌 네이비 사이드바 244 (접힘 66) + 상단 바 56	1100 (wide-max)	260	본사 관제·관리자 웹

/* tokens.css 는 참고값만 제공 — @media 안에서는 var() 를 못 쓴다 */
@media (max-width:599px)  { /* 폰 */ }
@media (min-width:600px) and (max-width:1023px) { /* 태블릿 */ }
@media (min-width:1024px) { /* 데스크톱 */ }
/* RN: BREAKPOINTS.phone 600 · tabletLarge 840 · splitView 900 (짧은 변 기준) */

구조

데스크톱 — 사이드바 + 상단 바

사이드바 244 · 상단 56 · 본문 최대 1100

사이드바 244

관제
센서
CCP
일지
결재

상단 바 56 · 업체 선택 · 검색 · 사용자

본문 (max 1100, 패딩 24) — 카드 2~3열

태블릿 — 마스터 · 디테일

마스터 380 + 디테일 (≥900 에서 분할)

목록 380
냉동 A
냉동 B
냉장 1

선택 항목 상세 (max 720)

폰 — 앱바 + 본문 + 하단 탭

앱바 56 · 본문 패딩 16 · 하단 탭 (safe-area 포함)

냉장·냉동

-18.4℃

냉동창고 A · 기준 안

2.1℃

냉장 1 · 기준 안

그리드 · 열

내용	폰	태블릿	데스크톱
스탯 타일	2열	3열	4열
센서 카드	1열	2열	3열
차트 카드	1열	2열	2~3열
폼 필드	1열	auto-fit 160px	auto-fit 160px
표	가로 스크롤 + 첫 열 고정	전체	전체

.fna-form-grid{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))} 처럼 열 수를 고정하지 않고 최소 폭으로 접습니다.

안전 영역 · 고정 요소

하단 탭·시니어 시트 푸터는 padding-bottom: calc(16px + env(safe-area-inset-bottom)).
드로어 패널은 padding-top: env(safe-area-inset-top).
고정 요소 z-index: 상단 바 10 · 사이드바 30 · 팝오버 40 · 모달·드로어 70 · 토스트 99 (--fna-z-*).
토스트는 하단 26px, 폰에서 하단 탭이 있으면 탭 위 8px.

Do · Don't

현황

Do 폰 햄버거는 우측 상단, 드로어는 우측에서

현황

Don't 좌측 햄버거뒤로가기 자리와 충돌하고 오른손 엄지에서 멀다

안정마지막 갱신 2026-09-29담당 디자인시스템 TF · jjo831@farmzone.kr소스 tokens.json breakpoint.* · size.sidebar/drawerFoundations · FNA 디자인 시스템 v1.0