Windows Gadget에 대한 기본 이해

티스토리 뷰

💼 정보 ver1.0

Windows Gadget에 대한 기본 이해

James Wetzel 2010. 11. 25. 15:47

Gadgets
Windows Vista 사이드바 가젯 만들기
Donavon West

이 기사에서 다루는 내용:
사이드바 가젯의 구조
JavaScript 코딩 및 디버깅
플라이아웃 및 설정
지역화
이 기사에서 사용하는 기술:
Windows Vista, JavaScript

이 기사의 코드 다운로드: SidebarGadget2007_08.exe (181 KB)
온라인으로 코드 찾아보기
목차
사이드바 가젯이란?
XML 정의 파일
기본 HTML 파일
JavaScript
도킹된 가젯과 움직이는 가젯
플라이아웃
옵션 대화 상자
읽기 및 쓰기 설정
지역화
경고 및 확인 메시지
디버깅
가젯 패키징
MSDN Magazine 전광판

최근 가젯이 큰 관심사로 대두되면서, 가젯에 대해 한 번 정도는 들어본 경험이 있을 것입니다. 가젯이란 Windows Vista™ 바탕 화면 등에서 볼 수 있는 간단한 응용 프로그램입니다. 사실 Microsoft에서는 가젯을 세 가지 종류나 지원하고 있습니다. 우선 Windows Vista 바탕 화면에서 실행되는 사이드바 가젯이 있고, 사이드바 가젯과 비슷하지만 Live.com 및 Windows Live Spaces 페이지에서 실행되는 웹 가젯이 있습니다. 마지막으로 SideShow 가젯은 랩톱의 보조 디스플레이, 원격 제어 및 컴퓨터 키보드와 같은 장치에서 실행됩니다.
이 기사에서는 사이드바 가젯의 주요 부분을 설명하고 MSDN® Magazine 전광판이라는 Windows Vista 사이드바용 샘플 가젯을 만드는 과정을 통해 해당 요소가 어떻게 함께 작동하는지를 살펴봅니다. 여기서는 Windows Vista 사이드바 가젯 개발만 다루므로, "가젯"이라고 하면 사이드바 가젯을 말하는 것입니다. SideShow 가젯 개발에 대한 자세한 내용은 2007년 1월호 MSDN Magazine에서 Jeffrey Richter의 기사를 참조하십시오.

사이드바 가젯이란?
사이드바 가젯은 작지만 강력하고 유용한 도구가 될 수 있습니다. 반면에 만드는 방법은 놀라울 정도로 쉽습니다. HTML, CSS 및 JavaScript에 대한 지식만 있으면 문제 없이 만들 수 있으니까요. 이 정도의 지식은 독자 여러분이라면 이미 갖추고 있으리라 생각합니다.
가장 간단한 형태의 가젯은 HTML 파일 하나와 XML 정의 파일 하나만으로도 만들 수 있습니다. 물론, 대부분의 가젯에는 이미지 파일(PNG 및 JPG), 스타일 시트(CSS), 스크립트(JavaScript 및 VBScript 소스 파일) 등의 파일도 포함됩니다. 이러한 모든 내용은 .gadget 확장명으로 이름이 변경된 ZIP 파일에 저장됩니다. 따라서 원하는 경우 온라인에서 가젯을 가져온 다음 .zip 확장명으로 이름을 바꾸면 내용을 쉽게 살펴볼 수 있습니다. 다른 가젯이 어떻게 만들어져 있는지를 살펴볼 수 있는 좋은 기회가 될 것입니다.

XML 정의 파일
XML 정의 파일 또는 매니페스트는 가젯을 한데 묶는 접착제와 같습니다. 사실 이 파일에는 기본 HTML 파일(이 파일에 다른 파일에 대한 링크가 있음), 몇 가지 아이콘 파일 및 가젯을 만든 사람의 웹 사이트에 대한 링크만 있고 가젯의 모든 파일에 대한 링크가 포함되어 있는 것은 아니기 때문에 이 파일을 매니페스트라고 할 수 있을지 의문이 듭니다.
그림 1에는 일반적인 구조 XML 정의 파일이 나와 있습니다. 그림에서 보듯이 이 파일은 기본 가젯 요소로 만들어진 표준 XML 파일입니다. 가젯에서 가장 중요한 요소는 다음과 같습니다.
Figure 1 일반적인 XML 정의 파일
코드 복사 <?xml version=”1.0” encoding=”utf-8” ?>
<gadget>
<name>Gadget Name Here</name>
<namespace>YourCompanyNameHere</namespace>
<version>1.0.0.0</version>
<author name=”Company Name Here”>
    <info url=”http://contoso.com” text=”Vist our Web site” />
    <logo src=”logo.png” />
</author>
<copyright>© 2007</copyright>
<description>your gadget description</description>
<icons>
    <icon width=”64” height=”64” src=”icon.png” />
