노드 하나를 클릭하면 7개 탭이 열리는 UI를 만들었습니다

지식그래프를 vis-network로 시각화하고 나서, 노드를 클릭하면 오른쪽에 Drawer가 열리게 만들었거든요. 이름, 타입, 속성 몇 개가 보이는 정도였습니다.

그런데 실제로 써보니까 매번 같은 불편함이 생기더라고요. "이 시스템에 연결된 서비스가 뭐지?" → 그래프를 눈으로 따라가야 합니다. "이 시스템에 장애가 난 적 있어?" → 별도로 검색해야 합니다. "이 시스템 담당자가 누구지?" → 이메일을 뒤져야 합니다. 정보가 Neo4j에 다 있는데, 한 화면에서 못 보는 거예요.

팔란티어 Foundry에는 Object View라는 패턴이 있거든요. 온톨로지의 개별 오브젝트를 클릭하면 속성, 관계, 타임라인, 액션까지 한 화면에서 탐색할 수 있는 UI입니다. 이걸 우리 시스템에 적용해봤습니다.

노드 하나에 7개 탭을 붙였습니다

Object View의 구조는 단순합니다. 그래프에서 노드를 클릭하면 Drawer가 열리고, 거기서 "Object View" 버튼을 누르면 모달이 뜹니다. 모달 안에 7개 탭이 있어요.

개요 탭은 전체 현황을 한눈에 보여줍니다. 상단에 지표 카드 4개(연결 수, 관련 문서, 이메일 언급, 속성 수)가 있고, 그 아래에 미니 그래프가 있어요. 이 노드를 중심으로 1홉 이웃을 vis-network로 보여주는 거예요. 미니 그래프에서 노드를 클릭하면 그 노드의 Object View로 바로 전환됩니다.

속성 탭은 Neo4j 노드의 모든 프로퍼티를 테이블로 보여줍니다. 관계 탭은 팔란티어의 Links 위젯을 따라서 트리뷰로 만들었어요. 관계 타입별로 그룹핑되고, 각 노드 옆의 펼치기 버튼을 누르면 하위 연결이 API로 조회돼서 트리가 확장됩니다. 최대 3단계까지 중첩 탐색이 가능하거든요.

담당자 탭은 이 노드를 이메일에서 언급한 사람들을 회사별 트리로 보여줍니다. 장애 이력 탭은 이 노드에 영향을 준 Incident를 타임라인으로 보여주고요. 타임라인 탭은 이 노드를 언급한 이메일을 시간순으로, 문서 탭은 이 노드가 추출된 원본 문서를 보여줍니다.

팔란티어를 따라 만들면서 배운 것 3가지

뒤로가기가 탐색의 핵심이었습니다

Object View 안에서 다른 노드를 클릭하면 같은 모달에서 해당 노드의 Object View로 전환됩니다. 관계 탭에서 연결된 서비스를 클릭하고, 그 서비스의 담당자를 클릭하고, 담당자의 이메일 타임라인을 보는 식으로 자유롭게 탐색할 수 있어요.

이때 뒤로가기가 없으면 원래 보던 노드로 돌아갈 수가 없거든요. 그래서 히스토리 스택을 구현했습니다. 노드를 이동할 때마다 스택에 쌓이고, 헤더 왼쪽의 "← 이전노드명" 버튼을 누르면 이전 노드로 복귀합니다. 모달을 닫으면 히스토리가 초기화되고요.

팔란티어는 이걸 브라우저 내비게이션으로 처리하는데, 우리는 모달 안에서 동작하니까 자체 스택으로 만들었습니다. 이 기능이 없었으면 Object View가 "정보 표시 UI"에서 끝났을 거예요. 뒤로가기가 있으니까 "탐색 도구"가 됐습니다.

트리뷰가 그래프보다 나을 때가 있습니다

관계 탭을 처음에는 미니 그래프로 보여줄까 했거든요. 그런데 관계를 따라가면서 탐색하려면 트리뷰가 훨씬 낫더라고요.

그래프는 전체 구조를 한눈에 보는 데 좋지만, "이 노드에서 DEPENDS_ON 관계로 연결된 것이 뭐고, 그 노드에서 다시 RUNS_ON으로 연결된 것이 뭔지"를 추적하기 어렵습니다. 노드가 겹치고 화살표가 교차하면 더 복잡해지거든요.

트리뷰는 관계 타입별로 그룹핑되고, 펼치기/접기로 원하는 경로만 따라갈 수 있어서 의도적인 탐색에 적합합니다. 팔란티어가 Links 위젯을 트리뷰로 만든 이유가 있었어요.

5개 API를 병렬로 호출해도 됩니다

Object View가 열릴 때 7개 탭의 데이터를 어떻게 가져올지 고민했거든요. 탭을 클릭할 때마다 API를 호출하면 탭 전환이 느리고, 한 번에 다 가져오면 초기 로딩이 느릴 수 있으니까요.

결론은 5개 API를 Promise.all로 병렬 호출하는 거였습니다. 속성, 이웃 노드, 문서, 담당자, 장애 이력을 한꺼번에 요청하면 가장 느린 API 기준으로 끝나거든요. 데이터 양이 적어서 전부 합쳐도 1초 안에 끝나고, 한 번 로딩되면 탭 전환이 즉시예요.

데이터가 많아지면 탭별 lazy 로딩으로 전환할 수 있지만, 지금 규모에서는 병렬 호출이 UX도 좋고 코드도 단순합니다.

Actions — 보기만 하는 UI에서 행동하는 UI로

Object View의 마지막 요소는 Actions 드롭다운입니다. 이전 글에서 팔란티어의 키네틱 레이어를 정리했었거든요. Object View에 액션을 붙이면 "이 노드에 대해 뭘 할 수 있는지"가 UI에 바로 보입니다.

현재 4개 액션이 들어가 있어요.

복구 플랜 생성이 가장 재미있었어요. 버튼 하나 누르면 Neo4j에서 이 노드의 관계와 속성을 컨텍스트로 모아서 LLM에 넘기고, 복구 절차 마크다운을 자동 생성합니다. 결과는 팝업에서 바로 볼 수 있고, DB에 자동 저장돼서 나중에 이력 조회도 됩니다.

이전 글에서 시맨틱(명사) 위에 키네틱(동사)을 붙여야 운영 시스템이 된다고 했는데, Object View가 바로 그 접점이에요. 속성과 관계를 보다가, 같은 화면에서 액션을 실행할 수 있으니까요.

Object View는 어디서든 열립니다

마지막으로 중요한 설계 원칙이 하나 있어요. Object View는 별도 페이지가 아니라, 오브젝트 이름이 보이는 모든 곳에서 진입 가능하게 만들었습니다.

그래프에서 노드를 클릭하면 열리고, Object View 안에서 관계 트리의 노드를 클릭해도 열리고, 장애 이력에서 Incident를 클릭해도 열립니다. 어디서든 이름이 보이면 클릭해서 탐색할 수 있어요.

팔란티어도 같은 원칙을 쓰거든요. 온톨로지의 모든 오브젝트가 어디서든 클릭 가능한 링크입니다. 이게 되면 사용자가 "그래프 페이지로 돌아가서 다시 찾아야지"라는 생각을 안 하게 되고, Object View 안에서 연쇄 탐색이 자연스러워집니다. 뒤로가기 히스토리와 합쳐지면 웹 브라우저처럼 자유롭게 노드를 돌아다닐 수 있어요.