사내 보안 리소스 통합 플랫폼 구축기 : 2. 계층형 레퍼런스 필터 UI 개선기

🧱 복잡한 트리구조 필터, 계층형 필터로 개선하기

---

❌ 기존 UI의 문제점

기존의 체커 관리 시스템에서는 아래와 같이 트리 구조 기반의 레퍼런스 필터를 사용하고 있었다.

• 트리 형태로 구성된 필터는 시각적으로 복잡하며, 중첩 레벨이 많아지면 가독성과 사용성이 급격히 떨어지는 구조
• 각 챕터/룰 단위로 선택할 수는 있었지만, 전체 선택/해제 로직이 직관적이지 않았고, 마우스 없이 조작하기에도 불편
• 스크롤이 많고 구조가 평평하지 않아, 사용자 입장에서는 어떤 기준으로 선택할지 파악이 어려워 보임
• 첫번째 선택 항목의 경우 필터 레이아웃을 벗어난 UI를 가지고 있음

 

✅ 개선 방향: 3단계 계층형 필터 UI

기존에 한눈에 보기 어려운 UI를 개선하기 위해 3단계 계층 구조에 기반한 커스텀 필터 컴포넌트를 설계 및 구현했다.

 
 
📌 구조 개선

• 레퍼런스 → 그룹 → 항목의 구조로 단계별 필터링을 가능하게 설계
• 각 단계는 명확한 탭과 리스트 구조로 분리되어, 시각적 집중도와 접근성을 높임
• 기존 구조보다 선택 항목 간의 관계가 더 명확하게 드러나는 UX 제공

📌 기능 개선

• 선택된 항목은 내부 상태에 따라 자동 동기화되며, 전체 선택/해제 기능도 명확하게 구현
• shadcn/ui와 Tailwind CSS 기반으로 구현되어, 키보드 네비게이션 지원과 반응형 디자인도 고려됨
• 이름이 길어 잘리는 경우를 리사이즈 가능하게 shadcnUI의 resizable 컴포넌트 활용
• 필터 초기화, 적용, 설정 간 UX 흐름도 직관적으로 개선됨

 

🔍 개발 : 데이터 및 상태 관리 고민

레퍼런스 데이터는 백엔드에서 3단계 중첩 구조로 제공되며, 이를 기반으로 다음과 같은 상태 관리를 설계했다.

interface CascadingFilterProps {
  data: ReferenceItem[];
  selected: {
    firstSelectedId: string;
    secondSelectedIds: string[];
    thirdSelectedValues: Record<string, string[]>;
  };
  onChange: (newSelected) => void;
  onReset: () => void;
}

• firstSelectedId: 선택된 최상위 그룹
• secondSelectedIds: 선택된 중간 그룹들
• thirdSelectedValues: 각 중간 그룹별 선택된 하위 항목들 (Key-Value 형태)

이 구조는 중첩 필터 항목 간의 의존성을 안전하게 관리하며, 사용자 조작에 따라 자동 상태 동기화가 가능하도록 설계했다.

🎯 개선 효과

• 시각적 계층이 명확해져 사용자가 원하는 항목을 더 빠르고 쉽게 찾을 수 있음
• 이전보다 복잡한 레퍼런스 구조를 효율적으로 탐색 및 선택 가능

🔧 향후 개선 예정

• 레퍼런스 필터 항목이 많아질 경우 발생할 수 있는 렌더링 지연, 스크롤 버벅임 등의 성능 이슈를 고려해, 대량 데이터 대응을 위한 가상화(virtual scroll) 적용
• 사용자에게 전체 갯수 및 선택 된 갯수 제공
• 키보드 네비게이션 지원 강화