위젯/가젯 시작하기

위젯 팩토리를 이용해주셔서 감사합니다. 위젯 개발 가이드는 Daum 위젯뱅크에서 사용 가능한 위젯 제작 방법을 소개합니다.

• 1. 간단한 위젯/가젯 만들기

  아래의 코드는 간단한 위젯/가젯 코드입니다.

  <?xml version="1.0" encoding="UTF-8" ?> <Module> <ModulePrefs title="간단한 위젯 만들기" /> <Content type="html"> <![CDATA[ 안녕하세요, 위젯뱅크입니다. ]]> </Content> </Module>

  TIP 위젯뱅크에서 위의 코드를 실행하려면 다음과 같이 하면 됩니다.

  • 위의 코드를 드래그하여 복사합니다.
  • 위젯 등록 페이지로 이동합니다.
  • '위젯 Code 입력' 칸에 코드를 붙여 넣습니다.
  • '위젯테스트 하기' 버튼을 누르면 작동하는 위젯을 미리보기 영역에서 보실 수 있습니다.
  • 따로 설정이 있는 경우 설정 적용도 가능합니다.

  TIP 구글에서 위의 코드를 실행하려면 다음과 같이 하면 됩니다.

  • 1. 아래의 링크에서 구글 가젯 에디터를 추가하세요. http://www.google.co.kr/ig/directory?url=www.google.com/ig/modules/gge.xml
  • 2. 가젯을 작성하신 후 File -> Save As를 선택하셔서 가젯을 저장하세요.
  • 3. 오른쪽 위에 있는 가젯이름을 선택하여 URL를 알아냅니다.
  • 4. 아래에 있는 개발자를 위한 My Gadgets를 추가합니다.
    http://www.google.co.kr/ig/directory?url=www.google.com/ig/modules/developer.xml
  • 5. 세번째 단계에서 얻은 URL를 My Gadgets의 아래에 있는 "Add a gadget"에 추가해줍니다.
  • 6. My Gadgets에서 추가한 가젯의 Cached 옵션을 꺼줍니다.
  • 7. 이후에는 파일을 고칠 때 마다 브라우져를 reload하면 고처진 결과를 보실 수 있습니다.
  • 참고) 개발 중인 가젯을 저장할 수 있는 다른 서버가 있는 경우에 네 번째 단계 부터 진행하시면 됩니다.

  위젯/가젯은 아래와 같은 XML 형식으로 구성됩니다.

  • <Module> 태그는 XML 파일내에 위젯/가젯이 포함되어 있음을 나타냅니다.
  • <ModulePrefs> 태그는 위젯/가젯 정보(제목, 설명, 제작자 등)를 포함합니다.
  • <Content type="html"> 태그는 위젯/가젯의 컨텐츠타입(HTML)을 지정합니다.
  • <!CDATA[...]]> 영역안에 표현하고자 하는 위젯/가젯의 내용을 담아주세요.

• 2. 위젯/가젯 구성

  위젯/가젯은 XML, HTML 및 JavaScript 같은 단순 스크립트로 구성되며 HTML에 대한 기본사항만 숙지하고 있어도 쉽게 제작이 가능합니다.

  • XML - 범용 마크업 언어로써 인간과 컴퓨터가 모두 읽고 쓸 수 있는 방식으로 구조화된 데이터입니다.
  • HTML - 인터넷 페이지의 형식을 지정하기 위한 마크업 언어입니다. 위젯/가젯의 정적 콘텐츠는 거의 HTML로 작성됩니다. HTML은 XML과 유사하지만 데이터 설명보다는 웹 문서의 형식을 지정하기 위해 사용됩니다.
  • JavaScript - 위젯/가젯에 동적 동작을 추가하기 위해 사용되는 스크립트 언어입니다.

Google 가젯 API