csat-chart.js

csat-chart.js는 수능·모의고사 시험지에서 사용하는 형태의 그래프를 만들기 위한 JavaScript 기반 오픈소스 라이브러리입니다. 시험 문제를 만들다 보면 그래프 제작에 정말 많은 시간이 들어갑니다. 엑셀이나 한글에서도 그래프를 만들 수 있지만, 수능 시험지에서 사용하는 축, 범례, 글꼴, 패턴, 출처 등의 형식을 맞추려면 일일이 수정해야 합니다. 특히 사회탐구에서는 기후 그래프, 인구 피라미드, 삼각 그래프, 산점도, 수요·공급 곡선처럼 일반적인 차트 프로그램으로 만들기 번거로운 자료도 자주 사용됩니다. 이러한 이유로 수능·모의고사 스타일의 그래프를 쉽게 만들 수 있도록 csat-chart.js를 개발하였습니다. csat-chart.js는 그냥 그래프를 만들기 위해 사용할 수도 있지만, 선생님의 프로그램에 수능 양식의 그래프를 넣고 싶은 경우, 이 오픈 소스 라이브러리를 활용하면 수능 양식의 그래프를 선생님의 프로그램에 활용할 수 있습니다. AI와 함께 사용하기 csat-chart.js를 사용하기 위해 코드를 직접 작성할 필요는 없습니다. 아래 데모 페이지에서 원하는 그래프를 선택한 뒤, 페이지에 제공되는「AI에게 시킬 프롬프트」를 ChatGPT나 Claude에 붙여 넣으면 됩니다.

이후 만들고 싶은 그래프와 데이터를 자연어로 설명하면 AI가 csat-chart.js에 맞는 코드를 작성해 줍니다. 예를 들면 다음과 같이 요청할 수 있습니다. > 서울의 월평균 기온과 강수량 자료를 이용해서 csat-chart.js 기후 그래프를 만들어줘. > 수능 시험지에 사용할 예정이므로 흑백으로 표현하고, 제목은 제외하고 아래쪽에 자료 출처를 넣어줘. 또는 통계 자료를 표 형태로 그대로 붙여 넣고 > 이 자료를 csat-chart.js의 삼각 그래프로 만들어줘. 와 같이 요청할 수도 있습니다. 그래프가 완성된 뒤에도 > 범례를 아래쪽으로 옮겨줘. > A 지역은 빗금, B 지역은 점 패턴으로 바꿔줘. > 자료값은 표시하지 말아줘. 처럼 자연어로 수정할 수 있습니다. 지원하는 그래프 현재 csat-chart.js에서는 일반적인 막대그래프와 꺾은선그래프뿐 아니라 다음과 같은 교육용 그래프를 만들 수 있습니다. 기후 그래프, 인구 피라미드, 삼각 그래프, 산점도·버블 차트, 방사형 그래프, 트리맵, 100% 막대그래프, 경제 좌표평면 등이 포함되어 있습니다. 특히 흑백 인쇄를 고려하여 색상 대신 선과 패턴으로 자료를 구분할 수 있고, 제목·범례·각주·출처 등도 시험지 형식에 맞게 표현할 수 있습니다. npm으로 설치하기 웹사이트나 교육용 웹앱에 직접 적용하려면 npm으로 설치할 수 있습니다. bash id="5pz61t" npm install csat-chart.js 설치한 뒤 필요한 기능을 불러와 사용합니다. javascript id="20ws4s" import {} CsatChart, createDefaultClimateData from 'csat-chart.js'; await CsatChart.ensureFonts(); const data = createDefaultClimateData(); new CsatChart('#chart', {} type: 'climate', data, options: {} source: '기상청' ); 설치하지 않고 HTML 페이지에서 바로 불러오고 싶은 경우, 아래의 코드를 HTML에 넣으면 별도의 설치 없이 csat-chart.js를 사용할 수 있습니다. html id="v0t60t" <script src="https://cdn.jsdelivr.net/npm/csat-chart.js@1/dist/csat-chart.umd.min.js"></script> 단순히 시험 문제에 넣을 그래프를 만드는 목적이라면 설치하지 않고 데모 페이지와 AI를 함께 사용하는 방법이 가장 간단합니다. 활용 방법 csat-chart.js는 시험 문제와 학습지 제작뿐 아니라 교육용 웹페이지에도 활용할 수 있습니다. 예를 들어 학생이 데이터를 입력하면 자동으로 기후 그래프가 만들어지는 활동, 국가별 산업 구조를 삼각 그래프로 비교하는 활동, 인구 자료를 인구 피라미드로 표현하는 활동 등을 만들 수 있습니다. 또한 AI와 함께 사용하면 단순한 그래프 제작뿐 아니라 자료 구성과 문항 제작까지 연결할 수 있습니다. > 다음 자료를 산점도로 표현하고, 자료를 해석해야 풀 수 있는 통합사회 수능형 문항도 함께 만들어줘. 와 같은 방식입니다. 그래프의 형식은 csat-chart.js가 담당하고, 어떤 자료를 사용할지는 사람이 결정하고, 실제 코드 작성은 AI에게 맡기는 방식으로 활용할 수 있습니다. Demo

GitHub

npm