블로그 이미지
JEEN

서울에 사는 꽃청년의 IT찌질모험기

Rss feed Tistory
IT/Perl 2009.10.11 01:03

[ Perl & Delicious Library 2 ] 그럼 이제 웹 브라우저에서 DL2 로!


  3연속 Delicious Library 2 에 대한 이야기로 계속되는 군요.
  이번에는 웹 브라우저 상에서 DL2 에 등록하는 이야기를 해보고자 합니다.

  2009/03/03 - [IT/Perl] - [ HTML5 & Perl ] HTML5 Drag And Drop API 를 건드려보기

  예전에 HTML 5 이야기를 하면서 간단하게 Drag And Drop 으로 TTB 링크를 만드는 이야기를 했었습니다. 이번에도 지난번 소스를 그대로 활용하도록 했습니다.

  방법은 로컬 웹서버를 띄웁니다. 그리고 알라딘 페이지를 iframe 으로 띄워놓고, 그 위에는 드롭존을 만들어놓습니다. wproduct.aspx?ISBN= 으로 시작하는 링크(주로 상품페이지로 가는 링크)를 끌어다가 회색 드롭존에 집어넣으면, AJAX 로 로컬 서버에 isbn 값을 넘겨주고, 서버에서는 DL2 에 추가해주는 것입니다.
 

  위의 그림은 간단한 프로토타입입니다. 생각하고 있는 기능은 많은 데, 디자인을 먼저 생각하니 답이 안나와서 그냥 드래그앤드롭으로만 가능하게 해놨습니다. 하지만 아무리 생각해봐도 뭔가 아름다운 방법은 아닙니다. Safari 는 애초 고려도 안하고 만들었으니까요.
  GreaseMonkey 나 Jetpack 같은 것도 생각해봤지만.. 이것도 브라우저 의존이 있는 얘기입니다.  FF 애드온도 생각해보고... 이래저래 아무래도 방법은 많겠지요.
  그래서 그 많은 방법들 중에서 가장 간단하게 내놓은 방법이 저것이었습니다. 사파리야 나중에 지원하면 되는 것이고...

  http://github.com/JEEN/Delicious-Library-2-for-Korean

  아무튼 소스는 이곳에 있구요. server.pl 로 로컬 섭을 띄우고 http://localhost:8080/ 으로 접속하실 수 있습니다. 나머지는 위에 설명대로 입니다.
  아무래도 디자인 공부도 좀 하고 해야겠습니다. ;ㅁ;

* 추기
- 사용을 위해서는 추가로 세가지 모듈을 추가해야합니다.
$ sudo cpan Template
$ sudo cpan HTTP::Engine
$ sudo cpan HTTP::Engine::Middleware
신고
IT/Perl 2009.03.03 19:53

