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

와탭 서비스에서 사용되는 차트들

와탭의 모니터링 서비스에는 20여 종의 차트가 사용되고 있습니다. IT 서비스에 필요한 관련된 다양한 정보를 IT 서비스 운영자들이 유기적으로 분석할 수 있는 정보를 제공하기 위해 다양한 차트를 제공하고 있습니다. 와탭에서 제공하는 몇 가지 차트들을 성격에 맞춰 분류해 보겠습니다.

선 차트

선형 차트는 화려하지 않지만 사용자에게 단일 데이터 집합에 대해 특정 기간 내에 추세를 제공하는 가장 강력한 차트입니다. 또한 여러 다른 데이터 그룹의 추세를 비교할 수 있습니다.

영역 차트

영역 차트는 선 차트와 매우 유사하지만 데이터의 합을 표현할 수 있는 장점을 가지고 있습니다. 영역 차트는 단일 또는 여러 범주의 기간에 대한 추세 또는 여러 데이터 그룹 간의 변경 내용을 표시하는 데 이상적입니다.

지도형 분산 차트

분산 차트는 일정 기간 동안 주요 주제와 각기 다른 차원에서 서로 다른 목표가 어떻게 정착되었는지 분석하는 데 이상적입니다. 라인 차트보다 더 많은 정보를 제공할 수 있습니다.

바 차트

바 차트는 개념 또는 데이터 집합 간의 비율 또는 비율을 비교하기 위한 것입니다. 바 차트는 세로로 표현하기도 합니다.

도넛 차트

도넛 차트는 원형 차트의 파생형 차트입니다. 하나의 주제를 세그먼트 별로 분해하는 데 적합합니다. 원형 차트에 비해 세그먼트의 비례를 더 잘 표현하는 장점을 가지고 있습니다.

와탭에서는 이 외에도 다양한 차트들을 제공하고 있습니다.

차트 개발에 필요한 질문

차트를 만들 때마다 던지는 몇 가지 질문이 있습니다. 기본적으로 “누가 볼 것인가? ”와 “어떤 목적으로 볼 것인가”라는 질문들 그리고 개발자의 관점에서 “무엇을 보여줄 것인가? “와 “어떻게 보여줄 것인가? ”라는 두 가지 질문이었습니다.

기본 질문
• (Who)누가 볼 것인가?
• (Why)어떤 목적으로 볼 것인가?

개발자의 관점에서의 질문
• (What)무엇을 보여줄 것인가?
• (How)어떻게 보여줄 것인가?

차트 개발은 항상 누가 어떤 목적으로 활용할 것이며, 무엇을 어떻게 보여줄 것인가에 초점을 맞추어야 할 것입니다. 그리고 무엇보다 사용자에게 잘 전달하기 위한 직관적인 방법을 찾아야 합니다.

텍스트 지표와 차트의 차이

데이터를 텍스트로 표시하는 것과 차트로 표시하는 것의 가장 중요한 차이는 변화에 대한 정보량입니다. 데이터를 텍스트로 표시할 때 어떤 변화량을 표현하려면 변화량에 대한 추가적인 데이터를 사용해야 합니다. 하지만 차트에서는 추가적인 표현 없이 기존 데이터의 상관관계만으로 표현하므로 더 많은 양의 데이터를 집약적으로 전달할 수 있습니다.

2차원의 시계열 차트를 예로 들어 보겠습니다. x축은 시간입니다. y 축은 해당 차트가 보여주고자 하는 지표를 할당합니다. 종종 여러 지표를 한꺼번에 표현하기 위해 색상으로 구분된 다중 지표 차트를 표현하게 됩니다. 이때 차트에 표현되는 정보량을 단순히 계산해 보면 아래와 같습니다.

x축 지표 수 * 지표 수

시계열 차트의 경우 여기에 아래와 같은 정보가 시각적으로 더해집니다.

- 지표의 시간별 변화 추이
- 여러 지표 간의 변화 추이 비교

이런 변화를 차트로 표현하지 않는 상황에서 시각적으로 빠르게 파악하려면, 텍스트에 변화 양에 따른 색상을 달리하여 표현하거나, 분산/편차 등을 제공해야 할 수도 있습니다. 반면 차트를 활용하는 경우 지표를 2차원 평면에 표시하는 것만으로도 보다 빠르게 정보를 전달할 수 있습니다.

시계열 차트에서 한 발 더 나아가 지표를 표시하는 지점에 부가정보를 전달할 수도 있습니다. 아래는 2차원 차트를 통해 보다 다양한 정보를 제공하는 예입니다. 지표를 표시하는 지점에 원의 크기와 색상을 표시하여 2가지 이상의 정보를 제공하고 있습니다.

Max Roser (2019) - "Child Mortality". Published online at OurWorldInData.org. Retrieved from: 'https://ourworldindata.org/child-mortality' [Online Resource]

증권사의 주식시세 차트 역시 이런 활용 예로 볼 수 있습니다.

