Rev. 2.73

heatmap.jpg

ClickHeat은 HTML 문서영역에서 발생하는 모든 클릭을 감시하여 비주얼라이즈(visualize)하는 색다른 분석도구(analytics)이다. 클릭 이벤트를 자바스크립트로 감시하고 좌표와 문서크기 브라우저의 종류 등이 담긴 정보를 Ajax로 서버에 전송하여 그룹, 사이트, 브라우저, 버튼 그리고 기간 단위로 히트맵 PNG 이미지를 실시간 생성 및 출력한다. 별도의 로그인을 통해 히트맵을 조회 할 수 있으며, 웹사이트에 중첩하여 표시하는 화면과 관리화면 등이 준비되어있다.

ClickHeat은 PHP와 GD2(PNG 지원 필요) 라이브러리가 돌아가는 서버환경을 요구하며 브라우저 클라이언트는 파이어폭스2, IE 6, 5 그리고 Konqueror 등 거의 모든 브라우저에서 작동한다. 데이터베이스(SQL)를 사용하지 않는 구조여서 업로드만으로 돌아가기 때문에 설치가 매우 간편하다. 다음 릴리즈에는 데이터베이스 구조 지원 및 랜더링 속도 향상 그리고 정확도를 높일 예정이라고 한다. 아쉬운 점이라면, 링크별 비주얼라이제이션(visualization)이 번거롭다. 페이지마다 개별적으로 그룹화하지 않으면 히트맵의 정보와 사이트에 중첩된 화면이 언매칭(unmatching) 되는 경우가 잦다. 그리고 Ajax를 통한 전송 방법으로는 아웃링크(A태그)를 클릭했을 때 정보가 서버로 전달되지 않는 현상이 발생한다. 상황에 따라 달랐지만 대부분의 이벤트를 놓치는 것으로 나타났다. 아마도 XMLHTTPRequest 객체를 호출하는데에는 적잖은 브라우저 코스트(cost)가 발생하기 때문인 것으로 생각된다. IP별 또는 리퍼러별 히트맵이 추가되는 것도 재미있겠다는 생각이 든다.

그래서 뜯어 고쳤다. clickheat.js를 토대로 Prototype에 어울리는 환경으로 개조를 시도했다. 개조에는 크게 세가지 목적이 있는데, 자동으로 링크별 저장/출력 하는 것, 관리화면으로 진입하지 않고 히트맵을 비주얼라이즈하는 것(서버사이드 수정 필요), 그리고 아웃링크의 클릭도 정확하게 전송되도록 하는 것 등이다. 약 반나잘을 투자해서 heatmap.js를 구축하고 아래와 같이 사용하할 수 있는 클래스를 만들었다. 이곳을 클릭하고 잠시 기다려 보자. 이 포스트에 대한 히트맵만이 출력되는 것을 확인할 수 있다.

HeatMap = new HeatMap('/clickheat/', { group: 'index', site: 'firejune.com', time: 0.5 }); // initialize
HeatMap.show({group: 'index', range:'d', browser: 'all', heatmap: '1' }); // call heatmap images 

Comments

canvas.gif

올라데이(oladay.com, 프로젝트명 기네스)가 드디어 베타딱지를 달고 세상에 공개되었습니다. 올라데이는 신형 블로그 서비스입니다.(이해를 도울만한 마땅한 비교 대상이 없군요. 써보시면 압니다. -.-) 기존의 블로그에서 생산된 컨텐츠가 편지지의 느낌이라면 기네스에서 생산한 컨텐츠는 엽서라고나할까요. 여러가지 미디어를 사용하여 저작물을 손쉽게 가공 또는 생산하고 이 컨텐츠들이 모여 하나의 서비스가 이루어지는 모습의 프로젝트입니다.

