가장 많이 쓰이는 대시보드 화면 형태들과, 제목과 차트 사이, 위젯과 위젯 사이의 간격을 어떻게 띄워야 할지 구체적인 공식(Formula)을 알려 드립니다.
️ 1. 대표적인 업무 화면 레이아웃 3가지
2. 대시보드를 위한 '절대 간격' 공식 (Spacing Formula)
제목과 본문 사이는 얼마나 띄워야 할까요? 위젯(카드) 사이는요? 아래 4가지 숫자 (24, 20, 16, 8)를 똑같이 적용해 보세요.
| 화면 바깥 가장자리 여백 | 화면의 가장 끝에서 내용이 시작되는 여백 (Page Padding) | 24px |
| 상단 검색부 ↔ 하단 본문 | 검색 영역 박스와 그 아래 그리드/차트가 시작되는 사이 간격 | 20px ~ 24px |
| 위젯(카드) ↔ 위젯 사이 | 여러 개의 카드를 나열할 때 카드와 카드 사이의 공간 (Gutter) | 20px |
| 위젯(카드) 안쪽 여백 | 카드 테두리와 내부 콘텐츠(글자/차트) 사이의 숨통 (Inner Padding) | 20px |
| 소제목 ↔ 본문/차트 간격 | 위젯 안에서 제목과 내용물이 너무 붙지 않게 띄워 주는 값입니다. | 16px |
| 컨트롤 ↔ 컨트롤 간격 | 라벨과 입력창 사이, 또는 버튼과 버튼 사이의 좁은 간격 | 8px ~ 12px |
