화려한 시각 효과에 쉽게 감탄하는 상사가 있으신가요? 마케팅 업무를 담당하고 계신가요? 운영 중인 웹사이트에 멋진 플래시 그래프로 활력을 불어넣고 싶으신가요? 정적인 웹 페이지를 넘어서는 온라인 프레젠테이션 도구가 필요하신가요? 그렇다면 FusionCharts를 살펴볼 때입니다.
FusionCharts는 미적으로 뛰어난 애니메이션 플래시 그래프와 차트를 웹 프로젝트에 손쉽게 통합할 수 있는 차팅 소프트웨어입니다. 영역형, 막대형, 파이형, 세로 막대형, 분산형 등 다양한 2D 및 3D 차트를 제공하며, 모든 차트는 일반 HTML 파일은 물론 ASP, PHP, Ruby on Rails, Python 등 다양한 웹 기술과 함께 사용할 수 있습니다. SQL, Oracle 같은 데이터베이스와의 연동도 지원합니다.
FusionCharts는 InfoSoft가 선보이는 여러 제품 중 하나입니다. 이 외에도 대시보드용 플래시 위젯, 플래시 지도, 그리고 Adobe Flash, Dreamweaver, FileMaker, Visual Basic, Google Gadgets용 인터랙티브 차트 등 다양한 제품군을 만나볼 수 있습니다.
이런 프로그램들은 대부분 유료지만, FusionCharts는 무료 버전도 제공합니다! 유료 솔루션보다 기능은 적지만 FusionCharts Free만으로도 대부분의 개인 사용자에게 충분합니다. 게다가 셰어웨어 특유의 워터마크나 브랜딩 없이 깔끔하게 사용할 수 있다는 점도 매력적입니다.
흥미가 생기셨나요? 그럼 FusionCharts 설정 방법을 단계별로 살펴보겠습니다. 이 튜토리얼에서는 일정 기간 체험할 수 있는 FusionCharts v3를 사용해 시연합니다. 라이선스 관련 사항은 각자 확인하시기 바랍니다. 두 버전의 자세한 비교는 공식 홈페이지의 비교 페이지를 참고하세요.
다운로드 및 설치
FusionCharts를 다운로드하려면 먼저 회원가입이 필요합니다. 압축 파일을 내려받은 후 원하는 폴더에 zip 파일의 압축을 풀면 준비가 끝납니다.
첫 단계
방금 압축을 푼 FusionCharts 폴더를 열어보세요. 하위 폴더가 꽤 많다는 것을 알 수 있습니다.
그중 파일은 첫 번째 웹 프로젝트를 만들고 그 안에 FusionCharts를 적용하는 데 도움이 되는 문서이자 도움말 파일입니다. 공식 설명서를 읽어볼 시간을 내는 것이 좋지만, 이 글만 훑어봐도 기본적인 사용법은 충분히 익힐 수 있습니다.
프로젝트 만들기
먼저 프로젝트용 디렉터리를 만들어야 합니다. 디렉터리를 생성한 후 Charts 하위 폴더에 있는 모든 파일을 프로젝트 폴더로 복사하세요. 이 파일들은 SWF 형식입니다. 다음으로 JSClass 폴더에서 FusionCharts.js 파일을 프로젝트 폴더로 복사합니다.
참고: 무료 버전 사용자도 동일한 스크립트를 사용할 수 있습니다. 다만 사용 가능한 차트 종류는 더 적습니다. 자세한 내용은 버전 비교 페이지를 참조하세요.
물론 굳이 이렇게 할 필요는 없습니다. 어떤 디렉터리를 사용하든 웹 코드에서 상대 경로로 올바른 파일을 가리키기만 하면 됩니다. 다만 처음 FusionCharts를 사용할 때는 웹 페이지, 스크립트, 플래시 차트가 모두 같은 폴더에 있으면 훨씬 편리합니다.
다음 단계는 차트에 사용할 데이터를 만드는 것입니다. FusionCharts는 XML 형식을 데이터 컨테이너로 사용합니다.
데이터 만들기
무료 버전에서는 메모장 같은 텍스트 편집기를 사용해 XML 파일을 직접 작성해야 합니다. 반면 모든 기능을 갖춘 v3에서는 XML Generator 유틸리티를 사용할 수 있는데, 입력한 설정을 HTML 또는 관련 코드로 자동 변환해 주므로 매우 편리합니다.
XML Generator는 Tools 하위 폴더에서 찾을 수 있습니다.
원하는 방식으로 데이터를 입력한 후 Convert to XML 버튼을 클릭합니다.
이제 데이터가 XML 형식으로 표시됩니다. 앞서 언급했듯이 텍스트 편집기를 사용해 직접 파일을 만들 수도 있습니다. 실제로 생성된 코드를 텍스트 편집기에 복사한 후 something.xml 형태로 저장하면 됩니다.
FusionCharts 공식 가이드에서는 파일 이름을 Data.xml로 지정할 것을 권장합니다. HTML 파일을 직접 수정하는 것이 익숙하지 않다면 기본 이름을 그대로 사용하는 것이 좋습니다. 익숙하다면 원하는 이름을 자유롭게 사용해도 무방합니다.
Configure Chart를 클릭하면 차트의 모양과 느낌을 세부적으로 조정할 수 있습니다. 차트 제목과 부제목, 축 레이블을 추가하고 색상 팔레트를 변경하며, 그래프에 수치를 표시하는 등 다양한 속성을 설정할 수 있습니다.
다음으로 Generate HTML을 클릭해 HTML 파일을 생성합니다. 이 단계에서 차트 유형을 선택할 수 있습니다. 이 값은 앞서 복사한 SWF 파일을 직접 가리키므로, Charts 하위 폴더에서 일부 차트 파일만 복사했다면 프로젝트 폴더에 해당 파일이 모두 있는지 반드시 확인하세요. 누락되면 프로젝트가 정상적으로 작동하지 않습니다. 이미지 파일이 있어야 할 자리에 없는 것과 마찬가지입니다.
그래프의 너비와 높이도 이 단계에서 지정할 수 있으며, 나중에 HTML 코드를 직접 수정해 조정할 수도 있습니다.
마지막으로 생성된 내용을 텍스트 편집기에 복사해 HTML 파일로 저장합니다. 파일 이름은 원하는 대로 지정하세요. 자세한 내용은 다운로드 패키지에 포함된 파일을 참조하시기 바랍니다.
생성된 데이터 검토
이제 만들어진 파일들을 살펴보겠습니다. 먼저 Data.xml 파일입니다:
보시다시피 표준 XML 구조입니다. XML에 익숙하다면 이 파일을 직접 수정할 수도 있습니다. 값과 키를 변경하거나 차트 캡션 등을 자유롭게 편집할 수 있습니다.
다음은 HTML 파일입니다:
필요한 코드는 'Start Code for FusionCharts chart'와 'End code for FusionCharts chart'라는 두 주석 사이에 들어 있습니다. 이 부분을 원하는 프로젝트에 복사해 사용하면 됩니다. .js 파일과 .swf 파일의 상대 경로, 차트 크기 등에 주목하세요. 이 모든 항목은 필요에 맞게 사용자 지정할 수 있습니다. 이제 FusionCharts가 실제로 어떤 모습인지 확인해 보겠습니다.
훌륭한 그래프
자, 정말 멋진 결과물입니다. 먼저 2D 및 3D 파이 차트입니다:
또 다른 예시로 3D 막대 차트입니다:
이 멋진 차트들이 실제 웹 페이지에 통합되면 어떻게 보이는지 살펴보겠습니다. 차트 앞뒤에 텍스트를 배치하면 아주 훌륭한 프레젠테이션 아티클이 완성됩니다:
가장 인상적인 점은 그래프를 직접 조작할 수 있다는 것입니다. 회전시키거나 데이터의 일부를 분리해 내는 등 다양한 인터랙티브 기능을 활용할 수 있습니다. 물론 전체 기능이 정상 작동하려면 브라우저에서 자바스크립트가 활성화되어 있고 플래시 플러그인이 설치되어 있어야 합니다.
그래프는 로드될 때 세련된 시작 애니메이션도 연출해 페이지에 고급스러운 느낌을 더합니다. Wink로 녹화한 모습은 다음과 같습니다:
핵심 과정 요약
결론으로 넘어가기 전에, FusionCharts를 실행하기 위해 수행해야 할 단계를 간단히 정리해 보겠습니다:
- 압축 파일을 다운로드하고 압축을 풉니다.
- 플래시 파일(Charts 폴더 안의 .swf)과 자바스크립트 파일(JSClass 폴더 안의 .js)을 프로젝트 폴더로 복사합니다. 한 폴더에 모아도 되고 여러 위치에 나눠도 되지만, 초보 사용자라면 하나의 통합된 프로젝트 폴더를 사용하는 것이 좋습니다.
- 차트 데이터를 만들어 텍스트 파일에 붙여넣고 Data.xml로 저장합니다.
- HTML 코드를 생성하고 필요에 맞게 수정한 후 텍스트 파일로 저장합니다. 파일 이름은 자유롭게 지정할 수 있으며, 관련 파일의 위치는 상대 경로나 절대 경로 어느 쪽이든 사용할 수 있습니다. 숙련된 사용자라면 설정을 원하는 대로 자유롭게 조정할 수 있습니다.
- 새로 만든 HTML 파일을 웹 브라우저에서 열고 멋진 차트를 감상하세요. 필요에 따라 키, 값, 캡션, 크기, 차트 유형, 색상 팔레트를 언제든 변경할 수 있습니다.
보시다시피 FusionCharts 설정은 플러그 앤 플레이 방식은 아니지만 분명 해볼 만한 작업입니다. 어차피 온라인 프레젠테이션 기술을 사용하려는 거라면 어느 정도 웹 디자인에 익숙할 것이고, 그렇다면 FusionCharts 활용은 식은 죽 먹기일 겁니다. 초보자라면 약간의 학습이 필요하지만, 이 튜토리얼이 그 과정을 한결 쉽게 만들어 주었기를 바랍니다.
결론
FusionCharts는 분명 유용하고 독특한 기술입니다. 온라인 프레젠테이션을 빠르고 쉽게 한층 풍성하게 만들어 줍니다. 무엇보다 코딩 전문가가 아니어도 사용할 수 있다는 점이 큰 장점입니다. 어려운 작업은 이미 도구가 처리해 주니, 우리가 할 일은 멋진 그래프를 웹 페이지에 잘 배치하는 것뿐입니다.
Wink나 Slidy 같은 도구와 함께 활용하면 그 효과가 배가됩니다. 업무에 진지하게 도입할 계획이라면 유료 정식 버전 구매도 충분히 고려해 볼 만합니다.
참고로 플래시(Flash) 기술은 2020년 12월에 공식 지원이 종료되었으므로, 최신 브라우저 환경에서는 Chart.js, Highcharts, ECharts 같은 HTML5 기반 차트 라이브러리를 대안으로 검토하는 것이 좋습니다. 다만 이 글의 XML 기반 데이터 구성과 차트 설계 과정은 오늘날의 차트 라이브러리를 배울 때도 그대로 적용할 수 있는 유용한 개념입니다.
이 튜토리얼이 즐거웠기를 바랍니다. 다음에 또 유익한 글로 찾아오겠습니다.
감사합니다.