표준 하나를 중심에 두면 이웃 226개가 한꺼번에 쏟아지던 관계도를 관계·클래스별 그룹 카드로 접었습니다. 그룹을 더블클릭하면 6개씩 펼치기로 하고 패널에 페이저까지 달았는데, 네 시간 뒤 정보 주제라는 2차 단이 들어오면서 6개씩 쪽 넘김을 통째로 걷어냈어요. 같은 날 커밋 둘이 서로를 뒤집는 과정과, 그 사이에 남긴 것·버린 것을 적습니다.
OID 조직도의 드릴다운을 오후 2시에 걷어냈고 밤 9시 45분에 되살렸습니다. 잎을 트리 밖 카드 목록으로 내보낸 뒤 계층이 한 화면에 다 들어오니 드릴다운이 필요 없어 보였는데, 운영 데이터의 표준 가지 아래로 내려갈 길이 통째로 사라졌어요. 되돌리면서 "어느 노드가 카드 버킷인가"를 화면의 추론에서 서버 플래그로 옮겼습니다.
데이터 맵에서 클래스 타일을 눌렀더니 인스턴스 2,732개를 부채꼴로 세로로 쌓아 캔버스가 92,948px이 됐습니다. 목록으로 보내는 대신 이름 접두어로 묶음 단을 끼웠고, 한 글자씩만 깊어지는 사슬을 같은 단에 미리 펼쳐 최악 경로를 3클릭으로 줄였어요. 같은 날 두 번 방식을 바꿨고, 이튿날 붙인 핵심어 탭은 그날 저녁에 다시 뺐습니다.
메시지가 무엇으로 이뤄졌는지 보려면 상세를 계속 타고 들어가야 했습니다. 전체를 좌→우 계층 트리 한 장으로 그리는 전용 뷰어를 만들었어요. 재귀 구조인데 쿼리는 깊이당 한 번이고, 순환은 자르되 잘랐다고 화면에 적습니다. 같은 날 오전에 넣은 디스플레이 유형 하나를 오후에 걷어낸 이야기도 같이 적었습니다.
OID는 번호로 갈라지는 계층인데 세로 목록 트리로는 형제 순서도 계층 폭도 안 읽혔습니다. d3.hierarchy로 가로 조직도를 새로 그렸는데, 네 화면 중 두 곳만 바꿨어요 — 경로 바가 있느냐로 갈랐습니다. 그리고 나서 트리 전체를 다 그리다 SVG가 12,691px가 됐습니다.
노드를 클릭하면 곧바로 화면이 떠나서, 이 노드가 뭔지 보려다가 보던 그림을 잃었습니다. 클릭을 선택으로 바꾸고 다음 행동을 우측 패널로 옮겼어요. 공용 렌더러와 공용 본문을 고쳐 공개 6 · 관리자 5, 11개 화면에 한 번에 걸었고, 설정을 템플릿 set에 두면 include로 안 넘어간다는 함정도 같이 정리했습니다.
클래스 3개짜리 화면이 18개 노드로 그려지던 관계도를, 백엔드를 안 건드리고 중심 이동 탐색으로 바꿨습니다. 배치를 힘 시뮬레이션에서 고정 방사 좌표로 뺐더니 이번엔 노드 두 개가 땅콩처럼 붙었어요. 범인은 forceCenter였고, 고정 노드가 있는 그래프에서 왜 그게 겹침을 만드는지 정리했습니다.
ASN.1 노드 단어를 세어 서버에서 PNG로 그려주던 워드클라우드를, 통합검색 검색어를 세어 클라이언트에서 그리는 화면으로 바꿨습니다. 화면의 성격을 "무엇이 등록됐나"에서 "무엇을 찾았나"로 옮긴 결정과, 같은 집계를 두 군데 두는 바람에 같은 검색어가 화면마다 다른 비율로 보이게 된 이야기입니다.
데이터 관계도·워드클라우드·트리맵마다 복붙돼 있던 줌 설정을 공용 모듈 d3ZoomControls.js로 추출하고, 확대/축소/맞춤 버튼과 "최초 1회 fit-to-view"를 표준화한 작업입니다. SVG가 100% 크기일 때 뷰포트 크기를 어떻게 구하느냐가 핵심 함정이었어요.
총 등록 수·상태 분포만 보여주던 통계 대시보드를, 생애주기·완성도·최근 업데이트·인기 항목 중심으로 다시 짠 작업입니다. "ACT 개수"가 아니라 "완성형(고품질) 데이터가 얼마나 되나"를 묻도록 지표를 바꾼 이야기예요.
서버에서 graphviz로 PNG를 그려 내려주던 ASN.1 트리를 D3.js 기반 Collapsible Tree로 전환한 과정과 그 이유를 정리합니다. 서버 의존성 제거, 인터랙션, JSON 스키마 설계까지.
jQuery 기반 Django 프로젝트에 D3.js 시각화를 도입한 경험을 정리합니다. 공통 그래프 유틸 설계, 실데이터 부재 시 샘플 폴백, 줌/중앙정렬 개선 포인트를 다룹니다.