FNA Design System

모바일 · 시니어 모드

은행 앱의 큰글씨 모드처럼: 한 화면 한 작업, 큰 주 버튼 하나, 완결 문장. 60대 작업자가 장갑 낀 손으로 냉동창고 앞에서 쓰는 화면의 규칙입니다. 웹은 ×1.25 배율, RN 은 별도 체계.

FNA 스마트해썹
기준보다
2.3도 높습니다

두 체계

웹 큰글씨 [data-scale=large]RN 시니어 모드 SENIOR
대상관리자·관제 웹의 노안 사용자, 심사관현장 작업자 앱 (사용자 설정 또는 관리자 지정)
방식글꼴 ×1.25, 컨트롤 48, 모달 → 전체화면 시트. 레이아웃은 유지별도 화면 세트(senior/screens). 정보량을 줄이고 문장으로 바꾼다
글자본문 17.5 · 제목 25 · 숫자 45본문 22 · 제목 28 · 라벨 20 · 숫자 60(작은 카드 44) · 버튼 24
터치48 (큰 버튼 64)64 · 행 64 · 선택 카드 72
내비게이션같음하단 탭 3개(홈·점검·알림) + 앱바 "뒤로" 글자
색같은 토큰SENIOR.color — 대비를 더 높인 고정 팔레트(text #0b1220, border #8d96ab)

열 가지 규칙

  1. 한 화면 한 작업. 판정 → 값 → 확인처럼 단계로 나눈다. "2 / 3 단계" 표시.
  2. 주 버튼 하나, 64px, 전체폭, 하단. 보조는 상단 "닫기"·"뒤로" 글자 또는 밑줄 텍스트.
  3. 모달은 전체화면 시트. 가운데 작은 창·오버레이 blur 없음. 자동 닫힘·흔들림 없음.
  4. 선택은 큰 카드. 라디오·세그먼트·드롭다운 대신 72px 카드, 최대 4개, 그 이상은 단계로.
  5. 숫자 대신 문장. "−13.8℃ (기준 −22~−15)" 옆에 "기준보다 1.2도 높습니다"를 항상.
  6. 상태는 색 + 아이콘 + 글자. StatusPill large: 아이콘 28 + 18px 글자.
  7. 입력은 한 필드씩. 64px 높이, 24px 글자, 숫자 키패드. 라벨은 질문 문장("측정한 온도를 입력하세요").
  8. 날짜는 오늘·어제·그저께. 달력·기간 필터 없음. 이력은 "지난 7일" 고정.
  9. 설정·초기 설정 없음. 관리자가 대신. 시니어 화면의 설정은 큰글씨 끄기·알림·로그아웃뿐.
  10. 확인 문장은 결과를 말한다. "제출하면 내용을 고칠 수 없습니다. 고칠 것이 있으면 닫기를 누르세요."

화면

시니어 홈 — 센서 카드 (60px 숫자 + 문장 + 상태 필)
오늘 · 9월 29일 (화)
냉동창고 A
-13.8℃

기준보다 1.2도 높습니다.
문이 닫혔는지 확인하세요.

온도 이탈
냉동창고 B
-20.2℃

기준 범위 안에 있습니다.

정상
시니어 점검 — 3단계 (판정 → 값 → 확인)

확인해 주세요

3 / 3 단계

판정적합
중심온도75.2℃
시각12:00 · 김현장

저장하면 품질관리자에게 전달됩니다.

RN 시니어 컴포넌트 대응

RN (senior/ui.tsx)웹 대응규격
SeniorScreen앱바 64 + 본문 패딩 20제목 28/800, "뒤로" 글자
BigButton.fna-btn 64 · 24/900 · 라운드 16tone primary/danger/ok, 전체폭
Tile카드 링크 (아이콘 40 + 라벨 22)2열, 높이 ≥ 120, 배지 우상단
Card / BigRow.fna-card 패딩 20 · 행 64 + 셰브론tone 별 테두리 2px
BigSwitchRow행 64 + 스위치 52×30라벨 20, 보조 18
StatusPill large.fna-badge--lg + 아이콘 22~2818/800, 패딩 6/14
Notice.fna-banner 20px · 테두리 2 · 아이콘 28문장 2줄
SectionTitleh2 24/800
SeniorEmpty.fna-empty 시니어아이콘 80, 24/20
Choice.fna-choice 72 · columns 2선택 primary-container + 체크

Do · Don't

기준보다 1.2도 높습니다.
문이 닫혔는지 확인하세요.

Do 문장으로 말한다

DEV +1.2 · CL −22~−15 · ACK 필요

Don't 약어와 기호
Do 주 버튼 하나, 보조는 글자
Don't 작은 버튼 여러 개 · 아이콘 버튼

코드

<html data-scale="large">          /* 웹: 글꼴 ×1.25 · 컨트롤 48 · 모든 .fna-modal → 전체화면 시트 · 드로어 항목 64 */
/* RN */ import {SENIOR} from './senior/theme';  SENIOR.font.body 22 · SENIOR.touch 64 · SENIOR.color.text '#0b1220'
<SeniorScreen title="냉동창고 A"><BigButton tone="primary" onPress={…}>저장하기</BigButton></SeniorScreen>

안정마지막 갱신 담당 디자인시스템 TF · jjo831@farmzone.kr소스 senior/theme.ts · senior/ui.tsx · senior/status.ts · tokens.json senior.* · components.css .fna-modal--largeRules · FNA 디자인 시스템 v1.0