React 19과 Zustand로 구현한 MDI 기반 인텔리전스 데이터베이스

Context

기존 SPA의 페이지 기반 라우팅 방식은 다중 정보를 동시에 참조하는 작업 흐름에 부적합한 구조. 정형화되지 않은 Wiki 방식은 복잡한 개체 간 관계와 이력 데이터를 체계적으로 관리하는 데 한계 존재.

Technical Solution

• Zustand를 활용한 MDI(Multiple Document Interface) 윈도우 시스템 구축으로 개별 창의 위치, 크기, z-index 및 상태를 중앙 집중식으로 관리하는 설계
• React 19 Babel Compiler 플러그인의 자동 memoization을 적용하여 다중 윈도우 활성화 상태의 리렌더링 성능 최적화
• 단순 키워드 검색을 넘어 의도(Intent)를 토큰화하고 액션 단어를 특정 관계 유형 및 레코드 테이블에 매핑하는 자연어 쿼리 파서 구현
• 50개 이상의 액션 동사를 관계 유형 슬러그와 매핑하여 데이터베이스 내 실제 관계를 동적으로 해석하는 런타임 처리 방식
• 개체 타입, 타입 기반 관계, 구조화된 레코드를 정의하여 정교한 데이터 모델링 체계 구축

Key Takeaway

사용자 경험의 특성에 따라 전통적인 페이지 라우팅 대신 워크스테이션 형태의 MDI 구조를 채택하여 정보 탐색 효율을 극대화하는 설계 전략.