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

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


(정보) 레이아웃 활용 팁


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

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

    • 차트 영역 : 해당 항목의 데이터 추이나 계열 간의 비교를 한눈에 파악할 수 있습니다. (선 차트 또는 세로 막대 차트 추천)

    • 그리드 영역: 차트의 맥락을 설명하거나 현재 상태를 분석하기 위한 세부 지표값을 배치합니다.
      예) 전월 대비 증감률(%), 전년 대비 증감률(%), 목표 달성률(%)


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

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