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