고객사 포털에 넣는 통계 · 대시보드 · 전광판 저작 도구

키위즈 DATA STUDIO

고객사 포털의 통계·대시보드·관제 화면을, 화면마다 SQL과 차트 코드를 새로 짜지 않고 한 번 정해 둔 데이터 정의 위에서 설정으로 만들고 운영하게 한다.

지금은 통계 화면 하나를 더하려면 개발자가 원천을 읽는 배치, 집계 SQL, 화면과 차트 코드를 매번 새로 만듭니다. 같은 이름의 숫자가 화면마다 다르게 계산되기 쉽고, 수집이 멈춰도 화면은 마지막 숫자를 그대로 보여 줍니다. Data Studio는 연결부터 대시보드까지를 다섯 단계로 나누고, 숫자의 정의를 데이터셋 한 곳에 둡니다.

대상 고객사 관리자 포털 · 통계 · 대시보드 · 관제(TV) 화면 형태 Spring Boot Starter + React UI 패키지 상태 설계 단계 · 화면 설계 v3.1 · 코드 없음
포털(호스트)
Data Studio를 넣을 고객사 관리자 포털. 로그인·메뉴 권한·DB 연결은 포털 것을 빌려 씁니다.
데이터셋
저장된 데이터의 열마다 시간·분류·측정값 같은 역할과 허용 집계, 계산 지표(예: 실패율)를 정해 둔 것. 차트는 이것만 보고 만듭니다.
게시
초안을 검증해 고정된 버전으로 내놓는 일. 게시본은 고치지 않고, 차트·대시보드는 게시된 버전을 가리킵니다.
한눈에 보기

숫자 하나가 화면에 나오기까지

새 통계를 화면에 띄우기까지 누가 무엇을 하는지, 기존 방식과 나란히 놓았습니다.

기존 방식

화면마다 SQL과 차트를 새로
  1. 고객사 · PM통계 화면 요청원하는 숫자를 말·엑셀로 전달. 같은 이름의 지표가 이미 있는지 알기 어려움
  2. 개발자수집 배치 · 집계 SQL원천마다 따로 짬. 실패 행·중복·재시작 처리가 배치마다 다름
  3. 개발자화면 · 차트 코드화면마다 SQL과 차트를 새로 붙이고, 배포해야 보임
  4. 운영자"숫자가 안 맞는다"어느 식이 맞는지 코드를 열어 봐야 앎↺ 정의 확인 → SQL 수정 → 다시 배포
운영수집이 멈췄는지, 화면의 숫자가 지난 값인지 화면에서는 알 수 없습니다. 이상하다는 문의가 와야 확인을 시작합니다.

키위즈 DATA STUDIO

다섯 단계 · 정의는 데이터셋 한 곳
  1. 1 연결데이터 관리자원천 등록 · 연결 확인REST·DB·Prometheus. 비밀번호는 인증 참조로만
  2. 2 수집데이터 관리자매핑하고 시험 읽기저장하기 전에 결과와 실패 행부터 확인
  3. 3 저장데이터 관리자키 · 보존 기간같은 키는 갱신. 두 번 수집해도 건수 그대로
  4. 4 데이터셋데이터 관리자필드 역할 · 계산 지표 게시실패율 같은 식을 한 번만 정의
  5. 5 차트 · 대시보드대시보드 작성자끌어 놓아 만들고 게시게시된 데이터셋 버전을 가리킴
운영Studio 홈과 관제 화면에서 수집 지연·실행 실패·알림을 심각도 순으로 봅니다. 숫자마다 마지막 반영 시각이 붙습니다.

이미 조회할 수 있는 DB나 Prometheus는 2·3단계를 건너뛰고 바로 데이터셋을 만듭니다. 처음부터 다섯 단계를 다 채워야 화면을 볼 수 있는 구조는 아닙니다.

