컨셉 — Field Clear

농장주가 하우스 밖에서, 폰 한 번 보고 "어느 동 · 어디서 · 무슨 일이 · 무엇을 했는지" 알 수 있어야 한다. 장식보다 읽히는 것이 먼저다.

다섯 가지 원칙

1. 숫자 목록 대신 공간 — 대시보드 가운데는 3D 하우스. 센서 값은 그 위치의 라벨로 붙는다. 이상한 센서는 멀리서도 항상 보인다.
2. 상태는 색 + 아이콘 + 글자 — 정상 · 주의 · 경고 · 위험 · 장애 다섯 단계. 색만으로 전달하지 않는다 (색약 · 햇빛 아래 화면).
3. 큰 숫자, 작은 단위 — 30.6℃ 처럼 값은 크고 굵게, 단위는 작게. 숫자는 자릿수가 흔들리지 않게 고정폭(tabular).
4. 자동이 한 일을 보여준다 — "무엇을 · 왜(규칙) · 결과"를 한 줄로. 사람이 개입할 때는 무엇이 멈추는지 누르기 전에 알려준다.
5. 차분한 바탕, 강조는 하나 — 회청색 바탕 · 흰 판 · 청록(brand) 하나. 빨강 · 주황 · 노랑은 상태에만 쓴다.

모양 요약

요소규칙
바탕라이트 회청색 --bg 위에 흰 판 --panel · 다크 거의 검정 위에 짙은 회색 판. 그라데이션 · 유리 효과는 3D 위에 뜬 도구에만 (뒤가 비쳐야 위치를 잃지 않음)
강조색청록 --brand 하나 — 주 버튼 · 선택 · 자동(규칙) 표시. 농작물 · 식물 느낌이지만 상태 초록(정상)과는 다른 색
글자Pretendard · 제목 800 · 숫자 750~800 · 본문 400~600. 기본 14px × 화면 배율(--u)
모서리둥글지만 각지게 — 판 1em · 버튼 0.75em · 상태 · 칩은 알약(999px)
움직임짧고 조용하게 (0.2 ~ 0.32초). 반복 움직임은 "지금 주의가 필요한 것"(깜빡이는 라벨 · 3D 팬 회전)에만

권장 · 지양

경고30.6℃
권장

상태는 아이콘 + 글자 + 색, 값은 크게 · 단위는 작게.

30.6 ℃
지양

숫자에 색만 칠해 상태를 알리기 — 색을 못 보면 "정상"인지 "경고"인지 모른다.

색

색은 역할 이름(토큰)으로만 쓴다. 값은 라이트 · 다크에서 각각 다시 정의되어 있고, 오른쪽 위 테마를 바꾸면 아래 값도 바뀐다.

바탕 · 판

--bg화면 바탕 ·
--bg-2왼쪽 메뉴 · 탭바 ·
--panel카드 · 드로어 ·
--panel-2판 안의 칸 · 버튼 ·
--panel-3막대 바탕 · 배지 ·
--scrim오버레이 뒤 ·

글자 · 선

--fg제목 · 값 · 본문 ·
--fg-2설명 · 보조 ·
--fg-3라벨 · 시각 · 단위 ·
--line판 테두리 · 구분선 ·
--line-2입력칸 · 진한 선 ·

강조 (brand)

--brand주 버튼 · 선택 ·
--brand-2주 버튼 hover ·
--brand-inkbrand 위 글자 ·
--brand-weak선택 바탕 · 자동 배지 ·
--brand-textweak 위 글자 · 링크 ·
대시보드 자동 · R2

동 · 계열 색

여러 동을 한 차트 · 한 화면에서 비교할 때만 쓴다. 순서가 고정이다 (1동 파랑 → 2동 주황 → 3동 초록). 4동 이상은 같은 색을 다시 쓰지 않고 동 이름 라벨로 구분한다. 상태 색과 섞어 쓰지 않는다.

--zone-11동 · 단일 계열 ·
--zone-22동 ·
--zone-33동 ·
--band-ok차트 적정 범위 띠 ·
--band-peer우수농가 범위 띠 ·

3D 장면 색 --f3d-*

3D 엔진(farm3d)이 화면 토큰을 읽어 그린다 — 테마를 바꾸면 3D 도 다시 그려진다. 숫자를 코드에 적지 않는다.

--f3d-bg하늘 · 배경 ·
--f3d-ground땅 ·
--f3d-frame하우스 골조 ·
--f3d-crop작물 줄 ·
--f3d-heat-*히트맵 낮음 → 적정 → 높음
--f3d-wind바람 화살표 ·
--f3d-rain빗줄기 ·
--f3d-tree뒤편 숲 ·
--f3d-animal야생동물 ·
권장

