[DEVIEW2021] 데이터 시각화의 꽃 APM, FE 개발 이야기

1. APM?

Application Performance Management

어플리케이션의 성능을 관리하는 서비스

관리하는 서비스이다 보니, 수집한 데이터도 중요하지만 유저가 이를 잘 알아볼 수 있게 하는 것도 매우 중요함

따라서, APM FE 개발자의 주요 업무는 '데이터 시각화'

ex) scatter chart, server map, inspector chart 등 모니터링을 위한 다양한 시각화 컴포넌트 제공

2. Focus : APM FE 개발자가 신경써야 할 것?

목표 : 사용자에게 좋은 모니터링 환경을 제공하기

- 성능 : 많은 데이터에도 원활한 동작이 가능해야 함

- 직관성 : 사용자가 우리가 제공한 지표들을 통해 그 의미들을 쉽게 이해할 수 있어야 함

3. 고민과 해결

Scatter Chart에서의 성능 개선

scatter chart : 수집된 transaction들의 시간대 별 응답시간 분포도를 한 눈에 볼 수 있도록 하는 컴포넌트

구현 준비물 : 데이터 & HTML Canvas Element

전달받은 정보에 따라 javascript canvas API를 사용하여 원을 그려줌

고민 1) "대용량 데이터 렌더링"

해결 1) "Canvas Optimization"

1. 반복적인 요소를 미리 그려놓고 가져다 쓰기
2. 필요한 크기들은 미리 그려놓기
3. multi-layered canvas 사용하기 (나누어 표현)

고민 2) "Data Sampling" : 특정 구간에 여러 개의 원이 겹쳐있으면 인식하기 어렵고, 있는 그대로 다 그리는 게 의미가 있을까?

해결 2) canvas 영역을 가상의 그리드로 나누어서, 각 영역에 위치하는 점들을 하나의 점으로 표현하기

-> 캔버스에 그리는 원의 개수도 감소하고, 사용자의 인지에도 도움

한눈에 알아보기 쉬운 Server Map

sever map : 애플리케이션의 구성을 네트워크 맵의 형태로 시각화

고민) 효과적 노드 표현 및 복잡도 개선

1. 효과적 노드 표현

- 최소한의 모니터링으로 도움을 줄 만한 정보만 제공

- 너무 많은 정보를 주는 것은 그리 좋지 않다 (성능 및 사용성 측면)

2) 서버 맵 복잡도 개선

- 몇 가지 조건에 따라 노드 및 링크를 병합하여 보여줌

대규모 프로젝트에 Color System 적용하기

※ 기준 없는 컬러 사용의 문제점

- 일관성 없이 적용된 컬러 코드는 개발 생산성을 저해함

- 사용자의 직관적 인지 방해

- 서비스 통일감을 해치고 산만한 느낌을 줌

 

컬러 시스템을 적용하자!

- 서비스의 색상을 체계화

- 서비스 디자인에 최적화된 컬러 팔레트 채용

- 서비스의 중심색 이외에 상태를 나타내는 색 포함

- 채용된 컬러 팔레트는 가시성이 있어야 함

 

대규모 프로젝트에서는?

Solution 1 : 컬러 매칭 자동화

- 기준 컬러 RGB 각각의 값을 좌표로 보고, 비교 대상 RGB 값의 거리 차이 비교

- 낮은 거리의 컬러와 매칭

- but, 적절한 기준점을 찾기 어려움

 

Solution 2: 도구의 도움을 받아 직접 컬러 매칭 - 시각화 도구 활용

1) 메인 컬러 지정하기

2) 컬러 팔레트 생성하기

3) 컬러 팔레트에 기존 컬러 매칭하기

4) 변수화 및 semantic하게 네이밍하기

---

 

데이터 시각화의 꽃 APM, FE 개발 이야기