설계 그림 · REST 원천 하나가 데이터셋이 되기까지. 줄마다 누가 어떤 화면에서 무엇을 정하는지, Studio가 무엇을 하는지, 무엇이 만들어지는지를 적었습니다. 누르면 크게 볼 수 있습니다.
역할별로

누구의 수고가 어떻게 줄어드나

개발자

통계 화면마다 SQL과 차트 코드를 새로 짜지 않습니다.

제품이 아직 못 하는 일을 맡습니다. 새 원천 종류의 커넥터, 포털과의 연결(권한·감사·통지 어댑터)이 그 일입니다.

데이터 관리자

원천 필드를 화면마다 다시 해석하지 않습니다.

연결·수집·저장을 설정하고, 숫자의 뜻을 데이터셋으로 정의해 게시합니다. 바꾸기 전에 어떤 차트가 영향을 받는지 봅니다.

대시보드 작성자

차트 하나 때문에 개발을 요청하지 않습니다.

게시된 데이터셋의 필드를 끌어 놓아 차트를 만들고 대시보드에 배치합니다. 고를 수 있는 것은 허용된 집계뿐입니다.

관제 운영자 · PM

숫자가 맞는지를 문의로 확인하지 않습니다.

홈의 "지금 확인할 것"과 관제 화면에서 지연·실패·알림을 봅니다. 실패한 행은 허용된 범위에서 다시 처리합니다.

특장점 6가지 · 설계 화면 샘플

무엇이 달라지나

샘플은 화면 설계 v3.1의 설계 화면입니다. 아직 구현한 화면이 아니고, 화면 속 숫자는 설명용 가상 데이터입니다. 화면을 누르면 전체를 크게 볼 수 있습니다.

①

이름이 같은 숫자는 어느 화면에서나 같은 식으로 계산된다

지금
기존 고객사 포털의 캠페인 통계를 분석해 보니 "성공률"의 계산식이 화면마다 달랐고, 같은 화면의 목록과 차트도 서로 달랐습니다. 이름은 성공률인데 실제로는 결과가 입력된 비율인 곳도 있었습니다.
바꾸면
데이터 관리자가 데이터셋에 필드 역할과 계산 지표를 한 번 정의해 게시합니다. 차트는 이 정의를 가져다 쓰고 식을 다시 쓰지 않습니다. 비율은 합계끼리 나누고, 분모가 0이면 0%가 아니라 "값 없음"으로 둡니다.
근거
화면 설계 DAT-02·DAT-03. 화면은 SQL을 보내지 않고 조회 조건만 보냅니다. 서버가 데이터셋 정의와 권한 범위로 검사한 뒤 DB에 맞는 SQL로 바꿉니다.
설계 화면 · 계산 지표 편집
실패율 = 실패건수 × 100 ÷ 처리 건수. 채널별 비율을 평균하면 2.78%로 틀리고, 합계로 나누면 2.82%입니다. 편집기는 행마다 비율을 평균하는 식을 아예 만들 수 없게 막습니다.
②

새 통계 화면은 코드 대신 화면에서 조립한다

지금
차트 하나를 더하려 해도 집계 SQL, 화면 코드, 차트 코드를 만들고 배포해야 합니다. 기존 포털의 서버 상세 화면은 Grafana 패널 7개를 iframe으로 붙여 두어, 항목 하나를 더할 때도 화면 코드를 고칩니다.
바꾸면
대시보드 작성자가 게시된 데이터셋의 필드를 가로축·값·계열에 끌어 놓고, 미리 본 뒤 저장합니다. 역할이 맞지 않는 필드는 놓이지 않고 숨김 필드는 고를 수 없습니다. 대시보드는 저장한 차트를 배치하고 공통 필터를 연결합니다.
근거
화면 설계 CHT-02·CHT-03·DSH-02. 차트는 ECharts 6 하나로 그립니다.
설계 화면 · 차트 편집
필드를 슬롯에 끌어 놓으면 미리보기가 바로 바뀝니다. 미리보기 위에는 원천 상태(정상 · 14:20 수집)가, 아래에는 같은 조건으로 다시 집계한 기간 합계가 붙습니다.
③

