Architecture Decision Record
← 의사결정 기록 예시

아키텍처 의사결정 기록: TypeScript와 JSON을 사용한 데이터 시각화용 차트 라이브러리

주요 목표:
TypeScript와 JSON을 사용하여 금융 데이터, 과학 데이터, 정부 데이터에 초점을 맞춘 인터랙티브 시각화를 만들기 위한 고급 차트 도구를 선택합니다. 라이브러리는 견고한 기능과 유연성을 제공하고 오픈 소스여야 합니다.

맥락과 요구사항:

  1. 애자일 개발(높은 우선순위): 스타트업으로서 빠른 반복, 프로토타이핑, 개발의 유연성이 매우 중요합니다. 차트 라이브러리는 빠른 개발 주기를 가능하게 해야 합니다.

  2. 차트 유형(높은 우선순위):

    • 도넛 차트(Doughnut Chart)
    • 레이더 차트(Radar Chart)
    • 클러스터링 프로세스 차트(Clustering Process Chart)
    • 시간 축이 있는 영역 차트(Area Chart with Time Axis)
    • 캔들스틱 차트(Candlestick Chart)
    • 나이팅게일 차트(Nightingale Chart)
    • Geo SVG 지도(Geo SVG Map)

    이러한 차트 유형은 금융 추세, 과학 지표, 지리 정보 같은 복잡한 데이터셋을 시각화하는 데 특히 중요합니다.

  3. 무료 오픈 소스(높은 우선순위): 라이선스 비용을 피하고, 투명성을 제공하며, 사용자 정의의 유연성을 제공하기 위해 도구는 오픈 소스여야 합니다.

  4. 낮은 우선순위 기준:

    • 런타임 속도: 성능은 중요하지만 이 결정에서 최우선은 아닙니다.
    • 확장성: 확장성은 일반적으로 중요하지만 당장의 요구는 시간이 지나며 성장할 수 있는 MVP를 구축하는 것입니다. 확장성 문제는 나중에 다룰 수 있습니다.
    • 하위 호환성: 라이브러리가 현대적이고 활발히 유지보수되는 한, 초기 구축에서는 주요 우려가 아닙니다.

평가한 라이브러리:

  1. Apache ECharts
  2. Chart.js
  3. ApexCharts
  4. AG Charts
  5. Highcharts
  6. Carbon Charts
  7. Layer Cake
  8. D3.js

1. Apache ECharts

개요:
Apache ECharts는 인터랙티브하고 사용자 정의 가능한 시각화를 위한 강력하고 유연한 차트 라이브러리입니다. 폭넓은 차트 유형을 지원하며 특히 복잡하고 동적인 시각화에 강합니다.

강점:

  • 고급 인터랙티비티: ECharts는 줌, 팬, 동적 데이터 업데이트 같은 기능을 제공하며 인터랙티브 차트에 뛰어납니다.
  • 도넛, 레이더, 캔들스틱 차트, Geo SVG 지도: ECharts는 도넛, 레이더, 캔들스틱 차트 시각화와 지리 지도를 포함하여 필요한 차트 유형 대부분을 지원합니다.
  • 무료 오픈 소스: ECharts는 오픈 소스 라이브러리이므로 스타트업의 예산을 고려하는 성격에 맞고 코드를 수정할 자유를 줍니다.
  • 유연성과 확장성: 사용자 정의가 매우 쉬우며 애니메이션, 사용자 정의 시각화, 고급 차트 기법에 대한 폭넓은 지원이 있습니다.

약점:

  • 학습 곡선: ECharts는 강력하지만 유연성과 방대한 API 때문에 학습 곡선이 더 가파를 수 있습니다.
  • 문서의 복잡성: 문서는 포괄적이지만 막 시작한 개발자에게는 벅찰 수 있습니다.

평가:
ECharts는 캔들스틱 차트, 레이더 차트, 지리 지도를 포함한 필요한 모든 유형을 포함해 인터랙티브 차트를 지원하므로 이 프로젝트에 매우 적합합니다. 오픈 소스라는 특성은 프로젝트의 유연성과 비용 효율성 요구와 부합합니다.

2. Chart.js

개요:
Chart.js는 일반적인 차트 유형을 만들기 위한 단순하고 사용하기 쉬운 차트 라이브러리입니다. 단순함과 쉬운 통합으로 알려져 있습니다.

강점:

  • 사용 편의성: Chart.js는 설정하고 사용하기가 매우 쉬우며 학습 곡선이 최소입니다.
  • 오픈 소스: Chart.js는 무료이며 오픈 소스이므로 비용 절감에 중요합니다.
  • 일반적인 차트 유형: 도넛, 영역, 레이더, 선 차트 같은 기본 차트를 지원하여 주요 요구 대부분을 충족합니다.