[ HTML5 & Perl ] HTML5 Drag And Drop API 를 건드려보기


  작년쯤부터 HTML5 에 대한 구현 이야기가 슬슬 나돌다가, HTML5 에서는 Drag And Drop API 를 사용할 수 있다는 얘기를 접했습니다. 웹 페이지에서의 드래그 앤 드롭이라면 대개 div 태그에 어쩌구 저쩌구해서 HTML 적인 요소를 움직이는 드래그 앤 드롭을 생각하기 쉽지만, HTML5 에서는 외부 오브젝트를 그대로 긁어와서 해당 이벤트를 처리할 수 있게되는 것입니다.
  보통 플래쉬같은 것을 이용한 드래그 앤 드롭(예를들어, 티스토리의 사진 업로드 기능) 처럼, HTML5 API 를 사용해서 그런 일을 할 수 있게 되었다는 것이죠.

  일단 타겟을 정했다면 뭔가를 만들어 보는 것이 좋겠다는 생각에... 이제껏 주문은 한번도 한 적이 없지만, "왜 알라딘은 일본에서 접속이 안되나" 라고 따진 포스트를 쓴 적이 있었던 알라딘을 이용해서 간단한 기능을 만들어 보기로 했습니다.

  그 간단한 기능이란, 알라딘은 TTB, Thanks to Bloggers 라는 서비스가 있어서... 블로그에 TTB 링크를 달면, 해당 블로거에게도 일정 수입을 지급하며, 물론 TTB 링크를 타고 들어온 유저에게도 약간의 적립금을 주는 그런 서비스 입니다.

  그래서 이 TTB 를 이용하려면

  - (1) 알라딘 사이트에 간다.
  - (2) 서적 링크를 클릭한다.
  - (3) 서적 링크안에 포함된 블로그 링크를 클릭해서 리뷰가 쓰여진 블로그로 이동한다.
  - (4) 해당 블로그에서 TTB 링크를 클릭해서 서적 페이지로 돌아간다.
  - (5) 카트에 담으면 TTB 가 유효화 되며, 일정 적립금을 받을 수 있다.

 라는 절차를 거쳐야 합니다.

  그럼 이런 절차를 HTML5의 Drag And Drop API 를 이용해서 어떻게 간소화 시키느냐.

  - (1) 알라딘 사이트에 간다.
  - (2) 서적 링크를 드래그하면 자동으로 TTB 체크가 된 링크를 발행한다.
  - (3) 해당 링크를 클릭하면 자동으로 TTB 유효가 되며 적립금을 받을 수 있다.

  이런 식으로 간소화시킬 수 있습니다.
 

  뭐 디자인이고 뭐고 생각할 여유도 없고, 생각해봤자 이쁜 디자인을 만들어 낼리 만무하기 때문에... 디자인은 형편없습니다. iframe 하나랑, div 두개가 달랑(드롭존, TTB 유효화된 링크)이네요.

  어떤 처리를 하고 있느냐,
 
 - (1) 상품 링크를 긁어와서 드롭존에 떨구면, 이벤트 데이터를 뽑아냅니다. 여기에서는 text/html 의 데이터로는 기본으로 <a href="link">제목</a> 이 됩니다.
 - (2) 위의 text/html 데이터에서 링크만을 뽑아서 TTB 링크를 뽑아냅니다.
 --- (1) 서적 페이지에서 블로그의 리뷰가 있는 지 확인하고,
 --- (2) 리뷰가 있으면 해당 포스트에서 TTB 링크를 추출합니다.  (네이버 블로그는 제외합니다)
 --- (3) 추출한 링크를 JSON 으로 반환합니다.
 - (3) JSON 값이 있으면 TTB 링크를 생성합니다.

  ... 이와 같습니다. (2) 번의 처리는 주력언어인 Perl 로 구현하였으며, 코드는 아래와 같습니다.
 


  맘같아서는 디자인 좀 깔끔하게 해서, 이것저것 기능을 붙여보고 싶었지만.. 역시 귀차니즘이 문제네요.
  아, 그리고 가장 중요한 것은 Drag And Drop API 를 구현한 Safari 3(버젼을 모르겠네요;) 이상과 Firefox 3.1(지금은 베타2) 이상에서 동작을 확인했습니다.
  아무튼 HTML5 지원은 아직도 계속되고... 어지간한 브라우저에서 HTML5 를 지원하게 될 일은 언제일지는 모르겠지만.. 그때가 오면 좀 더 다양한 웹 서비스들이 탄생하지 않을까 생각되네요. 물론 RIA 어쩌고 하는 FLEX나 실버라이트 같은 쪽이 더 앞선 발전을 해나가고, 다양한 시도를 하겠지만요.
 
  # 추기
 : 아, URL 은 일부러 공개안했는데, 어떤 식으로 동작하는 지 역시 확인이 필요할 것 같아서... 공개합니다. 차후 혹시나 문제가 있다면 비공개로 전환하겠습니다.


 (계정은 쓰여있는 대로 입니다.) 드래그는 ~wproducts.aspx~ 같은 서적 링크만 취급합니다. 
신고
TOTAL 484,110 TODAY 28

티스토리 툴바