Service
Snap.com은 Read/WriteWeb에 얼마전 소개된 사이트로 Snap.com에서 검색을 하는 경우 검색 리스트와 검색 결과의 preview를 제공하는 서비스를 제공합니다. 여기에 더해서 블로거나 회사에서 자신들의 페이지에 코드를 추가할 경우 이 preview를 무료로 사용가능하게 하는 서비스를 제공하고 있습니다. 
The Idea
이 서비스는 무료이기는 합니다. 그러면, Snap.com은 어떤 방법으로 수익을 창출할까요? Preview에 답이 있습니다. Preview안에는 작은 검색창이 존재하는데 이를 통해서 traffic을 얻는 방법을 사용하고 있습니다. 
Implementation
snap.com의 기본 코드는 prototype.js를 기본으로 하고 있습니다. snap.com의 코드를 추가하는 경우, 페이지 로딩 시 모든 anchor 태그를 읽어들이고 class가 snap_preview이거나 config가 '전체 anchor에 대해서 preview를 설정'으로 되어 있으면 여기에 preview가 붙을 수 있도록 Observer를 추가합니다.
preview의 경우에도 여러 겹의 div와 투명 png를 사용하여 출력하고 있습니다. snap.com의 코드들은 Obfuscating와 minifying 및 js, css페이지를 html확장자로 바꿔서 살펴보기 어렵게 되어 있더군요. 그래서.. 많이는 보지 못했습니다만, 향후 개발을 위해서인지 Widget 클래스가 존재하더군요.
코드를 보다 재미있는 것도 발견했는데요.
위처럼 gif파일에 필요한 아이콘을 모두 넣어서 배포하고 css상에서 이미지의 위치를 지정해서 필요부분만 출력시키는 형태를 취했습니다. 이런 방법이 있다는 것은 알고 있었지만~ 실제로 이런 형태로 전체가 구성되어 있는 코드를 보니 매우 재미있네요. ^^
출처:
P.S 1:
개인적으로 코드만 봐서든 느낌은 개발진의 역량이 뛰어나서 추후 나올 서비스가 상당히 기대되네요.
P.S 2:
남이 애써서 못보게하는 코드를 보는 나쁜 짓(?)에 죄책감을 느낍니다. (__)
P.S 3:
Snap.com에서 'Get Info Now' >'Get it Free Now'로 들어오게 되면 mail address와 주소를 넣고 라이센스 동의 페이지가 나옵니다.
가입을하고 나면 Script를 보여주는 페이지가 나옵니다. 여기에서 Script를 Copy해서 자신의 블로그 페이지에 삽입하면 됩니다. 저의 경우에는 Tatter tools의 Skin 페이지의 header에 삽입하는 방식으로 처리했습니다.(이전에 Google Map에 사용했을 때는 안되었는데.. 모르죠.. 다시 막을지도 ㅠㅠ)
댓글 없음:
댓글 쓰기