40대 개발자의 차트 그리기 2

Grouped Bar Chart

Grouped Bar Chart는 hierarchy Tree Chart와 Bar Chart의 합성어로 차트 영역을 양분하여 좌측에는 노드 간의 연관 정보를, 그리고 우측에는 각 노드의 정보를 Bar Chart 형태로 표현하는 차트입니다.

와탭에서 본 차트를 통해 제시하고자 하는 바는 트랜잭션 단위의 호출 관계를 직관적으로 파악 가능하도록 표현하는 것입니다.

이를 위해 분산 아키텍처 환경의 연계 호출 흐름을 좌측의 Tree Chart로 표현하고, 각 노드의 처리 시작 및 종료, 처리 시간을 Bar Chart로 표현합니다. 이를 통해 사용자는 개별 트랜잭션의 호출 시작점을 기준으로 어떤 하위 애플리케이션이 호출되었으며, 어느 애플리케이션의 API 호출이 전체 트랜잭션의 지연을 유발했는지를 쉽게 파악할 수 있습니다.

figure 1. 멀티서버 연계 추적용 차트

제약 사항 - 최상위 노드 복수 표현 불가

본 차트의 좌측 영역을 구성하는 Tree Chart 영역은 tree의 최상위 레벨로부터 분기되는 특성을 가지고 있으며, 최상위 노드가 복수로 존재할 수 없는 제약을 가지게 됩니다.

무언가의 이유로 최상위 노드의 정보를 확보하지 못해, 복수의 최상위 노드가 만들어지는 상황이라면, 차트를 어떻게 표현할지 고민하게 됩니다.

저는 2가지 대안을 고민해보았습니다.

첫 번째 안은 복수의 최상위 노드 각각에 대해 Tree Chart를 표현하는 것입니다. 이 경우 각각의 차트를 겹쳐서 표현할지, 아래쪽으로 계속 붙여갈지를 고민하게 됩니다.

두 번째 안은 확보되지 못한 최상위 노드를 가상으로 표현하는 것입니다. 트랜잭션의 특성상, 최상위 노드가 복수로 존재할 수는 없으므로(비동기 패러럴 처리라 하더라도), 본 방식으로 진행하는 것이 유용할 것으로 보여 진행하기로 합니다.

figure 2. 가상의 최상위 노드를 표현

복수의 최상위 노드가 확보된 경우, 에러 메시지를 통해 이를 사용자에 알리고 가상의 노드를 표현하게 되었습니다.

제약 사항 - Bar Chart의 축

Bar Chart 영역의 x축, y축 그리고 tick(x축의 지표) 라인을 표현하는 위치는 Tree Chart 말단 노드의 위치와 상관관계를 가집니다.

Tree Chart 말단 노드 중 최초 노드 기준으로 xy축을 표현할 시작점과 tick line의 위치와 길이를 결정하는데, Tree Chart 노드 배치는 차트 라이브러리 엔진에 위임하고, 배치된 노드 중 최초 노드를 확보하여 사용합니다. 이 과정에서 최초 노드로 선택된 노드의 y 좌표가 가장 위에 위치하지 않는다면, 여러 노드의 중앙에 xy축과 tick line의 시작점이 위치하게 됩니다. (개선 점의 이미지를 확보하지 못했네요)

이를 개선하기 위해서도 2가지 대안을 고려해 보았습니다.

첫 번째 안은 y축 좌표가 최초에 해당하는 말단 노드를 찾는 것입니다. 다만, tree chart를 엔진에 위임하여 처리하다 보니 tree chart가 모두 렌더링 된 이후에야 비로소 좌표를 특정할 수 있어 callback을 삽입하는 타이밍을 찾아야 하는 문제가 발생합니다.

두번째 안은 모든 말단 노드를 기준으로 xy축과 tick line을 표시하는 것입니다. 다만 tick line의 길이를 상대적으로 짧게 표현하여 bar chart의 스타일은 조금 조정하기로 합니다.

figure 3. xy축 및 tick line의 표현 방식 변경

Edge Bundling Chart

Edge Bundling Chart는 노드 정보를 원형으로 외곽에 배치하고, 링크 정보를 원 내부에 표현하는 형태의 차트입니다.

와탭에서는 본 차트를 통계 기능에 적용해 보았습니다. 본 차트의 목적은 트랜잭션 URL과 SQL, 트랜잭션 URL과 에러 유형의 관계를 제시하고, 그 비중을 효율적으로 보기 위함에 있습니다. 이를 위해 관계 정보의 건수를 링크 연결선의 굵기로 표현하여 비중이 높은 관계 정보를 빠르게 찾아낼 수 있습니다.

