홈/템플릿/웹이즈 물류관제 — 실시간 화물 관제 대시보드형 랜딩
설명
실시간 화물 관제 SaaS를 위한 한국어 랜딩 템플릿입니다. 관제실 화면을 그대로 옮긴 듯한 데이터 대시보드형 구성으로, 히어로에 라이브 관제 보드 목업(그리드 배경 위 경로 SVG + 상태 리스트)을 배치하고 이어서 KPI 카드 5종, 시간대별 운행·지연 영역 차트, 운송 유형 도넛, 권역별 정시율 바, 8행 배차 현황표를 배치했습니다. 상태 배지는 정상·지연주의·지연·하역대기·완료·회차중을 색으로 구분하고, 알림 규칙 섹션은 딥 틸(#134e4a) 반전 블록에 규칙 의사코드와 P1~P4 레벨 표를 나란히 놓아 화면의 리듬을 끊습니다. 제목·본문은 IBM Plex Sans KR, 모든 수치는 IBM Plex Mono의 tabular-nums로 고정해 표와 차트의 자릿수가 흔들리지 않습니다. 틸 #0f766e를 유일한 강조색으로 두고 앰버·로즈는 경고 상태에만 허용해 '정확·신뢰' 톤을 유지했습니다. 사진 자리는 전부 틸 그라디언트 플레이스홀더이고, 아이콘 64개는 모두 인라인 SVG입니다.
섹션 구성
- 01헤더 (관제 상태 유틸리티 바 + 스티키 내비 + 모바일 메뉴)
- 02히어로 — 라이브 관제 보드 패널
- 03관제 지표 5종 KPI 카드
- 04도입 규모 수치 스트립
- 05운행·지연 추이 차트 (영역 차트 + 운송유형 도넛 + 권역별 정시율 바)
- 06배차 현황표 (필터 칩 + 진행률 + 상태 배지)
- 07관제 기능 6종 카드 그리드
- 08알림 규칙 엔진 (규칙 블록 + P1~P4 레벨 표)
- 09지연 원인 분석 수평 바
- 10데이터 신뢰성·보안 (그라디언트 이미지 + 4항목)
- 11시스템 연동 그리드 + 웹훅 JSON 코드블록
- 12도입 절차 5단계 타임라인
- 13도입 사례 3종 + 인용
- 14요금제 3단 + 지원 범위 비교표
- 15FAQ 아코디언 6문항
- 16데모 신청 폼
- 17CTA 밴드
- 18푸터 (4열 + 사업자정보 + 가상정보 고지)
변경 이력
v1.0.02026-07-31
최초 등록