DSDesignSkill
|

/템플릿/웹이즈 물류관제 — 실시간 화물 관제 대시보드형 랜딩

새 창 ↗

컨테이너 폭 그대로 · sandbox 미리보기

설명

실시간 화물 관제 SaaS를 위한 한국어 랜딩 템플릿입니다. 관제실 화면을 그대로 옮긴 듯한 데이터 대시보드형 구성으로, 히어로에 라이브 관제 보드 목업(그리드 배경 위 경로 SVG + 상태 리스트)을 배치하고 이어서 KPI 카드 5종, 시간대별 운행·지연 영역 차트, 운송 유형 도넛, 권역별 정시율 바, 8행 배차 현황표를 배치했습니다. 상태 배지는 정상·지연주의·지연·하역대기·완료·회차중을 색으로 구분하고, 알림 규칙 섹션은 딥 틸(#134e4a) 반전 블록에 규칙 의사코드와 P1~P4 레벨 표를 나란히 놓아 화면의 리듬을 끊습니다. 제목·본문은 IBM Plex Sans KR, 모든 수치는 IBM Plex Mono의 tabular-nums로 고정해 표와 차트의 자릿수가 흔들리지 않습니다. 틸 #0f766e를 유일한 강조색으로 두고 앰버·로즈는 경고 상태에만 허용해 '정확·신뢰' 톤을 유지했습니다. 사진 자리는 전부 틸 그라디언트 플레이스홀더이고, 아이콘 64개는 모두 인라인 SVG입니다.

섹션 구성

  1. 01헤더 (관제 상태 유틸리티 바 + 스티키 내비 + 모바일 메뉴)
  2. 02히어로 — 라이브 관제 보드 패널
  3. 03관제 지표 5종 KPI 카드
  4. 04도입 규모 수치 스트립
  5. 05운행·지연 추이 차트 (영역 차트 + 운송유형 도넛 + 권역별 정시율 바)
  6. 06배차 현황표 (필터 칩 + 진행률 + 상태 배지)
  7. 07관제 기능 6종 카드 그리드
  8. 08알림 규칙 엔진 (규칙 블록 + P1~P4 레벨 표)
  9. 09지연 원인 분석 수평 바
  10. 10데이터 신뢰성·보안 (그라디언트 이미지 + 4항목)
  11. 11시스템 연동 그리드 + 웹훅 JSON 코드블록
  12. 12도입 절차 5단계 타임라인
  13. 13도입 사례 3종 + 인용
  14. 14요금제 3단 + 지원 범위 비교표
  15. 15FAQ 아코디언 6문항
  16. 16데모 신청 폼
  17. 17CTA 밴드
  18. 18푸터 (4열 + 사업자정보 + 가상정보 고지)

변경 이력

v1.0.02026-07-31

최초 등록