구글 차트를 이글루스 블로그에 표시하는 법 by accuram

구글 검색으로 "HTML Chart"등을 검색하면 대부분 자바스크립트 기반의 차트 소스들이 나옵니다. 대부분 웹서버에서 차트서비스서버로 데이타를 보내면, 차트서비스 서버가 차트를 만들고 인터액티브 형태나 단순 이미지 형태로 만들어 보내주면 이를 웹서버에서 보여주는 형태를 취하고 있습니다. 블로그에 이를 사용하는데는 몇가지 문제가 있더군요.
  • 대부분의 블로그 서비스는 자바스크립트를 지원하지 않습니다. 특히 이글루스, 네이버, Wordpress.com 등.
  • 직접 웹서버를 운영할 경우, 기술적인 어려움이 큽니다.
    - Amazon S3 서비스도 생각이 들었는데, 혹시라도 트래픽이 늘면 비용발생합니다. 
  • 관리용 화면이 필요합니다. 즉, 차트 데이타를 입력해야 하고, 차트 디자인을 수정할 수 있어야 하는데, 어렵습니다.
    - 주위에 쉽게 의뢰할 수 있는 개발자가 있었으면 그냥 웹서버 구축했을 지도 모르겠네요.
구글 검색으로 나온 가장 유력할 사례는 구글 이미지 차트 서비스 였지만, 서비스 중단 예정이라 장기적으로 사용할 수는 없었습니다. 구글 이미지 차트 서비스는 구글 사이트에서 데이타를 입력하고, 생성된 차트를 이미지로 서비스하고, 그 그림 링크를 HTML 태그로 추가하면 되는 간단한 구조였습니다.

결국, 블로그에 차트를 표시하기 위해서는 다음의 기준을 충족해야 합니다.
  • 기본 HTML 태그로 지원. 즉, 이미지 링크 수준.
  • 차트용 데이타를 쉽게 입력하고, 수정하고, 관리할 수 있어야 함.
  • 차트 이미지를 편집할 수 있어야 함.
구글 검색 결과는 자바스크립트를 제안하는데, 블로그는 이를 지원하지 않는 평행선에서 고민을 반나절 정도 했는데요, 해답은 의외로 가까운 곳에 있었습니다. 바로 구글 문서도구, 즉 docs.google.com을 사용하는 것입니다. (요즘은 drive.google.com 주소를 사용하네요)

구글 문서도구에는 엑셀과 같은 Spread Sheet가 있고, 여기에서 엑셀처럼 자유롭게 데이타를 입력하고, 무기한 저장이 가능합니다. 이 데이타에서 쉽게 차트를 만들 수 있고, 기본적인 편집 기능을 제공합니다. 그리고 가장 중요한 기능이 만들어진 차트를 출판(Publish)하는 것이 가능합니다. 즉, 외부에서 이 차트에 접근이 가능한 것이지요. 여기서도 자바스크립트와 이미지 태그 두 가지를 제공하고, 전자는 인터액티브 기능을 제공하지만, 블로그는 후자만 사용 가능합니다. 대신, 구글 문서도구에서 데이타를 수정하면, 자동으로 차트도 변경되고, 이미지태그로 연결된 이미지도 변경됩니다. 즉, 블로그에 한번 이미지를 링크해두면, 블로그를 수정하지 않아도 차트는 계속 업데이트가 가능합니다.

그동안 너무도 강력한 엑셀대비 부실한 구글 문서도구는 쳐다보지도 않고 있었는데요, 이번 사건을 계기로 인터넷에 항상 연결된 문서도구의 강력함을 느끼게 되었습니다. HTML의 강점도 새삼스럽게 느껴지내요. 


Adsense leader board