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