약 3개월에 걸쳐 구축되었으며, 백엔드 프레임웍에는 Zend가 사용되었고 프론트엔드 프레임웍으로는 Prototype/Scriptaculous가 사용되었습니다. 제가 담당한 부분은 컨텐츠 크리에이션입니다. 거의 모든 액션을 자바스크립트로 컨트롤하는 구조로서 Ajax를 위한 URL만 100여개에 달하며, 지금까지 공부한 자바스크립트 스킬들을 아낌없이 남발하였습니다. 자바스크립트에 연연하여 이 블로그를 눈팅하시는 분은 꼭한번 둘러보시기를 권장합니다.(서비스 가입은 선착순 1000명까지 입니다.)

Comments

Harald Kirschner씨는 MooTools 자바스크립트 라이브러리와 플래시를 이용하여 복수 파일을 업로드할 수 있게하는 FancyUpload를 만들고 공개했다. 파일들의 관리를 위한 업로드 큐와 전송 과정을 효과적으로 표현하는 프로그레스 바를 갖추고 있으며 세부적인 이벤트 반환 및 필터링 등 다양한 부가옵션을 지원한다. 특히, 자바스크립트가 작동되지 않는 환경에서도 작동하록 설계되어 FancyUpload 함수가 초기화(Initialize)되기 전에는 form태그의 액션이 그대로 동작한다. 파일 업로드에 swf와 자바스크립트가 결합되어 얻는 장점은 멀티 업로드 뿐만이 아니다. 서버에 업로드하지 않고 파일의 용량을 알 수 있어서 용량제한 유효성(Validate) 검사를 클라이언트-사이드에서 할 수 있는 이점도 있다. 이 라이브러리는 플래시 버전 8 이상에서 동작하며, IE6+, Opera9, Firefox1.5+, Safari2+를 지원한다.

FancyUpload를 곧 오픈예정인 기네스 프로젝트에 사용할 목적으로 Prototype/Scriptaculous기반 사이트에서 사용할 수 있도록 컨버전(conversion)했다. MooTools에는 플래시 오브젝트를 효율적으로 다루기 위한 Swiff라는 라이브러리가 있는데, 이 것을 필수로 요구하기 때문에 함께 컨버전 되었다. 아래에 설치된 예제는 Playground의 PHP 구현 예제를 응용하여 Ajax로 업로드 결과를 받아오는 과정을 추가한 것이다. "Browse..." 클릭 후 파일들을 왕창 긁어서 업로드 해 보자. 참고로 업로드한 파일은 서버에 저장하지 않으며, 한글이 섞인 파일명의 처리가 무시되어 업로드에 실패하는 상황도 발생한다.

Select Files
Upload Queue
Check the selected files and start uploading.
  •  
FancyUpload = new FancyUpload('upload-filedata', {
  url: '/lab/upload.php', // Upload target URL, default is form-action if given, otherwise current page
  swf: '/swf/swiff.uploader.swf', // Path & filename of the swf file
  multiple: true, // Multiple files selection, default: true
  types: {'Images (*.jpg, *.jpeg, *.gif, *.png)': '*.jpg; *.jpeg; *.gif; *.png'}, // extensions
  limitSize: false, //Maximum size for one added file
  limitFiles: false, // Maximum files in the queue, default: false
  queueList: 'upload-queue', // The Element or ID for the queue list
  uploadTimeout: '6', // upload timeout (sec)
  onAllComplete: function() { // Event fired when all files uploaded
    // Ajax.Request for upload result
    new Ajax.Request('/lab/upload-result.php', {
      mothod: 'POST', onSuccess: function(req) {
        setTimeout(function() {
          // clear the queue list
          FancyUpload.clearList();
        }, 1500);
        // display the upload result
        $('upload-status').innerHTML = req.responseText;
      }
    });
  }
});

본 자바스크립트 라이브러리의 라이센스는 MIT-License를 따른다. 어떠한 환경에서건 자유롭게 재가공하여 사용할 수 있지만, 저자권(copyright) 마크는 절대로 지울 수 없다는 내용이다.

※ 위 소스는 프로젝트 위키에서 다운로드 할 수 있습니다.

Comments