</icons>
<hosts>
    <host name=”sidebar”>
      <base type=”HTML” apiVersion=”1.0.0” src=”gadget.html” />
      <permissions>full</permissions>
      <platform minPlatformVersion=”0.3” />
    </host>
</hosts>
</gadget>

name: 가젯의 제목입니다.
version: 가젯의 버전 번호입니다.
author: 만든 사람 또는 회사의 이름입니다.
info url: 웹 사이트 주소입니다.
info text: 웹 사이트를 설명하는 이름입니다.
logo src: 회사 로고 이미지 파일의 이름입니다.
copyright: 저작권 표시입니다.
description: 가젯에 대한 설명입니다.
icon src: 가젯의 아이콘 이미지 파일 이름입니다.
base src: 가젯의 기본 HTML 파일 이름입니다.
정의 파일에 포함된 요소는 대부분 갤러리에 가젯을 표시하는 데 사용됩니다. 그 중 진정한 기능 요소는 기본 요소의 src 특성뿐입니다. HTML 파일의 이 지점에서 가젯 실행이 시작되는 것입니다. 여기에서는 연습을 위해 이 파일 이름을 gadget.html로 지정했지만 유효한 형식이라면 어떤 이름이라도 사용할 수 있습니다.

기본 HTML 파일
가젯은 최대 130픽셀 너비의 HTML 페이지로 구현됩니다. 쉽게 이해되지는 않겠지만 XML 정의 파일에서 참조되는 기본 HTML 파일은 실제로 Internet Explorer® 7 창에 로드됩니다. 물론 이 창은 특별할 것도 없고, 위치는 사이드바에 의해 제어되지만 창의 내용은 본질적으로 웹 응용 프로그램일 뿐입니다. 따라서 표준 웹 페이지와 마찬가지로 DOM과 대부분의 API에 액세스할 수 있습니다. 이는 AJAX 기술을 사용할 수 있고 동적 HTML 요소, 트랩 이벤트 등도 만들 수 있음을 의미합니다. 여기에서는 샘플 가젯을 만드는 과정을 통해 이러한 모든 내용을 살펴보도록 하겠습니다.
사이드바 가젯 개체 모델에서 제공되는 API를 사용할 수도 있습니다. 이러한 API를 사용하면 가젯이 시스템과 상호 작용할 수 있습니다. 예를 들어 무선 네트워크 카드의 신호 강도를 읽거나, 사운드 파일을 재생하거나, CPU 사용량을 확인하는 등의 기능을 구현할 수 있습니다.
가젯의 HTML을 살펴보면 일반 웹 페이지의 HTML 코드와 전혀 차이가 없음을 알 수 있습니다. 필자는 사이드바 가젯 프로젝트를 시작할 때 일반적으로 다음 코드를 사용합니다.
코드 복사 <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
   “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
   <title></title>
   <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8” />
   <link href=”style.css” rel=”stylesheet” type=”text/css” />
   <script src=”local.js” type=”text/javascript”></script>
   <script src=”gadget.js” type=”text/javascript”></script>
</head>
<body>
   <div id=”gadget” class=”gadget”></div>
</body>
</html>
이 샘플에서 가젯의 모든 HTML 코드는 gadget.js JavaScript 파일 내에서 동적으로 작성되었습니다. 기본 HTML 파일에 대부분의 태그를 포함할 수도 있지만 그러면 흥미로운 결과를 얻기는 힘들 것입니다.
이 샘플 코드에는 CSS 스타일 시트가 사용되었습니다. 이 스타일 시트는 가젯의 모양을 구현합니다. 일반 웹 페이지와 마찬가지로 가젯을 세련되게 디자인하는 데에도 스타일 시트가 중요한 역할을 합니다. 따라서 전문적으로 보이는 가젯을 만들려면 CSS에 대한 이해가 필수적입니다.
가젯의 기본 HTML 파일 개발은 온라인으로 배포되는 페이지를 작성하는 것과 완전히 같을 뿐만 아니라, 가젯 구현 시에는 브라우저 간 호환 문제를 걱정할 필요가 없다는 이점도 있습니다. 가젯은 항상 Internet Explorer에서 실행되므로 기본 PNG 알파 지원 등 Internet Explorer에서 지원되는 기능을 활용할 수 있으며, 브라우저 호환성을 제공하기 위해 코드를 작성할 필요가 없습니다.
처음 사이드바 가젯 개발을 시작했을 때에는 이러한 사실이 무척 신선하게 느껴졌습니다. 그러나 시간이 지나면서 당연한 것으로 생각하게 되었고, 최근에 웹 페이지를 디자인할 때는 브라우저 간 호환성 문제를 다시 고려해야 한다는 데 화가 나기도 했습니다.

