상위 카테고리의 핵심 성과 지표(KPI)를 카드 형태로 한눈에 비교하고, 특정 카테고리를 선택해 하위 항목의 세부 데이터를 깊이 있게 분석할 수 있는 레이아웃입니다.
레이아웃 구조
적용 사례
- [제조·유통] 카테고리별 전사 실적 대시보드
- [금융] 권역별 여수신 상품 판매 실적
* 메인 : 권역별 총 여/수신 금액, 전월 대비 목표 달성률, 핵심 전략 상품 판매 건수 요약
* 상세 : 소속 영업점들의 주간 실적 차트 및 개별 상품 가입 고객의 연령대, 계약 금액 등 리스트 - [의료] 진료 센터별 환자 대기 및 병상 가동 현황
* 메인 : 진료 센터별 총 대기 환자 수, 평균 진료 대기 시간, 당일 병상 가동률 요약
* 상세 : 하위 진료과별 시간대별 환자 유입 추이 차트 및 개별 환자의 중증도, 담당의, 조치 상태 등 리스트 - [교육] 단과대학별 재학생 성취도 및 학업 이탈 위험 관리
* 메인 : 단과대학별 재학생 평균 학점, 전년 대비 등록 유지율, 중도 이탈 고위험군 학생 수 요약
* 상세 : 전공 과별 성취도 증감 추이 차트 및 이탈 위험군 학생의 출결 현황 등 리스트
레이아웃 활용 팁
카테고리 요약 카드 구성 (메인 화면)
분류 : 데이터 분석을 위한 최상위 대주제로 구성합니다.
예) 카테고리 A,B,C,D... / 브랜드 A,B,C,D... / 지점 A,B,C,D...
카테고리가 6개 미만일 경우, 카드 너비를 넓혀 여백을 최소화 하세요.
카테고리가 6개 초과일 경우, 주요 카테고리만 선별해서 노출하는 것을 권장합니다.Main KPI : 해당 카드의 주제가 되는 핵심 결과값(예: 총 매출액)을 배치합니다.
- 그리드 영 : 하단에는 주요 보조지표(예: 매출 수량, 매출 단가, 매출 원가 등)를 그리드에 배치합니다.
- 하위 카테고리 상세 카드 구성 (상세 화면)
- 분류 : 메인 화면에서 선택한 카테고리에 속하는 세부 하위 항목으로 구성합니다.
예) 하위 카테고리 A,B,C... / 상품 A,B,C... / A,B,C,D...
- 차트 영역 : 해당 항목의 데이터 추이나 계열 간의 비교를 한눈에 파악할 수 있습니다. (선 차트 또는 세로 막대 차트 추천)
- 그리드 영역: 차트의 맥락을 설명하거나 현재 상태를 분석하기 위한 세부 지표값을 배치합니다.
예) 전월 대비 증감률(%), 전년 대비 증감률(%), 목표 달성률(%)
- 분류 : 메인 화면에서 선택한 카테고리에 속하는 세부 하위 항목으로 구성합니다.
차트와 그리드의 상호보완적 배치
하단 그리드 영역은 상위 차트에서 확인한 데이터의 구체적인 수치를 검증하는 용도로 활용하세요.
차트는 데이터의 경향을 빠르게 보여주지만, 정확한 값을 읽기는 어렵습니다. 바로 아래에 그리드를 배치하여 차트의 데이터를 표 형태로 제공합니다.
