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

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

(star) 적용 사례

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

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

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

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



(정보) 레이아웃 활용 팁

  • 올인원 메인 화면 구성

    • 이미지, 핵심 지표(KPI), 상세 목록이 하나의 카드 안에 모두 담긴 구조입니다.

    • 카드 좌측 이미지 영역에 상징적인 이미지나 아이콘을 배치해 사용자가 자연스럽게 집중할 수 있도록 구성하세요.
    • 상세 목록에는 해당 카테고리를 견인하는 Top5 하위 항목이나 주요 비교 일자(전월대비, 전년대비, 전년동월대비 등)에 대한 핵심 수치를 배치하면, 유의미한 인사이트를 우선 얻을 수 있습니다.


  • 수직 패널을 활용한 항목 병렬 비교 (상세 화면)
    • 하위 항목들을 세로로 긴 패널 형태로 나란히 배치해, 동일한 조건에서 성과를 나란히 비교하는데 최적화된 구조입니다.
    • 패널 간 레이아웃을 동일하게 맞추고, 차트의 Y축 최대값을 통일하면 항목 간 실적 편차를 시각적으로 훨씬 뚜렷하게 비교할 수 있습니다.


  • 차트와 그리드의 수직적 분석 흐름

    • 각 패널 안에서 상단 차트로 추세와 패턴을 먼저 파악하고, 하단 그리드에서 정확한 수치를 최종 확인하는 흐름을 유도하세요.

    • 차트는 '어떤 항목이 상승·하락 추세인지'를 보여주고, 그리드는 '정확히 얼마인지'를 검증하는 역할로 두 영역이 서로를 보완합니다.