가장 많이 쓰이는 대시보드 화면 형태들과, 제목과 차트 사이, 위젯과 위젯 사이의 간격을 어떻게 띄워야 할지 구체적인 공식(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 |