JavaScript
가젯을 보다 흥미롭게 만들려면 JavaScript 코딩 작업이 필요합니다. Internet Explorer 7에서 지원되는 스크립팅 언어는 모두 사용할 수 있지만 인터넷에 있는 대부분의 가젯은 JavaScript로 작성되어 있습니다.
JavaScript 작업 경험이 있다면 "eval is evil"이라는 말을 한 번쯤은 들어봤을 겁니다. 처음 듣는다면 지금 온라인에서 검색해 보십시오. 금방 무슨 의미인지 알아낼 수 있을 테니까요.
자, 이제 eval을 사용해서는 안 되는 이유는 알았을 테니, 여기에 덧붙여 HTML의 특성에 JavaScript 텍스트를 넣거나 setInterval 또는 setTimeout에 문자열을 전달해서는 안 된다는 규칙을 설명하도록 하겠습니다. 여기서 HTML의 특성에 JavaScript 텍스트를 넣지 말라고 하는 데에는 본문 onload 특성도 포함됩니다. 이 특성은 내부적으로 eval 문과 동일하게 해석되기 때문입니다.
"onload 특성을 사용하지 않으면 코드를 어떻게 실행하느냐"고 말하는 독자도 있을 것입니다. 그런 독자에게는 창 개체의 onload 이벤트에 함수를 연결하는 습관을 들이라고 말하고 싶습니다. 다음은 onload 및 onunload 이벤트에 연결하는 방법을 보여 주는 코드 조각입니다.
코드 복사 function pageLoad() {
    window.detachEvent(“onload”, pageLoad);
    window.attachEvent(“onunload”, pageUnload);
    //page initalization here
}

function pageUnload() {
window.detachEvent(“onload”, pageUnload);
//gadget is closing, clean up
}

window.attachEvent(“onload”, pageLoad);
이 경우 페이지가 로드되고 나서 일정 시간이 지난 후(DOM 완료 후)에 pageLoad 함수가 호출됩니다. 코드에서 보듯이 pageLoad에서 가장 먼저 한 일은 이벤트를 분리하는 것입니다. 메모리 누수를 방지하려면 JavaScript에서 항상 코드를 정리하는 것이 좋습니다.
다음으로 사용자가 가젯을 닫거나 사이드바를 종료할 때 호출되는 onunload 이벤트를 설정했습니다. 이 조치도 메모리 누수의 원인이 될 수 있는 참조를 해제하기 위한 것입니다. 필요한 설정을 저장할 수 있는 마지막 기회이기도 합니다. 설정에 대해서는 이 기사의 뒷부분에서 설명하도록 하겠습니다.
지금쯤이면 필자가 뛰어나고 깔끔한 JavaScript를 작성하는 데 있어서 상당히 까다롭다는 사실은 눈치챘을 테니 한 번만 더 까다롭게 구는 것을 양해 바랍니다. 다름이 아니라 코드를 배포하기 전에 Lint 도구를 사용하여 검사하는 것이 좋다는 말을 하려고 합니다. 그러면 코드가 향상될 뿐만 아니라 발생할 수 있는 버그를 사전에 제거할 수도 있습니다.
Lint는 원래 C 소스 코드에서 문제가 있는 영역을 표시하는 도구 이름이었지만 지금은 여러 가지 소스 언어에서 일반적으로 사용되고 있습니다. JavaScript용 Lint 응용 프로그램 중 꽤 뛰어난 JSLint라는 무료 온라인 도구를 www.jslint.com에서 다운로드할 수 있습니다.
2007년 5월호 MSDN Magazine에는 Ray Djajadinata가 쓴 "개체 지향 기술을 이용한 고급 웹 응용 프로그램 만들기"라는 유익한 JavaScript 관련 기사가 실려 있습니다. 개체 지향 기술을 기반으로 한 고급 웹 응용 프로그램 개발 경험이 없다면 한번 읽어보시기 바랍니다. 이 기사는 가젯을 더 효과적으로 개발하는 데에도 큰 도움이 됩니다.

도킹된 가젯과 움직이는 가젯
사이드바에 가젯을 붙여 놓으면 도킹된 상태가 됩니다. 반면, 바탕 화면으로 끌어내면 움직이는 상태 또는 도킹 해제된 상태가 됩니다. 앞서 언급한 바와 같이 도킹된 가젯의 최대 너비는 130픽셀이지만, 도킹 해제된 가젯에는 너비의 제한이 없으므로 확장된 보기를 디자인할 수 있습니다. 확장된 공간은 보다 기능이 다양한 사용자 환경을 제공하는 데 이용할 수 있습니다. (Microsoft는 도킹 해제된 가젯의 크기가 가로 세로 400픽셀을 넘지 않도록 권장하고 있습니다.)
그림 2에는 필자가 만든 MSDN Magazine 전광판 가젯과 날씨 가젯이 도킹된 상태와 움직이는 상태로 나와 있습니다. 전광판은 최신 기사부터 차례로 기사 헤드라인이 스크롤되는 가젯이고, 날씨 가젯은 Windows Vista와 함께 제공되는 기본 가젯입니다. 특히 현재 기온만 표시되다가 3일간의 자세한 기상 예보까지 보여 주는 날씨 가젯은 도킹 해제된 상태에서 다양한 환경을 제공하는 가젯의 대표적인 예입니다. MSDN Magazine 전광판 가젯의 경우에는 도킹되더라도 추가 정보가 표시되지는 않고 동일한 정보가 더 넓은 형식으로 표시됩니다.

