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