Rev. 2.73

웹사이트의 화면을 이미지로 저장하고 프리뷰 이미지(썸네일)로 가공한 자료를 누구나 사용할 수 있도록 API를 제공하는 서비스들을 모아 보았습니다. 아래와 같은 간략한 HTML 마크업만으로 이미지를 호출할 수 있으며, 이 프리뷰 이미지를 외부로 나가는 링크에 노출시켜 외부링크임을 직관적으로 알리기 위해 사용해 왔습니다. 지금까지 Girafa의 공짜 웹사이트 썸네일 서비스를 사용했지만 최근에 유료 서비스로 전환해 버리면서 더이상 공짜로 사용할 수 없게 되어 다른 공짜 서비스들을 찾아 보게 되었습니다.

<img src="http://images.websnapr.com/?url=www.websnapr.com" alt=""/>

WebSnapr : 92×70, 202×152, 400×300, 640×480 크기를 제공합니다. 자료가 풍부하지는 않지만 생성속도가 매우 빠릅니다. 해당 프리뷰-이미지를 요청한 시점에서 정보를 찾을 수 없는 경우 서버는 이미지 생성작업에 착수합니다. 대부분의 프리뷰 이미지 서비스 사이트가 이러한 룰으로 생성작업을 하고 있습니다. 제약사항으로 이미지에 "powered by websnapr.com"이라는 워터마크가 찍혀 있으며, 아래와 같은 주소형식으로 호출할 수 있습니다.

http://images.websnapr.com/ ? size=[size] & key=[key] & url=[url]

ArtViper : 프리뷰 이미지 사이즈를 직접 입력하여 호출하는 방법으로 프리뷰 이미지를 상황에 맞게 생성해서 응답하는 방식입니다. 특정 영역으로 크로핑(cropping)을 할 수 있고, 자유롭게 크기를 지정할 수 있으며 속도가 빠르다는 장점이 있지만, URL이 다소 복잡하고 생성속도가 매우 느립니다. 부가적으로 보다 쉽게 서비스를 사용할 수 있도록 mootools기반으로 작성된 Preview Bubble과 AJAX image hover 라이브러리를 자체적으로 제공하고 있습니다.

http://www.artviper.net/screenshots/screener.php ? url=[url] & sdx=[screen w] & sdy=[screen h] & w=[width] & h=[height]

Website Thumbnails : 데이터도 많지 않을 뿐더러 로딩속도와 생성속도 모두 만족스럽지 못할만한 수준입니다. 오직 120×90크기의 이미지만 사용할 수 있습니다. 장점은 프리뷰 이미지의 URL이 간결하여 사용성이 좋다는 것과 아무런 제약이 따르지 않는 다는 점입니다.

http://www.websitethumb nails.net/view.php ? url = [url]

Thumbalizr : 1024 미만의 프리-사이즈를 제공합니다. 이 곳 역시 수집된 데이터의 양도 적고 로딩속도와 생성속도는 상대적으로 최악입니다. 제약사항으로는 "powered by thumbalizr"라는 워터마크가 찍혀있는 것입니다.

http://www.thumbalizr.com/api/ ? url = [url] & width = [width]

Thumbnails Pro : 너무 느려서 테스트하지 못했습니다.

이 밖에도 snap.com에서 제공하는 사이트 프리뷰 위젯을 사용하는 방법도 있고, 안정적이면서도 방대한 DB를 가진 유료 사이트 프리뷰 이미지 서비스를 제공하는 곳으로는 아마존 웹 서비스 중 하나인 Alexa Site Thumbnail이 있습니다.

Comments

editarea.gif

EditArea는 웹상에서 소스코드를 수정할 때 더욱 편리한 기능들을 제공는 자바스크립트로 만들어진 에디터다. PHP, CSS, Javascript, Python, HTML, XML, VB, C, CPP, Pascal, Basic 등 다양한 언어의 문법을 색상으로 강조하는 것은 물론, 다수의 파일을 동시에 편집할 수도 있다. 문자열 찾기, 찾아 바꾸기, 자동 들여쓰기, 라인 넘버 등 코딩을 하기위해 기본적으로 필요한 여러 기능들을 갖추고 있으며, 플러그 인 지원, 컨텐츠 관리등을 추가로 지원하고 특정한 자바스크립트 라이브러리(Prototype, jQuery 등)에 기반하지 않기 때문에 유연하게 사용 할 수 있다. 블로그 도구의 스킨 편집기나 WYSIWYG의 소스 보기에 적용하면 좋겠다.

editAreaLoader.init({
  id: "exemple_3" // id of the textarea to transform       
  ,start_highlight: true 
  ,font_size: "8"
  ,font_family: "verdana, monospace"
  ,allow_resize: "y"
  ,allow_toggle: false
  ,language: "fr"
  ,syntax: "css" 
  ,toolbar: "new_document, save, load, |, charmap, |, search, go_to_line, |, undo, redo, |, select_font, |, change_smooth_selection, highlight, reset_highlight, |, help"
  ,load_callback: "my_load"
  ,save_callback: "my_save"
  ,plugins: "charmap"
  ,charmap_default: "arrows"                 
});

Comments