그림 2 도킹된 가젯과 움직이는 가젯 (더 크게 보려면 이미지를 클릭하십시오.)관련 문서 어디에도 설명되어 있지는 않지만 도킹 여부에 관계없이 가젯의 최소 높이는 57픽셀로 제한됩니다. 이는 가젯이 움직이는 상태일 때 도구 모음의 높이가 57픽셀이기 때문입니다(그림 3 참조).

그림 3 System.Gadget.docked를 사용하면 가젯의 현재 상태를 쿼리할 수 있습니다. 가젯이 도킹되어 있으면 true 값이 반환되고 그렇지 않으면 false 값이 반환됩니다. 이외에도 System.Gadget.onDock과 System.Gadget.onUndock이라는 두 가지 이벤트를 모니터링함으로써 도킹 상태 변경을 확인할 수도 있습니다.
단순히 onDocked 또는 onUndocked 이벤트에서 document.body 클래스를 변경하는 방법으로는 가젯의 높이, 너비 또는 배경 이미지를 바꿀 수 없습니다. (더구나 이는 필자가 초반에 언급한 기대와도 정면으로 배치됩니다.) 대신 body 요소의 스타일 개체 속성을 별도로 설정해야 합니다. 배경 이미지를 변경하려면 System.Gadget.backgroun API를 사용하여 배경 이미지의 파일 이름을 설정합니다. 다음은 이에 대한 예입니다.
코드 복사 // called when the docked state changes
function dockStateChanged() {
    if (System.Gadget.docked) {
        System.Gadget.background = “images/background.png”;
        document.body.style.width = “130px”;
    } else {
        System.Gadget.background = “images/background-undocked.png”;
        document.body.style.width = “230px”;
    }
}

플라이아웃
플라이아웃은 가젯의 사용자 인터페이스를 가젯 테두리 외부로 확장합니다. 플라이아웃 창의 최대 크기에는 제한이 없으므로 원하는 인터페이스를 자유롭게 구현할 수 있습니다. 플라이아웃을 사용한 가젯의 대표적인 예로 Windows Vista와 함께 제공되는 주식 가젯을 들 수 있습니다. 주식 종목을 클릭하면 가젯의 측면에 창이 열리면서 주식 거래 현황이 그래프로 표시됩니다(그림 4 참조). Live Search 가젯에도 입력한 쿼리의 검색 결과를 표하는 데 플라이아웃이 사용됩니다. 그림 5는 MSDN Magazine 전광판 가젯의 플라이아웃을 보여 줍니다. 헤드라인을 클릭하면 도킹된 가젯에서 UI가 확장되어 기사 제목, 설명 및 만든 이의 이름이 표시됩니다.

그림 4 플라이아웃이 표시된 주식 가젯 (더 크게 보려면 이미지를 클릭하십시오.)
그림 5 플라이아웃이 표시된 전광판 가젯 (더 크게 보려면 이미지를 클릭하십시오.)사이드바 가젯 플라이아웃은 한 번에 하나만 표시할 수 있는 시스템 모달입니다. 즉, 사용자가 가젯 A를 클릭하면 플아이아웃이 나타나고, 다시 가젯 B를 클릭하면 다른 플라이아웃이 나타나면서 가젯 A의 플라이아웃은 닫힙니다. 또한 가젯에서 다른 곳으로 포커스를 이동해도 플라이아웃이 닫힙니다.
플라이아웃 API는 System.Gadget.Flyout 개체에서 제공됩니다. 그리고 플라이아웃은 고유 DOM을 사용하며 기본 HTML 창과 완전히 격리된 창에 표시됩니다. 따라서 별도의 플라이아웃 HTML 파일을 다른 지원 파일과 함께 제공해야 합니다. 플라이아웃 파일은 System.Gadget.Flyout.file을 플라이아웃 HTML 파일의 이름으로 설정하여 지정합니다.
기본 창과 플라이아웃 창 간의 통신을 지원하는 System.Gadget.Flyout.document라는 API를 사용할 수 있습니다. 이 API는 플라이아웃 창의 Document 개체를 반환합니다. 반환된 개체를 기본 가젯 창에서 사용하면 플라이아웃 창의 HTML을 동적으로 생성할 수 있습니다.
기본 코드와 플라이아웃 코드를 모두 캡처하는 이벤트도 사용할 수 있습니다. 그 중 onShow 이벤트는 플라이아웃 문서가 생성된 직후에 호출되며 onHide 이벤트는 플라이아웃 문서가 소멸되기 직전에 호출됩니다.
System.Gadget.Flyout.show를 true 또는 false로 설정하면 각각 플라이아웃을 프로그래밍 방식으로 표시하거나 숨깁니다. 또한 이 값을 읽어 플라이아웃 창의 현재 상태를 확인할 수 있습니다.
플라이아웃의 위치는 제어할 수 없습니다. 화면에 남아 있는 빈 공간에 따라 사이드바에서 자동으로 위치를 결정하여 가젯을 배치합니다. 예를 들어 플라이아웃은 가젯의 왼쪽이나 오른쪽, 또는 아래쪽에 표시될 수 있습니다.

