Zenius SIEM
통합 로그 관리 · 보안 관제 솔루션의 새 버전 웹 프론트엔드. 디자인 시스템을 깔고, 무거운 첫 로딩을 덜어내고, 영문판 출시를 준비했습니다.
- role
- 프론트엔드 개발
- period
- 2026.04 — 현재
- stack
- Vue 3 · TypeScript · Vite
- type
- B2B 보안 솔루션
재구성한 가상 화면 · 실제 제품 화면과 데이터가 아닙니다
언어를 바꿔보세요 — 영문판 출시를 위해 상태 · 심각도 라벨과 화면 문구를 다국어로 정리했어요.
수십 개 화면, 하나의 규칙이 필요했어요
보안 관제 솔루션은 모니터링, 이벤트 관리, 검색, 감시 설정, 수집 관리, 보고서처럼 성격이 다른 화면이 아주 많아요. 새 버전에서는 동료 개발자, 디자이너분들과 함께 흩어진 UI를 디자인 시스템으로 묶었고, 저는 데이터 조회 구조를 새 API로 옮기고, 첫 로딩과 페이지 이동을 가볍게 만들고, 영문판 출시를 준비하는 일을 맡았습니다.
공통 컴포넌트를 만들고, 전 화면에 깔았어요
Button, Input 계열, Tag · Badge, Breadcrumb와 타이포그래피 토큰을 디자인 시스템 규격으로 구현하고 Storybook에 문서화했어요. 적용 전에 미적용 화면과 모달 100여 개의 구조를 전수조사해 작업 단위를 나눴고, 전 도메인의 화면에 순서대로 적용했습니다. 임의로 쓰던 글자 크기도 모두 토큰으로 바꿨어요.
첫 로딩을 절반 가까이 덜어냈어요
렌더를 막고 있던 엔트리 CSS 안에 웹폰트 선언이 수백 개 들어 있었어요. 이걸 마운트 뒤 동적 import로 분리하고, 차트 부가 모듈은 차트를 쓰는 곳에서만 불러오게 옮겼습니다.
페이지 이동 대기, 약 40% 단축
화면을 옮길 때마다 메뉴 구성을 다시 받고, 그 응답이 온 뒤에야 페이지 권한을 조회하고 있었어요. 두 조회를 동시에 돌리고 메뉴 구성은 캐시해서, 라우터 가드가 기다리는 시간을 줄였습니다.
영문판 출시와 새 API 전환
이벤트, 감시 설정, 로그 수집, 실시간 로그뷰, 차트 범례까지 빠진 번역을 채웠어요. 상태 · 심각도 · 유형 라벨은 공용 라벨 사전으로 옮겨 서버 코드 값과 바로 매칭되게 했습니다. 맨 위 가상 화면의 언어 버튼이 이 작업을 보여줘요.
호스트 · 로그 유형 트리 조회를 새 API로 옮기는 기반을 만들고, 모니터링 · 검색 · 이벤트 · 감시 설정 · 수집 관리 · 보고서 등 10여 개 화면을 전환했어요. 기존 저장 형식은 어댑터로 유지해 사용자 데이터가 깨지지 않게 했습니다.