이 글은 누구를 위한 것인가
- KPI 카드를 늘리다 보니 **화면이 '숫자만 많은 곳'**이 된 제품 디자이너·PM
- 테이블·필터·차트를 같은 뷰에 넣으면서도 업무 흐름을 끊지 않으려는 팀
- 디자인 시스템에 대시보드 전용 레이아웃·밀도 토큰을 추가하려는 리드
들어가며
B2B SaaS에서 대시보드는 "보기 예쁜 그림"이 아니라 의사결정을 앞당기는 도구다. 그런데 화면에 넣을수록 좋다는 압박은 곧 조밀도 높은 UI로 이어진다. 밀도가 나쁜 것은 아니다. 문제는 밀도가 스캔 가능성·비교 가능성·오류 복구 비용을 침식할 때다.
이 글에서는 심미적 여백 논쟁 대신, 사람이 정보를 어떻게 읽는지(F-패턴, Z-패턴, 시각적 앵커)에 맞춰 밀도를 조절하는 방법을 다룬다.
1. 밀도를 올리기 전에: 잡무 세 가지 정의
밀도 문제는 대개 요구사항이 한 뷰에 몰리기 때문이다. 먼저 역할을 나눈다.
- 모니터링: 이상 징후를 빨리 보는 일 (KPI, 스파크라인, 알림 배지)
- 비교·분석: 기간·세그·제품군을 바꿔가며 보는 일 (차트, 피벗에 가까운 테이블)
- 조치: 행 선택 후 일괄 작업, 티켓 생성, 내보내기
한 화면에 세 가지를 다 넣으면 실패 확률이 올라간다. 기본 뷰는 모니터링, 드릴다운은 별 패널·모달·서브 라우트로 나누는 편이 안전하다.
2. 시각적 계층: 숫자가 많을 때의 생존 법칙
2.1 한 행에 하나의 "주장"
KPI 카드마다 제목 + 단위 + 단 하나의 주 숫자 + 변화량만 먼저 보이게 한다. 부가 지표(전년 동기, 목표 대비)는 같은 카드 안의 2차 텍스트나 툴팁으로 낮춘다.
2.2 정렬과 그리드
대시보드는 12칼럼 그리드에 KPI를 3×4처럼 깔 때 읽기 순서가 튀기 쉽다. 중요한 지표는:
- 좌상단 또는 시선이 먼저 가는 열(문화권에 따라 RTL 고려)에 둔다.
- 카드 높이를 통일해 행 스캔이 끊기지 않게 한다.
2.3 색의 용도 축소
상태 색(성공·경고·위험)은 이상 징후에만 쓴다. 모든 카드 제목을 브랜드 컬러로 칠하면 무엇이 진짜 경고인지 사라진다. skeleton-ui-loading-states-design에서 말한 것처럼, 모션·색 역할을 남용하지 않는 원칙이 대시보드에도 그대로 적용된다.
3. 테이블과 차트의 공존
밀도가 최고로 올라가는 구간이다.
- 차트 위에 같은 데이터의 요약 테이블을 두면 중복이지만, **다운스트림 사용자(재무, 운영)**가 원하면 허용할 수 있다. 이때는 차트=추세, 테이블=정밀 역할을 명시한다.
- 테이블은 기본 7±2 컬럼을 넘기지 않도록, 나머지는 컬럼 선택기로 넘긴다.
- 고정 열(첫 열·행 식별)과 가로 스크롤은 터치·키보드 접근성과 함께 설계한다.
accessibility-first-component-library-wcag22의 포커스 순서와 연결된다.
4. 필터·세그먼트: 밀도의 숨은 킬러
필터가 많을수록 상단이 컨트롤 패널로 도망친다.
- 저빈도 필터는 "고급" 접기, 고빈도만 노출한다.
- URL 쿼리와 동기화해 공유 가능한 대시보드 상태를 만든다. "이 화면만 보면 된다"는 팀 문화를 지원한다.
5. 디자인 토큰 관점
디자인 시스템에 다음을 두면 밀도 논쟁이 줄어든다.
- density 토큰:
comfortable/compact(행 높이·패딩·폰트 스텝) - dashboard-row-height-table 같은 시만틱 이름으로 제품별로 스왑
Primitive 색이 아니라 surface-elevated, text-secondary처럼 의미 토큰으로 카드와 배경을 구분하면 다크모드 전환도 dark-mode-color-system-semantic-tokens와 맞물린다.
6. 검증 방법
- 5초 테스트: 처음 보는 사용자에게 "지금 가장 위험한 지표가 뭐로 보이나"를 묻는다.
- 업무 시나리오: "어제 대비 매출 하락 원인 찾기"처럼 한 줄 시나리오로 클릭 수를 잰다.
7. 페르소나별로 “밀도”의 의미가 다르다
7.1 운영자(Ops)
하루에 수백 건의 알림을 훑어야 한다. 밀도보다 예외가 눈에 들어오는지가 생존을 가른다. Ops에게는 색을 아끼고, 임계값 초과 행만 배경 대비를 주는 방식이 효과적이다. 카드가 많을수록 “모두 정상 색”이면 진짜 이상만 강조해야 한다.
7.2 애널리스트
피벗·세그먼트·기간 비교가 주 업무다. 대시보드 한 장보다 **저장된 뷰(Saved view)**와 **내보내기(CSV, 연동 API)**가 더 중요할 수 있다. 밀도는 테이블 쪽에 투자하고, 상단 KPI는 애널리스트가 고른 소수로 제한하는 구조가 맞다.
7.3 임원(Executive)
한 화면에서 “지금 비즈니스가 건강한가”만 본다. 임원용은 지표 수를 3~5개로 줄이고, 나머지는 주간 이메일·PDF 리포트로 돌린다. 임원에게 12개 KPI를 한 번에 주면 밀도가 아니라 잡음이 된다.
UI 팀은 “한 화면에 몇 카드까지”를 롤별로 허용 상한을 정해두면 요구사항 협상이 쉬워진다.
8. 반응형·밀도 토큰: 작은 화면에서의 생존
노트북 기준으로 설계한 12칼럼 그리드가 1366px 미만에서 깨지면, 사용자는 가로 스크롤을 싫어한다.
- 브레이크포인트마다 카드 스택 순서를 바꾼다(중요 KPI를 위로).
- 테이블은 모바일에서 카드형으로 변환하거나, “핵심 3컬럼 + 상세” 패턴을 쓴다.
comfortable밀도는 데스크톱,compact는 노트북·테이블 뷰에만 쓰는 식으로 역할을 나눈다.
디자인 토큰에 최소 터치 타겟(44×44pt 근처)을 넣어 두면, 밀도를 올이면서도 포인터·터치 공통으로 접근성 요구를 만족하기 쉽다.
9. 빈 상태·오류·스켈레톤: 밀도가 높을수록 더 중요
정보가 많은 화면은 데이터가 비었을 때 더 허전해 보인다.
- 빈 상태: “아직 이벤트 없음” 한 줄이면 부족하다. 다음 액션(데이터 연결, 필터 완화)을 카드 안에 넣는다.
- 부분 오류: 차트 API만 실패했을 때 카드 단위 에러 바운더리로 나머지는 유지한다. 전체 풀스크린 에러는 Ops 화면에서 치명적이다.
- 스켈레톤: 모든 숫자를 동일한 회색 박스로 채우면 스캔이 어렵다. KPI 자리만 짧은 바, 테이블은 행 높이만 맞춘 플레이스홀더로 구분한다.
10. 협업·거버넌스
대시보드는 살아 있는 제품이다.
- 주간 리뷰: “지난주에 추가된 카드”를 짧게 되돌아보며 사용 지표(해당 위젯 클릭, 내보내기)를 본다.
- 지표 소유권: 각 KPI에 **팀·SLA·정의(분자/분모)**를 붙여 두면 “이 숫자 뭐야?” 질문이 줄어든다.
- 권한: 민감 매출 데이터는 역할 기반으로 위젯을 숨기되, 레이아웃 깨짐이 없게 그리드 빈 칸 처리 규칙을 둔다.
11. 심화: 스파크라인 vs 풀 차트
KPI 카드 아래에 넣는 미니 추세선은 공간 대비 효율이 좋다. 다만 기간이 길면 계절성·이벤트 스파이크가 작아 보여 오판을 부른다.
- 기본은 7~30일처럼 짧은 윈도
- 자세한 분석은 클릭 시 전체 화면 차트로 연결
- Y축 스케일을 카드마다 다르게 두면 비교가 어렵다 → 같은 지표 끼리 축 범위를 공유할지 팀에서 정한다
12. 테이블에서 키보드·스크린 리더: 밀도와 접근성의 타협
밀도를 올리면 행 높이가 줄어들어 클릭 영역이 좁아질 수 있다. WCAG 관점에서 포커스 링이 잘 보이게 유지하고, 정렬 가능한 헤더에는 정렬 방향을 이름에 포함하는 패턴(이름 오름차순)을 쓰면 스크린 리더 사용자에게도 상태가 전달된다.
무한 스크롤 대신 페이지네이션을 선택하면, “지금 몇 번째 행인지”가 더 명확해져 보조기술 사용자에게 유리한 경우가 많다. 다만 대용량에서 페이지 이동이 느리면 가상 스크롤과 조합해 렌더 행 수를 제한한다. 이때도 포커스가 리스트 밖으로 튀지 않게 포커스 관리 규칙을 정해야 한다.
차트에 데이터 테이블 대체 텍스트를 두는지, long description 패턴을 쓸지는 팀 표준이 필요하다. 밀도가 높을수록 시각 정보에만 의존하지 않는 층을 빠뜨리기 쉽다.
13. 성능: 렌더 비용이 ‘밀도’를 다시 깎는다
KPI 12개와 500행 테이블을 동시에 그리면 메인 스레드가 버벅일 수 있다. 다음을 검토한다.
- 서버 페이지네이션과 지연 로딩으로 첫 페인트를 줄인다.
- 차트는 데이터 포인트 상한(예: 최대 2천 점) 후 집계한다.
- 필터 변경 시 디바운스를 걸어 불필요한 네트워크 요청을 줄인다.
성능이 떨어지면 사용자는 스크롤을 반복하고 필터를 다시 누르게 되어, 밀도를 올린 이점이 조작 비용으로 상쇄된다. 라이트하우스·웹 바이탈 숫자와 함께 **“필터 한 번 바꿀 때의 시간”**을 내부 지표로 두면 설득력이 높다.
맺음말
B2B 대시보드에서 정보 밀도는 픽셀이 아니라 인지 예산이다. 카드·테이블·필터를 줄이지 못할 때는, 한 화면의 주장을 하나로 줄이고 나머지는 드릴다운으로 미루는 것이 더 빠른 제품이 되는 지름길이다.