가장 많이 쓰이는 대시보드 화면 형태들과, 제목과 차트 사이, 위젯과 위젯 사이의 간격을 어떻게 띄워야 할지 구체적인 공식(Formula)을 알려 드립니다.
️ 1. 대표적인 업무 화면 레이아웃 3가지
목적에 맞는 레이아웃을 선택하세요. 화면 최상단에는 공통적으로 [페이지 제목]과 [조회/검색 영역]이 들어갑니다.
목록-상세 조회형 (Master-Detail)
가장 일반적인 업무 화면입니다. 좌측 메인 그리드에서 항목을 선택하면 우측 패널에 상세 정보나 차트가 나타납니다.
KPI 종합 대시보드형
화면 상단에 가장 중요한 4~5개의 KPI 요약 카드를 가로로 배치하고, 하단에 차트나 표를 나란히 배치합니다.
분할형 위젯 대시보드
좌측에 세로로 긴 표(List)를 두고, 우측에 2x2 또는 1+2 형태로 여러 지표 차트를 쪼개서 보여주는 방식입니다.
2. 대시보드를 위한 '절대 간격' 공식 (Spacing Formula)
제목과 본문 사이는 얼마나 띄워야 할까요? 위젯(카드) 사이는요? 아래 4가지 숫자 (24, 20, 16, 8)를 똑같이 적용해 보세요.
| 화면 바깥 가장자리 여백 | 화면의 가장 끝에서 내용이 시작되는 여백 (Page Padding) | 24px |
| 상단 검색부 ↔ 하단 본문 | 검색 영역 박스와 그 아래 그리드/차트가 시작되는 사이 간격 | 20px ~ 24px |
| 위젯(카드) ↔ 위젯 사이 | 여러 개의 카드를 나열할 때 카드와 카드 사이의 공간 (Gutter) | 20px |
| 위젯(카드) 안쪽 여백 | 카드 테두리와 내부 콘텐츠(글자/차트) 사이의 숨통 (Inner Padding) | 20px |
| 소제목 ↔ 본문/차트 간격 | 위젯 안에서 제목과 내용물이 너무 붙지 않게 띄워 주는 값입니다. | 16px |
| 컨트롤 ↔ 컨트롤 간격 | 라벨과 입력창 사이, 또는 버튼과 버튼 사이의 좁은 간격 | 8px ~ 12px |
