AI Systems Atlas

연결선이 많아질수록 무엇을 뜻하는지 보여줘야 했습니다

AI Systems Atlas에서는 Markdown 문서의 구조와 근거를 노드·관계로 만들었습니다. 문서 목록을 넘어서 어떤 내용이 이어지는지 탐색하려는 구성이지만, 화면의 모든 선이 같은 의미를 갖는 것은 아닙니다. 저장된 관계와 화면 탐색을 돕는 시각 연결을 나누는 일이 필요했습니다.

저는 8월 12일 탐색 제어를 정리하면서 ‘전체·근거·시각’ 표시를 하단에서 바로 바꿀 수 있도록 했습니다. 시각 연결은 저장된 지식 관계로 취급하지 않고, 분석이나 답변 검색의 근거에도 넣지 않습니다. 화면이 풍부해졌다는 이유로 근거가 늘어난 것처럼 읽히지 않게 하려는 선택입니다.

이 구분은 설명 문장만으로 끝낼 수 없었습니다. 사용자가 표시 방식을 바꿨을 때 실제 선과 수량, 선택 범위가 같은 조건을 반영해야 합니다. 관계의 의미를 UI 상태와 연결해서 다듬은 경험입니다.

같은 필터를 두 곳에서 따로 보관하지 않았습니다

사이드바에는 관계 계층을 하나씩 고르는 조작이 있고, 하단에는 자주 쓰는 조합을 고르는 조작을 뒀습니다. 두 곳이 각자 상태를 저장하면 사이드바에서는 일부 계층만 켰는데 하단에는 ‘전체’가 표시되는 식으로 서로 다른 설명이 남을 수 있습니다.

저는 하나의 activeLayers에서 하단의 표시 상태를 계산하도록 했습니다. 근거에 해당하는 계층이 켜졌으면 ‘근거’, 화면 연결만 켜졌으면 ‘시각’, 사용자가 다른 조합을 골랐으면 ‘맞춤’으로 읽습니다. 버튼을 누를 때도 동일한 계층 상태를 바꿉니다.

사이드바에서 관계를 고르든 하단 버튼을 누르든, 현재 선택한 관계 상태를 기준으로 선을 표시합니다. 세밀하게 고른 조합을 하단의 간단한 버튼 표시가 덮어쓴 것처럼 보이지 않게 했습니다.

숨긴 노드는 클릭에서도 제외했습니다

노드를 선택하면 전체 또는 1단계·2단계 주변으로 표시 범위를 좁힙니다. 선택한 점과 직접 이웃, 그다음 이웃을 나누어 큰 그래프 안에서 가까운 내용을 살피도록 한 구성입니다. 노드를 선택하지 않았을 때는 주변 범위를 선택할 수 없게 했습니다.

여기서 범위 밖 노드를 어둡게만 만드는 것으로는 충분하지 않았습니다. 보이지 않는 점이 클릭되거나 라벨이 남으면 사용자는 빈 공간을 눌렀는데 다른 문서가 열렸다고 받아들일 수 있습니다. 저는 점과 관계선, 라벨, 클릭 판정, 키보드 탐색, 화면 맞춤에서 같은 표시 집합을 사용하도록 맞췄습니다.

분야와 유형 필터는 선택 범위와 함께 적용합니다. 모든 조건을 만족하는 노드만 보이도록 하고, 카메라와 클릭 대상에도 같은 노드를 사용합니다. 원래 그래프의 사실 데이터는 남겨 둔 채 지금 화면에 표시할 대상을 고르는 방식입니다.

선택 패널과 하단 조작이 겹친 부분을 고쳤습니다

탐색 제어를 붙이는 과정에서는 선택 상세 패널이 하단 버튼 일부와 겹쳐 클릭이 아래 관계 버튼으로 전달되는 문제도 확인했습니다. 관계 계산이 맞아도 화면의 두 조작이 같은 위치에 있으면 사용자의 선택이 다른 의미로 처리될 수 있습니다.

저는 데스크톱과 작은 화면의 상세 패널 아래 여백을 toolbar 위로 조정하고, 실제 요소의 사각형이 겹치지 않는 조건을 확인했습니다. 버튼 이름이나 색을 바꾸는 일보다 조작 영역을 서로 분리하는 것이 먼저였습니다.

이 경험은 데이터 필터와 레이아웃 검수가 따로 끝나서는 안 된다는 기준을 남겼습니다. 선택 패널에서 문서를 읽는 동작과 관계 범위를 바꾸는 동작이 동시에 가능해야 합니다. 그래프를 멋지게 배치했는지보다 어떤 조작이 어떤 상태를 바꾸는지 실제 화면에서 확인해야 했습니다.

화면 맞춤은 현재 보이는 집합을 기준으로 했습니다

카메라를 맞출 때는 원래 그래프 전체의 고정 거리 대신 현재 표시 중인 노드의 좌표 범위를 계산했습니다. 1단계 주변만 보고 있는데 전체 데이터의 거리로 맞추면 작은 집합이 멀리 보일 수 있습니다. 반대로 화면이 세로로 길어지면 가로 화면의 거리만으로는 끝의 노드가 잘릴 수 있습니다.

현재 보이는 노드의 실제 위치를 감싸는 구(bounding sphere)와 세로 시야각, 화면 비율을 함께 사용했습니다. 기존 카메라 방향은 유지하고 허용된 거리 안에서 이동합니다. 표시 노드가 하나인 경우와 없는 경우도 따로 다룹니다. 보이는 노드가 없는데 억지로 확대해 잘못된 좌표를 만들지 않도록 했습니다.

‘재정렬’은 보기의 초기 카메라로 돌아가는 동작이고, ‘화면 맞춤’은 지금 보이는 대상을 읽기 좋게 잡는 동작으로 나눴습니다. 두 버튼의 결과가 비슷해 보여도 기준이 다르므로 이름과 계산을 함께 구분했습니다.

시각 탐색과 사실 확인의 경계를 남깁니다

검수에는 근거 표시에서 시각 선이 빠지는지, 시각 표시에서 저장 관계가 빠지는지, 맞춤 조합이 그대로 표시되는지 포함했습니다. 선택 범위 밖 노드가 클릭과 화면 맞춤에서 제외되는 조건도 함께 확인하도록 남겼습니다. 노드 수와 선 수만 검사하면 이 차이를 놓칠 수 있습니다.

공개 읽기 전용 화면에는 검토한 JSON 투영을 사용하고, 전체 앱의 데이터베이스나 작업·OAuth 정보를 넣지 않는 구성을 택했습니다. 공개 화면이 전체 처리 시스템을 그대로 운영한다는 뜻은 아닙니다. 탐색에 필요한 정보와 운영 정보의 경계를 별도로 잡은 선택입니다.

Atlas를 만들며 제가 정리한 기준은 화면의 연결이 곧 사실 근거가 되지 않도록 표시와 조작을 맞추는 것입니다. 저장 관계인지 화면 연결인지 구분하고, 숨김·클릭·카메라가 같은 집합을 읽어야 사용자가 그래프를 해석할 수 있습니다. 관계 탐색의 가치는 선의 양보다 그 선이 무엇을 뜻하는지 확인할 수 있는 데 있습니다.

AI Tools Lab에서 직접 탐색하기

AI 지식 지도 열기에서 이 사이트의 가이드·인사이트·프로젝트·스킬과 소스 소개를 연결해서 살펴볼 수 있습니다. 원본 공개 데모와 달리 AI Tools Lab의 실제 콘텐츠를 대상으로 합니다.