디자인 레퍼런스 방향

1. 데이터 시각화 중심

• 환경효과(탄소, 물, 폐기물) 수치를 직관적으로 보여주는 게 핵심이므로, 그래프·차트 시각화 UI가 강한 사이트를 참고
• 포인트
  • 메인 지표를 카드(숫자+아이콘)로 크게 노출
  • 막대그래프, 원형차트, 진행률바 등 시각적 완성도가 높은 UI
  • 색상 대비로 데이터 가독성 높게

2. 환경/지속가능성 브랜드 톤앤매너

• 친환경 메시지를 시각적으로 바로 전달해야 함.
• 포인트
  • 메인 컬러: 그린·블루 계열 (제로메이커스 브랜딩색), 보조색 노란색
  • 아이콘·일러스트: 그림자·과한 입체 효과 없이 데이터 차트와 어울리는 심플한 디자인

3. 대시보드/리포트 연동형 사이트

• 관리자·사용자 페이지 구조가 동시에 존재하므로, 대시보드형 UI 참고 필요
• 포인트
  • 관리자 페이지: 데이터 입력/필터/검색이 직관적인 UX
  • 사용자 페이지: 실시간 현황과 통계 비교 UI가 한눈에 들어오는 구조
  • PDF 리포트와 웹 UI 스타일이 일관되게 유지되는 사례

4. 모바일 대응(PWA) 사례

• 행사 현장에서 모바일로 보는 경우가 많음.
• 포인트
  • 모바일·PC 전환 시 레이아웃이 깔끔하게 변환되는 반응형 사이트
  • 모바일 차트 가독성이 좋은 사례
  • 터치 기반 필터·검색 인터랙션

5. 인터랙션 최소화, 직관성 강화

• 현장·보고서 용이므로 과도한 애니메이션은 오히려 방해됨
• 포인트
  • 차트 로딩 시 가벼운 페이드·슬라이드 애니메이션 정도만
  • 클릭 시 바로 반응하는 심플한 UI
  • 데이터 강조 색상(메인컬러) 외에는 중립 톤 유지

요청 핵심사항(기능명세 순서별)

1. 다회용기 수량 입력 / 자동 환경효과 산출

   • 상단에 핵심 3지표(탄소·물·폐기물 절감량)를 카드형 박스로 강조

   • 숫자·아이콘 포함, 지표별 색상 구분

     

2. 대시보드 시각화

   • 막대·원형 차트 혼합
   • 데이터 값 라벨 표시, 색상 대비로 지표 구분 명확히

3. 실시간 대여/반납 현황

   • 하단에 진행률 바 또는 원형 차트 배치

   • 수량·반납률 표시