옵션 대화 상자
옵션 대화 상자를 통해 사용자에게 여러 가지 가젯 기본 설정을 제공할 수 있습니다. 이 대화 상자의 사용자 환경은 거의 제한 없이 자유롭게 구현할 수 있습니다. 즉, 일반 웹 페이지와 마찬가지로 라디오 단추, 확인란, 텍스트 상자 등을 사용할 수 있습니다.
가젯 위로 커서를 이동했을 때 표시되는 도구 모음의 렌치 아이콘(그림 3 참조)을 클릭하면 옵션 대화 상자에 액세스할 수 있습니다. 사용자가 가젯의 옵션 대화 상자를 열면 사이드바에서 가젯의 스냅숏을 캡처하여 작은 아이콘(그림 6 참조)으로 표시합니다.

그림 6 옵션 대화 상자 이 대화 상자의 이름과 관련하여 다소 모호한 부분이 있다는 점을 지적하고 싶습니다. 가젯을 마우스 오른쪽 단추로 클릭하면 가젯 UI에 이 메뉴가 "옵션"으로 나타나지만 API에는 "설정"으로 표시되기 때문입니다.
필자는 사용자 설정이 보다 최신의 XML 파일이 아니라 1990년경에 개발된 INI 파일에 저장된다는 사실을 알았을 때 다소 놀랐습니다. 다행히 설정을 읽고 쓰는 가젯 API가 있으므로 개발자나 응용 프로그램에 있어서 설정 저장 방식은 크게 문제가 되지 않습니다.
옵션 UI를 만들 때에는 주의할 점이 몇 가지 있습니다. 대화 상자의 사용자 영역은 최대 300픽셀로 제한됩니다. 높이 제한은 없지만 Windows Vista 가젯에 대한 Microsoft UX 가이드에서는 최대 너비를 278픽셀, 그리고 최대 높이를 400픽셀로 권장하고 있습니다. 따라서 권장 크기 이상의 공간이 필요하면 탭 대화 상자를 만들어야 합니다. 이 기사에서는 탭 UI 구현 방법에 대해 다루지 않지만 웹에 수많은 관련 리소스가 있으므로 쉽게 배울 수 있으리라 생각합니다.
가젯에 옵션 아이콘을 사용하도록 알려야 합니다. 구체적으로 설명하면 대개 스크립트의 가젯 초기화 영역에서 System.Gadget.settingsUI를 HTML 파일의 이름으로 설정해야 합니다. 또한 옵션 대화 상자를 닫을 때 가젯에서 새 사용자 기본 설정을 읽을 수 있도록 콜백 함수도 설정해야 합니다. 콜백 함수를 설정하려면 다음과 같이 System.Gadget.onSettingsClosed를 처리기의 이름으로 설정하면 됩니다.
코드 복사 System.Gadget.settingsUI = “settings.html”;
System.Gadget.onSettingsClosed = settingsClosed;

function settingsClosed(p_event) {
    //OK clicked?
    if (p_event.closeAction == p_event.Action.commit) {
        //yes, read settings here
    }
}
이 예에서 보듯이 처리기가 호출되면 System.Gadget.Settings.ClosingEvent라는 이벤트 개체로 전달됩니다. 이때 ClosingEvent 개체의 closeAction 속성의 값이 commit이면 사용자가 확인을 선택한 것이므로 새 설정을 읽어야 합니다. 그렇지 않으면 옵션 대화 상자가 취소된 것이므로 기본 설정을 읽지 않아도 무방합니다.

읽기 및 쓰기 설정
설정은 System.Gadget.Settings.write 또는 System.Gadget.Settings.writeString을 사용하여 기록됩니다. 이 두 함수는 모두 키/값 쌍을 전달 받습니다.
반대로 설정을 읽을 때는 System.Gadget.Settings.read 또는 System.Gadget.Settings.readString이 사용됩니다. 이 둘은 모두 키를 받아 값을 반환하는 함수입니다. 키가 기록되지 않은 등의 경우처럼 키가 존재하지 않으면 두 함수 모두 undefined 값을 반환합니다.
JavaScript는 엄격한 형식의 언어가 아닐 뿐만 아니라, 쓰기 및 읽기를 사용하면 사이드바에서 형식 변환을 시도합니다. 따라서 어떤 형식의 데이터가 쓰고 읽히는지를 명확히 하려면 데이터를 문자열로 간주하는 writeString 및 readString을 사용하는 것이 좋습니다. 그리고 해당 데이터 형식에 따라 최선의 방법을 찾아야 합니다.

