Daum Google 위젯=가젯 개발 경진대회 개최하는 걸 보고 Javascript로 뭔가 만들어 볼 수 있어 참가하기로 했다. 우선 응모작 주제를 정해야 했는데 한 2주정도는 고민한 것 같다. 처음엔 오픈소셜을 응용하여 구상을 해봤는데 Daum 위젯팩토리는 Google 가젯 API를 지원하지만 OpenSocial API는 아쉽게도 아직 지원하지 않았다. 응모작 기준은 Daum 위젯과 Google 가젯에서 동작이 가능해야 했다.
다시 고민하여 OpenAPI를 이용한 위젯을 구상하였데 또 약간의 고민이 생겼다. 보통 OpenAPI를 사용하려면 사용자 Key를 발급받아야 하고, 한 Key당 약 5000회 정도 요청 제한이 있다. 5000회 정도는 한 곳(프로그램)에서 사용하기 넉넉한 량이지만, 위젯은 수많은 블로그에서 등록되기에 그 요청량은 급격하게 늘어난다. 그래서 OpenAPI를 사용하여 만든 위젯을 배포할때 위젯을 퍼가는 사람들에게 API에 대한 Key를 발급받아 넣어주도록 해야한다. 또한 API를 여러개 사용하면 발급해야할 Key도 많아지는데 이렇게 된다면 상당히 번거로울 것 같다.
물론 좋은 위젯이라면 이러한 번거로움은 별 문제 없을것이고.. 이런 저런 생각을 하던 중 MediaWiki API가 생각났다. MediaWiki API를 이용하면 위키백과를 위젯으로 만들 수 있겠다는 생각이 들었고, MediaWiki API는 따로 인증 키를 발급 받을 필요도 없다!
MediaWiki는 위키백과를 위해 개발된 자유 소프트웨어 위키 패키지이다. 그러니까 위키백과는 MediaWiki로 만들어졌는데 MediaWiki 소프트웨어는 API를 제공하고 위키백과 또한 API를 제공한다. MediaWiki를 사용하면서 API를 제공하고 싶지 않으면 설정에서 변경할 수 있는걸로 알고 있다.
위키백과 API – http://ko.wikipedia.org/w/api.php
그래서 구상한 위젯은 ‘위키백과 지식상자’이다. 위키백과에 등록된 문서의 요약된 내용을 표시하고 관련된 문서를 지속적으로 계속 보여주어 사용자에게 위키백과의 유용한 지식을 전달하는 위젯이다.
이제 구현을 하는데 위키백과 문서의 요약된 내용을 표시하는데 문제가 생겼다. 위키백과 API에는 유용한 많은 정보를 제공하는 API가 있는데 정작 내가 원하는 문서 내용을 제공하는 부분이 없었다. 구글맵이나 Wikipedia Roll과 같은 위키백과를 이용한 매쉬업에서는 위키백과 문서의 내용을 표시한다. 어떻게 내용을 표시하나 궁금해서 찾아봤는데 위키백과:데이터베이스를 다운로드 받아 사용하는 것이었다. 하지만 이 데이터베이스를 받아서 운용할 서버가 없다. 방법을 찾다가 단순한 생각으로 위키백과 문서에 직접 접근하여 스크래핑하여 내용을 가져오려 했지만, 부적절한 방법인 것 같고 무엇보다 속도가 느려 다른 방법을 찾아야 했다. 어떻게 하면 위키백과 문서의 요약된 내용을 표시할 수 있을까 고민하던 중 마침 구글 검색이 떠올랐다. 모르는 용어를 구글에 검색하면 보통 위키백과에 등록된 문서의 내용의 일부분을 검색결과를 나타내고 이런 점을 응용하여 문제를 해결했다. Google AJAX Search API 이용해서ㅎㅎ
모든 기능과 외형을 개발하고 마지막으로 디자인이다. 원래 디자인 감각은 없어 디자인에 별로 신경쓰지 않지만 그래도 다른 사람들이 위젯을 퍼가기 때문에 조금은 신경써야 했다. 그래서 이미지를 넣어 디자인해보려 했는데 또 문제가 생겼다. 역시 위젯을 처음 만들어 보니까 참 문제도 많타-.- 위젯을 등록할때 xml 소스만 등록하기 때문에 이미지나 플래시는 내 계정에 올려야 하는데 내 홈페이지 계정에 올려서 나중에 트래픽 제한 걸릴 수가 있다. 당연히 트래픽 제한이 되면 위젯을 퍼간 사람도 문제가 생긴다. 넉넉한 계정을 가지고 있다면야 이미지를 사용하여 디자인 했겠지만 그냥 CSS만로 디자인했다. 사실 디자인 감각이 있었다면 계정 신경 안썼을텐데;;
디자인을 뭐 했냐고 할 수도 있겠는데 그래도 CSS가 179라인이다. 줄내림을 많이 했긴 했지만.. 쩝.. 그래도 가장 큰 특징은 위젯 박스 테두리를 둥글게 했다. CSS3에는 박스 테두리가 둥글게 표시하는 border-radius가 있지만 대부분의 브라우저에서는 지원을 안하니 약간은 트릭인 방법을 찾았다. 이 방법은 ‘css round box‘라고 검색하면 여러가지가 나오는데 Snazzy Borders를 조금 수정하여 사용했다.
자 이렇게 만든 ‘위키백과 지식상자’ 위젯=가젯이 다행히 1차 전문가 심사를 통과했다^^ 지금은 응모작 투표 진행중~
위키백과의 유익한 문서 내용을 간략하게 표시하여, 사용자에게 폭넓은 지식을 줄 수 있는 지식상자 위젯입니다. 시작 경로에 의해 설정된 용어를 시작으로 관련된 용어를 자동 탐색하여 지속적으로 표시합니다.