기술이야기 | 브레인즈컴퍼니

주메뉴 바로가기 본문 바로가기

메인 페이지로 이동
블로그
기술이야기

블로그

기술이야기

기술이야기 복잡한 로그 데이터를 빠르게 읽기 위한 Zenius SIEM 테이블 UI 개선기 기술이야기 복잡한 로그 데이터를 빠르게 읽기 위한 Zenius SIEM 테이블 UI 개선기 B2B 서비스, 특히 대용량 로그를 다루는 SIEM 제품에서 테이블 UI는 사용자가 가장 오래 머무는 영역이자 세밀한 설계가 필요한 컴포넌트 중 하나입니다. SIEM 화면의 테이블은 단순히 데이터를 나열하는 영역이 아니라, 보안 이벤트의 발생 시각, 호스트, 로그 유형, 위험 수준 등을 빠르게 비교하고 상세 분석으로 이어지는 핵심 인터페이스입니다. 복잡한 로그 데이터를 사용자가 빠르게 읽고 탐색할 수 있도록 하려면, 보기 좋은 화면을 넘어 정보 구조와 시각적 위계, 인터랙션 피드백이 함께 설계되어야 합니다. 이번 글에서는 SIEM 테이블 UI의 가독성과 탐색 효율을 높이기 위해 적용한 개선 과정을 소개합니다. 테이블의 시각적 인지 구조 개선하기 대용량 로그를 다루는 SIEM 화면에서는 한 번에 많은 컬럼과 행이 노출됩니다. 사용자가 필요한 정보를 빠르게 찾기 위해서는 테이블 안에서 정보의 기준점과 데이터 간 경계가 명확해야 합니다. 이번 개선에서는 헤더, 컬럼 구분선, 데이터 정렬 규칙을 중심으로 로그 데이터를 더 안정적으로 읽고 비교할 수 있는 구조를 만드는 데 집중했습니다. 헤더와 본문 영역의 시각적 위계 분리 사용자가 테이블 화면에 진입했을 때 가장 먼저 확인하는 영역은 데이터의 제목에 해당하는 헤더입니다. 헤더는 각 컬럼이 어떤 정보를 담고 있는지 알려주는 기준점이자, 사용자가 데이터를 탐색할 때 방향을 잡는 내비게이션 역할을 합니다. 기존 화면에서는 헤더와 본문 데이터가 유사한 폰트 스타일과 배경색으로 구성되어 있었습니다. 이로 인해 테이블 전체가 하나의 텍스트 덩어리처럼 보였고, 사용자는 원하는 정보를 찾기 위해 어떤 컬럼을 기준으로 탐색해야 하는지 빠르게 파악하기 어려웠습니다. 특히 컬럼 수가 많아질수록 데이터의 속성과 실제 값을 구분하는 데 불필요한 인지 부담이 발생했습니다. 이를 개선하기 위해 헤더 영역에는 본문과 명확히 구분되는 배경색을 적용했습니다. 데이터의 속성을 나타내는 헤더와 실제 로그 값을 담고 있는 본문을 시각적으로 분리함으로써, 사용자가 테이블의 정보 구조를 한눈에 파악하고 원하는 컬럼을 더 빠르게 찾아갈 수 있도록 했습니다. 컬럼 경계 강화를 통한 행 추적성 개선- 세로선 추가 SIEM 제품은 주로 데스크톱이나 노트북처럼 비교적 넓은 화면에서 사용됩니다. 넓은 화면은 더 많은 로그 속성을 한 번에 보여줄 수 있다는 장점이 있지만, 동시에 한 행의 가로 길이가 길어지면서 시선 추적이 어려워지는 문제가 발생할 수 있습니다. 특히 로그 데이터는 발생 시각, 이벤트 유형, 출발지·목적지 정보, 사용자 정보, 위험 수준 등 여러 속성이 한 행에 함께 배치됩니다. 컬럼 간 경계가 명확하지 않으면 사용자가 오른쪽으로 시선을 이동하는 과정에서 다른 행의 값으로 시선이 이탈하거나, 서로 다른 컬럼의 값을 잘못 연결해 읽을 가능성이 있습니다. 이 문제를 줄이기 위해 열과 열 사이에 얇은 세로 구분선을 추가했습니다. 세로선은 화면을 과도하게 분할하지 않으면서도 데이터 간 좌우 경계를 명확히 만들어줍니다. 이를 통해 사용자는 넓은 화면에서도 동일 행의 값을 안정적으로 따라가며 읽을 수 있고, 여러 로그 항목을 비교할 때도 시선을 놓치지 않고 데이터를 확인할 수 있습니다. 데이터 유형별 정렬 및 숫자 표기 규칙 표준화- 정렬 및 콤마 규칙 적용 테이블 UI에서 중요한 것은 다양한 유형의 데이터가 함께 표시되더라도 사용자가 빠르게 읽고 비교할 수 있어야 한다는 점입니다. 기존 테이블은 대부분의 데이터가 중앙 정렬되어 있어 텍스트의 시작점이 일정하지 않았고, 숫자 데이터 역시 자릿수 구분이 명확하지 않아 값의 크기를 직관적으로 비교하기 어려웠습니다. 이를 개선하기 위해 데이터의 속성에 따라 정렬 및 표기 규칙을 분리했습니다. 문자 데이터는 좌측 정렬을 적용해 사용자의 시선이 일정한 시작점에서 자연스럽게 흐르도록 했고, 수치 데이터는 우측 정렬을 적용해 자릿수 기준으로 값을 비교할 수 있도록 했습니다. 또한 대량의 숫자 로그를 다루는 SIEM 환경을 고려해 천 단위 콤마를 기본 표기 규칙으로 적용했습니다. 숫자의 자릿수가 명확히 구분되면 사용자는 값을 하나씩 세어보지 않아도 규모 차이를 빠르게 인지할 수 있습니다. 이를 통해 수치 기반의 이벤트 정보나 위험 수준을 더 직관적으로 비교할 수 있도록 했습니다. 사용자의 행동에 명확하게 피드백하기 대용량 로그를 다루는 SIEM 화면에서는 사용자가 단순히 데이터를 읽는 데 그치지 않고, 특정 행을 선택하거나 상세 화면으로 이동하고, 필요한 조건을 적용해 데이터를 좁혀가며 분석합니다. 따라서 테이블 UI는 사용자의 행동에 즉각적이고 명확한 피드백을 제공해야 합니다. 이번 개선에서는 행 선택 상태, 링크 요소, 필터 아이콘을 중심으로 사용자가 현재 어떤 요소를 보고 있고, 어떤 동작을 수행할 수 있으며, 화면의 데이터가 어떤 상태인지 쉽게 이해할 수 있도록 설계했습니다. 테이블 행의 상태 세분화 방대한 로그를 모니터링하는 과정에서 사용자는 여러 행을 오가며 데이터를 비교하고, 분석이 필요한 로그를 선택하게 됩니다. 이때 마우스가 위치한 행과 실제로 선택된 행이 명확하게 구분되지 않으면, 사용자는 현재 보고 있는 데이터의 위치나 선택 상태를 놓칠 수 있습니다. 이를 개선하기 위해 테이블 행의 상태를 기본 상태, Hover 상태, Selected 상태, Selected Hover 상태로 세분화했습니다. 사용자가 특정 행 위에 마우스를 올리면 해당 행이 은은하게 강조되어 현재 위치를 쉽게 인지할 수 있도록 했고, 특정 로그를 클릭하면 브랜드 컬러를 적용해 선택 상태를 명확히 구분했습니다. 이미 선택된 행 위에 다시 마우스를 올렸을 때는 미세한 명도 차이를 적용해 선택 상태와 마우스 위치를 동시에 인지할 수 있도록 했습니다. 이러한 상태 구분은 특히 여러 로그를 비교하거나 다중 선택이 필요한 상황에서 효과적입니다. 사용자는 현재 마우스 포인터가 어느 행에 위치해 있는지, 어떤 로그가 선택되어 있는지, 선택된 행 위에서 추가 동작을 수행하고 있는지를 시각적으로 확인할 수 있습니다. 결과적으로 테이블 탐색 과정에서 발생할 수 있는 혼동을 줄이고, 분석 흐름이 끊기지 않도록 돕습니다. 링크 요소의 행동 유도성 강화- 클릭 가능한 링크의 시작적 단서와 피드백 강화 SIEM 테이블은 정적인 데이터 목록이 아니라 상세 분석 화면으로 이어지는 진입점이기도 합니다. 특정 호스트명, 보고서 제목, 이벤트 항목 등은 클릭을 통해 상세 페이지나 관련 분석 화면으로 이동할 수 있습니다. 따라서 사용자는 테이블 안에서 어떤 요소가 단순 텍스트이고, 어떤 요소가 클릭 가능한 링크인지 즉시 구분할 수 있어야 합니다. 기존 UI에서는 클릭 가능한 텍스트에 검은색 본문 컬러와 밑줄을 함께 적용했습니다. 그러나 정보 밀도가 높은 테이블 안에서 검은색 밑줄은 단순 강조 표시처럼 보일 수 있었고, 사용자가 해당 요소를 클릭 가능한 링크로 인식하기 어려웠습니다. 이를 개선하기 위해 클릭 가능한 텍스트에는 SIEM의 Primary Color인 파란색을 적용했습니다. 색상만으로도 일반 텍스트와 링크 텍스트를 구분할 수 있도록 하고, 마우스 오버 시에는 밑줄을 추가해 클릭 가능한 요소임을 한 번 더 확인할 수 있도록 했습니다. 이를 통해 사용자는 해당 텍스트가 다른 화면으로 이동하는 인터랙션 요소임을 직관적으로 인지하고, 필요한 분석 화면으로 더 자연스럽게 이동할 수 있습니다. 필터 상태의 가시성과 작업 맥락 유지- 단계별 아이콘으로 필터 상태 전달하기 실시간으로 많은 로그가 쌓이는 SIEM 화면에서는 필요한 조건만 빠르게 추려내는 필터 기능이 중요합니다. 하지만 필터 기능은 단순히 제공되는 것만으로 충분하지 않습니다. 사용자는 어떤 컬럼에서 필터를 사용할 수 있는지, 현재 어떤 필터를 편집하고 있는지, 그리고 화면에 보이는 데이터가 원본 전체인지 필터링된 결과인지 명확히 알아야 합니다. 이를 위해 필터가 가능한 컬럼에는 라인 형태의 아이콘을 상시 노출했습니다. 사용자는 아이콘을 통해 해당 컬럼에서 필터 기능을 사용할 수 있음을 사전에 인지할 수 있습니다. 이후 아이콘을 클릭해 필터 조건을 편집하는 단계에서는 아이콘을 활성화 상태로 강조하고, 필터 선택 팝업을 함께 제공해 사용자가 어느 컬럼의 조건을 조정하고 있는지 공간적 맥락을 유지할 수 있도록 했습니다. 필터 조건이 적용된 이후에는 아이콘의 형태를 라인에서 면으로 변경해 현재 해당 컬럼에 필터가 적용되어 있음을 명확히 표시했습니다. 이를 통해 사용자는 화면에 보이는 데이터가 전체 로그인지, 특정 조건에 의해 가공된 결과인지 즉시 판별할 수 있습니다. 필터 상태를 단계별로 구분한 것은 사용자가 데이터의 맥락을 잃지 않고 분석을 이어가도록 돕기 위한 설계입니다. 이번 개선은 테이블 UI를 단순히 보기 좋게 정리하는 것이 아니라, 대용량 로그 분석 과정에서 사용자가 겪는 인지 부담을 줄이는 데 초점을 맞췄습니다. 헤더, 구분선, 정렬, 행 상태, 링크, 필터 아이콘처럼 작은 요소들도 일관된 규칙으로 설계되면 사용자가 데이터를 읽고 비교하고 분석하는 방식에 직접적인 영향을 줄 수 있습니다. 복잡한 보안 로그 환경에서는 사용자가 화면 안에서 길을 잃지 않고, 필요한 정보를 빠르게 찾고, 다음 행동으로 자연스럽게 이어갈 수 있어야 합니다. 앞으로도 브레인즈컴퍼니는 제품 곳곳의 세부적인 사용성 요소를 지속적으로 개선하며, 고객이 복잡한 데이터를 더 명확하게 이해하고 본연의 업무에 집중할 수 있는 환경을 만들어가겠습니다. 2026.06.11
기술이야기 벽을 넘어서고 싶은 신입 개발자의 브레인즈 생활기 기술이야기 벽을 넘어서고 싶은 신입 개발자의 브레인즈 생활기 지원 이유와 여정 대학교 졸업 후, 부족한 웹개발 역량을 쌓기 위해 5달간의 풀스택 부트캠프 교육을 수료하고 1달간의 기업 협업 인턴을 마쳤습니다. 이후, 제 역량을 마음껏 펼쳐내며 지속적으로 성장할 수 있는 회사에서 일하고 싶다는 생각이 들었습니다. 그러다 풀스택 기술뿐만 아니라, 빅데이터 및 AI 기술을 활용해 차세대 기술을 개발하는 브레인즈컴퍼니의 채용공고를 발견했습니다. 이 회사에서라면 많은 것을 배워 역량을 키우고 성장하며 일할 수 있겠다는 생각에 지원했고, 면접 끝에 첫 직장에 취업하게 됐습니다. 웹개발도 재밌지만 개발자로서 지속적으로 새로운 기술들을 습득하며 성장하는 것에서 성취감과 보람을 느끼는 것이 컸고, 그럴 수 있는 부서에서 첫 회사 생활을 시작할 수 있다는 생각에 기뻤습니다. 채용 과정 면접에서 기억에 남는 질문은 "우리 부서는 프론트엔드 보다 백엔드를 더 추구하는 편이라 함께 일을 하게 된다면, 프론트엔드와 백엔드 모두를 아울러 사용할 것인데 할 수 있습니까?"였습니다. 풀스택 개발자로서 일을 하게 된다는 질문이었고, 저는 이 부분에 대해 긍정적이었기 때문에 자신 있게 할 수 있다고 대답했습니다. 백엔드 개발자보다 많은 영역에서 발전하며 성장할 수 있다는 생각에 더욱 기대되고 설렜던 기억이 있습니다. 그렇게 저의 첫 직장 생활이 시작됐습니다. 입사 후, 지난 3달간의 일대기 채용이 된 후, 출근까지 2주간의 자유 시간이 주어졌습니다. 졸업 후 부트캠프 교육을 이수하면서 줄곧 달려왔고, 즐겁게 공부했지만 지쳐있는 심신을 달래기 위해 여행도 다녀오고 친구들과 가족들과 시간을 보내면서 출근 준비를 했습니다. 그렇게 2주 후 첫 출근을 하는 날이 됐고, 본격적으로 사원으로 근무하는 날이 다가왔습니다! 브레인즈컴퍼니의 개발 그룹은 1~5그룹으로 나눠져 있으며, 저는 개발4그룹에 소속됐습니다. 개발4그룹은 프론트엔드와 백엔드 개발뿐만 아니라, 빅데이터 및 AI 기술을 동원한 신기술 개발을 담당하고 있어, 배울 점도 많고 나아가야할 길도 멀리 펼쳐져 있다고 느꼈습니다. 1st Month_적응기 입사 첫 달은, 개발4그룹에서 집중적으로 개발 진행 중인 로그매니저와 Zenius AI의 제품 매뉴얼과 웹페이지에서 실제로 사용되고 있는 각각의 기능들을 학습하며 제품을 파악하고 익숙해지는 기간을 가졌습니다. 그렇게 한 달 간은 개발에 투입되기보다는 제품 및 사용된 기능들에 대한 학습과 공부를 하는 기간이었습니다. 단순히 제품의 매뉴얼만을 보며 학습을 했다면 집중도가 떨어졌을 수 있지만, 제품에서 사용하고 있는 다양한 기술들, Elasticsearch, Kibana, Kafka, Cluster 등 스택들에 대해 공부하면서 흥미와 재미를 느끼며 학습을 이어갈 수 있었습니다. 잘 몰랐던 신 기술들을 접하면서, 앞으로도 배우게 될 다양한 기술들에 대해 기대감이 부풀었던 한달이었습니다. 이외에도 학습을 진행하면서 원래 사용하던 스택인 JavaScript와 Linux의 Base부터 차근차근 다시 복습하며 결점을 보완하고, 제 자신을 Refactoring하기도 했던 한 달이었습니다. 2nd Month_개인정보 마스킹 기능 개발 입사 두 달째 부터는, 로그매니저와 Zenius AI의 기능들과 매뉴얼에 대해 전반적인 이해를 갖게 됐고, 각 사이트 기능들의 동작 원리 등을 대략적으로 파악할 수 있었습니다. 두 달이 된 이 시점부터 프론트엔드와 백엔드 모두를 사용하는 프로젝트가 주어졌습니다. 주어진 프로젝트는 ‘개인정보 마스킹 기능 개발’ 이었습니다. 로그매니저 내에서 수집되는 대용량의 로그들 안에 개인 정보가 포함될 경우가 있는데, 개인정보가 그대로 노출되는 것을 방지하기 위해 개인정보에 해당하는 정보는 마스킹처리를 자동적으로 진행하는 기능 개발을 진행하게 됐습니다. 예를 들어, 로그에 ‘961219-1234567’, ‘서울시 성동구 성수이로’, ‘010-1234-5678’ 등과 같은 주민등록번호, 주소, 연락처 뿐만 아니라 다양한 개인정보들을 지정한 특수문자(Default로는 *을 사용) 로 마스킹 처리를 해주는 기능을 개발하는 과정이 중점이 되는 프로젝트였습니다. 풀스택 공부를 하면서, 백엔드는 Node.js와 MySQL, PrismaOrm 등을 사용해 기능 개발을 진행했지만, 이번 프로젝트는 Elasticsearch, Kafka.js, Cluster.js 및 커스텀마이징된 다양한 메소드와 함수들을 통해 진행했기 때문에 배울 점이 매우 많았고, 성장하는 것을 느낄 수 있었습니다. 이외에도 프론트엔드에서 Ace.js를 통한 텍스트 편집기를 개발하고, 개인정보유형에 해당하는 정보가 입력되면 Syntax Highlighting 기능을 통해 해당 부분에 형광펜 효과를 적용시켜주는 기능의 개발을 진행했습니다. 개인정보 유형에 해당하는 정보에 대응되는 정규표현식, 그리고 백엔드에서 마스킹 처리될 특수문자 타입의 데이터 등은 Elasticsearch의 Index를 통해서 데이터의 저장과 반환작업 처리를 진행해줬으며, 이 데이터들을 기반으로 프론트엔드와 백엔드에서 모두 정상적인 마스킹 기능과 Syntax Highlighting 기능을 개발할 수 있었습니다. 새로운 기술을 활용해 프로젝트를 진행하면서 어려운 점도 많았고 시행착오도 겪었지만, 그만큼얻어가고 배워가는 것이 많았던 첫 업무였습니다. Elasticsearch, Kibana, Cluster, Kafka 등 새로운 기술 스택에 대해 배우고 적용할 수 있었다는 점이 매우 흥미로웠고 뿌듯한 경험이었습니다. <사진 설명: 개인정보 유형과 마스킹 여부, 정규표현식 관리와 마스킹 기능 ON/OFF가 가능한 페이지> <사진 설명: 선택한 개인정보 정규표현식에 해당되는 데이터 Syntax Hilighting 기능 구현> 3rd Month_데몬프로세스 그룹화 작업 및 테스트케이스 입사 세 달째 부터는, 어느 정도 회사 생활에 적응이 된 상태가 됐습니다. 아침 일찍 일어나는 것에도 적응이 됐고, 초반에는 어색했던 업무회의와 주간업무보고서 작성도 이제는 자연스럽게 하고 있는 모습을 발견할 수 있었습니다. 첫번째 프로젝트를 마친 후, 두번째로는 로그매니저의 데몬프로세스 기능을 그룹별로 정렬하는 업무를 맡게 됐습니다. 데몬프로세스가 각각의 그룹 속성을 지니고 있지만, 이를 그룹별로 나눠서 보여준다면 좀 더 가독성과 가시성이 높아질 것이기 때문에, Elasticsearch에서 반환 받는 데이터를 그룹의 조건에 따라 분류해주는 작업이 주가 됐습니다. 두번째 개발 후에는 로그매니저의 각 기능들에 대한 테스트 케이스 및 오류 사항 확인의 과정을 거쳤고, 제가 개발한 ‘개인정보 관리’ 기능에 대한 테스트 케이스 작성도 진행했습니다. 개발자가 개발을 잘하는 것도 중요하지만, 이렇게 자신이 개발한 기능에 대해 테스트케이스를 작성하면서 유저가 해당 테스트케이스를 확인하고, 개발한 기능을 자연스레 사용할 수 있게 해야 하는 것은 개발만큼이나 중요하다고 생각하기 때문에 기분 좋게 테스트케이스 작성을 진행할 수 있었습니다. 또, 로그매니저 제품 각 기술들의 테스트케이스들을 확인하며 각각의 기능들을 모두 테스트해볼 수 있는 기회가 됐으며, 개발하고 서비스되고 있는 기술들에 대해 좀더 명확하게 인지하고 확인할 수 있어 제품 이해에 큰 도움이 됐습니다. 이를 기회로 개발만이 중요한 것이 아닌 테스트케이스의 중요성을 절실히 깨닫고, 제가 개발하는 기술들에 대한 테스트케이스 작성이 필수불가결하다는 것을 느끼게 됐습니다. 느낀 점 브레인즈컴퍼니 개발4그룹에 입사 후, 3달간 근무하며 느낀 점은 제가 만족하며 회사를 다니고 있다는 점입니다. 그룹의 모든 구성원분들이 잘 적응할 수 있도록 도와주고 챙겨주셨고, 문제가 될 수도 있는 실수가 발생해도 모든 그룹원들이 다 잘 다독여 주셨습니다. 또, 좋은 피드백을 줘서 지속적으로 배워가고 성장할 수 있는 회사의 성장할 수 있는 부서라고 생각합니다. 그룹의 상래님, 신후님, 천웅님, 태민님 모두 제게 좋은 피드백과 도움을 주시고, 개선돼야할 점과 공부해야 할 부분, 그리고 개발을 하면서 고쳐야 할 습관들을 알려주셔서 점차 앞으로 나아갈 수 있다고 생각합니다. 일을 하면서 빼놓을 수 없는 게 워라밸일 것이라고 생각합니다. 첫 회사에서 일과 삶의 밸런스가 매우 적절하다고 생각하고 만족하며 근무를 하고 있습니다. 퇴근을 한 뒤에도 운동을 할 수 있고, 식단 관리도 병행하며 몸을 기르고 있습니다. 만약, 워라밸이 좋지 않았더라면 이렇게 삶을 유지할 수 없을 거라는 생각이 듭니다. 글을 마치며 면접에서 제가 했던 말이 있습니다. 저는 앞에 벽이 있다면 돌아가 다른 길을 찾으려 하기보다는 그 벽을 넘을 수 있는 방법을 생각합니다. 앞으로 나아갈 수 있고 성장할 수 있는 삶을 추구하고 있습니다. 비록 그 벽을 넘지 못하더라도, 다음에 그 벽보다 낮은 벽은 넘을 수 있을 것입니다. 시도조차 하지 않으면 당연히 발전도 없다고 생각합니다. 매번 도전하고 또 도전하며 발전하는 개발4그룹의 일원이 돼, 신기술 개발에도 큰 보탬이 되는 개발자로 성장하고 싶습니다. 그리고 브레인즈컴퍼니 개발4그룹에서 반드시 실현 가능하다고 생각합니다. 다양한 기술들을 배우고 학습해 제 것으로 만들고, 그룹과 회사에 보탬이 되는 개발자로 성장하겠습니다! [출처] https://twitter.com/gom_translate https://me2.kr/wvu3p http://jjaltoon.gallery/?p=11311 https://me2.kr/eq144 2022.08.25

1