지역화
사이드바 가젯은 "지역화된 폴더"를 통해 지역화를 지원합니다. 가젯 매니페스트, 스타일 시트, 이미지 파일, JavaScript 파일 등의 자산을 로드할 때마다 사이드바는 다음 순서로 폴더에서 파일을 검색합니다.
전체 로캘(en-us, es-us, ko-kr)
로캘의 언어 부분(en, es, ko)
가젯 루트 폴더
예를 들어 미국 버전의 Windows Vista를 실행하는 경우 스페인어로 기본 설정하면 사이드바에서 먼저 es-us 폴더를 검색합니다. 이 폴더에서 파일을 찾지 못하면 다음으로 es 폴더를 검색합니다. 그리고 이 폴더에서도 파일을 못 찾으면 마지막으로 가젯 루트 폴더를 검색합니다.
언어가 중요한 것은 두말할 필요도 없지만 지역이 문제가 되는 이유는 무엇일까요? 사실 일부 가젯의 경우 지역이 매우 중요합니다. 날씨 가젯을 예로 들면, 미국과 영국에서 모두 맑음으로 표시될 수 있지만, 기온이 지역에 따라 화씨(미국) 또는 섭씨(영국)로 표시되기 때문입니다.
가젯에서 특정 언어만 지원하려는 개발자도 많겠지만, 로캘이 중요한 의미를 가지는 가젯이라면 언어에 따라 영향을 받는 문자열과 지역별 변수를 가젯 루트 폴더의 local.js라는 단일 JavaScript 파일에 넣어 두는 것이 좋습니다. 그리고 지원하려는 각 로캘별로 폴더를 만들고 번역된 버전의 local.js 파일을 해당 폴더에 넣으면 됩니다. 다음은 en-us를 나타내는 루트 폴더의 local.js 파일 예입니다.
코드 복사 var L_Hello = “Hello”;
var L_Degrees = 0;
반면, \es-es 폴더에 있는 local.js 파일은 다음과 같습니다.
코드 복사 var L_Hello = “Hola”;
var L_Degrees = 1;
이 경우 Hello라는 문자열을 표시하려면 하드코딩된 문자열 대신 L_Hello라는 변수를 사용해야 합니다. 그리고 날씨 피드를 쿼리할 때에는 L_Degrees 변수를 사용하여 적절한 형식을 요청합니다. 결과적으로 올바른 언어의 인사말이 나타나고 사용자의 기본 설정에 따라 기온이 표시됩니다. 기본 JavaScript 코드에서 문자열을 사용하거나, 사용할 온도 단위를 결정할 때에는 다음과 같이 코드를 작성하게 됩니다.
코드 복사 element.innerHTML = L_Hello;
if (L_Degrees === 0) {
//load the Fahrenheit feed
} else {
//load the Celsius feed
}
여기서 보듯이 사이드바에 로드되는 local.js 파일에 따라 코드의 동작이 달라집니다. 멋지지 않습니까?
지원되지 않는 로캘을 사용하더라도 가젯 루트의 local.js 파일을 사용하여 가젯이 작동합니다. 단, 이 경우 해당 언어가 아니라 대체 언어(이 예의 경우 영어)가 사용됩니다. 따라서 가젯의 루트 폴더에서 기본 언어를 지원하는 것이 매우 중요합니다. 기본 언어를 지원하지 않으면 가젯에서 지원되지 않은 언어(하위 폴더를 만들지 않은 언어)를 사용하는 사용자에게는 빈 문자열만 표시될 테니까요.

경고 및 확인 메시지
누구나 웹 사이트를 검색하는 중에 "잘못 입력했습니다. 다시 입력하십시오."라는 경고나 "기록이 삭제됩니다. 계속하시겠습니까?"라는 확인 대화 상자를 한 번쯤은 본 적이 있을 것입니다. 개발자는 이러한 팝업 정보 메시지를 자주 사용합니다.
그러나 사이드바에는 이러한 JavaScript 기능을 사용할 수 없습니다. 게다가 팝업 대화 상자 사용은 사이드바 가젯에 대한 Windows Vista UX 지침에도 위배됩니다. 그래도 부득이하게 팝업을 사용해야 한다면 이러한 기능을 에뮬레이트하면 됩니다.
이를 위해서는 먼저 다음과 같이 HTML의 머리글 요소에 한 줄로 이루어진 간단한 태그를 삽입합니다.
코드 복사 <script src=”alert.vbs” type=”text/vbscript”></script>
그리고 그림 7에 나와 있는 코드를 포함한 파일을 만들어 이름을 alert.vbs로 지정합니다. 그러면 경고 및 확인 메시지를 자유롭게 사용할 수 있습니다.
Figure 7 경고 및 확인 메시지 에뮬레이트
코드 복사 ‘simulate JavaScript alert() function
sub alert(prompt)
MsgBox prompt, 48 , “Sidebar Gadget”
end sub

