이 문서는 스마트 팜 프로젝트의 UI 요소를 정리하고, 각 컴포넌트의 역할 및 디자인 방향을 명확히 하기 위한 가이드입니다. 전체적인 레이아웃, 내비게이션 구조, UI 구성 요소를 포함하며, 디자이너가 참고할 핵심 사항을 정리했습니다.
메뉴는 사이드바(Sidebar) 내비게이션을 중심으로 구성되며, 각각의 페이지는 독립적인 섹션으로 존재합니다.
📌 목적: 사용자가 현재 농장의 상태를 한눈에 파악할 수 있도록 주요 정보를 시각적으로 제공
| 컴포넌트 | 설명 |
|---|---|
| 🌿 식물 캐러셀 | 사용자의 작물 목록을 아바타 + 아이콘 + 상태 정보와 함께 표시 (스크롤 가능) |
| 📊 퀵 스탯 패널 | 우측 고정 패널에 최대 재배 가능 개수, 현재 활성 작물, 자동화 상태, 물 부족 경고 등 요약 정보 표시 |
| 🎮 사용자 게임 스탯 | XP, 업적, 메달 잠금 해제 진행도 표시 |
| 📅 다가오는 일정 | 예정된 급수 & 유지보수 일정을 카드형 UI로 표시 |
| ⚡ 퀵 스타트 액션 | 빠른 작물 생성, 광고 시청 후 포인트 획득, Q&A 접근, 현재 혜택 확인 버튼 제공 |
| 🏪 창고/재배 공간 관리 | 창고에 남은 공간, 현재 재배 중인 작물에 대한 개요 |
| 🗨️ 봇 어드바이스 & 메시지 | 현재 상태 기반 추천 메시지 & 유머 요소 추가 가능 |
📌 목적: 특정 작물에 대한 심층 분석 및 관리 기능 제공
| 컴포넌트 | 설명 |
|---|---|
| 🖼️ 식물 아바타 + 상태 정보 | 중앙에 큰 아바타와 현재 성장 단계 & 건강 상태를 표시 |
| 📘 관리 팁 & 추천 조치 | 센서 데이터 기반 맞춤형 관리 팁 표시 |
| 📡 실시간 IoT 모니터링 | 현재 온도, 수분 레벨, 조도 상태, 자동화 여부 실시간 업데이트 |
| 🎯 미션 & 사용자 인터랙션 | "작물에게 인사하기", "광고 시청 후 급수 해제", "다이어리 확인" 같은 간단한 미션 제공 |
| 🎮 컨트롤 패널 | 급수 토글 버튼, 수동 조정용 스크롤 바, 실행 버튼 등 제공 |
📌 목적: 사용자의 활동 기록을 시각적으로 제공하여 재배 패턴 분석 & 포인트 적립 정보 제공
| 컴포넌트 | 설명 |
|---|---|
| 📅 활동 타임라인 | 사용자의 급수, 자동화 활성화, 작물 성장 이벤트, IoT 컨트롤 기록 표시 |
| 🌱 깃허브 잔디 스타일 로그 | 하루 단위 활동 강도를 시각화하여 유지보수 패턴 분석 가능 |
| 🏆 업적 & 메달 시스템 | 특정 행동을 달성하면 배지 & 도전 과제 잠금 해제 진행도 표시 |
| 🏅 멤버십 개요 | 현재 플랜(무료/프리미엄) & 혜택 정리 |
| 💰 포인트 시스템 | 광고 시청 보상, 포인트 사용 내역, 사용 가능한 포인트 표시 |