약점:

  • 제한적인 고급 차트: Chart.js는 캔들스틱 차트, Geo SVG 지도, 클러스터링 프로세스 차트 같은 복잡한 차트 유형을 기본으로 지원하지 않습니다. 이러한 기능은 플러그인이나 사용자 정의로 추가할 수 있지만 다른 라이브러리만큼 간단하지 않습니다.
  • 인터랙티비티: Chart.js는 기본적인 인터랙티비티(툴팁, 호버 효과 등)를 지원하지만 ECharts나 D3.js만큼 고급 기능을 제공하지는 않습니다.

평가:
Chart.js는 단순하고 빠른 프로젝트에는 훌륭하지만, 복잡한 차트 유형에 대한 지원 부족 때문에 캔들스틱 차트와 지리 지도 같은 고급 요구가 있는 데이터 중심 애플리케이션에는 적합하지 않습니다. 프로토타이핑에는 좋은 선택이지만 필요한 차트 유형에는 더 고급 도구를 권장합니다.

3. ApexCharts

개요:
ApexCharts는 다양한 차트 유형을 제공하고 사용하기 쉬운 API로 인터랙티브 시각화에 초점을 맞춘 현대적인 차트 라이브러리입니다.

강점:

  • 인터랙티브 기능: ApexCharts는 툴팁, 줌, 팬, 업데이트가 있는 인터랙티브 차트를 제공합니다.
  • 금융 및 과학 차트 지원: 캔들스틱 차트, 레이더 차트, 영역 차트를 포함한 폭넓은 차트 유형을 지원합니다.
  • 사용 편의성: 간단한 API를 가지고 있으며 프로젝트에 통합하기 쉽습니다.
  • 무료 오픈 소스: ApexCharts는 많은 사용 사례에 적합한 무료 오픈 소스 버전을 제공합니다.

약점:

  • 복잡한 사용자 정의: 많은 기능을 제공하지만 사용자 정의 옵션은 매우 복잡하거나 특수한 차트 요구에 대해 ECharts나 D3.js만큼 유연하지 않습니다.
  • 지리 지도: ApexCharts는 이 프로젝트에 필요한 지리 지도나 클러스터링 프로세스 차트를 기본으로 지원하지 않습니다.

평가:
ApexCharts는 사용 편의성과 인터랙티비티 때문에 강력한 후보이지만 일부 고급 차트 유형, 특히 지리 지도와 클러스터링 차트에 대한 필요에는 못 미칩니다. 더 단순한 차트에는 좋은 대안이지만 일부 필요한 기능이 부족합니다.

4. AG Charts

개요:
AG Charts는 성능과 정밀도를 위해 설계된 상용급 차트 라이브러리입니다. 금융, 과학, 비즈니스 대시보드를 만드는 데 매우 적합합니다.

강점:

  • 고급 차트 유형: AG Charts는 캔들스틱 차트, 영역 차트, 레이더 차트 등을 포함한 많은 고급 차트 유형을 지원합니다. 또한 다른 AG-Grid 제품과의 깊은 통합을 제공합니다.
  • 고성능: 특히 대용량 데이터셋을 처리할 때 뛰어난 성능을 제공합니다.
  • 인터랙티비티: AG Charts는 줌, 툴팁, 동적 업데이트 같은 다양한 인터랙티브 기능을 지원합니다.

약점:

  • 완전히 무료는 아님: AG Charts는 무료 버전을 제공하지만 완전한 기능의 버전은 유료이며, 비용을 최소화하려는 스타트업에는 장애물이 될 수 있습니다.
  • 복잡성: 라이브러리는 기능이 풍부하지만 더 단순한 프로젝트에는 과할 수 있으며 다른 선택지에 비해 더 많은 구성과 설정이 필요할 수 있습니다.

평가:
AG Charts는 강력하고 기능이 풍부하지만 상용이라는 특성과 비용 구조 때문에 최선의 선택이 아닐 수 있습니다. 적합성은 예산이 유료 버전을 수용할 수 있는지, 아니면 오픈 소스 대안이 선호되는지에 달려 있습니다.

5. Highcharts

개요:
Highcharts는 폭넓은 차트 유형과 강력한 사용자 정의 옵션으로 알려진 인기 있는 차트 라이브러리입니다.

강점:

  • 포괄적인 차트 유형: Highcharts는 캔들스틱, 레이더, 영역 차트와 지리 지도를 포함한 폭넓은 차트를 지원합니다.
  • 인터랙티브하고 동적: Highcharts는 드릴다운, 줌, 팬을 포함한 풍부한 인터랙티브 기능을 제공합니다.
  • 사용 편의성: 사용자 친화적인 API와 좋은 문서를 가지고 있어 시작하기 쉽습니다.

약점:

  • 상용 라이선스: Highcharts는 비상업적 사용을 위한 무료 버전을 제공하지만 상용 라이선스는 비싸서 스타트업에 상당한 단점이 될 수 있습니다.
  • 학습 곡선: ECharts만큼 가파르지는 않지만 Highcharts의 학습 곡선도 초보자에게는 여전히 어려울 수 있습니다.

