페이지 트리

버전 비교

  • 이 줄이 추가되었습니다.
  • 이 줄이 삭제되었습니다.
  • 서식이 변경되었습니다.

가장 많이 쓰이는 대시보드 화면 형태들과, 제목과 차트 사이, 위젯과 위젯 사이의 간격을 어떻게 띄워야 할지 구체적인 공식(Formula)을 알려 드립니다.

️ 1. 대표적인 업무 화면 레이아웃 3가지

목적에 맞는 레이아웃을 선택하세요. 화면 최상단에는 공통적으로 [페이지 제목]과 [조회/검색 영역]이 들어갑니다.

Section


Column
width33%


패널
borderColor#DFE1E6
bgColor#ffffff
borderWidth1
borderStylesolid
목록-상세 조회형 (Master-Detail)

가장 일반적인 업무 화면입니다. 좌측 메인 그리드에서 항목을 선택하면 우측 패널에 상세 정보나 차트가 나타납니다.



Column
width33%


패널
borderColor#DFE1E6
bgColor#ffffff
borderWidth1
borderStylesolid
KPI 종합 대시보드형

화면 상단에 가장 중요한 4~5개의 KPI 요약 카드를 가로로 배치하고, 하단에 차트나 표를 나란히 배치합니다.



Column
width34%


패널
borderColor#DFE1E6
bgColor#ffffff
borderWidth1
borderStylesolid
분할형 위젯 대시보드

좌측에 세로로 긴 표(List)를 두고, 우측에 2x2 또는 1+2 형태로 여러 지표 차트를 쪼개서 보여주는 방식입니다.



...