콘텐츠로 건너뛰기

React에서 Apache Superset 사용하기

  • 테크

Superset은 데이터베이스에 직접 연결하여 SQL 기반으로 데이터를 조회하고 시각화할 수 있는 오픈소스 BI 도구입니다.

즉 별도의 API 없이도 데이터베이스만으로 대시보드를 구성할 수 있습니다.

이 글에서는 Apache Superset이 어떤 도구인지, 그리고 실제 서비스에서 React와 함께 어떻게 사용했는지 정리해 보려고 합니다.

1. Apache Superset이란

Superset logo (light)
https://github.com/apache/superset

Apache Superset은 데이터 시각화 및 분석을 위한 오픈소스 Business Intelligence(BI) 플랫폼입니다.

데이터베이스에 직접 연결하여 SQL 기반으로 데이터를 조회하고 이를 다양한 차트 형태로 시각화할 수 있습니다.

구조를 간단히 보면 다음과 같습니다.

* Apache Superset의 간단한 구조
Database > Superset > Dashboard

Superset의 주요 특징은 다음과 같습니다.

  • 다양한 데이터베이스 연결 지원
  • SQL 기반 데이터 분석
  • 다양한 차트 및 시각화 제공
  • 대시보드 구성 기능
  • 오픈소스 기반 무료 사용

즉 데이터베이스에 저장된 데이터를 기반으로 차트와 대시보드를 빠르게 구성할 수 있는 BI 도구입니다.


2. React 대시보드와의 차이

기존에 React로 대시보드를 구현하는 경우 일반적인 구조는 다음과 같습니다.

* React 대시보드의 일반적인 구조
Database > API Server > React Dashboard > Chart Library

이 경우 보통 다음과 같은 작업이 필요합니다.

  • API 설계 및 개발
  • 데이터 가공
  • 차트 구현
  • 상태 관리

데이터는 이미 데이터베이스에 존재하고 있음에도 불구하고 대시보드를 위해 별도의 API를 계속 개발해야 하는 상황이 발생합니다.

반면 Superset을 사용하면 데이터베이스에 직접 연결하여 SQL로 데이터를 조회하고 차트를 구성할 수 있기 때문에 대시보드 구축 과정을 훨씬 단순하게 만들 수 있습니다.


3. Apache Superset 설치

Superset은 여러 방식으로 설치할 수 있습니다.

대표적인 방법은 다음과 같습니다.

  • Docker
  • Python 환경 설치
  • 클라우드 배포

가장 간단한 방법 중 하나는 Docker를 사용하는 방식입니다.

방법 1

개발 환경에서 가장 간단하게 시작할 수 있는 방법은 Docker 기반 설치입니다.

Superset 공식 저장소에서는 빠르게 실행할 수 있는 docker-compose 환경을 제공합니다.

Docker Compose는 개발 환경에 적합하지만 프로덕션 환경에서는 권장되지 않습니다.

프로덕션 환경에서는 Kubernetes를 사용하는 것이 좋습니다.

Superset Docker 기반 설치 방법

설치가 완료되면 http://localhost:8088로 이동하여 기본적으로 생성된 계정으로 로그인합니다.

Superset 기본 계정 정보

방법 2

Superset은 Python 패키지로도 설치할 수 있습니다.

이 방법은 Python 환경에서 직접 Superset을 실행하고 싶은 경우 사용할 수 있습니다.

Python 환경에서 Superset 실행 방법

서버가 실행되면 브라우저에서 http://localhost:8088로 접속할 수 있습니다.

방법3

프로덕션 환경에서는 KubernetesHelm 차트를 이용한 배포 방식이 권장됩니다.

Superset은 공식 Helm 차트를 제공하고 있어 Kubernetes 환경에서 쉽게 배포할 수 있습니다.

Kubernetes와 Helm 차트를 이용한 배포 방식

이 방식은 확장성, 고가용성, 운영 관리 측면에서 유리하기 때문에 실제 서비스 환경에서 많이 사용되는 배포 방식입니다.


4. Superset 대시보드 구성 기본 흐름

Superset 설치가 완료되면 다음과 같은 순서로 대시보드를 구성할 수 있습니다.

전체 흐름은 크게 다음과 같은 흐름으로 진행됩니다.

1. 데이터베이스 연결

먼저 Superset에 사용할 데이터베이스를 연결합니다.

Superset은 PostgreSQL, MySQL, BigQuery 등 다양한 데이터베이스를 지원합니다.

Superset에서 지원하는 DB 이미지
https://github.com/apache/superset?tab=readme-ov-file
2. Dataset 생성

연결된 데이터베이스의 테이블을 Dataset으로 등록합니다.

Dataset은 Superset에서 차트를 생성하기 위한 데이터 소스입니다.

3. 차트 생성

Dataset을 기반으로 다양한 차트를 생성할 수 있습니다.

4. 대시보드 구성

생성한 차트들을 조합하여 하나의 Dashboard를 구성할 수 있습니다.


5. React 서비스에 Superset 대시보드 임베딩하기

Superset은 BI 도구로도 사용할 수 있지만, 서비스 화면 안에 대시보드를 직접 임베딩해서 사용할 수도 있습니다.

이를 위해 Superset에서는 Embedded SDK를 제공합니다.

React에서는 대시보드를 표시할 DOM을 준비한 뒤, 해당 위치에 Superset 대시보드를 iframe 형태로 삽입하는 방식으로 동작합니다.

실제 서비스에서는 다음과 같은 방식으로 Superset 대시보드React 컴포넌트로 만들어 사용했습니다.

Superset 대시보드 React 컴포넌트

해당 컴포넌트는 다음과 같은 흐름으로 동작합니다.

컴포넌트 흐름

여기서 중요한 포인트는 Guest Token입니다.

Superset에서는 임베딩된 대시보드를 접근할 때, 사용자 인증 대신 제한된 권한을 가진 토큰을 발급하여 접근하도록 합니다.


6. 마무리

Superset을 사용하면서 가장 크게 느낀 장점은 대시보드를 만드는 속도였습니다.

별도의 API를 개발하지 않아도 데이터베이스에 직접 연결하여 대시보드를 구성할 수 있고, React 대시보드처럼 차트 라이브러리에 맞게 데이터를 가공할 필요도 없습니다.

또한 필터 기능, 다양한 차트 옵션, 대시보드 레이아웃 관리 등 대시보드에 필요한 기능들이 기본적으로 제공되기 때문에 전체적인 개발 비용을 크게 줄일 수 있다는 점이 인상적이었습니다.

내부 데이터 분석이나 운영 지표 대시보드를 빠르게 구축해야 한다면 Apache Superset을 활용해 보는 것도 충분히 좋은 선택이라고 생각합니다.

참고자료

공식 문서
  • Apache Superset: https://superset.apache.org/user-docs/


최신 마케팅/고객 데이터 활용 사례를 받아보실 수 있습니다.

AI 대화창에서 당신의 브랜드는 추천되고 있나요?

 

X