안녕하세요,
그로메트릭 입니다. 🐸
GroSaaS는 여러 보안 장비에서 발생하는 로그를 수집하고 분석하는 서비스입니다. 로그가 모이고 나면 “관리자가 화면을 처음 열었을 때, 무엇을 가장 먼저 봐야 하는가?”라는 문제가 남습니다. 데이터가 충분해도 화면이 질문에 답하지 못하면 관리자가 숫자를 직접 해석해야 하고, 그만큼 대응이 늦어지기 때문입니다.
이번 개발일지에서는 대시보드를 화면 유형별로 나누고, 각 화면이 어떤 정보를 어떤 구조로 보여주는지 살펴봅니다. 이어서 정보의 성격에 따라 차트를 고르는 기준을 시각 인지 연구와 함께 정리하고, 눈에 잘 들어오는 화면의 설계 원칙으로 마무리합니다. 본문의 이미지는 이해를 돕기 위해 가상 데이터로 새로 그린 예시입니다.
문제: 화면마다 답해야 하는 질문이 다르다 🙋♀️
대시보드를 설계할 때는 “어떤 차트를 넣을까?”부터 고민하기 쉽습니다. 하지만 보안 대시보드는 화면마다 담고 있는 정보가 달라 보여도, 실제로는 서로 다른 질문에 답하고 있습니다. “오늘 전체 상황이 어때?”, “지금 처리할 게 뭐야?”, “로그는 제대로 들어오고 있어?” 같은 질문입니다.
질문이 다르면 필요한 정보의 단위와 보여주는 형태도 달라집니다. 전체 상황은 집계값과 변화, 처리할 일은 정렬된 목록, 수집 상태는 상태별 개수와 개별 대상, 한 건의 조사는 시간 순서가 핵심입니다. 그래서 차트를 고르기 전에 이 화면이 어떤 질문에 답하는가를 먼저 정하고, 질문마다 화면을 하나씩 대응시켰습니다.
화면 유형: 질문에 따라 구성이 어떻게 달라질까? 🖥️
질문을 기준으로 나눈 다섯 가지 화면을 순서대로 살펴보겠습니다. 앞의 네 가지는 전체에서 개별 대상으로 점점 좁혀 가는 흐름이고, 수집 상태 화면은 그 모든 화면이 믿을 수 있는 데이터 위에 있는지를 확인하는 역할을 합니다.
① 오늘 전체 상황이 궁금할 때: 요약 카드와 추세선
하루를 시작할 때 가장 먼저 여는 화면입니다. Critical, High, Medium, Low 네 가지 심각도의 탐지 건수를 카드로 보여주고, 카드마다 최근 7일의 작은 추세선(스파크라인)을 붙입니다. 카드 아래에는 탐지가 심각도에서 처리 상태로 이어지는 흐름과 심각도별 평균 대응 시간을 둘 수 있습니다.
이 화면의 핵심은 숫자 옆에 변화를 붙이는 것입니다. 숫자 하나만 있으면 많은 건지 적은 건지 기준이 없지만, 추세선이 함께 있으면 늘고 있는지 줄고 있는지가 먼저 읽힙니다. 스파크라인은 축과 눈금을 생략한 작은 선 그래프라서 카드 안에 넣어도 공간을 거의 차지하지 않습니다.
평균 대응 시간은 심각도별로 따로 보여줘야 합니다. 전체 평균 하나로 합치면 Critical의 지연이 건수가 많은 Low에 묻히기 때문입니다.
② 지금 처리할 것이 궁금할 때: 미해결 우선 목록
전체 현황을 봤다면 다음은 할 일입니다. 미해결 탐지를 심각도와 경과 시간 순으로 정렬한 목록이 맞습니다. 위에는 검색창과 심각도·상태·기간 필터를 두고, 한 줄마다 발생 시각, 위협 종류, 영향받은 호스트를 보여줍니다.
정렬 기준은 두 단계입니다. 먼저 끝나지 않은 것을 앞에 두고, 그 안에서 위험이 큰 것을 앞에 둡니다. 기준이 하나뿐이면 오래된 Low가 새로 들어온 Critical보다 위에 올 수 있기 때문입니다. 필터 조건이 늘어나면 지금 어떤 조건으로 보고 있는지 놓치기 쉬워서, 선택된 필터는 상단에 계속 보여주는 편이 좋습니다.
또 항목을 누르면 필터가 적용된 목록이나 상세 화면으로 이어지도록 합니다. 그러면 요약 화면이 읽고 끝나는 화면이 아니라 조사의 시작점이 됩니다.
③ 가장 위험한 대상이 궁금할 때: 위험 순위
탐지가 많아지면 건수보다 대상을 기준으로 보는 편이 빠릅니다. 같은 호스트에서 여러 건이 발생하면 목록에서는 흩어져 보이지만, 대상별로 묶으면 하나의 문제로 읽히기 때문입니다. 위험 점수가 높은 호스트와 계정을 순위로 보여주고, 위험 등급별 건수와 대상 유형의 분포를 도넛 차트로 함께 보여주는 방식입니다. 이 화면은 몇 건인지보다 어느 호스트부터 봐야 하는지에 답합니다.
④ 로그가 제대로 들어오는지 궁금할 때: 수집·Agent 상태
탐지 화면이 조용하다고 안전한 것은 아닙니다. 수집이 끊겨서 조용한 것일 수도 있기 때문입니다. 그래서 위협을 보는 화면과 별도로, 데이터가 정상적으로 들어오는지 확인하는 화면이 필요합니다. 상태별 Agent 수(전체, 정상, 연결 끊김, 대기)를 상단 카드로 보여주고, 아래 목록에는 Agent별 상태, 마지막 통신 시간, 버전, 적용 정책을 둡니다.
이 화면에서는 상태별 수치와 목록이 한 화면에 있다는 점이 중요합니다. 위에서 끊긴 Agent가 몇 개인지 알고, 아래에서 어느 Agent인지 바로 찾을 수 있습니다. 상태는 색만으로 표시하지 않고 상태 이름을 함께 쓰며, 문제가 있는 행은 배경으로도 구분합니다.
⑤ 한 건을 자세히 봐야 할 때: 위협 상세
한 건의 위협을 조사할 때는 구성이 달라집니다. 맨 위에 한 줄 제목과 설명 문장을 두고, 영향받은 장비와 계정을 카드로 보여줍니다. 그 아래에 분석 내용과 시간순 타임라인을 두고, 대응하기와 메모 남기기 버튼은 상단에 고정합니다.
조사는 “무슨 일이 일어났는가 → 어디에 영향을 줬는가 → 어떤 순서로 진행됐는가 → 무엇을 해야 하는가” 순서로 이어집니다. 화면도 같은 순서로 배치하면 읽다가 바로 조치로 넘어갈 수 있습니다.
시각화: 정보의 성격에 맞는 차트를 어떻게 고를까? ✅
같은 정보라도 어떤 모양으로 보여주느냐에 따라 읽히는 속도와 정확도가 달라집니다. 시각화 연구에서는 사람이 값을 읽는 방식에 따라 정확도가 달라진다고 봅니다. Cleveland와 McGill(1984)의 실험에서는 공통 눈금 위의 위치와 길이가 각도와 면적보다 더 정확하게 읽히는 것으로 나타났습니다.
이 결과에 따라 값을 정확히 비교해야 하는 정보는 위치와 길이(막대, 선)로, 전체에서 차지하는 비율을 대략 파악하는 정보는 각도와 면적(도넛)으로 나눠 쓰는 것이 좋습니다. 정보의 성격별로 정리하면 다음과 같습니다.
- 숫자 카드와 추세선: 지금의 양과 변화의 방향을 보여줍니다. (심각도별 탐지 건수)
- 도넛 차트: 전체에서 차지하는 비율을 보여줍니다. 조각이 많아지면 크기 비교가 어려워지므로 항목이 적을 때만 씁니다. (Agent 연결 상태, 대상 유형 분포)
- 막대그래프: 길이로 값을 비교하고, 기간별 양의 변화를 보여줍니다. (일별 분석 로그량)
- 흐름도: 탐지가 단계를 거치며 어디로 가는지 보여줍니다. (탐지 → 분석 → 조치)
- 벌집 지도: 육각형 하나가 대상 하나를 뜻하고, 색으로 상태를 보여줍니다. 대상이 많을 때 문제 있는 칸만 바로 찾을 수 있습니다. (서버 상태 현황)
- 표와 목록: 개별 항목을 비교하고 고르는 일에 맞습니다. (미해결 탐지 목록)
- 타임라인: 한 건에서 일어난 일의 순서를 보여줍니다. (위협 상세)
벌집 지도는 대상이 수십 개 이상일 때 특히 유용합니다. 정사각형 격자와 달리 육각형은 이웃한 칸까지의 거리가 모두 같아서 특정 방향으로 시선이 쏠리지 않고, 색이 다른 칸이 먼저 눈에 들어옵니다.
정리하면 “얼마나 되나”는 카드와 차트, “어느 것인가”는 목록, “어떻게 진행됐나”는 흐름도와 타임라인, “많은 대상 중 어디가 문제인가”는 벌집 지도가 맞습니다.
색을 쓸 때는 색만으로 의미를 전달하지 않아야 합니다. 색각 이상이 있는 사용자가 있고, 흑백으로 인쇄하거나 화면을 캡처하면 색 차이가 사라지기 때문입니다. 그래서 심각도와 상태는 색과 함께 이름이나 기호를 항상 같이 표시합니다. 웹 접근성 지침(WCAG)도 색만으로 정보를 전달하지 말도록 규정하고 있습니다.
설계 원칙: 눈에 잘 들어오는 대시보드의 공통점 👀
여러 화면을 구성해 보니 눈에 잘 들어오는 화면에는 공통점이 있었습니다.
- 숫자 옆에 변화가 붙어 있다. 기준점이 있어야 숫자를 해석할 수 있고, 추세선이 그 역할을 합니다.
- 상태 수치와 목록이 한 화면에 있다. 몇 개인지와 어느 것인지를 화면 이동 없이 확인할 수 있습니다.
- 끝난 것보다 완료되지 않은 항목이 먼저 나온다. 관리자가 조사해야 할 항목부터 보입니다.
- 눌러서 바로 조사로 이어진다. 요약 화면이 필터된 목록과 상세 화면의 시작점이 됩니다.
반대로 흐름도나 공격 기법 커버리지 맵 같은 화면은 정보가 풍부한 대신 처음 보는 관리자가 읽기까지 시간이 걸립니다. 이런 화면은 첫 화면이 아니라 한 단계 안쪽에 두는 편이 낫습니다. 요약에서 시작해 필요할 때 세부로 내려가는 구조(점진적 공개, progressive disclosure)가 정보량이 많은 화면에서도 첫인상을 가볍게 유지해 줍니다.
마치며
이번 글에서는 대시보드를 설계하는 기준을 질문, 화면 유형, 시각화 방식, 설계 원칙 순서로 정리했습니다. 화면마다 답하는 질문이 다르므로 질문을 먼저 정하고, 그 질문에 맞는 정보의 단위와 차트를 고르며, 색에만 의존하지 않고 변화와 다음 행동까지 한 화면에 담는 것이 핵심이었습니다.
대시보드를 설계하기 전에는 “어떤 차트를 넣을까”를 고민했는데, 정리하고 나니 질문이 바뀌었습니다. “이 화면은 관리자의 어떤 질문에 답하는가”를 먼저 정하면, 넣을 것과 뺄 것이 자연스럽게 정리됩니다.
다음 시리즈에서는 메인 대시보드와는 또다른 매력의 Agent GUI 개편 이야기를 다룰 예정입니다. 다음 글도 기대해 주세요!
출처
- Cleveland, W. S. & McGill, R. (1984). Graphical Perception: Theory, Experimentation, and Application to the Development of Graphical Methods. Journal of the American Statistical Association: https://doi.org/10.1080/01621459.1984.10478080
- Tufte, E. R. (2006). Beautiful Evidence. Graphics Press. (스파크라인 개념)
- W3C. Web Content Accessibility Guidelines (WCAG) 2.2, Use of Color: https://www.w3.org/TR/WCAG22/#use-of-color
'GroSaaS & Tech' 카테고리의 다른 글
| [GroSaaS 개발일지] 한 페이지에 모든 기능이? Agent GUI 개편 이야기 (0) | 2026.11.09 |
|---|---|
| [GroSaaS 개발일지] 처음 보는 Agent를 어떻게 믿을까? 등록용 키부터 인증서 서명까지 (0) | 2026.10.26 |
| [GroSaaS 개발일지] 눈에는 같은 글자인데 검색이 안 된다고? 로그 한글 인코딩(NFC) 통일기 (0) | 2026.10.15 |