이번 회부터는 통상 모드로 돌아와서 진행합니다. (좌절)

야후! 위젯 엔진 두번째.
지난번엔 맨땅에 헤딩격으로 간단한 위젯을 만들어봤습니다.
사실 야후 위젯을 그다지 깊게 사용하지 않을 것 같아서 첫회에 얼렁뚱땅 대충 만들었는데 조금 더 제대로 사용해보고 싶은 마음이 들었습니다.

이번 회엔 야후! 위젯 엔진을 간략하게 소개하고 기본적인 구성을 연구해보도록 하죠.
※주의!
야후! 위젯 엔진과 관련된 모든 내용은 제 이해의 부족으로 잘못된 정보가 있을 수 있습니다.
야후! 위젯에 대한 정확한 정보는 http://kr.widget.yahoo.com 에서 확인하실 수 있습니다.
하지만 개발자라면 영문홈인 http://widget.yahoo.com 을 둘러보시길 적극 권장합니다.

◆ 야후! 위젯 엔진 준비
야후! 위젯 엔진(이하 위젯 엔진)을 만드려면 우선 위젯 엔진을 설치해야겠지요.
야후!의 위젯엔진 홈페이지에서 다운로드를 받아서 설치합니다.
단, 앞으로 제대로 개발을 해보고 싶다면 영문 홈에서 SDK를 다운받으시길 권장합니다.
한국 홈에는 SDK가 제대로 정리되어있지 않더군요.

위젯 엔진을 설치했으면 우선 기본으로 설치되어 있는 위젯들을 건드려보면서 어떤 유저 인터페이스를 제공하는지 느껴보는 것도 좋겠지요.

위젯을 개발하려면 소스 코드를 작성해야 할텐데요, 다음 절에서 얘기하겠지만 위젯 엔진은 XML과 자바 스크립트로 이루어져 있으므로 소스 코드는 순전히 메모장 만으로도 충분합니다.
물론 원활한 편집을 위해서는 손에 맞는 고급 텍스트 편집기가 있는게 편하겠죠. :)

위젯은 다른 무엇보다 UI가 중요합니다.
"아름답지 않으면 살아갈 의미가 없어...", 바로 이거죠.
그러기 위해선 제대로 된 이미지 편집기도 필요할 것입니다.
만약 포토샵 CS나 CS2를 사용하신다면 SDK에서 제공되는 포토샵 스크립트로 PSD파일을 바탕으로 자동으로 위젯을 만들수 있어 편리합니다.

정리하자면,
  • 야후! 위젯 엔진 SDK
  • 텍스트 편집기
  • 이미지 편집기
...만 있으면 위젯을 작성할 수 있습니다.


◆ 위젯 엔진의 구성

위젯 엔진은 기술적으로 다음과 같이 요약될 수 있습니다.
위젯 엔진은 Java virtual machine이나 Microsoft .NET Framework 처럼 일종의 플랫폼을 제공하고 있습니다.
이 플랫폼 위에 XML과 Java script를 통하여 작성되는 위젯이 구동된다고 볼 수 있지요.

※참고
위젯 엔진은 과거 Konfabulator라고 불렸고 최근 야후! 위젯 엔진으로 이름을 바꾸었는데요, 그런 이유로 아직까진 곳곳에 Konfab.의 흔적이 남아있습니다.
위젯은 XML과 Java script로 작성되므로 간단한 텍스트 편집기만으로도 쉽게 코드를 짤 수 있고 소스 코드의 공유도 자유롭습니다. 웹에서 HTML이나 간단한 자바 스크립트를 써보신 분이라면 이미 만들어진 위젯의 소스 코드를 보고 'Copy & Paste'신공만으로도 괜찮은 결과물을 만들어 낼 수 있다는 얘기지요.

위젯 작성에 필요한 소스 파일들은 보통 다음과 같은 디렉터리 구성으로 이루어집니다.

보통 개발 폴더명을 title.widget 이라고 짓고, 그 아래에 Contents 폴더가 위치하며 거기에 가장 중요한 파일인 .kon파일과 Resource나 외부 스크립트 파일 등이 위치합니다.

Contents 하부의 폴더나 파일은 편의에 따라 구성할 수 있지만 위젯 엔진 설치시에 기본으로 제공되는 위젯들은 모두 저런 구조로 구성되어 있으므로 다른 개발자를 위해서도 기본 형태를 따르는 것이 좋겠지요.

.kon 파일은 XML을 기반으로 작성되며 여기에 코드의 제어를 위해 자바 스크립트를 사용할 수 있습니다.
하지만, 자바 스크립트는 기본적인 math function 들과 위젯 엔진에서 제공되는 API의 범위 내에서만 제한적으로 사용 할 수 있기 때문에 무턱대고 웹에서 쓰던 코드를 그대로 가져오면 동작하지 않습니다. 항상 위젯 엔진 레퍼런스를 끼고 살아야겠지요. :)


◆ .kon 파일의 구성