평가:
Highcharts는 기능이 풍부한 라이브러리이지만 상용 라이선스 때문에 비용에 민감한 오픈 소스 프로젝트에는 덜 적합합니다. 포괄적인 차트 옵션은 장점이지만 라이선스 문제가 이 사용 사례에서의 매력을 제한합니다.

6. Carbon Charts

개요:
Carbon Charts는 시각적으로 매력적이고 사용자 정의가 매우 쉬운 차트를 만들기 위해 설계된 IBM 개발의 차트 라이브러리입니다.

강점:

  • 사용자 정의 가능성: Carbon Charts는 차트의 모양과 동작을 폭넓게 사용자 정의할 수 있게 합니다.
  • 오픈 소스: 무료이며 오픈 소스이므로 예산 친화적인 솔루션이라는 프로젝트 요구사항과 부합합니다.
  • 일반적인 차트 지원: 도넛, 레이더, 영역 차트 같은 일반적인 차트 유형을 지원하지만 지리 지도나 캔들스틱 차트 같은 더 고급 유형은 지원하지 않습니다.

약점:

  • 제한적인 고급 차트 유형: 프로젝트에 필요한 지리 지도, 클러스터링 프로세스 차트, 캔들스틱 차트를 지원하지 않습니다.
  • 더 작은 생태계: Carbon Charts는 ECharts나 Highcharts 같은 더 큰 차트 라이브러리에 비해 더 작은 커뮤니티와 생태계를 가지고 있습니다.

평가:
Carbon Charts는 오픈 소스이고 사용자 정의가 가능하지만 이 프로젝트에 필요한 더 복잡한 차트 유형에 대한 지원이 부족합니다. 더 단순한 차트 요구에 더 적합합니다.

7. Layer Cake

개요:
Layer Cake는 유연한 계층형 시각화를 만들기 위해 설계된 데이터 시각화 라이브러리입니다.

강점:

  • 사용자 정의 가능한 레이어: 복잡한 시각화를 위한 강력한 레이어링 옵션을 제공합니다.
  • 오픈 소스: 무료이며 오픈 소스이므로 예산을 고려하는 프로젝트에 실행 가능한 선택지입니다.

약점:

  • 제한적인 문서: Layer Cake는 포괄적인 문서와 커뮤니티 지원이 부족하여 더 자리 잡은 라이브러리에 비해 작업하기가 더 어렵습니다.
  • 차트용으로 만들어지지 않음: Layer Cake는 차트가 아닌 시각화에 더 적합하므로 바로 쓸 수 있는 차트 옵션이 제한적입니다.

평가:
독특한 시각화에는 흥미롭지만 Layer Cake는 캔들스틱 차트나 레이더 차트 같은 전통적인 차트 요구에는 이상적이지 않습니다. 표준 차트의 범위를 벗어난 사용자 정의 시각화에 더 적합합니다.

8. D3.js

개요:
D3.js는 HTML, SVG, CSS를 통해 데이터 기반 시각화를 만드는 강력한 JavaScript 라이브러리입니다.

강점:

  • 비할 데 없는 유연성: D3.js는 사실상 모든 유형의 사용자 정의 시각화를 만들 수 있게 하므로 고급 인터랙티브 차트에 매우 강력합니다.
  • 포괄적인 기능: 지리 지도, 클러스터링 차트 등을 포함한 필요한 모든 차트 유형을 지원합니다.
  • 사용자 정의 가능: D3.js의 사용자 정의 수준은 비할 데 없어 개발자가 고도로 맞춤화된 시각화를 구축할 수 있습니다.

약점:

  • 가파른 학습 곡선: D3.js는 학습 곡선이 가파르며 다른 라이브러리에 비해 통합이 더 복잡합니다.
  • 시간 소모적: D3.js로 차트를 구축하는 것은 특히 캔들스틱이나 도넛 차트 같은 일반적인 차트에서 시간이 많이 걸릴 수 있습니다.

평가:
D3.js는 고급 사용자 정의 차트에는 놀랄 만큼 강력하지만 가파른 학습 곡선과 개발 시간 때문에 많은 일반적인 사용 사례에는 과합니다. 다른 차트 라이브러리가 필요한 수준의 사용자 정의를 제공하지 않는 상황에 가장 적합합니다.

결론

프로젝트 요구에 따라 라이브러리를 평가한 결과 Apache ECharts가 최선의 선택지로 나타납니다. 지리 지도, 캔들스틱 차트, 클러스터링 차트를 포함해 필요한 전체 차트 범위를 지원합니다. 오픈 소스이고, 기능이 풍부하며, 인터랙티브성이 높아 프로젝트 목표와 완벽히 부합합니다. D3.js가 가장 큰 유연성을 제공하지만 그 복잡성과 시간 투자 때문에 빠르게 반복하려는 스타트업에는 덜 이상적입니다. ApexCharts와 Chart.js는 더 단순한 프로젝트에는 좋은 대안이지만 고급 차트 유형 지원이 부족합니다.