제한된 시간 범위의 시계열 차트의 경우, 일정한 시간 범위를 표현하기 위해 2가지 전략을 취할 수 있습니다. 첫째는 일정한 사이즈의 데이터 버퍼를 사용하는 것입니다. 이 경우 기존 데이터에 마지막 데이터를 추가하고, 가장 오래된 데이터를 삭제하는 과정을 거쳐야 하는 한 편, 차트 렌더링에서는 일정한 사이즈의 데이터를 전달받고 차트 전체를 다시 그리는 형태가 됩니다. 둘째는 차트 자체를 이동시키는 방법입니다. 데이터는 계속 추가해 나가되, 차트의 x축을 계속 이동시켜 오래된 데이터를 표시 범위 바깥으로 밀어내고, 새롭게 추가된 데이터를 표시 영역 안으로 들어오도록 하는 형태가 됩니다.

이런 2가지 전략은 데이터를 보여주는 것 자체에 의미를 둘 때에는 유효할 수 있습니다만, 사실 그다지 효과적인 방법이라는 생각은 들지 않습니다. 시각화의 난관은 있겠습니다만, 2차원 직사각 영역의 x축을 동그랗게 말아 원으로 만들면 어떨까요? 그리고 원 외곽에 차트를 그려볼 수도 있습니다. 레이다처럼 말이죠. 아주 세련된 방식으로 이런 형태로 차트를 시각화하는 케이스가 있습니다.

https://www.visualcinnamon.com/2017/10/creating-baby-births-visual

데이터를 시각화하는 것이 전문적인 영역이지만, 시각화 레벨을 특성화하거나 높이지 않더라도 전달하려는 목적에만 집중한다면 단순한 차트를 통해서도 원하는 것을 이룰 수 있습니다.

토폴로지 제작 과정

이제부터 토폴로지 차트를 제작하는 과정을 소개하도록 하겠습니다. 와탭에는 토폴로지에 대한 고객의 요구 사항이 지속적으로 있었고, 어떤 데이터를 모아 어떻게 보여줄 것인가가 숙제로 남아있었습니다. 시간이 많이 지연되긴 했습니다만, 이제 그 고객의 요구에 부응하기 위해 토폴로지 개발을 진행하게 되었습니다.

와탭의 토폴로지는 애플리케이션 에이전트가 그 자신과 외부와의 통신을 어떻게 주고받고 있는가에 대한 정보를 수집하는 과정으로 시작합니다. 연결된 외부 자원이 와탭 에이전트라면 보다 상세한 대상으로 식별하고 그렇지 못한 경우라면 미상의 외부 자원으로 식별하여 정보를 수집합니다.

본 글에서는 데이터 수집에 대한 이야기는 더 진전시키지 않도록 하고, 화면 다이어그램을 구성하며 진화하는 과정에 대해서만 언급하도록 하겠습니다.

토폴로지 다이어그램을 구성하는 요소를 생각해 보면, 사실 노드와 링크, 그리고 텍스트로 이루어집니다. 노드에는 서버 또는 애플리케이션을, 링크에는 그들 사이의 통신 관계를, 텍스트에는 점과 선이 무엇을 의미하는지를 표현합니다.

1. 1차 작업

• 최초 작업은 가지고 있는 모든 정보를 표시하는 것에 중점을 두고 진행되었습니다. 사실 백데이터는 연결 정보의 배열에 불과합니다. 연결 정보의 배열을 노드와 링크를 그리기 위한 정보로 재조합하고, 다이어그램에서는 이를 렌더링하는 작업만이 진행됩니다.
• 우선 노드를 표시하는 작업을 선행하여 진행해 보았습니다. 그리고 노드에 텍스트 데이터를 표시하고, 노드가 잘 보이도록 아크를 만들어 표시해 보았습니다. 그리고 노드와 노드를 직선으로 연결하고 방향성을 표시해 보았습니다. 사실 이 작업까지는 사용한 솔루션이 제공하는 예시를 기반으로 빠르게 진행됩니다.
• 이상의 작업을 진행하기 위해서는 차트 라이브러리가 데이터를 다루는 기본 속성을 이해해야 하고, 차트 오브젝트의 그룹핑, 아크 그리기, 선 연결하기 등의 메커니즘을 이해해야 합니다.
• 이제 보유한 데이터를 모두 표시하였으므로, 다음 단계에서는 데이터를 어떻게 보여줄지에 대하여 고민해야 합니다.

2. 2차 작업

• 2차 작업은 노드에 표현했던 정보 중 일부를 링크의 중앙에 강조하여 표시하고 데이터의 표현 방식을 조금 다듬었으며, 다이어그램 실시간 업데이트 기능을 추가하였습니다.
• 링크는 노드와 노드를 잇는 정보로 선의 시작점과 끝점이 있으며, 끝점에는 화살표 모양을 표시하였으며, 노드와 노드의 좌표를 기준으로 중점을 계산하여 텍스트 정보를 추가하였습니다.
• 노드는 유형별로 색상을 통해 구분이 가능하도록 다른 색상을 매핑하였으며, 가장 중요한 정보에 해당하는 링크 정보가 강조되도록 핑크색 계열의 색상을 적용하였습니다.
• 다음 단계에서는 링크에 표시한 정보가 다이어그램을 보는데 방해가 되지 않도록 조정해야 합니다.

