안녕하세요? 구름팡팡입니다.
오늘은 윈도우 사이드바를 만드는 방법을 알려드리겠습니다.
물론 복잡한 기능들을 넣으려면 기본적인 지식이 뒷받침 되어야 하겠지만,
저 같은 초보자도 사이드바에 들어가는 가젯들을 만들 수 있다는 데에 이 방법을 소개해 드립니다^^
저는
SLR CLUB의 1면에 올라오는 '그날의 사진'을 매일 살펴봅니다.
오늘은 또 어떤 멋진 작품들이 올라왔나 궁금하기 때문이지요.
하지만 늘 웹 브라우져를 켜서 SLR CLUB에 접속해야 한다는 단점이 있었는데,
이를 가젯으로 만들면 늘 바탕화면에서 볼 수 있겠구나 하는 생각에 가젯을 제작하게 되었습니다.
가젯의 구조는 굉장히 간단합니다. 파일 2개만 있으면 되니까요^^
바로 '가젯 이름.html' 파일과 'gadget.xml' 파일 2개 입니다.
먼저 가젯이 설치되는 폴더에 가젯 폴더를 만들어 주세요.
폴더는 반드시 '
xxx.gadget'이라는 형식으로 만들어야 가젯으로 인식하므로 주의해 주세요!
기본으로 사이드바가 설치된 폴더는
C:\Program Files\Windows Sidebar\Gadgets 폴더이구요, 사용자가 인터넷 등에서 받아서 설치하는 가젯은
C:\Users\사용자 이름\AppData\Local\Microsoft\Windows Sidebar\Gadgets 폴더에 설치되는 것 같습니다.
저는
C:\Users\Psychopompus\AppData\Local\Microsoft\Windows Sidebar\Gadgets\TodayPhoto.gadget 이라고 만들었습니다. 가젯이 SLR CLUB의 1면 사진을 보는 것이기 때문이지요.
먼저 todayphoto.html 파일의 구조입니다.
<html>
<head>
<meta http-equiv="refresh" content="300; URL=todayphoto.html">
<title>SLR CLUB Today's Photo</title>
<style>
body {
width:920;
height:245;
}
</style>
</head>
<body>
<embed width="920" height="245" src="http://www.slrclub.com/main/v4img/main/todayphoto.swf" quality="high" allowScriptAccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"/>
</body>
</html>
1. head 부분에 meta 태그가 들어있는 이유는 300초 마다 지정한 URL로 접속하게끔 함으로써 새로고침 효과를 노리기 위해서 이므로 그러한 기능이 없어도 되면 삭제해도 되는 부분입니다.
2. title 부분에는 가젯의 제목을 써 주시면 되겠습니다.
3. style 부분에는 가젯의 크기를 결정합니다. width는 가로 크기, height는 세로 크기를 픽셀로 지정합니다.
4. body 부분에는 가장 중요한 내용이 들어갑니다. 제 가젯에는 플래시 파일 가져오는 것 외엔 딱히 없습니다.
이것으로 html 파일 구성 끝^^
다음으로 gadget.xml 파일의 구성입니다. html의 경우에는 임의로 파일명을 지정해도 되지만 gadget.xml의 경우에는 반드시 이 이름으로 해주셔야 합니다.
<?xml version="1.0" encoding="utf-16"?>
<gadget>
<name>SLR CLUB Today's Photo</name>
<namespace>psychopompus.tistory.com</namespace>
<version>1.0</version>
<author name="Psychopompus">
<info url="http://theHermes.kr" />
<logo src="Psychopompus.png"/>
</author>
<copyright>(c) 2010</copyright>
<description>SLR CLUB의 1면 사진을 웹 브라우저 없이 구경합니다..</description>
<icons>
<icon width="64" height="64" src="icon.png"/>
</icons>
<hosts>
<host name="sidebar">
<base type="HTML" apiVersion="1.0.0" src="todayphoto.html" />
<permissions>full</permissions>
<platform minPlatformVersion="1.0" />
</host>
</hosts>
</gadget>
1. name 부분은 가젯의 이름을 적는 부분입니다.
2. namespace 부분은 사실 저도 잘 모르겠습니다만, 그다지 필요 없어 보이기도 하고...
3. version 부분은 한 번 만들고 더 이상 업데이트가 없을 것이라면 적지 않아도 될 버전이 들어가는 부분입니다.
4. author name 부분에는 개발자 이름을 적어주시면 되고,
5. info 부분에는 블로그나 홈페이지, 이메일 주소 등을 적어주시면 됩니다.
6. logo 부분에는 개발자를 나타낼 수 있는 간단한 로고가 들어가면 좋겠죠? 48x48 픽셀 사이즈가 적당합니다.
7. copyright 부분은 저작권을 나타내는 부분입니다. copyleft로 하셔도 뭐 상관 없겠고...
8. description 부분은 세부 설명이 들어가는 부분입니다. 무슨 가젯인지 설명해주시면 좋겠죠?
9. icon 부분은 가젯 갤러리 화면에서 미리보기 사진이 들어가는 부분입니다. 64x64 픽셀 사이즈가 적당합니다.
10. base 부분에서 src는 연결할 html 파일명을 적어주시면 됩니다.
이것으로 gadget.xml 파일 구성 끝^^
이렇게 나오네요.
여러분께 가젯을 만드는 방법을 소개하고자 예제로 만들어 본 것이고 개인적으로 사용하기 위해 만든 녀석이라서 또 디자인에는 신경도 쓰지 않았습니다.
게다가 예쁘게 만드는 방법 같은 건...xml이나 html을 잘 다룰 줄 알아야 하겠고, 일단 저는 그런 능력이 없답니다^^
어쨌든, 직접 만들어서 사용해 보시면 신기함을 느끼실 수 있고 보람도 있고 뭐 그렇답니다ㅋㅋ
2010.10.22 수정
SLR클럽의 1면 사진을 보여주는 플래시 소스의 주소가 변경되어 가젯에서 그림 클릭시 엑스박스가 뜨던 문제를 수정하였습니다.
이 가젯을 사용하시려거든 맨 위에서 설명한 대로
C:\Program Files\Windows Sidebar\Gadgets 폴더, 잘 안 되면
C:\Users\사용자 이름\AppData\Local\Microsoft\Windows Sidebar\Gadgets 폴더 내에 압축을 풀어주시면 됩니다. 아! 자동풀림이므로 폴더를 그냥 옮겨주시면 됩니다^^
TodayPhoto.gadget.exe
