[ASP.NET] .NET Framework으로 웹 차트 및 그래프를 동적으로 생성

지식 근로자들은 원시 숫자들이 그래프 형식으로 표현되었을 때 좀더 데이터를 효율적으로 이해할 수 있습니다. 웹 페이지에서 데이터베이스 정보를 보여줄 때 특히 차이가 납니다. 해당 데이터를 보여줄 때 간단한 차트일지언정 그것을 사용하고, 사용하지 않고의 차이는 분명합니다. 과거에 ASP 의 경우, 데이터 기반의 차트를 동적으로 생성하려면 서드파티 업체에서 만든 이미지 생성 COM 컴포넌트를 구매해야 했습니다. ASP.NET 이 나온 지금, 개발자들은 C# 언어로 .NET Framework에서 제공되는 그리기 관련 클래스를 이용하여 동적 이미지나 차트를 쉽게 생성할 수 있습니다. 
--------------------------------------------------------------------------------

ASP의 놀라운 성공을 이끈 가장 중요한 요소는, 개발자들이 쉽게 데이터중심의 웹 페이지를 개발할 수 있다는 점이었습니다. 특히 인트라넷에서, 데이터를 다루는 웹 페이지의 일반적인 예는 보고서 페이지입니다. 그런 페이지들은 데이터베이스로부터 가져온 데이터를 방문자가 쉽게 이해할 수 있는 방식으로 표현을 해줍니다. ASP 페이지에서 텍스트 기반의 보고서 정보를 출력하는 것은 너무 쉬운 일이지만, 그러한 정보를 그래픽적인 요소까지 곁들여 차트양식으로 보여주는 것은 ASP의 영역을 넘는 전혀 새로운 기능입니다. 
필자가 ASP를 시작한 것은 지난 1998년 1월 이었습니다. 아마도 바로 그날, 한국에선 눈이 왔을지도 모르겠습니다. 주어진 과제는 제가 근무하고 있던 컨설팅 회사를 위해 사내 보고서 시스템을 개발하는 것이었습니다. 하루 업무가 끝날 때 쯤, 각 컨설턴트들은 회사 인트라넷 시스템 개발 착수와 관련해서 의논을 했습니다. 각 컨설팅 그룹의 관리자들은, 개별 컨설턴트와 그룹단위로 지나간 수익을 보여주는 보고서 양식을 원했습니다. 정보를 보여주기 위해, 텍스트 양식으로 된 숫자를 단순히 나열하는 것이 아닌, 다양한 차트와 그래프로 지나간 수익과 앞으로 기대되는 수익을 보고 싶다고 요청했습니다. 
필자가 ASP를 시작한 것은 지난 1998년 1월 이었습니다. 아마도 바로 그날, 한국에선 눈이 왔을지도 모르겠습니다. 주어진 과제는 제가 근무하고 있던 컨설팅 회사를 위해 사내 보고서 시스템을 개발하는 것이었습니다. 하루 업무가 끝날 때 쯤, 각 컨설턴트들은 회사 인트라넷 시스템 개발 착수와 관련해서 의논을 했습니다. 각 컨설팅 그룹의 관리자들은, 개별 컨설턴트와 그룹단위로 지나간 수익을 보여주는 보고서 양식을 원했습니다. 정보를 보여주기 위해, 텍스트 양식으로 된 숫자를 단순히 나열하는 것이 아닌, 다양한 차트와 그래프로 지나간 수익과 앞으로 기대되는 수익을 보고 싶다고 요청했습니다. 
클라이언트에 독립적이기 위해 좀 더 나은 구상은 ASP 페이지에서 GIF 또는 JPG 이미지 파일을 생성해 내서 클라이언트의 브라우저에 파일로 보내주는 것이었습니다. 그러한 작업은 COM 컴포넌트를 사용하지 않고는 ASP 에서 불가능한 작업입니다. 다행히도, ASP 개발자들을 위해 서버측 그래프를 생성해 주는 수많은 서드파티 업체들이 COM 개체를 제공해 주고 있습니다. 필자가 발견한 ASPIn.com(http://www.aspin.com/home/components/graphics/charts (영문))만 해도 16 종류의 컴포넌트에 대한 링크를 제공해 줍니다. 
그러나 ASP.NET의 등장으로, 여러분들은 동적 차트와 그래프를 서드파티 COM 컴포넌트의 도움을 받지 않고도 생성할 수 있습니다. 마이크로소프트의 .NET Framework는 System.Drawing 네임스페이스에서 그래프와 관련된 많은 클래스를 제공해 주고 있습니다. 거기서 제공되는 클래스들을 이용해서 독립 윈도우 기반 응용 프로그램이나 ASP.NET 웹 페이지 모두에서 다양한 포맷으로 된 이미지를 생성하고 편집할 수 있습니다. 클라이언트로부터 요청이 들어왔을 때, 이러한 클래스들을 이용하여 여러분들은 데이터베이스 정보에 기반한 차트를 보여주는 ASP.NET 웹 페이지를 생성할 수 있습니다. 요청에 대한 응답으로 이미지를 보내줄 수가 있는 것입니다. 
완벽한 동적 차트를 목표로 하기 전에, 우선 어떻게 ASP.NET 페이상에서 프로그램적인 방법으로 이미지를 생성할 수 있는지에 대해서 살펴보겠습니다. 

간단한 이미지를 보여주는 코드 작성
.NET Framework에서 제공되는 System.Drawing 네임스페이스는 이미지를 생성/편집하는 데에 필요한 모든 클래스를 포함합니다. 이미지 생성과 관련해서는 2가지 클래스, Bitmap, Graphics 가 제공됩니다. Bitmap 클래스는 캔버스로, Graphics 클래스는 화필로 생각해 볼 수 있습니다. 잠시 후에, 팔레트 생성을 위해 Bitmap 클래스를 어떻게 사용하는 지에 대한 방법과, 그림이 완성되었을 때 Bitmap 클래스에서 제공되는 Save 메서드를 이용해서 파일로 저장 또는 스트림으로 직접 전송하는 것을 둘 다 보여드리겠습니다. Graphics 클래스는 이미지, 도형, 문자열을 그리기 위해 필요한 모든 메서드를 포함합니다. 
캔버스를 생성하기 위해서, 아래와 같이 Bitmap 클래스의 새 인스턴스를 생성하는 것이 필요합니다. 

Bitmap myBitmap = new Bitmap(width, height); 
이제 필자는 캔버스 하나를 가지게 되었고, Graphics 클래스의 인스턴스와 페인트 브러쉬를 생성합니다. 이어서 사용해야 할 캔버스를 지정하기만 하면 됩니다. 이를 위해 Graphics 에서 제공되는 정적 메서드 FromImage를 사용할 수 있습니다. 그 메서드는 단 하나의 Image 인스턴스를 인자로 받아서 Graphics 인스턴스를 반환해 줍니다. (필자의 경우, Bitmap 클래스의 인스턴스를 전달했습니다. 참고로, Bitmap 클래스는 Image 클래스로부터 상속받았습니다.) 

Graphics myGraphics = Graphics.FromImage(myBitmap); 
이젠, 이미지, 도형, 문자열 등을 캔버스 위에 그릴 수 있는 준비가 되었습니다. 잠시 .NET Framework 설명서를 실행시키고 Graphics 클래스를 살펴보십시오. 도형 그리기와 관련된 방대한 분량의 메서드가 제공되는 것을 알 수 있습니다. 그러한 메서드들은 크게 2 가지로 쌍으로 존재하는 것이 눈에 뜨입니다. DrawShape와 FillShape에 대해서 각각 DrawEllipse와 FillEllips가 있습니다. Draw 류는 간단하게 도형의 외곽선을 그려주고, Fill 류는 도형을 그리고 내용 역시 채워줍니다. 예를 들어, 표 1에서 보는 것처럼 468×60 픽셀 규격의 광고 문구를 생성하고 싶다고 하면,표 2와 같은 코드를 사용할 수 있습니다. Page_Load 이벤트 처리기에 구체적인 코드가 구현되어 있습니다. 


표 1 표준 광고 배너

ASP.NET 웹 페이지에서 이미지 보기 
표 2 의 코드에서는 한가지 기능이 빠져 있습니다. 이미지를 저장하는 방법에 관해서입니다. 예제에서의 코드는 "MSDN

ASP.NET_Draw.zip