네트워크 관리 백오피스를 재정비해 정보 위계를 분명히 하고 일상 조작을 편하게

(과제)

기능이 계속 늘어 백오피스에는 더 분명한 탐색 구조가 필요했습니다

플랫폼은 여러 그룹 기업의 웹사이트 트래픽과 보안 상태를 모니터링합니다. 고객 수가 늘면서 기능이 늘었고 새 기능이 드롭다운 사이드바에 계속 추가되어, 엔지니어는 원하는 기능을 찾으려고 메뉴를 아래로 스크롤해야 했습니다.

사용자가 찾는 기능이 어느 메뉴에 속하는지 확신하기 어려운 경우가 있었습니다. 긴급 상황을 빠르게 해결해야 하는 엔지니어에게는 찾는 시간을 줄이는 것이 최우선 목표입니다.

프리세일즈 영업, 프로덕트 매니저, 기술 인력, 프런트엔드·백엔드 엔지니어는 플랫폼에 각기 다른 기대를 갖고 있었습니다. 팀은 약 2개월 동안 여러 차례 인터뷰를 진행해 사용 중 겪는 어려움을 기록하고, 분류와 우선순위 정리를 거쳐 프로젝트 목표를 확정했으며, 고객이 협력 기업에 제공한 플랫폼 교육 매뉴얼도 참고했습니다.

(접근 방식)

주요 페이지를 먼저 설계하고 규범을 도출

플랫폼은 기술 문턱이 높아 다양한 조작 상황과 반응형 디자인을 동시에 고려해야 했습니다. 요구가 복잡하고 컴포넌트가 다양해, 사용 빈도가 가장 높은 주요 페이지를 먼저 설계한 뒤 주요 페이지들 사이의 공통 논리를 찾아 정리하고, 그 디자인 규범을 나머지 보조 페이지에 적용하는 방식으로 바꿨습니다.

컴포넌트는 기획, 디자인, 검토, 조정, 테스트, 확인을 거쳐 10회가 넘는 반복 끝에 범용성 높은 컴포넌트 세트로 완성되었습니다.

(핵심 설계)

세 가지 핵심 설계

가로형 패널

새 버전은 같은 유형의 기능을 묶어 블록으로 구분하고, 주·보조 사이드바, 드롭다운 메뉴, 북마크, 트리 구조, 다중 레이어 팝업을 조합하며 왼쪽에서 오른쪽으로 이어지는 가로형 패널을 더해, 사용자가 단계별로 전환하며 기능을 빠르게 찾을 수 있게 했습니다.

범용 컴포넌트

호스트 목록처럼 사용 빈도가 높고 데이터 양이 방대한 페이지는 범용성 높은 표 컴포넌트와 토폴로지 컴포넌트로 구성했습니다. 호스트 목록에서는 마우스 오른쪽 버튼으로 호스트별 전체 조작을 수행할 수 있고, 기능 유형별로 정렬됩니다.

복잡한 정보의 시각화

플랫폼의 브랜드 그린이 인터페이스 전반을 관통하며 정상 상태를 나타내고, 빨간색과 노란색은 이상을 의미합니다. 모든 색상 위계는 텍스트보다 낮게 두어 핵심은 알리되 눈이 부시지 않게 했습니다. 토폴로지, 호스트, 트래픽 상태는 이미지로 표현하고 단색 그라데이션으로 식별을 돕습니다. 웹사이트 상태는 20종으로 나뉘며 폼 전용 아이콘을 200개에 가깝게 설계해, MIS 담당자가 골든타임 안에 웹사이트 장애를 신속히 해결하도록 했습니다.

(성과)

반년 만에 일정대로 완성, 보안 전시회에서 공개

협업 초기에 고객은 프로젝트 전체가 보안 전시회 전에 끝나기를 원했습니다. 반년에 걸쳐 일정대로 납품했고, 플랫폼 팀은 보안 전시회에서 적지 않은 협력 기회를 얻었습니다.

경험 최적화는 실시간 모니터링, 규정 준수 사전 점검, IP 할당, 사용 통제 등의 경로를 아우릅니다.