‘simulate JavaScript confirm() function
function confirm(prompt)
    dim res
    res = MsgBox (prompt, 33, “Sidebar Gadget”)
    if res=1 then
        confirm = true
    else
        confirm = false
    end if
end function

디버깅
JavaScript 디버깅은 언제나 쉽지 않은 문제입니다. 개발자들은 코드에 경고를 삽입하는 방식으로 특정 변수 값을 표시하는 경우가 많습니다. 그러나 이는 세련된 해결 방법이라고 할 수 없습니다. Visual Studio® 또는 무료로 제공되는 Visual Web Developer™ 2005 Express Edition을 사용하면 훨씬 효과적인 방법으로 이를 구현할 수 있습니다.
변수 값을 확인해야 하는 곳마다 디버거 문을 삽입하고 가젯을 실행하면 됩니다. JavaScript에서 디버거 문이 실행되면 응용 프로그램을 디버깅할지 여부를 묻는 팝업 메시지가 나타납니다(그림 8 참조). 이때 예를 선택하면 DOM을 비롯한 전체 가젯 환경을 탐색하고 생성된 모든 변수의 값을 볼 수 있습니다. 그 동안 가젯은 기본적으로 정지됩니다.

그림 8 가젯 디버깅 여부를 묻는 대화 상자 (더 크게 보려면 이미지를 클릭하십시오.)그림 9에는 refreshRate 변수의 값이 24인 디버깅된 코드 섹션이 나와 있습니다. 이러한 형태의 디버깅은 매우 강력한 기능을 제공합니다. 한 번만 사용해 보면 다시는 경고 문으로 코드를 어지럽히는 방법을 사용하지 않게 될 것입니다. 이러한 JavaScript 디버깅은 코드 이름 "Orcas"라는 Visual Studio의 다음 버전에서 매우 중요한 요소가 됩니다. 이 새로운 기능에 대한 자세한 내용은 Visual Web Developer Orcas에서 JScript 디버깅에서 확인할 수 있으며, msdn2.microsoft.com/aa700831에서 "Orcas" 베타 1을 다운로드할 수 있습니다.

그림 9 Visual Studio에서 가젯 디버깅 (더 크게 보려면 이미지를 클릭하십시오.)

가젯 패키징
패키지를 만드는 가장 간단한 방법은 Windows 탐색기를 사용하는 것입니다. 가젯을 구성하는 파일을 선택하고 마우스 오른쪽 단추를 클릭한 후 보내기 | 압축(ZIP) 폴더만 선택하면 되니까요.
또한 Microsoft 기본 압축 보관 형식인 CAB 파일로 가젯을 패키징할 수도 있습니다. 이 경우에는 CAB 파일을 생성한 다음 .gadget 확장명을 사용하여 이름을 바꾸면 됩니다. .zip 확장명으로 .gadget 파일의 이름을 바꾸면 Windows 탐색기에서 해당 ZIP 파일을 열 때 경고 메시지가 나타나고 .cab 확장명으로 다시 이름이 바뀝니다.
프로그래밍 방식으로 가젯을 만들 경우 몇 가지 다른 방법도 사용할 수 있습니다. 필자는 프로젝트를 진행할 때 make.bat라는 다음 배치 파일을 만드는 방법을 사용했습니다.
코드 복사 @echo off

rem ** remove/create a test gadget folder
rd “%LOCALAPPDATA%\Microsoft\Windows Sidebar\
Gadgets\MSDNSample.gadget\” /s /q
md “%LOCALAPPDATA%\Microsoft\Windows Sidebar\Gadgets\MSDNSample.gadget\”

rem ** copy all of the files into test area
xcopy . “%LOCALAPPDATA%\Microsoft\Windows Sidebar\
Gadgets\MSDNSample.gadget\” /y /s /q /EXCLUDE:exclude.txt

