블로그 이미지
JEEN

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

Rss feed Tistory
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 486,660 TODAY 27

티스토리 툴바