새 화면도 var(--panel) · var(--fg-2) 처럼 이름으로. 반투명이 필요하면 color-mix(in srgb, var(--panel) 88%, transparent).

지양

#ffffff · rgba(…) 를 화면 CSS 에 직접 쓰기 — 다크에서 흰 판이 그대로 남는다.

상태 색 .is-*

이 서비스에서 가장 중요한 색. 상태 클래스 하나(is-warn)를 붙이면 그 안의 --st 가 바뀌고, 배지 · 점 · 라벨 · 알림 아이콘이 모두 그 색을 쓴다. 항상 아이콘 + 글자와 함께.

단계

정상.is-ok · --st-ok적정 범위 안. 대시보드에서는 동 이름만 (값은 확대해야 보임)
주의.is-caution적정을 벗어나기 시작 · 빠르게 오르는 중 · 예보. 앱 안에만 표시
경고.is-warn기준 초과가 지속 → 자동제어 · 푸시 알림
위험.is-danger작물 피해 직전 · 제어 실패 → 푸시 + 문자 · 미확인 시 전화
장애.is-fault센서 · 장비 통신 두절 · 고장. 값이 아니라 기기 문제 (보라 — 위험 단계와 섞이지 않게)
꺼짐.is-off사용 안 함 · 꺼진 규칙 · 대기

쓰는 법

상태 클래스는 가장 바깥 하나에만 붙인다. 안쪽 아이콘 · 테두리 · 바탕은 var(--st) 를 읽는다.

경고 T2-331.4℃ 
    .is-ok { --st: var(--st-ok); }   .is-caution { --st: var(--st-caution); }   .is-warn { --st: var(--st-warn); }
    .is-danger { --st: var(--st-danger); }   .is-fault { --st: var(--st-fault); }   .is-off { --st: var(--st-off); }
    /* 바탕은 상태색을 옅게 섞는다 — 라이트 · 다크 모두 같은 식 */
    .st { background: color-mix(in srgb, var(--st) 16%, transparent); }

상태 · 아이콘 짝

상태아이콘글자 · 문구
정상i-check정상 · 완료 · 복구
주의i-alert-c (원)주의 · 예보 · 추세
경고i-alert (삼각)경고 · 기준 초과
위험i-octagon (팔각)위험 · 제어 실패
장애i-unplug · i-bug장애 · 통신 두절 · 고장
센서 1 장애주의 · 고온
권장

모양이 다른 아이콘으로 단계를 구분 (원 · 삼각 · 팔각) — 흑백에서도 구분된다.

새 기능
지양

상태가 아닌 곳에 상태 색 쓰기 — 빨강은 "위험"으로만 읽혀야 한다. 삭제 버튼(.btn--danger)만 예외.

글자

글꼴은 Pretendard Variable 하나. 크기는 기본 14px × --u 에 em 배수로 쓴다 — 화면이 커지면(4K) --u 만 바뀌어 전부 같이 커진다.

크기 단계

큰 숫자30.6℃.big-num · 2.6em · 750
KPI 값13회.kpi__value · 1.5em · 800
알림 상세 제목2동 온도 30.6℃.adetail__title · 1.45em · 800
화면 제목대시보드.top__title · 1.3em · 800
패널 제목2동 센서 T2-3.drawer__title · 1.2em · 800
카드 제목오늘 자동제어.card__h · 0.98em · 750
본문30℃ 넘은 상태 2분 지속 → 규칙 R21em(14px) · 400 · 1.45
설명3동 자동제어는 T3-1 · T3-3 평균으로 대체 중.aitem__desc · 0.8em · fg-2
라벨진행 중 알림.kpi__label · 0.8em · 650 · fg-3

숫자

  • 값은 크게 · 단위는 작게 — 단위는 <small> (0.42 ~ 0.72em, 회색). 값과 단위 사이 띄어쓰기 없음: 30.6℃ · 11m/s · 68%
  • 고정폭 숫자 — 값 · 시각은 font-variant-numeric: tabular-nums (.num). 값이 바뀌어도 자리가 흔들리지 않는다.
  • 소수점은 측정 정밀도까지 — 온도 한 자리(30.6), 습도 · 토양 · 개폐율 정수(61%), 풍속 한 자리(3.2m/s), 예보 정수(11m/s).
  • 자간 — 큰 숫자 · 제목은 좁게(-0.03 ~ -0.05em), 본문 -0.01em.