cd “%LOCALAPPDATA%\Microsoft\Windows Sidebar\Gadgets\MSDNSample\”
cabarc -r -p n “%HOMEPATH%\Documents\MSDNSample.gadget” *
이 파일은 Cabarc.exe 유틸리티를 사용하여 CAB 파일을 생성합니다. Cabarc.exe는 Visual Studio와 함께 설치되는 무료 Microsoft 도구이며, support.microsoft.com/kb/310618에서 Cabinet SDK의 일부로서 별도로 다운로드할 수도 있습니다.
다음으로 필자는 외부 도구로 설정한 make.bat를 Visual Studio 2005에서 실행했습니다. 이 배치 파일은 가젯 설치 시에 가젯이 생성되는 사용자 가젯 폴더 아래에 폴더를 만들어 모든 가젯 파일을 새 폴더에 복사합니다. 또한 배치 파일을 실행하면 배포가 가능한 .gadget 파일이 생성되어 Documents 폴더에 저장됩니다. 이 방법을 사용하면 .gadget 파일을 두 번 클릭하여 개발 컴퓨터에 가젯을 설치할 필요가 없습니다. Visual Studio 프로젝트 폴더에 가젯과 함께 패키징하지 않을 Photoshop PSD 파일 등의 다른 소스 파일을 두어도 문제가 없으므로 개인적으로 이 방법을 좋아합니다. 단, 이 경우 패키지에서 제외할 파일의 이름을 exclude.txt 파일에 추가해야 합니다.

MSDN Magazine 전광판
가젯의 기본 구성 요소에 대한 설명은 모두 마쳤으니, 이제 지금까지 배운 내용의 전체적인 이해를 도울 샘플 가젯을 살펴보도록 하겠습니다. 여기서 소개하는 MSDN Magazine 전광판 가젯을 다운로드하여 설치하거나 내용을 살펴볼 수 있습니다.
필자는 사이드바 가젯의 주요 기능(플라이아웃, 도킹된 상태 및 움직이는 상태, 옵션, 지역화 등)을 모두 활용한 샘플 가젯을 만들고 싶었습니다. 그러나 동시에 최대한 단순하게 만들고 싶기도 했습니다. 물론, 유용한 가젯이어야 하는 것은 말할 필요도 없겠지요.
이러한 가젯을 만들기 위해 착안한 것이 뉴스 헤드라인을 표시하는 RSS 수집기였습니다. MSDN Magazine 기사용 가젯이므로 Magazine의 최신 호의 모든 기사에 해당하는 RSS 피드(msdn.microsoft.com/msdnmag/rss/rss.aspx에서 제공)를 사용하는 것이 당연해 보였습니다. 뉴스, 스포츠 헤드라인 등의 피드 또는 하나의 데이터 원본을 구성하는 여러 피드를 사용한다면 매우 동적이고 유익한 가젯을 만들 수 있을 것이라는 생각이었습니다.
Windows Vista 사이드바에서는 피드 헤드라인 가젯을 이미 기본 제공하고 있습니다. 하지만 필자의 샘플 가젯이 특별한 이유는 바로 정보를 표시하는 방식이 다르기 때문입니다. TV 뉴스 화면의 아래쪽에 표시되는 뉴스 전광판과 같은 형식으로 헤드라인이 표시되는 것입니다.
또한 이 샘플은 높이가 57픽셀밖에 안 되므로 높이가 175픽셀에 달하는 Windows Vista의 기본 가젯보다 훨씬 간소합니다. 이는 화면이 작거나 사이드바에 가젯이 많아 공간을 최대한 절약해야 하는 경우에 매우 유용합니다.
샘플 가젯은 이 기사에서 필자가 언급한 모든 권장 사항에 따라 만들어졌습니다. 구체적으로 말하면 사용자가 헤드라인을 클릭할 때 플라이아웃을 통해 자세한 정보를 표시하고, 옵션 대화 상자를 통해 사용자가 피드 다시 로드 간격을 선택할 수 있도록 하고, 움직이는 상태로 전환했을 때 크기가 변경되고, 지역화 폴더를 사용하여 몇 가지 언어를 지원합니다.
이 기사에서는 처음 시작하는 독자에게 가젯 개발이 얼마나 쉬운지를 보여 주기 위해 사이드바 가젯과 관련한 기본적인 내용만 소개했습니다. 따라서 가젯에는 여기에 언급되지 않은 많은 가능성과 기능이 있습니다. 자세한 내용은 추가 리소스 보충 기사를 참조하십시오.

Donavon West는 독립 컨설턴트로서, LiveGadgets.net의 CTO와 Windows Live 개발 분야의 Microsoft MVP로 활동하고 있습니다. 시카고 출신인 Donavon은 현재 워싱턴 DC, 볼티모어 지역에 거주하고 있습니다. 또한 Windows Vista 사이드바 가젯과 웹 가젯에 대한 가젯 개발 커뮤니티에서 왕성한 활동을 펼치고 있기도 합니다. 문의 사항이 있으면 저자의 웹 사이트인 www.livegadgets.net을 통해 연락하시기 바랍니다.

Current Issue

자료 출처 : http://msdn.microsoft.com/ko-kr/magazine/cc163370.aspx

저작자표시

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2024/05 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

글 보관함

정훈이의 프로그래밍 이야기

티스토리 뷰

Windows Gadget에 대한 기본 이해

티스토리툴바