SVG Chart Engine

AI와 고화질 시각화를 품은

SBCHARTV2

픽셀이 아니라 좌표로 그립니다. 4K 대시보드에서 200% 확대해도, 회의실 빔프로젝터로 띄워도 선 굵기 하나 뭉개지지 않습니다.

제공 차트: 41종
조달청 디지털서비스몰 점유율: 86%
GS인증: 1등급
연동된 AI 도구: 4종

Resolution Independent

확대해도
깨지지 않습니다

대부분의 차트는 그려진 뒤에는 그림일 뿐입니다. 확대하면 계단이 보이고, 고해상도 모니터에서는 선이 흐려집니다. SBChart는 화면에 찍힐 때마다 좌표를 다시 계산해 그립니다. 두 샘플 아래 슬라이더를 끝까지 밀어보세요.

RasterPNG · 비트맵 · CANVAS

VectorSBChart · SVG

확대 배율 1.0×

Live Rendering

이미지가 아닙니다.
AI가 SBChart 이용해 스스로 그렸습니다

아래 세 가지 차트는 스크린샷이 아니라 SBChart2.0을 이용하여 실시간으로 그린 결과입니다. 마우스를 올리면 툴팁이 뜨고, 브라우저를 확대하면 그만큼 다시 그려집니다.

부처별 시스템 운영 추이

Spline · 곡선 보간과 데이터 범위 선택기

상태별 구성비

Donut · 조각을 누르면 가운데 값이 바뀝니다

부처별 구축 단계

Stacked Bar · 누적 막대와 범례

이 한 줄로 만들었습니다 “부처별 운영 현황을 누적 막대로 그려줘. 범례는 위쪽에, 툴팁도 붙여서.”

41종 전부, 같은 문법으로

차트를 바꾸려면 data.type 한 줄만 바꿉니다. 축·범례·툴팁·애니메이션 설정은 종류가 달라도 그대로 쓰입니다.

Map Chart

지도도 결국
하나의 차트입니다

별도 지도 엔진을 붙이거나 타일 서버를 띄울 필요가 없습니다.
행정구역을 자체코드로 갖고 있어서, 다른 차트와 똑같은 설정 문법으로 색·패턴·라벨을 지역에 입힙니다.

시·도와 시·군·구 두 단계를 기본 제공합니다.
색상 대신 배경 패턴으로도 구분해, 색약 사용자도 값을 읽습니다.
지도가 SVG라서 전국을 띄우든 한 개 군을 확대하든 경계선이 또렷합니다.

MAP 차트 데모 열기

나 막대에 그라데이션 넣고 3D로 모델링처럼 빙빙 도는 애니메이션을 넣어서 만들어줘.

해당 기능은 문서에 명시되어 있지 않습니다.

searchSBChartAPI("gradient 3d")
결과 없음 — 코드를 쓰지 않고 멈춤

비슷한 옵션으로 대충 맞추지 않습니다.
문서에 없으면 없다고 답합니다.

AI · MCP

지어내지 않는 AI라야
문서를 안 읽어도 됩니다

SBChart 문서 전체를 MCP 서버로 열어 두었습니다. Claude나 Cursor에 연결하면 AI가 사람 대신 문서를 뒤져 옵션을 찾습니다.
다만 더 중요한 건 그 반대쪽입니다. 문서에 없는 옵션은 그럴듯하게 만들어내지 않고 없다고 답합니다. 돌려보기 전에는 틀린 코드를 걸러낼 방법이 없기 때문입니다.

searchSBChartAPI 키워드로 차트 옵션을 검색합니다
getSBChartAPIDetail 옵션 하나의 전체 문서를 가져옵니다
listSBChartAPIs 카테고리별 API 목록을 훑습니다
getSBChartExample 바로 돌아가는 예제 코드를 찾습니다

MCP 서버 주소 Claude · Cursor에 등록

https://softbowl.co.kr/mcp/sbchart2.do

Node.js 18 이상 환경에서 동작합니다.

위 주소를 복사해 AI 도구의 MCP 설정에 붙여넣으면 됩니다. Claude 기준 등록 절차는 아래 가이드 문서에 화면과 함께 정리해 두었습니다.

Use Cases

어떤 화면에
쓰이고 있나

차트 라이브러리는 기능 목록보다 실제로 어떤 화면을 만드는지가 중요합니다.
공공·금융 현장에서 가장 자주 마주치는 세 가지 상황입니다.

공공 · 통합 대시보드

지표 종류가 제각각인 화면을 하나로

부처별 운영 현황, 상태별 구성비, 지역 분포를 한 페이지에 모을 때 보통은 특수 차트들 사용을 위해 다른 여러 라이브러리를 사용합니다. SBChart는 종류가 달라도 data.type 한 줄만 바뀌고 축·범례·툴팁 설정은 그대로 쓰기에 일관적인 개발이 가능합니다.

이 페이지의 라이브 샘플 3종이 같은 문법으로 작성됐습니다
금융 · 거래 화면

확대가 잦은 화면일수록 차이가 난다

캔들스틱과 거래량을 한 축에 겹치고, 사용자가 구간을 계속 확대·축소하는 화면입니다. 비트맵으로 그린 차트는 확대할 때마다 선이 뭉개지지만 SVG는 그 배율로 다시 그립니다.

위 확대 비교에서 직접 확인하실 수 있습니다
공공 · 접근성 의무 대상

색으로만 구분하면 심사를 통과하지 못합니다

전자정부 웹 접근성 기준은 색상만으로 정보를 구분하는 것을 허용하지 않습니다. SBChart는 배경 패턴으로 계열을 구분하고, 대체 텍스트와 TTS 연동을 지원합니다.

소프트웨어 접근성 SA인증 · GS인증 1등급

Certified & Supported

도입 검토에서
확인하시는 것들

인증과 표준, 그리고 도입 이후 연락할 곳까지 한자리에 모았습니다. 공공·금융 도입 심사에서 실제로 묻는 항목들입니다.

소프트웨어 접근성 SA인증

전자정부 웹 접근성 기준은 색상만으로 정보를 구분하는 것을 허용하지 않습니다. SBChart는 배경 패턴으로 계열을 나누고, 대체 텍스트와 TTS 연동을 지원합니다.
GS인증 1등급

소프트웨어 품질 시험을 1등급으로 통과했습니다. 조달청 디지털서비스몰에서 웹 차트 부문 86%를 차지하고 있는 근거이기도 합니다.