정의를 바꾸기 전에, 무엇이 깨지는지 먼저 보인다

지금
원천 열이나 집계 식을 바꾸면 어느 화면이 영향을 받는지 코드를 뒤져야 알 수 있습니다. 운영에서 숫자가 틀어진 뒤에야 발견하기도 합니다.
바꾸면
데이터셋·차트·대시보드는 모두 초안 → 검증 → 게시를 거칩니다. 게시 검증은 바뀐 필드마다 호환·경고·비호환을 판정하고, 그 필드를 쓰는 차트와 알림 규칙을 보여 줍니다. 비호환이 있으면 게시가 막힙니다. 기존 대시보드는 쓰던 버전을 계속 봅니다.
근거
화면 설계 DAT-04·CMN-01(버전 비교와 복원). 게시본은 고칠 수 없게 설계했습니다.
설계 화면 · 게시 검증
실패건수를 지우려 하자 게시가 막혔습니다. 실패율·성공률 식이 깨진다고 판정하고, 영향받는 차트 1개와 알림 규칙 1개, 고치는 방법을 함께 보여 줍니다. 위쪽만 보이니 눌러서 전체를 보세요.
④

수집은 저장하기 전에 시험하고, 실패한 행은 숨기지 않는다

지금
원천마다 배치를 따로 짜서 실패 행·중복·재시작 처리가 배치마다 다릅니다. 기존 포털의 일부 화면은 빈 값을 0으로 바꿔 보여 주기도 합니다.
바꾸면
필드 매핑을 정하면 저장하지 않고 시험 읽기부터 합니다. 받은 행이 정상 + 실패 + 중복 제외와 맞는지 대사하고, 실패한 행은 사유와 함께 남깁니다. 정기 실행은 체크포인트에서 이어 가고, 같은 키는 갱신하므로 두 번 수집해도 건수가 늘지 않습니다.
근거
화면 설계 ING-02~05·OPS-02(실패 행 재처리). 수집 계약은 Airbyte 프로토콜(spec · check · discover · read)을 따르되 같은 JVM 안에서 직접 구현합니다.
설계 화면 · 필드 매핑 · 시험 읽기
7일 구간을 시험해 수신 336 = 정상 335 + 실패 1을 맞췄습니다. statHour가 "24"인 행 하나는 다음 날 00시로 고쳐 넣지 않고 사유와 함께 실패로 남깁니다(화면 아래쪽).
⑤

숫자가 지난 값인지, 없는 값인지 화면이 말해 준다

지금
수집이 멈춰도 차트는 마지막 숫자를 그대로 보여 주고, 데이터가 없으면 0으로 그리기도 합니다. 운영자는 숫자가 이상하다는 문의를 받고서야 수집 상태를 확인합니다.
바꾸면
위젯마다 마지막 반영 시각을 붙이고, 수집 지연·조회 오류·데이터 없음을 0과 구분해 표시합니다. 관제 화면(TV)은 자동 갱신·순환하면서 주의할 위젯을 위에 모으고, Studio 홈은 알림·실행 실패·지연을 심각도 순으로 모읍니다.
근거
화면 설계 DSH-04(관제 화면)·HOME-01(Studio 홈)·OPS-01(수집 실행 현황).
직접 눌러 보세요 · 같은 위젯, 원천 상태만 바꿔 보기
기존 전광판 숫자만
상담 운영 현황14:24:10
IVR 메뉴별 이용건수 1,302건 오늘 누적

숫자가 지금 값입니다. 여기까지는 두 화면이 같습니다.

Data Studio 관제 화면 상태 + 반영 시각
상담 운영 현황14:24:10
IVR 메뉴별 이용건수 1,302건 오늘 누적 정상 · 14:20 반영

마지막 반영 시각이 붙어 있어 지금 값이라는 것을 압니다.

설명용 모형입니다. 문구는 관제 화면 설계(DSH-04)의 위젯 상태를 그대로 옮겼습니다.

