마스터 그리드의 항목을 더블 클릭하면 별도로 구성해놓은 폼을 팝업창으로 띄워 상세 데이터를 즉각적으로 탐색하고 분석할 수 있는 마스터-디테일 (Master-Detail) 팝업 레이아웃입니다.

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


(star) 적용 사례

  • [유통] 주문 및 배송 관제
    * Master : 주문 정보(주문번호, 주문일시, 고객명, 총 결제금액, 주문상태) 조회
    * Detail : 선택한 주문의 주문 상세(개별 상품 리스트, 배송지 주소, 택배사 송장 추적 정보, CS 상담 이력) 조회

  • [제조] 장비 유지보수 및 자산 관리
    * Master : 설비 정보(설비명, 설비위치, 현재 가동률, 최근 점검일, 상태) 조회
    * Detail : 선택한 설비의 설비 제원 및 이력(상세 사양, 부품 교체 이려그 수리 매뉴얼, 센서 데이터) 조회

  • [공공] 인사 정보 및 역량 관리
    * Master : 직원 명부(사번, 설명, 부서, 직급, 근태 현황, 성과 등급) 조회
    * Detail : 선택한 직원의 인사 카드(상세 경력 사항, 보유 자격증 목록, 연도별 고과 점수, 교육 이수 현황, 연봉 변동 추이) 조회




(정보) 레이아웃 활용 팁

  • KPI 카드 구현

    • 핵심 지표를 수직으로 쌓아 올린 형태로 사용자가 화면에 진입했을 때 가장 먼저 시선이 머무는 F-자형 시선 흐름의 시작점입니다.

    • 전체 매출액과 관리 항목별 비중을 직관적으로 인지시키는 역할을 합니다.


  • 지리적 히트맵/심볼 맵 구현
    • 가장 넓은 면적을 차지하는 메인 캔버스로 위치 기반 데이터를 시각화하는 중심 축을 구현해 보세요.
    • 텍스트 데이터보다 공간적 분포(지역별 매출 비중)를 즉각적으로 보여줍니다.


  • 피벗 매트릭스 그리드

    • 엑셀을 활용하여 행과 열의 교차 지점에 수치를 표기하는 표 형태의 레이아웃을 구성해 보세요.

    • 다차원 데이터를 체계적으로 요약하여 보여줍니다.


  • 동적 데이터/랭킹 리스트
    • 상단 영역의 선택 결과에 따라 실시간으로 업데이트되는 동적 목록을 구성해 보세요.
    • 최종적으로 사용자가 확인해야 할 세부 항목을 보여줄 수 있습니다.