3. 3차 작업

• 3차 작업은 링크 정보를 링크의 기울기에 맞추어 회전하는 작업과 텍스트 데이터의 다국어화 작업을 진행했습니다.
• 링크 정보는 노드와 노드를 5등분 하여 1/5 지점에서 문자가 시작하도록 배치해 보았습니다. 문자열의 길이까지 고려하여 밸런스가 맞도록 조정하면 좋겠지만, 너무 디테일까지 들어가므로 일단 보류합니다.
• 다음은 노드의 표현 방식 개선을 검토해야 합니다. 노드를 사용자가 조금 더 직관적으로 식별할 수 있으면 변경하겠습니다.

4. 4차 작업

• 4차 작업은 각 노드를 아이콘으로 형상화하고 매핑하는 작업과 줌 기능을 추가했습니다.
• 노드에는 애플리케이션 에이전트 유형 및 데이터베이스 유형이 식별 가능하도록 아이콘을 매핑하였습니다. 아이콘의 투명도가 외곽의 아크와 어우러져 어색하지 않습니다만, 미세 조정이 필요한 상태입니다.
• 현재 상태는 5초 캐시 데이터를 백데이터로 활용하고 있는 상태로, 노드의 추가/삭제가 빈번하고, 5초간 통신이 없는 노드가 아예 표시되지 않는 이슈가 있어 이를 개선하기로 합니다.

5. 5차 작업

• 5차 작업은 눈에 보이지 않지만, 중복 노드 및 중복 링크의 발생을 방지하기 위해 데이터를 정비하는 작업과 실시간 캐시 데이터를 5분 캐시 데이터로 교체하는 작업을 진행했습니다. 이에 더해 마우스 오버 시의 하이라이트 및 드래그 이벤트를 추가했습니다.
• 5분 캐시 데이터를 표시하여, 일시적으로 통신이 없는 노드도 표시가 유지되도록 개선하였습니다. 정적인 시스템이라면 이제 링크 정보만 변경 사항이 반영됩니다.

6. 6차 작업

• 6차 작업으로 링크 정보를 실선에서 점선으로 바꾸고, 직선을 곡선으로 바꾸는 작업을 진행했습니다. 직선에서 곡선으로 바꾼 이유는 노드와 노드 간의 연결 정보가 0~2개(방향성을 가지므로)까지 있을 수 있는데, 이 점이 그 간의 과정에서 고려되지 못했고, 곡선을 화면의 틱 이벤트에서 처리하기 위한 방안을 쉽게 도출하지 못해서였습니다. 추가로 아이콘의 사이즈도 조정하고, 가로로 긴 아이콘의 경우 원 안에 들어갈 수 있도록 정방형으로의 변경 작업도 진행했습니다.
• 직선을 곡선으로 변경하는 작업에는 곡선의 유도 지점(guide point)가 사용되는데, 가장 단순하게 접근할 수 있는 방법을 채택했습니다. 노드와 노드의 중점에서, 노드 간 거리의 1/4만큼 이탈하는 유도 지점을 선정하여 곡선을 그렸습니다. 물론 링크에 표시하던 텍스트 정보도 함께 이동시켰습니다.
• 모든 노드에는 아이콘을 매핑하였고, 노드를 드래그하여 위치를 고정할 수 있습니다. (화면의 강제 리프레시 시에는 노드의 위치가 초기화됩니다.) 마우스 휠을 통해 줌이 가능하고, 프로젝트 노드 클릭 시에는 해당 프로젝트로 이동하여 토폴로지를 표시하게 됩니다.

토폴로지의 주요 목적은 현행 시스템의 전체적 관계를 들여다보는데 있다고 생각하고 본 작업을 진행하였습니다. 현재 와탭 토폴로지는 프로젝트 단위로만 제공하고 있으며, 향후 프로젝트 간 토폴로지를 제공할 예정에 있습니다.

프로젝트 단위의 토폴로지는 프로젝트 내의 세부 애플리케이션 간의 통신에 관점을 두고 작업이 진행되며, 프로젝트 간 토폴로지는 세부 애플리케이션보다는 애플리케이션 그룹 단위의 관계를 파악하는데 관점을 두고 작업이 진행될 예정에 있습니다.

마치며

언제나 그렇듯 도전은 어렵지만 즐거운 일입니다. 본인이 가장 잘 할 수 있는 분야에 대한 주도권을 가지고 있는 것도 중요하지만 새로운 일들에 발을 담그는 것 또한 40대 개발자에게 필요한 일이 아닐까 합니다.