좌측 핵심 지표를 선택하면 우측에 상단의 KPI 영역을 클릭하면 하단에 연동된 상세 데이터를 즉각적으로 탐색하고 분석할 수 있는 마스터-디테일 (Master-Detail) 레이아웃입니다.
레이아웃 구조
적용 사례
- [공공] 주요 사업 예산 집행 현황
* 전체 현황 : 기관 총 예산, 경상운영비 집행률, 주요 사업비 집행률 등
* 상세 분석 : '주요 사업비' 클릭 시, 해당 사업의 소속기관별 집행액 내역 추적 / 부서별 예산 집행 지연 사유 파악하는 심층 데이터 및 원인 분석 - [제조·유통] 생산 라인 가동 및 공정 불량 현황
* 전체 현황 : 전사 공장 종합 가동률, 목표 생산량 대비 달성률, 핵심 공정별 누적 불량률 등
* 상세 분석 : 특정 '공장 종류' 클릭 시, 불량이 집중된 공장 라인 / 근무조 및 설비 노후도와의 상관관계를 도출하는 공정 지연 및 수율 하락 원인 분석 - [의료] 권역별 병상 가동 및 중증 환자 수용 현황
* 체 현황 : 전체 가용 병상 수, 중환자실 가동률, 응급실 병상 평균 대기 시간 등
* 상세 분석 : '중환자실 가동률' 포화 지표 클릭 시, 권역별 대형 병원 실시간 병상 여력 / 진료과별 전문 의료진 배치 현황 분석으로 응급환자 수용 불가 원인 및 병목 구간 진단
레이아웃 활용 팁
최상단 핵심 요약 KPI 마스터(Master) KPI 버튼 및 요약 카드
화면 최상단에는 데이터 분석의 대주제가 되는 최상위 핵심 결과값을 카드 형태로 넓게 배치하세요.
예) 총인원, 전체 예산, 전사 실적 등- 사용자가 하단 영역에서 다양한 조건을 클릭하며 상세 데이터를 파고 들더라도, 가장 이 KPI 카드는 단순한 요약 수치를 보여주는 것을 넘어 조건을 제어하는 마스터(Master) 버튼 역할을 합니다.
- 사용자가 상단에서 중요한 기준점을 시야에서 잃지 않고 비교 , 특정 카드를 클릭하며 하단의 상세 데이터를 분석할 수 있도록 돕습니다.
- 좌측 상단 마스터와 우측 하단 상세(Detail) 화면 연동
- 좌측 상단 KPI 카드 패널에서 특정 요약 항목을 클릭하면, 우츨 영역의 데이터가 하단 영역이 해당 조건에 맞춰 즉시 재구성되도록 하세요.
예) 시트1은 좌측 상단 마스터 그리드 KPI 영역에, 시트2는 우측 요약 하단 상세 정보 영역에 독립적으로 구성 - 콤보박스나 필터 조건 조건을 여러 번 조작할 필요 없이, 직관적인 마우스 클릭으로 직관적인 상의하달식(Top-Down) 데이터 탐색 동선을 최적화할 수 있습니다.
- 좌측 상단 KPI 카드 패널에서 특정 요약 항목을 클릭하면, 우츨 영역의 데이터가 하단 영역이 해당 조건에 맞춰 즉시 재구성되도록 하세요.
이미지 배치를 활용한 지리적/공간적 시각화 (우측 상단)
우측 상단의 이미지 영역에는 직관적인 그래픽 이미지를 배치하여 활용하세요.
예) 대한민국 지도, 관할 구역 도면 등- 소속기관별 현황이나 시설물 위치 등 지리적인 분포가 중요한 데이터를 지도 이미지 위에 배치한 레이블 컴포넌트로 출력하여 입체적이고 직관적인 데이터 분석을 지원합니다.
- Chart-EX 컴포넌트를 활용한 고도화된 차트 분석 (우측 하단)
- 우측 하단 영역에는 Chart-EX(차트 컴포넌트)를 배치하여 시각화 분석의 깊이를 더해 보세요.
- 기본적인 막대/선 차트를 넘어, 히트맵(Heatmap)이나 캔들 차트(Candlestick)와 같은 고도화된 하이 차트(High Chart)를 적용하여 다차원 데이터의 밀도,
이상치 분포 또는 시계열 변동 추이를 한눈에 파악할 수 있습니다.