관제 화면(TV). 주의 3건을 띠로 모으고, 아래 위젯 셋은 수집 지연·조회 오류·데이터 없음을 각각 다르게 표시합니다.
Studio 홈. 알림 발생 → 실행 실패 → 부분 실패 → 데이터 지연 순으로 놓고, 줄마다 실행 상세·실패 행 재처리로 바로 갑니다.
⑥

고객사 포털 안에, 포털의 로그인·권한·DB 연결 그대로 들어간다

지금
BI·관제 도구를 붙이면 별도 서버와 계정, iframe 연동이 생기고 권한을 포털과 따로 관리합니다. 내부망에 들일 패키지도 많아집니다.
바꾸면
Data Studio는 별도 서버가 아니라 포털에 넣는 라이브러리입니다. 포털의 로그인·메뉴 권한·DB 연결을 빌려 쓰고, 권한 판단은 포털에 맡긴 뒤 돌려받은 허용 범위를 조회 조건에 강제합니다. 제품이 가지는 것은 정의와 실행 이력뿐입니다.
근거
라이브러리화 기술 검토·개발 아키텍처 설계. DB는 Oracle·Tibero·MariaDB에 맞는 SQL을 직접 만듭니다. 운영에서는 같은 포털 WAR를 화면 API 역할과 수집 실행 역할로 나눠 띄웁니다.
1백엔드에 새로 들이는 런타임 패키지(Caffeine)
3프런트에 새로 들이는 패키지(ECharts 묶음)
0따로 설치하는 서버 제품
구조 · 포털 안에 들어가는 모양
BI · 관제 도구와의 비교

BI·관제 도구를 따로 붙이는 방식과 무엇이 다른가

비교 대상: Grafana·Metabase·Superset 같은 도구를 별도 서버로 설치하고, 포털에는 iframe이나 링크로 붙이는 방식

같은 점

둘 다 DB를 연결해 차트와 대시보드를 빠르게 만들 수 있습니다. 차트 종류와 편집 기능의 폭은 오래 다듬어진 BI 도구가 더 넓고, 인프라 관제는 Grafana가 강합니다. Data Studio도 기능을 정할 때 이 제품들을 주 벤치마크로 삼고, 기능 목록을 대조표로 만들어 따라갑니다.

갈리는 곳은 차트를 그리는 기능보다 그 앞뒤입니다. 누가 로그인과 권한을 맡는지, 내부망에 무엇을 들이는지, 숫자의 정의를 어디에 두는지입니다.

질문BI · 관제 도구를 따로 설치키위즈 DATA STUDIO
로그인과 권한은?도구마다 계정과 권한을 따로 둡니다. 포털과 맞추려면 SSO나 권한 동기화를 따로 만듭니다.포털의 로그인과 메뉴 권한을 그대로 씁니다. 권한 매핑이 없는 행위는 거부합니다.
내부망에 무엇을 들이나?별도 서버 제품과 그 의존성을 통째로 들입니다.포털에 의존성으로 추가합니다. 새 런타임 패키지는 백엔드 1개, 프런트 3개입니다.
Tibero를 쓰는 고객사라면?검토한 도구 중 Tibero를 공식 지원하는 것이 없습니다.Oracle·Tibero·MariaDB용 SQL을 직접 만듭니다. Tibero 세부 구문은 M1에서 확인
납품물에 넣을 수 있나?Grafana·Metabase는 AGPL, Airbyte 커넥터는 ELv2라 납품물에 넣기 어렵습니다.자체 구현이라 넣을 수 있습니다. 가져다 쓰는 것은 ECharts와 Caffeine 정도입니다.
데이터를 모으는 일은?대개 이미 있는 DB를 조회만 합니다. 수집 배치는 따로 만듭니다.연결 → 수집 → 저장을 한 제품에서 하고, 실행 이력과 실패 행 재처리까지 같이 봅니다.
숫자의 정의는 어디에?도구 안에 지표 기능이 있어도, 포털의 다른 화면과는 따로 관리됩니다.데이터셋 한 곳에 두고 게시 버전으로 관리합니다. 바꾸기 전에 영향받는 차트·알림을 봅니다.
갈리는 지점 1포털 안에서, 포털의 권한으로 도는가
갈리는 지점 2숫자의 정의가 한 곳에 있는가
갈리는 지점 3수집부터 화면까지 상태를 같이 보는가
현재 한계와 다음

