스마트팜 IoT Design System · v1 2026-10-14

현장에서 한눈에 읽히는
스마트팜 모니터링 화면

하우스 상태를 3D 공간 위에서 보고, 위험해지기 전에 알림을 받고, 자동으로 대응하는 서비스의 화면 규칙이에요. 모든 미리보기는 화면 명세서(iot.html)와 같은 CSS로 그려지고, 오른쪽 위에서 라이트 · 다크를 바꿀 수 있어요.

사용법 보기컨셉화면 명세서
기초
컴포넌트
패턴
아이콘
테마
라이트 · 다크

시작

기초 · Foundations

색 · 상태 색 · 글자 · 간격 · 모서리 · 표면 · 아이콘 · 모션. 모든 값은 CSS 변수(토큰)이고 라이트 · 다크 두 벌이 있어요.

컴포넌트 · Components

화면 명세서 17개 화면에서 두 번 이상 쓰는 것만 모았어요. 이름 옆 .class 를 그대로 써요.

패턴 · Patterns

컴포넌트를 조합한 화면 규칙 — 앱 껍데기 · 3D 대시보드 · 알림 흐름 · 장비 제어 · 화면 크기 · 문구.

사용법

이 가이드와 화면 명세서는 같은 CSS 한 벌(spec-src/screens.css)을 쓴다. 가이드에서 보이는 모양이 곧 화면 모양이고, 토큰을 바꾸면 둘 다 바뀐다.

파일 구조

    frontend/
    ├── spec-src/                 ← 화면 명세서 원본 (조각)
    │   ├── screens.css           ← ★ 토큰 + 컴포넌트 + 화면 (가이드도 이것을 씀)
    │   ├── icons.html            ← 아이콘 스프라이트 (i-* 89개 · 영상 목업 · 작물)
    │   ├── spec.js               ← 테마 · 앱 껍데기 · 차트
    │   ├── farm3d.js             ← 3D 장면 (Three.js)
    │   └── build.sh              → assets/iot.html
    ├── guide-src/                ← 이 가이드 원본
    │   ├── guide.css · guide.js  ← 문서 화면 (헤더 · 목록 · 코드 상자 · 검색)
    │   ├── pages-*.html          ← 페이지 내용
    │   └── build.sh              → assets/iot_guide.html
    └── assets/
        ├── iot.html              ← 화면 명세서 + 프로토타입 (빌드 결과)
        ├── iot_guide.html        ← 이 페이지 (빌드 결과)
        └── fonts/PretendardVariable.woff2

고치고 빌드하기

  1. 디자인을 바꿀 때는 가이드 먼저 — 새 컴포넌트 · 토큰은 screens.css 에 넣고, 이 가이드에 페이지(예시 · 명세)를 추가한다.
  2. 두 개 다 빌드 — 같은 CSS 를 쓰므로 가이드와 명세서를 함께 다시 만든다.
  3. 결과 HTML 은 직접 고치지 않는다 — assets/*.html 은 빌드할 때마다 덮어쓴다.
    docker exec smartfarm bash -c "bash /smartfarm/frontend/spec-src/build.sh && bash /smartfarm/frontend/guide-src/build.sh"
문서주소 (개발 서버 serve · 5173 → 호스트 55176)
디자인 가이드http://192.168.5.20:55176/assets/iot_guide
화면 명세서http://192.168.5.20:55176/assets/iot

화면 루트 .scr 와 토큰

모든 화면은 .scr 하나로 시작한다. 토큰(색 · 크기 단위) · 글자 · 아이콘 · 버튼 초기화가 여기에 걸린다. 다크는 html.theme-dark 한 줄로 바뀐다 — 화면마다 색을 따로 적지 않는다.

    <html class="theme-dark">            <!-- 없으면 라이트 (기본) -->
    <div class="scr app" data-shell="main" data-title="대시보드">
      <main class="app__main"> … </main>  <!-- 왼쪽 메뉴 · 상단바 · 탭바는 껍데기가 넣는다 -->
    </div>
  
    /* 같은 이름을 라이트 · 다크에서 다시 정의 — 컴포넌트는 이름만 쓴다 */
    .scr, .sf { --bg: #eef1f2; --panel: #ffffff; --fg: #12171b; --brand: #0f9e85; … }
    .theme-dark .scr, .theme-dark .sf { --bg: #0d1113; --panel: #171d21; --fg: #eef2f4; --brand: #2cc9ab; … }
    .card { background: var(--panel); border: 1px solid var(--line); }

앱(Vue)으로 옮길 때

  1. screens.css 를 앱 공통 CSS 로 — 토큰 · 컴포넌트 부분(화면 루트 ~ 오버레이)을 src/assets/css 로 옮기고, 화면별(A · B · C …) 부분은 각 view 의 스타일로 나눈다.
  2. 클래스 이름 그대로 — .btn · .st · .kpi 를 템플릿에 그대로 쓴다. 상태는 is-ok · is-caution · is-warn · is-danger · is-fault 클래스 하나로.
  3. 아이콘 — 스프라이트(icons.html)를 index.html 에 한 번 넣고 <svg class="ic"><use href="#i-bell"/></svg> 로 쓴다 (AppIcon 컴포넌트로 감싸도 됨).
  4. 3D — farm3d.js 의 장면 만들기(buildScene) · 라벨(labelItems)을 컴포넌트로 옮긴다. 색은 화면 토큰(--f3d-*)을 읽는다.