B2B 서비스, 특히 대용량 로그를 다루는 SIEM 제품에서 테이블 UI는 사용자가 가장 오래 머무는 영역이자 세밀한 설계가 필요한 컴포넌트 중 하나입니다. SIEM 화면의 테이블은 단순히 데이터를 나열하는 영역이 아니라, 보안 이벤트의 발생 시각, 호스트, 로그 유형, 위험 수준 등을 빠르게 비교하고 상세 분석으로 이어지는 핵심 인터페이스입니다.
복잡한 로그 데이터를 사용자가 빠르게 읽고 탐색할 수 있도록 하려면, 보기 좋은 화면을 넘어 정보 구조와 시각적 위계, 인터랙션 피드백이 함께 설계되어야 합니다. 이번 글에서는 SIEM 테이블 UI의 가독성과 탐색 효율을 높이기 위해 적용한 개선 과정을 소개합니다.
대용량 로그를 다루는 SIEM 화면에서는 한 번에 많은 컬럼과 행이 노출됩니다. 사용자가 필요한 정보를 빠르게 찾기 위해서는 테이블 안에서 정보의 기준점과 데이터 간 경계가 명확해야 합니다. 이번 개선에서는 헤더, 컬럼 구분선, 데이터 정렬 규칙을 중심으로 로그 데이터를 더 안정적으로 읽고 비교할 수 있는 구조를 만드는 데 집중했습니다.
사용자가 테이블 화면에 진입했을 때 가장 먼저 확인하는 영역은 데이터의 제목에 해당하는 헤더입니다. 헤더는 각 컬럼이 어떤 정보를 담고 있는지 알려주는 기준점이자, 사용자가 데이터를 탐색할 때 방향을 잡는 내비게이션 역할을 합니다.
기존 화면에서는 헤더와 본문 데이터가 유사한 폰트 스타일과 배경색으로 구성되어 있었습니다. 이로 인해 테이블 전체가 하나의 텍스트 덩어리처럼 보였고, 사용자는 원하는 정보를 찾기 위해 어떤 컬럼을 기준으로 탐색해야 하는지 빠르게 파악하기 어려웠습니다. 특히 컬럼 수가 많아질수록 데이터의 속성과 실제 값을 구분하는 데 불필요한 인지 부담이 발생했습니다.
이를 개선하기 위해 헤더 영역에는 본문과 명확히 구분되는 배경색을 적용했습니다. 데이터의 속성을 나타내는 헤더와 실제 로그 값을 담고 있는 본문을 시각적으로 분리함으로써, 사용자가 테이블의 정보 구조를 한눈에 파악하고 원하는 컬럼을 더 빠르게 찾아갈 수 있도록 했습니다.
SIEM 제품은 주로 데스크톱이나 노트북처럼 비교적 넓은 화면에서 사용됩니다. 넓은 화면은 더 많은 로그 속성을 한 번에 보여줄 수 있다는 장점이 있지만, 동시에 한 행의 가로 길이가 길어지면서 시선 추적이 어려워지는 문제가 발생할 수 있습니다.
특히 로그 데이터는 발생 시각, 이벤트 유형, 출발지·목적지 정보, 사용자 정보, 위험 수준 등 여러 속성이 한 행에 함께 배치됩니다. 컬럼 간 경계가 명확하지 않으면 사용자가 오른쪽으로 시선을 이동하는 과정에서 다른 행의 값으로 시선이 이탈하거나, 서로 다른 컬럼의 값을 잘못 연결해 읽을 가능성이 있습니다.
이 문제를 줄이기 위해 열과 열 사이에 얇은 세로 구분선을 추가했습니다. 세로선은 화면을 과도하게 분할하지 않으면서도 데이터 간 좌우 경계를 명확히 만들어줍니다. 이를 통해 사용자는 넓은 화면에서도 동일 행의 값을 안정적으로 따라가며 읽을 수 있고, 여러 로그 항목을 비교할 때도 시선을 놓치지 않고 데이터를 확인할 수 있습니다.
테이블 UI에서 중요한 것은 다양한 유형의 데이터가 함께 표시되더라도 사용자가 빠르게 읽고 비교할 수 있어야 한다는 점입니다. 기존 테이블은 대부분의 데이터가 중앙 정렬되어 있어 텍스트의 시작점이 일정하지 않았고, 숫자 데이터 역시 자릿수 구분이 명확하지 않아 값의 크기를 직관적으로 비교하기 어려웠습니다.
이를 개선하기 위해 데이터의 속성에 따라 정렬 및 표기 규칙을 분리했습니다. 문자 데이터는 좌측 정렬을 적용해 사용자의 시선이 일정한 시작점에서 자연스럽게 흐르도록 했고, 수치 데이터는 우측 정렬을 적용해 자릿수 기준으로 값을 비교할 수 있도록 했습니다.
또한 대량의 숫자 로그를 다루는 SIEM 환경을 고려해 천 단위 콤마를 기본 표기 규칙으로 적용했습니다. 숫자의 자릿수가 명확히 구분되면 사용자는 값을 하나씩 세어보지 않아도 규모 차이를 빠르게 인지할 수 있습니다. 이를 통해 수치 기반의 이벤트 정보나 위험 수준을 더 직관적으로 비교할 수 있도록 했습니다.
대용량 로그를 다루는 SIEM 화면에서는 사용자가 단순히 데이터를 읽는 데 그치지 않고, 특정 행을 선택하거나 상세 화면으로 이동하고, 필요한 조건을 적용해 데이터를 좁혀가며 분석합니다. 따라서 테이블 UI는 사용자의 행동에 즉각적이고 명확한 피드백을 제공해야 합니다. 이번 개선에서는 행 선택 상태, 링크 요소, 필터 아이콘을 중심으로 사용자가 현재 어떤 요소를 보고 있고, 어떤 동작을 수행할 수 있으며, 화면의 데이터가 어떤 상태인지 쉽게 이해할 수 있도록 설계했습니다.
방대한 로그를 모니터링하는 과정에서 사용자는 여러 행을 오가며 데이터를 비교하고, 분석이 필요한 로그를 선택하게 됩니다. 이때 마우스가 위치한 행과 실제로 선택된 행이 명확하게 구분되지 않으면, 사용자는 현재 보고 있는 데이터의 위치나 선택 상태를 놓칠 수 있습니다.
이를 개선하기 위해 테이블 행의 상태를 기본 상태, Hover 상태, Selected 상태, Selected Hover 상태로 세분화했습니다. 사용자가 특정 행 위에 마우스를 올리면 해당 행이 은은하게 강조되어 현재 위치를 쉽게 인지할 수 있도록 했고, 특정 로그를 클릭하면 브랜드 컬러를 적용해 선택 상태를 명확히 구분했습니다. 이미 선택된 행 위에 다시 마우스를 올렸을 때는 미세한 명도 차이를 적용해 선택 상태와 마우스 위치를 동시에 인지할 수 있도록 했습니다.
이러한 상태 구분은 특히 여러 로그를 비교하거나 다중 선택이 필요한 상황에서 효과적입니다. 사용자는 현재 마우스 포인터가 어느 행에 위치해 있는지, 어떤 로그가 선택되어 있는지, 선택된 행 위에서 추가 동작을 수행하고 있는지를 시각적으로 확인할 수 있습니다. 결과적으로 테이블 탐색 과정에서 발생할 수 있는 혼동을 줄이고, 분석 흐름이 끊기지 않도록 돕습니다.
SIEM 테이블은 정적인 데이터 목록이 아니라 상세 분석 화면으로 이어지는 진입점이기도 합니다. 특정 호스트명, 보고서 제목, 이벤트 항목 등은 클릭을 통해 상세 페이지나 관련 분석 화면으로 이동할 수 있습니다. 따라서 사용자는 테이블 안에서 어떤 요소가 단순 텍스트이고, 어떤 요소가 클릭 가능한 링크인지 즉시 구분할 수 있어야 합니다.
기존 UI에서는 클릭 가능한 텍스트에 검은색 본문 컬러와 밑줄을 함께 적용했습니다. 그러나 정보 밀도가 높은 테이블 안에서 검은색 밑줄은 단순 강조 표시처럼 보일 수 있었고, 사용자가 해당 요소를 클릭 가능한 링크로 인식하기 어려웠습니다.
이를 개선하기 위해 클릭 가능한 텍스트에는 SIEM의 Primary Color인 파란색을 적용했습니다. 색상만으로도 일반 텍스트와 링크 텍스트를 구분할 수 있도록 하고, 마우스 오버 시에는 밑줄을 추가해 클릭 가능한 요소임을 한 번 더 확인할 수 있도록 했습니다. 이를 통해 사용자는 해당 텍스트가 다른 화면으로 이동하는 인터랙션 요소임을 직관적으로 인지하고, 필요한 분석 화면으로 더 자연스럽게 이동할 수 있습니다.
실시간으로 많은 로그가 쌓이는 SIEM 화면에서는 필요한 조건만 빠르게 추려내는 필터 기능이 중요합니다. 하지만 필터 기능은 단순히 제공되는 것만으로 충분하지 않습니다. 사용자는 어떤 컬럼에서 필터를 사용할 수 있는지, 현재 어떤 필터를 편집하고 있는지, 그리고 화면에 보이는 데이터가 원본 전체인지 필터링된 결과인지 명확히 알아야 합니다.
이를 위해 필터가 가능한 컬럼에는 라인 형태의 아이콘을 상시 노출했습니다. 사용자는 아이콘을 통해 해당 컬럼에서 필터 기능을 사용할 수 있음을 사전에 인지할 수 있습니다. 이후 아이콘을 클릭해 필터 조건을 편집하는 단계에서는 아이콘을 활성화 상태로 강조하고, 필터 선택 팝업을 함께 제공해 사용자가 어느 컬럼의 조건을 조정하고 있는지 공간적 맥락을 유지할 수 있도록 했습니다.
필터 조건이 적용된 이후에는 아이콘의 형태를 라인에서 면으로 변경해 현재 해당 컬럼에 필터가 적용되어 있음을 명확히 표시했습니다. 이를 통해 사용자는 화면에 보이는 데이터가 전체 로그인지, 특정 조건에 의해 가공된 결과인지 즉시 판별할 수 있습니다. 필터 상태를 단계별로 구분한 것은 사용자가 데이터의 맥락을 잃지 않고 분석을 이어가도록 돕기 위한 설계입니다.
이번 개선은 테이블 UI를 단순히 보기 좋게 정리하는 것이 아니라, 대용량 로그 분석 과정에서 사용자가 겪는 인지 부담을 줄이는 데 초점을 맞췄습니다. 헤더, 구분선, 정렬, 행 상태, 링크, 필터 아이콘처럼 작은 요소들도 일관된 규칙으로 설계되면 사용자가 데이터를 읽고 비교하고 분석하는 방식에 직접적인 영향을 줄 수 있습니다.
복잡한 보안 로그 환경에서는 사용자가 화면 안에서 길을 잃지 않고, 필요한 정보를 빠르게 찾고, 다음 행동으로 자연스럽게 이어갈 수 있어야 합니다. 앞으로도 브레인즈컴퍼니는 제품 곳곳의 세부적인 사용성 요소를 지속적으로 개선하며, 고객이 복잡한 데이터를 더 명확하게 이해하고 본연의 업무에 집중할 수 있는 환경을 만들어가겠습니다.
Zenius의 가치를 시각적으로 효과적이게 전달하는 업무를 맡고 있습니다.