.kon 파일은 XML 기반이므로 반드시 첫행에서 XML 규격에 대한 선언(?)을 해줘야 합니다.
<?xml version="1.0" encoding="UTF-8"?>
물론 텍스트 에디터에 따라 encoding이 바뀔 수 있겠지만 무리 없는 유니코드 지원을 위해서 UTF-8로 고정하는 것이 좋을 것입니다.

위젯의 사용을 위하여 모든 코드는 <widget></widget>태그 내에 위치해야 합니다.
마치 HTML 문서가 <HTML>로 시작하여 </HTML>로 끝나는 것과 같습니다.
<widget version="1.0.0" minimumVersion="2.0">
...
</widget>
이와 같은 태그 문법은 HTML에서부터 익숙하게 사용해왔으므로 직관적으로 이해할 수 있습니다.

위젯 엔진은 태그의 어트리뷰트와 관련하여 세 종류의 표현법을 모두 지원합니다.
예를 들어 이미지 개체에 대한 정보를 표현하는 <image>태그는 다음과 같이 표현될 수 있고 모두 동일한 결과를 보여줍니다.
파일 경로 : "Resources/My Image.png"
배치할 위치 : 20, 10

▒ 1. 태그 블럭 내에 어트리뷰트를 태그로 표현
<image>
  <src>Resources/My Image.png</src>
  <wOffset>20</wOffset>
  <hOffset>10</hOffset>
</image>

▒ 2. 태그내에 어트리뷰트를 기입
<image src="Resources/My Image.png"
  wOffset="20"
  hOffset="10" />

▒ 3. 1과 2의 방법을 혼합하여 사용
<image src="Resources/My Image.png">
  <wOffset>20</wOffset>
  <hOffset>10</hOffset>
</image>
특히 XML 해석 규정에 따라 두번째 방법처럼 하나의 태그가 여러 줄에 걸쳐 작성되어도 두 칸 이상의 공백은 무시되므로 상관없습니다.

위젯을 선언했으면 위젯을 보여줄 윈도가 있어야겠지요.
<window name="mainWindow" title="Widget01">
  <width>100</width>
  <height>100</height>
  <visible>1</visible>
</window>
윈도 개체는 <window>태그로 작성되며 사용자에게 뭔가 보여주기 위해선 반드시 하나 이상의 윈도가 있어야 합니다.
위 코드에서의 각 어트리뷰트는 다음과 같은 의미를 가집니다.
  • name : 이 윈도 개체의 식별명, 자바 스크립트에서 접근할 때 사용됨
  • title : 윈도의 제목. 단순히 제목이에요.
  • width : 윈도의 너비
  • height : 윈도의 높이
  • visible : 윈도를 보여줄지 여부 (1=보여줌, 0=숨김)
설명할 필요도 없이 간단한 내용입니다. 물론 이 외에도 많은 어트리뷰트를 가지고 있고 상세한 내용은 레퍼런스를 참고하면 되겠습니다.


◆ 첫 위젯!

자 그럼 아주 간단하게 이미지 한장을 덜렁 내놓는 위젯 코드를 작성해보죠.
메모장을 열고 Widget01.kon 파일을 생성하여 다음 코드를 복사합니다. 예제에 충실하기 위해 필요 없는 코드는 완전히 배제했습니다.
윈도의 크기 및 이미지 파일의 경로는 수정해주셔야겠죠?

▼List 02-1

물론 파일 저장 구조는 전 절에서 설명한 대로 아래와 같이 구성하면 좋겠지요.

그리고 Widget01.kon을 실행하면 다음과 같은 경고 문구가 나오는데 [위젯 사용]을 클릭하고 넘어갑니다.

첫 위젯이 구동됩니다!
제목은 '희미한 기억을 더듬어 그린 황제 펭귄의 새끼 그림의 희미한 기억을 더듬어 그린 그림'입니다.
볼 수록 마음이 불안해지는 멋진 그림이죠.
아후.

구동된 위젯을 이리저리 옮겨보기도 하고 마우스 오른쪽 클릭으로 위젯 메뉴를 사용해보기도 해보면 위젯 엔진이 기본으로 제공하는 윈도 관련 명령을 써먹을 수 있습니다. 아무런 노력도 없이!!

이제 위젯을 시작할 수 있습니다.
여기에 레퍼런스를 참고하여 태그들과 스크립트를 조합하면 간단하게 위젯을 만들 수 있습니다. 직접 해보세요. HTML만 알아도 된다니까요? ;)




간단하게 소개만 하려고 했는데 너무 길어졌습니다.
다음 회에는 1회에서 얼렁뚱땅 넘어갔던 예제에 좀 더 제대로 된 설명을 붙여보도록 하겠습니다. :)

p.s.
어째 글이 어중간한 느낌이네요.
사용기도 아니고 설명도 아니고 강좌도 아니고...
원래 글쓰기는 형편 없었으니까 그러려니 하고 회가 거듭된다면 더 나아지겠지요.
그리고 피드백이 있다면 더욱더!
신고
Posted by gongdo


티스토리 툴바