대시보드와 모니터링

목표

운영자가 첫 화면에서 서비스 상태를 판단하고, 조치가 필요한 예외를 찾아 원인과 복구 행동으로 이동하게 한다. 대시보드는 가능한 모든 수치를 모은 보고서가 아니라 지금 결정해야 할 일을 밝히는 작업 표면이다.

우선순위 구조

1. 전체 상태: 운영자가 지금 안심해도 되는지
2. 조치 필요: 실패, 지연, 누락, 위험 임계값
3. 진행 중: 오래 걸리거나 완료를 기다리는 작업
4. 핵심 추이: 변화가 의사결정에 필요한 지표
5. 상세 진입: record, job, 사용자 또는 설정으로 이동

정상 지표가 예외보다 시각적으로 더 크게 소리치지 않게 한다.

지표 선택

• 사용자가 어떤 판단과 행동을 할지 먼저 정의한다.
• 상태를 바꾸지 않는 vanity metric은 기본 화면에서 제외한다.
• 같은 범위의 핵심 값은 MetricStrip으로 묶는다.
• 독립된 설명이 필요한 값만 StatCard로 분리한다.
• 장기 추이와 원인은 chart 또는 table로 제공한다.
• 기준 기간, timezone, 대상 범위와 분모를 표시한다.

예외와 조치

• 예외는 심각도뿐 아니라 사용자가 실제로 조치할 수 있는지로 정렬한다.
• 실패 수치만 보여주지 말고 가장 오래된 시각, 영향 대상, 가능한 복구를 연결한다.
• 같은 원인으로 발생한 대량 실패는 개별 alert로 반복하지 않고 묶어 설명한다.
• 확인 완료, 담당자 지정, 재시도 같은 상태를 보존한다.
• 위험 색은 조치가 필요한 범위에만 사용한다.

갱신과 신뢰도

• 마지막 갱신 시각과 자동 갱신 여부를 항상 확인할 수 있게 한다.
• refresh 중 기존 데이터를 유지하고 갱신 중 상태를 표시한다.
• 데이터 소스 일부가 실패하면 전체 dashboard를 빈 화면으로 만들지 않는다.
• stale 기준을 정의하고 기준을 넘으면 명시적인 상태로 바꾼다.
• 사용자가 수동 새로고침해도 필터, scroll과 선택을 유지한다.

실시간 변화

• 모든 숫자 변화에 animation을 적용하지 않는다.
• 사용자 조치가 필요한 새 예외만 제한적으로 알려준다.
• 정렬이 실시간으로 바뀌어 row가 계속 이동하지 않게 갱신 batch 또는 명시적 적용을 검토한다.
• 자동 갱신 때문에 사용자가 읽거나 선택 중인 항목이 사라지지 않게 한다.
• 중요한 상태 전이는 notification 정책과 연결한다.

Drill-down

• 각 지표와 예외는 같은 필터가 적용된 상세 목록으로 이동해야 한다.
• dashboard → 목록 → 상세 → dashboard 사이에서 기간과 범위를 보존한다.
• card 전체가 목적지처럼 보이면 semantic link를 명확히 제공한다.
• 상세에서 조치한 결과가 dashboard 요약에 반영되는 시점을 알린다.

상태

• initial loading: dashboard frame과 핵심 영역 skeleton
• refreshing: 기존 값 유지, 갱신 표시
• healthy: 중립 표현, 과도한 success 반복 금지
• attention: 확인할 예외와 다음 행동
• incident: 영향 범위와 복구 상태
• partial data: 누락된 source 명시
• stale: 마지막 신뢰 시각과 수동 갱신
• empty: 운영 대상 자체가 없는지 기간 결과만 없는지 구분
• error: 실패한 section과 재시도 범위 분리

좁은 화면

• 지표는 한 열 또는 의미 있는 두 열로 전환한다.
• 조치 필요 영역을 추이 chart보다 먼저 둔다.
• table은 record list로 바꾸고 상태, 영향, 시간, 주 행동을 보존한다.
• chart를 작게 축소해 label을 잃기보다 핵심 결론과 상세 링크를 남긴다.

접근성

• dashboard h1 아래 영역을 논리적인 h2로 나눈다.
• 자동 갱신 숫자를 모두 live region으로 만들지 않는다.
• incident와 중요한 작업 결과만 적절한 status/alert로 알린다.
• chart에는 텍스트 요약과 accessible data table을 제공한다.
• 상태색 외에 레이블, 아이콘, 영향 설명을 사용한다.
• refresh button과 자동 갱신 control은 현재 상태와 접근 가능한 이름을 가진다.
• keyboard focus가 자동 갱신으로 이동하거나 사라지지 않게 한다.

예제

<PageScaffold width="wide">
  <PageHeader
    title="운영 현황"
    description="오늘 처리 중인 작업과 확인이 필요한 실패를 보여줘요."
    meta={<span>마지막 갱신 14:32 · 1분마다 자동 갱신</span>}
    actions={<Button variant="outline">지금 새로고침</Button>}
  />
  <MetricStrip ariaLabel="오늘의 운영 지표" items={metrics} />
  <Section title="확인 필요" description="자동 복구되지 않은 항목부터 보여줘요.">
    <ActionRequiredList />
  </Section>
  <Section title="처리 추이">
    <ThroughputChart />
  </Section>
</PageScaffold>

피해야 할 사용

• 가능한 모든 수치를 첫 화면에 나열
• 정상 상태마다 큰 success card 반복
• 마지막 갱신 시각과 범위 생략
• 일부 요청 실패로 dashboard 전체를 숨김
• 자동 갱신으로 읽고 있던 row를 계속 재정렬
• 지표 card가 상세로 이동하는지 알 수 없는 구조
• chart 색만으로 series와 위험 구분
• 예외보다 브랜드 그래픽을 더 크게 배치

검토 체크

• 첫 5초 안에 정상인지 조치가 필요한지 판단할 수 있다.
• 각 지표가 실제 결정 또는 행동과 연결된다.
• 정상보다 조치 가능한 예외의 우선순위가 높다.
• 기간, 범위, timezone, 마지막 갱신을 표시한다.
• refreshing, partial, stale, incident 상태가 정의돼 있다.
• 자동 갱신이 읽기, 선택, focus를 방해하지 않는다.
• 지표 drill-down이 같은 조건을 보존한다.
• chart에 텍스트·table 대안이 있다.
• 좁은 화면에서도 조치 필요 영역이 먼저 보인다.

관련 항목

• MetricStrip
• StatCard
• 데이터 비교
• 비동기 작업