모바일 · 폰/태블릿
현장 폰은 장갑·습기·저조도, 품질관리자 태블릿은 마스터-디테일. 짧은 변 600·840·900 이 기준이고, 폰은 세로 고정, 태블릿은 가로 허용입니다.
폰
태블릿
데스크톱
기기 구간
| 구간 | 짧은 변 | 방향 | 내비게이션 | 본문 | 대표 기기 |
|---|---|---|---|---|---|
| 폰 | < 600 | 세로 고정 | 하단 탭 4~5 + 우측 드로어 | 1열, 가장자리 16 | 현장 공용 폰 (6.1~6.7") |
| 태블릿 | 600 ~ 839 | 둘 다 | 하단 탭 + 드로어 (세로) · 좌 레일 66 (가로) | 2열, 가장자리 24, 최대 720 | 8" 태블릿 |
| 큰 태블릿 | ≥ 840 (분할 ≥ 900) | 가로 권장 | 좌 마스터 380 + 우 디테일 | 디테일 최대 720 | 10~12" 태블릿 · 키오스크 |
/* RN */ BREAKPOINTS = { phone: 600, tablet: 600, tabletLarge: 840, splitView: 900, contentMaxWidth: 720, masterPaneWidth: 380 }
const isSplit = Math.min(width, height) >= 900; // 짧은 변 기준 — 회전해도 구간이 바뀌지 않는다현장 폰 규칙
- 터치 44 이상, 주 행동 48~64. 장갑 사용 사업장은 시니어 모드 권장(64).
- 엄지 영역: 주 버튼은 화면 하단 전체폭, 햄버거·검색은 우측 상단(오른손 기준, 왼손 설정 시 좌우 반전은 하지 않는다 — 심사관·교육 일관성).
- 저조도·김 서림: 본문 15px 이상, 굵기 대비 400/800, 상태는 색 + 라벨. 다크 테마는 야간 냉동창고 작업용으로 제공.
- 오프라인: 기록은 기기에 큐잉 후 동기화. 상단 caution 배너 "오프라인 · 3건 전송 대기". 동기화 시각을 설정 > 정보에.
- 알림: 경보 푸시는 소리·진동 OS 기본, 앱 내 배지. 방해금지 시간 설정(설정 > 알림) — 경보는 예외.
- 키보드: 숫자는
inputmode="decimal", 키보드가 주 버튼을 가리지 않게 스크롤(KeyboardAvoidingView). - 뒤로가기: Android 하드웨어 뒤로 = 앱바 뒤로. 작성 중 화면에서 뒤로는 "작성 중인 내용이 있습니다 · 나가기 / 계속 작성" 시트.
- 회전 금지: 폰은 세로 고정(차트 가로 보기 예외 없음 — 표 보기로).
태블릿 규칙
- ≥ 900 에서 마스터(목록 380) + 디테일. 목록 선택 시 디테일만 갱신, 뒤로가기는 목록 포커스로.
- 디테일이 없을 때 우측은 빈 상태 "왼쪽에서 센서를 선택하세요".
- 가로 레일 66: 아이콘 + 짧은 라벨(2~3자), 현재 항목 primary-container. 펼침 244 는 데스크톱 웹과 같다.
- 키오스크(벽면 고정 태블릿): 자동 잠금 해제, 관제 읽기 전용, 30초 무조작 시 홈으로.
- 외부 키보드·마우스 지원: 포커스 링, Tab 순서(데스크톱 웹 규칙 준용).
화면
Do · Don't
Do 주 버튼은 하단 전체폭, 키보드 위
Don't 주 버튼이 앱바 우측 작은 글자 (현장 폰)
Do 오프라인은 사실 + 자동 처리 안내
Don't 오프라인에서 저장 차단
안정마지막 갱신 담당 디자인시스템 TF · jjo831@farmzone.kr소스 tokens.json breakpoint.* · size.appbar/drawer/touch · RN BREAKPOINTSRules · FNA 디자인 시스템 v1.0