상위 카테고리의 핵심 성과 지표(KPI)를 카드 형태로 한눈에 비교하고, 특정 카테고리를 선택해 하위 항목의 세부 데이터를 분석할 수 있는 레이아웃입니다.

 light-on (on) 레이아웃 구조

(star) 적용 사례

  • [제조·유통] 제품별 전사 실적 대시보드

  • [금융] 권역별 여수신 상품 판매 실적
    * 메인 : 권역별 총 여/수신 금액, 전월 대비 목표 달성률, 핵심 전략 상품 판매 건수 요약
    * 상세 : 소속 영업점들의 주간 실적 차트 및 개별 상품 가입 고객의 연령대, 계약 금액 등 리스트

  • [의료] 진료 센터별 환자 대기 및 병상 가동 현황
    * 메인 : 진료 센터별 총 대기 환자 수, 평균 진료 대기 시간, 당일 병상 가동률 요약
    * 상세 : 하위 진료과별 시간대별 환자 유입 추이 차트 및 개별 환자의 중증도, 담당의, 조치 상태 등 리스트

  • [교육] 단과대학별 재학생 성취도 및 학업 이탈 위험 관리
    * 메인 : 단과대학별 재학생 평균 학점, 전년 대비 등록 유지율, 중도 이탈 고위험군 학생 수 요약
    * 상세 : 전공 과별 성취도 증감 추이 차트 및 이탈 위험군 학생의 출결 현황 등 리스트



(정보) 레이아웃 활용 팁

  • 카테고리 요약 카드 구성 (메인 화면)

    • 분류 : 데이터 분석을 위한 최상위 대주제로 구성합니다.
      예) 카테고리 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... 

    • 차트 영역 : 해당 항목의 데이터 추이나 계열 간의 비교를 한눈에 파악할 수 있습니다. (선 차트 또는 세로 막대 차트 추천)
    • 그리드 영역: 차트의 맥락을 설명하거나 현재 상태를 분석하기 위한 세부 지표값을 배치합니다.
      예) 전월 대비 증감률(%), 전년 대비 증감률(%), 목표 달성률(%)


  • 차트와 그리드의 상호보완적 배치

    • 하단 그리드 영역은 상위 차트에서 확인한 데이터의 구체적인 수치를 검증하는 용도로 활용하세요.
      차트는 데이터의 경향을 빠르게 보여주지만, 정확한 값을 읽기는 어렵습니다. 바로 아래에 그리드를 배치하여 차트의 데이터를 표 형태로 제공합니다.