Section 01
이벤트 표현 개선
기존의 작은 정적 빨간 점 대신, 펄스 링 애니메이션과 이벤트 카운트를 추가하여 이벤트 발생을 즉시 인지할 수 있도록 합니다.
AS-IS
작은 빨간 점 → 다른 요소에 묻힘
TO-BE
펄스 링 애니메이션 → 즉시 인지 가능
Section 02
에러 심각도 차별화 — 노드 성능 ON
에러율 구간에 따라 4단계(정상 → 경고 → 에러 → 위험)로 나누고, 왼쪽 컬러 스트라이프·하단 에러 바·배지 색상·보더 글로우를 단계별로 다르게 적용합니다.
TPS 827.18
응답 856ms
에러율 0%
정상
에러율 0%
TPS 1.83
응답 115ms
에러율 72%
위험
에러율 50%+
Section 03
에러 심각도 차별화 — 노드 성능 OFF
성능 OFF 상태에서도 배경색 농도·스트라이프·글로우를 통해 4단계 심각도를 유지합니다. 상세 메트릭 없이도 우선순위를 파악할 수 있습니다.
글로우 애니메이션 강화
배경 색상 애니메이션
Section 04
데이터베이스 노드 — 이벤트 + 상태 결합
데이터베이스 노드에서도 이벤트 개수와 핵심 지표를 함께 노출하여, 클릭 전에도 문제의 규모를 파악할 수 있도록 합니다.
TO-BE
데이터베이스
MariaDB (88)
프로세스 3
지연 1.2s
이벤트 수 + 핵심 지표 태그 표시
Section 05
개선 요약
3가지 핵심 축으로 시인성을 개선합니다.
이벤트 인지
펄스 링 + 카운트
정적 점 → 동적 애니메이션과 이벤트 수 숫자로 규모 파악
에러 심각도
4단계 시각 계층
에러 유무 → 정상·경고·에러·위험의 4단계로 즉시 우선순위 판단
복합 시각 단서
스트라이프 + 바 + 글로우
단일 보더/배경 → 다중 채널 시각 신호로 놓침 방지
Section 06
추가 실험: 에러 색상 채움 애니메이션
원본 안정적인 안 아래에, 요청하신 채움 기반 에러 애니메이션 실험안을 별도 인터랙션 블록으로 추가했습니다.
● Fill Animation Explorations
에러 색상 채움 애니메이션
흰색(투명) 상태에서 위험 색상이 차오르는 9가지 방식. 클릭하면 개별 재생, 하단 버튼으로 전체 재생합니다.