Best Practices
효과적인 대시보드를 설계하기 위한 핵심 원칙과 실무 가이드라인을 소개합니다.
KPI 배치
대시보드의 상단에 핵심 지표(KPI)를 NumberCard로 배치하면 사용자가 가장 중요한 수치를 즉시 파악할 수 있습니다.
권장 구성
- 상단 영역: 3~5개의 NumberCard를 가로로 배치하여 핵심 KPI를 한 줄에 요약
- 중앙 영역: LineChart, BarChart 등 추세 및 비교 차트를 배치
- 하단 영역: Table 위젯으로 상세 데이터를 제공하거나, 보조 차트를 배치
팁
NumberCard에는 접두사/접미사(₩, %, 건)를 활용하여 수치의 의미를 명확하게 전달하세요. 변화율 표시를 함께 사용하면 추세 파악이 더 용이합니다.
시각화 선택 가이드
데이터의 특성과 전달하려는 메시지에 따라 적합한 차트를 선택하는 것이 중요합니다.
| 목적 | 권장 위젯 | 예시 |
|---|---|---|
| 범주별 비교 | BarChart | 부서별 매출, 제품별 판매량 |
| 시간에 따른 추세 | LineChart | 일별 방문자 수, 월별 매출 추이 |
| 전체 대비 비율 | PieChart | 시장 점유율, 카테고리 구성비 |
| 두 변수 간 관계 | ScatterChart | 광고비 vs 매출, 온도 vs 판매량 |
| 핵심 수치 강조 | NumberCard | 총 매출, 활성 사용자 수 |
| 상세 데이터 조회 | Table | 거래 내역, 사용자 목록 |
| 설명/안내 문구 | TextBox | 섹션 제목, 데이터 해석 가이드 |
| 외부 콘텐츠 | IFrame | 외부 모니터링 도구, 문서 |
시각화 선택 시 주의사항
- PieChart는 항목이 5개 이하일 때 효과적입니다. 항목이 많으면 BarChart를 사용하세요.
- LineChart는 시간 축이 있는 데이터에 적합합니다. 범주형 데이터에는 BarChart가 더 명확합니다.
- ScatterChart는 데이터 포인트가 충분히 많을 때(최소 30개 이상) 의미 있는 패턴을 보여줍니다.
성능 최적화
대시보드의 로딩 속도와 응답성을 유지하기 위한 가이드라인입니다.
쿼리 최적화
- 집계 활용: 원본 데이터를 그대로 조회하지 말고,
GROUP BY와 집계 함수를 사용하여 결과 행 수를 줄이세요. - LIMIT 설정: Table 위젯 등 상세 데이터를 조회할 때는 반드시
LIMIT을 지정하여 과도한 데이터 반환을 방지하세요. - 필요한 컬럼만 선택:
SELECT *대신 필요한 컬럼만 명시적으로 지정하세요.
-- 나쁜 예: 전체 데이터 조회
SELECT * FROM large_table
-- 좋은 예: 집계 + 필요 컬럼만 조회
SELECT category, SUM(amount) as total
FROM large_table
WHERE date >= $from AND date <= $to
GROUP BY category
ORDER BY total DESC
LIMIT 20
위젯 수 관리
- 하나의 대시보드에 위젯 10~15개 이하를 권장합니다.
- 위젯이 많을수록 동시에 실행되는 쿼리가 증가하여 로딩 시간이 길어집니다.
- 관련 지표를 주제별로 그룹화하여 별도 대시보드로 분리하는 것을 고려하세요.
날짜 범위 활용
- DateRangeSelector를 배치하여 조회 범위를 제한하면 쿼리 성능이 크게 향상됩니다.
- 기본 날짜 범위를 최근 7일 또는 최근 30일로 설정하여 초기 로딩 속도를 개선하세요.
주의
날짜 필터 없이 전체 기간 데이터를 조회하면 대량의 데이터 처리로 인해 대시보드 응답이 느려질 수 있습니다. 반드시 DateRangeSelector 또는 쿼리 내 날짜 조건을 사용하세요.
색상 및 레이아웃
색상 사용 원칙
- 일관된 팔레트: 하나의 대시보드 내에서 동일한 색상 팔레트를 유지하여 시각적 통일감을 확보하세요.
- 의미 있는 색상: 동일한 범주(예: 특정 부서, 제품군)는 모든 차트에서 같은 색상을 사용하세요.
- 강조색 활용: 핵심 지표나 주목해야 할 데이터에 대비가 높은 색상을 사용하세요.
- 색약 고려: 빨강-초록 조합을 피하고, 명도 차이가 충분한 색상 조합을 선택하세요.
레이아웃 원칙
- 정보 계층 구조: 가장 중요한 정보를 상단 좌측에 배치합니다 (Z-패턴 읽기 방향).
- 논리적 그룹핑: 관련된 위젯끼리 인접하게 배치하고, TextBox로 섹션을 구분하세요.
- 일정한 크기: 같은 유형의 위젯은 동일한 크기로 통일하면 깔끔한 인상을 줍니다.
- 여백 활용: 위젯 간 적절한 간격을 유지하여 시각적 혼잡을 줄이세요.
팁
대시보드를 처음 설계할 때, 종이나 화이트보드에 위젯 배치를 스케치한 뒤 구현하면 더 효과적인 레이아웃을 만들 수 있습니다.
설계 체크리스트
대시보드를 공유하기 전에 다음 항목을 확인하세요:
- 핵심 KPI가 상단에 명확하게 배치되어 있는가?
- 각 차트가 전달하려는 메시지에 적합한 유형인가?
- 모든 위젯에 의미 있는 제목이 설정되어 있는가?
- DateRangeSelector가 배치되어 날짜 필터링이 가능한가?
- 쿼리에 적절한
LIMIT과 날짜 조건이 포함되어 있는가? - 색상이 일관되고 접근성을 고려하였는가?
- 불필요한 위젯 없이 핵심 정보에 집중되어 있는가?