아직 안 된 것

Data Studio는 아직 설계 단계입니다. 아래 "다음"은 모두 계획이며 아직 하지 않은 일입니다.

지금화면 설계 v3.1(화면 44장)과 개발 아키텍처까지 있고, 코드는 아직 없습니다.

다음첫 목표는 DB 연결 1개 → 데이터셋 1개 → 차트 1개를 포털 메뉴에서 여는 수직 연결(M1)입니다.

지금참조 포털의 프런트와 백엔드가 인증 방식과 응답 형식을 서로 다르게 쓰고 있습니다.

다음M0에서 한쪽으로 맞춥니다. Studio API는 두 형식을 모두 낼 수 있게 만듭니다.

지금수집 커넥터는 REST 페이지 수집 하나로 시작합니다(M4). 그 전 단계는 이미 조회할 수 있는 DB만 씁니다.

다음Prometheus 직접 조회와 실시간 전달은 M6, JDBC 증분은 M7에서 더합니다. 그 밖의 원천은 커넥터를 개발해 붙입니다.

지금성능 목표는 측정 전 후보값입니다. 실측한 것은 차트 엔진 번들 크기뿐입니다.

다음 확인할 것M7에서 벤치마크 시나리오로 재고, 목표를 통과해야 끝납니다.

설정으로 되는 범위등록된 데이터·집계·차트 유형 안에서의 조합입니다.

계속 개발이 필요한 것수집하지 않은 데이터, 새 프로토콜, 새 차트 문법은 설정만으로 해결되지 않습니다.

만드는 순서

한 줄이 먼저 끝까지 이어진 뒤에 넓힌다

단계마다 완료 조건을 통과해야 다음 단계를 시작합니다. 기간은 팀 구성과 원천 접근이 정해진 뒤 산정합니다.

  1. M0포털 계약 맞추기

    로그인 → 메뉴 → 보호 API까지 기존 화면에서 동작. 401은 세션 만료, 403은 권한 없음으로 구분.

  2. M1수직 연결첫 목표

    DB 연결 1 → 데이터셋 1 → 막대 차트 1. 연결 풀을 새로 만들지 않고, 권한 범위가 다른 사용자의 결과·캐시를 나눔.

    DAT-05 · DAT-02 · DAT-03
  3. M2UI 패키지 탑재

    데이터셋·차트 화면을 포털 메뉴에 연결. 직접 주소·새로고침·뒤로 가기가 동작.

  4. M3게시 · 버전

    필드를 지우면 게시 차단, 이름만 바꾸면 호환, 기존 대시보드는 v1을 계속 봄.

    DAT-04 · DSH-02 · CMN-01
  5. M4수집 · 저장

    같은 데이터를 두 번 수집해도 건수가 그대로, 실행 중 꺼졌다 다시 켜도 대사가 맞음.

    SRC-02 · ING-02~05 · STO-05
  6. M5운영

    재처리는 실패한 행만, 성공한 행은 다시 더하지 않음. 보존 기간 축소는 승인을 거침.

    OPS-01~03 · STO-03 · HOME-01
  7. M6알림 · 관제

    유지시간·제외 구간·복구, 재전송 중복 억제. Prometheus 직접 조회와 관제 화면(TV).

    ALT-01~04 · DSH-04 · SRC-05
  8. M7이식성 · 성능

    두 번째 원천과 두 번째 포털을 코드 수정 없이 설정·어댑터로 연결. 벤치마크 목표 통과.