습도61%
30.6℃ 14:12:04

간격

간격은 em 으로 적는다 — 글자 크기(--u)를 따라 같이 커지고 작아진다. 아래 단계 안에서 고른다.

단계

0.3em아이콘 ↔ 글자 (배지 · 칩)
0.5em버튼 묶음 · 목록 항목 사이
0.8em패드 화면의 칸 사이 · 3D 도구 여백
1em모니터 화면의 칸(카드) 사이 · 카드 안쪽 위아래
1.1 ~ 1.3em카드 · 드로어 안쪽 좌우
1.2 / 1.4em본문 바깥 여백 (위아래 / 좌우) · 다이얼로그 안쪽

화면별 여백

위치모니터패드폰
.app__main1.2em 1.4em1em 1.1em0.3em 1em 1.2em
칸 사이 (grid gap)1em0.8em0.9em (세로 쌓기)
.card1em 1.1em (모든 기기 같음)
.drawer__body1.1em 1.3em · 항목 사이 1.1em바텀시트 — 같음

모서리

작은 것일수록 작게, 판일수록 크게. 상태 · 칩 · 스위치처럼 "값 하나"를 담는 것은 알약(999px).

0.45em배지
0.65em입력칸 · 3D 시점 버튼
0.75em버튼 · 세그먼트 · 아이콘 버튼
0.85em알림 항목 · 카메라 영상
1em카드 · KPI · 3D 뷰어
1.2em다이얼로그
1.4em 위폰 바텀시트
999px상태 · 칩 · 스위치 · 3D 라벨

표면 · 그림자

층은 세 개 — 바탕(--bg) · 판(--panel + 테두리 + --shadow-1) · 떠 있는 것(드로어 · 다이얼로그 · 툴팁, --shadow-2). 3D 위에 뜬 도구는 반투명 판으로 뒤가 비친다.

--bg화면 바탕
--panel + --shadow-1카드 · KPI · 기기 카드
--panel-2판 안의 칸 · 알림 항목
--shadow-2드로어 · 다이얼로그 · 툴팁

3D 위 반투명 판

3D 위 도구 · 범례 · 날씨 칩 · 작은 카메라 창은 color-mix(in srgb, var(--panel) 88~90%, transparent) + backdrop-filter: blur(10px). 뒤 3D 가 살짝 비쳐서 "공간 위에 떠 있다"는 것이 보인다. 3D 가 아닌 곳에는 쓰지 않는다.

정상주의경고위험장애

아이콘 개

24 × 24 격자 · 선 두께 1.9 · 둥근 끝 선 아이콘 한 벌. 색은 currentColor — 글자색을 따른다. 스프라이트 한 번 넣고 <use href="#i-이름"/> 로 쓴다. 칸을 누르면 코드가 복사된다.

크기

클래스크기쓰는 곳
.ic--sm1em배지 · 칩 · 글자 사이 (자동 · 3D 표시)
.ic1.25em버튼 · 메뉴 · 카드 제목 · 라벨
.ic--lg1.6em알림 상세 머리 · 빈 화면

장비 · 센서 아이콘

온도습도CO₂토양일사EC 천창측창유동팬보온커튼난방기관수보광등퇴치기

모션

움직임은 어디서 왔는지 · 어디로 갔는지를 알려줄 때만. 곡선은 하나 — cubic-bezier(0.2, 0.8, 0.2, 1) (빠르게 출발해 부드럽게 멈춤).

2동 센서 T2-3

아래에서 올라옴 · 0.32초

무엇시간 · 곡선움직임
메뉴 이동 (본문 교체)240ms · 감속본문만 아래 8px → 제자리 + 페이드. 메뉴 · 상단바는 그대로
드로어 · 패널 열기320ms · 감속오른쪽에서 밀려 들어옴 (폰 = 아래에서). 뒤 오버레이 200ms 페이드
닫기200ms · ease-in들어온 반대 방향으로
3D 시점 이동750ms · easeInOutCubic카메라가 날아감. 사용자가 끌면 바로 멈춤
3D 라벨 깜빡임1.6s 반복주의 이상 · 장애 라벨만 (.is-pulse)
스위치200ms손잡이 이동
권장

반복 움직임은 "지금 봐야 하는 것"에만 — 위험 라벨 깜빡임, 켜진 팬 회전, 퇴치기 소리 고리.

지양

카드가 차례로 튀어나오는 장식 애니메이션 — 상황판처럼 오래 켜 두는 화면에서 눈이 피곤하다.