Ant Design Charts 적용기

Antd 차트가 필요했던 이유

위 차트는 와탭랩스의 MSA 분석 페이지 내에 있는 차트의 모습입니다. bar 차트와 line 차트 두 차트가 동시에 존재하고, 그에 따라 y축이 2개 있습니다.

저희 와탭랩스에서는 자체적으로 차트를 제작해 사용하고 있는데요. Antd 차트를 적용할 당시 bar 차트와 line차트가 동시에 존재하는 차트는 지원되고 있지 않았습니다. 위 차트는 d3 라이브러리를 이용해 제작했었고, 새로운 디자인이 나와 변경이 필요했습니다.

새로운 디자인 안

하지만, 첫번째. svg 라이브러리를 이용해 부하가 커질 수 있다는 점

참고 : When to Use SVG vs. When to Use Canvas

두번째. 레거시 코드로 디자인안에 맞춰 세부 조정이 힘들다는 점

이와 같은 이유로 d3 라이브러리를 이용한 위 차트는 대체가 필요했습니다. 자체적으로 차트를 제작해 적용하는 것이 이상적이지만 차트를 담당하는 팀원분이 다른 작업중에 있어 당장 개발에 착수할 수 없는 상황이었습니다. 최종적으로는 자체적으로 차트를 만들고, 그 전에만 외부 차트 라이브러리를 사용해 대체하기로 했습니다. 조사결과 리액트 생태계 유수의 UI 팀인 ant-design에서 최근 차트 라이브러리를 개발하고 있었고, 원하는 조건을 만족했습니다.

본격적인 라이브러리의 사용

빠른 구현

보이지 않는 곳에 데이터를 가공하는 과정이 있었지만 그래도 사용이 꽤 간결하게 느껴졌습니다.

고도화된 차트답게 얼마되지 않는 코드로 금방 차트를 그릴 수 있었습니다. 거기에 더해 레전드 선택 기능, 사이즈 자동조절, 툴팁 등 기본적인 기능들이 제공돼 높은 편의성을 갖추고 있었습니다.

이후 추가적으로 옵션들을 적용해 요구사항을 어느정도 구현할 수 있음을 확인하고 본격적인 작업에 착수했습니다.

어느정도의 요구사항을 적용. 툴팁에 jsx를 사용할 수 있어 정말 좋았습니다.

어려움의 시작

기본적인 구현이 가능함을 확인하고, 세부적인 커스터마이징 단계로 진입하니 어려움이 생기기 시작했습니다. 어려움의 원인들을 크게 다음과 같이 분류할 수 있었습니다.

1. 제공되지 않는 차트 옵션

다양한 차트 옵션이 갖춰져있지만 원하는 옵션을 제공하지 않으면 적용이 힘들었습니다.

디자인 원안

ant-design-chart에서 색 채우기

디자인원안에서는 line차트의 하단에 gradient 효과와 함께 색상을 채우도록 돼있었습니다. Antd차트에서 제공하는 옵션을 통해 canvas의 fill method를 사용할 수 있었지만 원하는대로 효과를 낼 수는 없었습니다.

y축 타이틀 위치

제공되는 옵션들로는 한계가 있었습니다.

y축 타이틀의 위치 또한 제공하는 옵션으로는 요구사항을 만족시킬 수 없었습니다. 세부 옵션 조정으로 구현을 했지만 복잡도가 증가하고 버그가 발생할 여지가 커질 수 밖에 없었습니다.

y축 타이틀의 위치 또한 제공하는 옵션으로는 요구사항을 만족시킬 수 없었습니다. 세부 옵션 조정으로 구현을 했지만 복잡도가 증가하고 버그가 발생할 여지가 커질 수 밖에 없었습니다.

2. 부족한 문서화

문서화가 완전하지 않고, g2, g2plot 등 또 다른 라이브러리들에 직접적인 의존성이 있어 해당 라이브러리들을 직접 찾아다니며 옵션을 찾아야 하는 수고가 있었습니다.

y축 title position

position 옵션은 코드의 주석에 존재했습니다.. 😯 (위치 : g2 라이브러리 )

tickMethod

tickMethod 함수의 반환 타입 또한 어떤 문서에도 없었습니다.

이 외에도 '버전 업데이트로 옵션 적용 방식 변경', '공용화를 위해 데이터 전처리 등을 위해 필수적인 미들웨어 작성'과 같은 어려움들이 있었습니다.

결론

좌충우돌 끝에 기존 차트를 대체했지만 예상치 못한 상황에 계속 작업이 길어지고, 기한을 지나 잔여 작업이 쌓이는 등의 업무적인 부작용도 따랐습니다.

ant design 팀의 고도화된 차트 라이브러리였지만 결국 외부 라이브러리를 사용하는 것에는 어려움과 제한이 많을 수밖에 없다는 점을 깨달았습니다. 기본적이고 빠른 구현이 필요한 경우 좋은 선택일 수 있지만, 차트의 제어권을 완전히 쥘 수 없어 세부적인 조정을 하기가 힘들다는 점에서 완전한 대안이 될 수 없었습니다.

글을 작성하는 현재는 자체 차트 개발에 착수해 막바지에 있습니다. 요구사항을 완전히 만족할 수 있는 차트가 제작될 예정이라 수고로운 문서와 코드 탐색을 중단할 수 있을 것 같습니다.

적용을 완료한 Antd 차트

와탭랩스의 차트들

다양하고 복잡한 모니터링 데이터들을 효과적으로 전달하기 위해서는 완성도 높은 차트가 필요합니다. 이를 위해 저희 와탭랩스에서는 자체적으로 대부분의 차트를 제작해 사용하고 있습니다.