figure 4. 비중 중심의 통계 관계 정보 차트

특정 노드에 마우스 오버 시에 노드와 연결된 타 노드와 링크 정보를 강조하여 표현함으로써 특정 노드가 얼마나 다양한 통계 정보와 연관되어 있는가에 대한 정보도 부가적으로 얻게 됩니다. 보다 상세한 정보는 툴팁으로 제공합니다.

Topology Chart

이전 글을 통해 통해 제시했던 토폴로지 차트 개발기의 연속선상에서 후속으로 고민되고 개선된 사항을 이야기해 볼까 합니다.

애플리케이션 간의 상호 연관관계를 파악하기 위한 목적의 토폴로지 제공을 목적으로 관련 정보를 화면에 표현하고 이제 이를 고도화하는 작업을 진행하다 보니 몇 가지 요구 사항이 추가로 대두됩니다.

• 대규모 환경 벙보는 어떻게 표현할 것인가?
• 원하는 정보만을 찾아내기 용이한가?

figure 5. 애플리케이션 그룹간의 연관관계

와탭은 종전까지 애플리케이션을 프로젝트에 종속시켜 관리해 왔습니다. 하지만 사용자 요건 중 애플리케이션 단위가 아닌 특정 목적의 그룹핑 정보를 기준으로 한 필터링 등의 기능을 필요로 하는 요건이 존재해 왔습니다.

1. 군집 표현 - 프로젝트 단위

대규모 환경의 경우 멀티 프로젝트 구성을 통해 이를 수용하게 되는데, 이를 토폴로지로 표현할 경우 개별 노드를 화면 전체에 균등 분포시키기 보다는 프로젝트 단위로 모아서 배치하는 것이 전체적인 단위 레벨의 파악이 용이하리라는 판단하에 군집 단위를 다음과 같이 지정하여 화면에 배치하게 되었습니다.

• 프로젝트
• 데이터베이스 호출
• 외부 호출 호스트
• 애플리케이션을 호출하는 외부 모듈

figure 6. 토폴로지의 군집 표현

청색 계열 색상으로 구분되는 프로젝트 노드와 프로젝트 하위의 애플리케이션 그룹이 하나의 군집 단위로 인접 위치에 배치하였습니다. 사용자가 노드를 드래그하여 노드의 위치를 지정하는 방식으로 위치를 변경할 수도 있습니다.

군집도로 인해 애플리케이션 그룹 간의 호출 정보 파악이 용이하지 않다면, 화면 상단의 노드 간격 확대/축소 버튼을 통해 노드 간의 간격을 조정할 수 있도록 개선을 진행했습니다. (확대 후 결과는 figure 5.에 제시)

2. 노드의 선택 - 하이라이트 필터

대량의 노드를 배치하고 나니, 특정 애플리케이션만 추적하는 것에 어려워졌습니다. 단위 노드에 마우스 오버 시에 해당 노드 및 연관 노드, 링크를 하이라이트 하는 기능도 사용할 수 있지만, 하이라이트 상태를 유지할 수 있도록 개선하는 것이 사용자 편의성을 증대시킬 수 있다고 판단하고 기능을 추가합니다.

화면 상단의 검색창에 키워드를 입력하면 키워드와 해당하는 연관 정보의 하이라이트 상태가 유지됩니다.

figure 7. 하이라이트 필터

3. 링크 정보의 폰트 사이즈

차트에 표현되는 정보가 많아질수록, 아울러 연관 정보가 많아질수록 차트를 축소해서 보게 될 가능성이 높습니다. 줌아웃을 통해 차트를 축소하게 되면 노드의 위치는 고정이어서 위치를 가늠한다 하더라도, 글자의 사이즈가 상대적으로 작아져 호출 정보를 식별하기 어려울 수 있습니다.

이에 노드와 노드 간의 간격에 따라 폰트 사이즈도 가변 적용되도록 개선해보았습니다.

figure 8. 연결 정보의 거리에 따른 가변 폰트 사이즈

마무리

모니터링 도구는 정확한 정보를 왜곡없이 사용자에 제공하는 것이 최우선 과제일 듯 싶습니다. 이런 최우선 과제를 해소하고나면, 사용자에 이를 어떻게 제공할 것인가를 지속적으로 고민하게 됩니다. 토폴로지를 포함한 와탭의 모든 기능은 사용자에게 유용한 정보를 보다 직관적으로 파악이 용이하도록 지속적으로 개선을 진행하고 있습니다.

불편한 점이나 개선 의견이 있으시다면 [email protected]로 요청드립니다.