가젯 게시

이 문서에서는 여러 가지 가젯 게시 옵션에 대해 설명합니다. Google Gadgets Editor(GGE)를 사용하여 가젯을 만들고 호스팅하면 가젯을 게시하기 쉽습니다.

목차

  1. 만든 가젯은 어디에 놓을 수 있나요?
  2. 게시 준비
    1. 높이 및 너비 테스트
    2. 가젯 성능 개선
  3. iGoogle 콘텐츠 디렉토리에 게시
    1. 제출한 가젯 관리

만든 가젯은 어디에 놓을 수 있나요?

다음 중 한 곳에 가젯을 배치할 수 있습니다.

  • orkut, iGoogle 샌드박스 등 가젯을 지원하는 오픈소셜 컨테이너.
  • Google 콘텐츠 디렉토리(기존 가젯만 가능). 가젯을 콘텐츠 디렉토리에 제출하면 더 많은 사람이 사용할 수 있습니다.

모든 가젯이 어떤 환경에서나 적합하지는 않습니다. 특정 환경에서 지원되는 기능에 대한 자세한 내용은 컨테이너의 문서를 참조하십시오.

게시 준비

가젯을 게시하려면 먼저 가젯을 실행할 대상 환경의 요구사항 및 제한을 염두에 두고 가젯을 테스트해야 합니다.

모든 가젯에 수행해야 하는 테스트는 다음과 같습니다.

  • 모든 UserPref 값의 조합을 시험해 봅니다.
  • 800x600부터 최대 너비까지 여러 크기의 화면에서 가젯을 실행합니다. Firefox 웹 개발자용 확장 기능 링크를 클릭하면 쉽게 Firefox 화면을 특정 크기로 조정할 수 있습니다.
  • 너비 및 높이 테스트에 설명된 대로 여러 크기로 가젯을 테스트합니다.
  • 가젯을 실행할 수 있는 모든 환경에서 가젯을 테스트합니다.
  • IE 7, IE 6, Firefox 2.x, Firefox 1.5.x, IE 7, IE 6, Opera 9.x 및 Safari 2.x 등의 브라우저에서 가젯을 테스트합니다.
  • 여러 가지 글꼴 크기를 시험합니다.
    • Firefox에서 글꼴 크기를 변경하려면 도구 > 옵션 > 콘텐츠를 선택합니다. "글꼴 및 색상" 영역의 고급 탭을 클릭합니다. 글꼴 설정을 변경하고 "위에서 선택한 글꼴 대신 이 페이지에서 글꼴 선택 허용" 확인란 선택을 취소합니다.
    • Internet Explorer에서 글꼴 크기를 변경하려면 도구 > 인터넷 옵션 > 일반을 선택합니다. 글꼴액세스 가능성 대화상자를 사용하여 글꼴 설정을 변경합니다.

makeRequest() 함수를 사용하는 경우 데이터 소스 작동이 중단되거나 오류를 반환하면 어떻게 되는지 테스트합니다. 임시로 URL을 다른 URL로 변경하는 식으로 시뮬레이션해볼 수 있습니다.

너비 및 높이 테스트

가젯의 크기는 가젯이 실행되는 위치와 많은 관계가 있습니다. 자세한 내용은 컨테이너의 문서를 참조하십시오.

가젯을 설계 및 테스트할 때 200픽셀부터 600픽셀 너비 사이의 너비에 대해 준비합니다. 어떤 가젯은 너비가 이보다 훨씬 더 커야 합니다. 일반적으로 가젯에 추가 공간이 제공될 경우 올바르게 표시되도록 설계합니다. 예를 들어 지도 가젯은 영역을 다 채워야 하고, 사진 가젯은 프레임의 중앙에 위치해야 하며, 텍스트 가젯은 텍스트를 위로 띄워야 합니다. 즉 일반적으로 아래쪽에 있는 '자세한 내용을 보려면 클릭' 링크가 가젯 창 아래쪽보다는 콘텐츠에 가까이 있어야 합니다.

가젯 성능 개선

트래픽이 많을 것으로 예상되는 가젯을 만들 경우 가용성 및 성능을 보장하기 위해 수행해야 할 몇 가지 단계가 있습니다. 가젯이 일일 200,000뷰 이상 또는 초당 약 1-2건의 요청을 접수하는 경우 이 섹션에 나온 방법을 참조해야 합니다. 하루 200,000건의 요청을 접수하는 50KB 가젯도 월간 300GB 정도의 대역폭을 소비합니다.

가젯에 이렇게 많은 사용자가 몰리는 데는 여러 가지 이유가 있지만, 단순히 콘텐츠 디렉토리에서 인기를 끌게 되었기 때문일 수 있습니다. 또는 특별 판촉이나 광고에 가젯을 사용하여 대량의 트래픽이 발생했을 수 있습니다.

트래픽이 많은 가젯을 만드는 기준은 0.25초(250밀리초) 이내에 가젯이 표시되도록 만드는 것입니다. Firebug(Firefox에만 해당)를 사용하여 이 값을 계산합니다. 가젯의 응답 성능을 개선하면 확실히 사용자 만족도에 긍정적인 영향을 미칠 수 있습니다. 가젯 성능 최적화 방법은 트래픽이 많은 경우 최적화를 참조하십시오. 관리 관련 도움말을 보려면 대량 트래픽 관리를 참조하십시오. 일반적인 테스트 가이드라인도 인기가 매우 높은 가젯에는 특히 중요합니다.

트래픽이 많은 경우 최적화

가젯의 트래픽이 많을 것 같으면 다음 가이드라인을 따릅니다.

  • 외부 자바스크립트 또는 CSS 파일(HTML 태그에서 "src" 또는 "href" 속성이 참조하는 파일)을 사용하면 추가로 네트워크 연결 비용이 발생하므로 사용하지 않습니다. 대신 가젯 상세정보에 자바스크립트와 CSS 코드를 인라인으로 배치합니다.
  • type=html 가젯을 사용합니다. type=url인 가젯은 일반적으로 type=html 가젯에 비해 다른 호스팅 서버의 성능 및 캐시 지원이 부족하므로 좀 더 느리게 표시됩니다.
  • makeRequest() 메서드는 기본적으로 1-2시간 정도 콘텐츠를 저장합니다. refreshInterval 매개변수를 이 함수에서 사용하면 캐시가 좀 더 자주 새로고쳐집니다. 그렇지만 캐싱을 사용하면 콘텐츠를 호스팅하는 원격 서버로 전송하는 요청 건수를 최소화하므로 가젯 성능이 향상됩니다. 캐시에 필요한 횟수보다 자주 새로고침을 요청하면 캐시에서 수행하는 요청 비율이 감소합니다. 이 문제에 대한 자세한 내용은 캐시 새로고침을 참조하십시오.
  • Firebug(Firefox에만 해당)를 사용하여 가젯 성능을 미세조정합니다. 다른 브라우저의 경우 Fiddler를 사용하면 됩니다.
  • Google Analytics를 사용할 경우 추가로 서버 연결이 발생하므로 가능한 사용하지 마십시오. Analytics 대신 http://www.google.com/ig/directory?url=<gadget-url>을 사용하여 가젯의 주간 페이지뷰를 확인합니다.
  • 가젯의 HTML에서 모든 <img> 태그의 높이와 너비를 지정하면 가젯이 더 빠르게 표시됩니다. gadgets.io.getProxyUrl()을 사용하고 DOM에 직접 이미지 요소를 삽입하는 경우 너비 및 높이 속성을 설정하지 않아도 됩니다.
  • 호스팅 제공업체에 직접 연결하는 대신 gadgets.io.getProxyUrl() 함수를 사용하여 포함된 모든 이미지를 저장하고 embedCachedFlash()를 사용하여 플래시 콘텐츠를 저장합니다. 다음은 gadgets.io.getProxyUrl()을 사용하여 이미지를 미리 로드하는 가젯의 예제입니다.

gadgets.io.getProxyUrl() 사용 방법에 대해 설명하는 예제 가젯입니다.

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
  <ModulePrefs title="Zombies!" height="350" />
  <Content type="html">
  <![CDATA[
  <div id="zombiecontainer"
    style="text-align:center;">
  </div>
  <script type="text/javascript">
  var counter = 0;

  // Preload the images using gadgets.io.getProxyUrl()
  function load(imageList) {
    var ret = [];
    for (var i = 0, j = imageList.length; i < j; ++i) {
      var img = document.createElement("img");
      img.src = gadgets.io.getProxyUrl(imageList[i]);
      ret.push(img);
    }
    return ret;
  }

  var files = [
    "http://gadget-doc-examples.googlecode.com/svn/trunk/zombie-0.jpg",
    "http://gadget-doc-examples.googlecode.com/svn/trunk/zombie-1.jpg",
    "http://gadget-doc-examples.googlecode.com/svn/trunk/zombie-2.jpg",
    "http://gadget-doc-examples.googlecode.com/svn/trunk/zombie-3.jpg",
    "http://gadget-doc-examples.googlecode.com/svn/trunk/zombie-4.jpg",
    "http://gadget-doc-examples.googlecode.com/svn/trunk/zombie-5.jpg",
    "http://gadget-doc-examples.googlecode.com/svn/trunk/zombie-6.jpg"
  ];

  var images = load(files);
  browse();

  // Browse through photos sequentially. When you get to the end of the array, start over.
  function browse(){
    if (counter == images.length)
    {
      counter = 0;
    }
    document.getElementById("zombiecontainer").innerHTML = "";
    document.getElementById("zombiecontainer").appendChild(images[counter]);
    counter++;
  }

  </script>
  <br />
  <div style="text-align: center;">
    <input type=submit value="Next ->" onClick="browse()">
  </div>
  ]]>
  </Content>
</Module>

대량 트래픽 관리

이 가이드는 대용량 가젯을 관리하는 데 도움이 됩니다.

  • 가젯 사용자로부터 대량의 이메일을 수신하는 경우 Gmail을 사용하여 대량의 이메일을 관리할 필터를 설정합니다. 가젯 상세정보에 <username>.feedback+<gadgetname>@gmail.com 형태의 주소를 사용하면 가젯 사용자로부터 받은 메일을 필터링할 수 있습니다. Gmail에서 플러스 기호(+) 뒤에 오는 부분을 모두 삭제하므로 해당 이메일 주소가 <username>.feedback@gmail.com에 매핑됩니다. Gmail에는 품질이 우수한 스팸메일 필터가 있습니다.
  • 가젯을 iGoogle 콘텐츠 디렉토리에 제출하는 경우 가젯 설명 페이지에서 사용자 의견을 정기적으로 확인합니다. 사용자는 자주 중요한 피드백, 기능 요청 및 가젯을 사용하는 동안 발생한 버그 신고를 남깁니다. 사용자의 의견을 놓치지 말고 앞으로의 개선에 반영하는 것이 좋습니다.

iGoogle 콘텐츠 디렉토리에 게시

가젯을 설계, 구현 및 테스트했으면 iGoogle 콘텐츠 디렉토리에 게시하도록 Google에 가젯을 제출할 수 있습니다. 현재 이 섹션은 기존 가젯에만 해당하는 내용입니다. 이 섹션에는 가젯의 게시를 준비하는 동안 따라야 할 일반적인 단계가 나와 있습니다.

1단계: 가젯의 환경설정을 설정합니다.

참조에는 가젯에 대한 "meta" 정보를 제공할 수 있는 모든 <ModulePrefs> 속성이 나와 있습니다. 가젯 상세정보에 포함해야 하는 정보는 다음과 같습니다.

  • 가젯의 제목
  • 설명. 이 속성을 통해 가젯이 어떤 작업을 수행하는지를 가젯에 대해 잘 알지 못하는 경우에 특히 알 수 있으므로 중요합니다.
  • 가젯의 작성자
  • 작성자의 이메일. Google과 가젯 사용자가 작성자에게 문의할 수 있습니다. 이메일 시스템을 아무 것이나 사용할 수도 있지만 스팸 때문에 개인 이메일 주소를 사용하면 안 됩니다. 한가지 방식은 가젯 상세정보에 helensmith.feedback+coolgadget@gmail.com 형태의 이메일 주소를 사용하는 것입니다. Gmail에서 플러스 기호(+) 뒤에 오는 부분을 모두 삭제하므로 해당 이메일 주소가 helensmith.feedback@gmail.com에 매핑됩니다. Gmail 계정은 여기에서 만들 수 있습니다.
  • 캡쳐화면. 가젯 캡쳐화면 URL을 표시하는 문자열이며, 상대 URL이 아닌 올바른 형식의 URL이라야 합니다. 이 이미지는 robots.txt에서 차단하지 않은 공개 웹사이트에 게시되어야 합니다. PNG가 기본 형식이지만 GIF 및 JPG 형식도 사용할 수 있습니다. 가젯 캡쳐화면은 가로가 280픽셀이 되어야 합니다. 캡쳐화면의 세로는 가젯을 사용할 때 가젯의 "기본" 높이가 되어야 합니다. 캡쳐화면이 있으면 사용자가 가젯을 페이지에 추가하기 전에 화면에서 차지하게 될 공간을 알 수 있습니다. 캡쳐화면에는 가젯의 파란색 헤더 막대 위로 공백이 있으면 안 됩니다. 캡쳐화면에는 가젯의 제목 표시줄 외에는 아무 것도 포함하지 않은 상태에서 전체 가젯이 표시되어야 합니다. 또는 수정 창이 열린 상태에서 가젯 화면을 캡쳐할 수 있습니다. 캡쳐화면의 크기를 조정하거나 잘라내면 안 됩니다. Google은 품질 및 일관성을 높이기 위해 해당 가젯의 자체 캡쳐화면을 사용할 수 있습니다.
  • 작은 이미지. 작은 이미지는 콘텐츠 디렉토리에서 사용자에게 가젯 미리보기를 제공합니다. 이러한 이미지는 가젯의 기본 기능을 캡쳐해야 하지만 전체 이미지로 보여주지는 않아도 됩니다. 이 속성 값은 가젯의 작은 이미지 URL을 제공하는 문자열로서 상대 URL이 아닌 올바른 형식의 URL이라야 합니다. 이 이미지는 robots.txt에서 차단하지 않은 공개 웹사이트에 게시되어야 합니다. PNG가 기본 형식이지만 GIF 및 JPG 형식도 사용할 수 있습니다. 작은 이미지는 120x60픽셀 크기입니다. 여기에는 제목 표시줄이 포함되지 않습니다.
  • 작성자의 위치
  • 작성자의 소속
  • 가젯의 제목 URL. 이 속성을 사용하여 외부 HTML 페이지에 가젯 제목을 연결합니다. 예를 들어 가젯이 서비스의 프런트엔드인 경우 가젯 제목을 해당 서비스 웹사이트에 연결할 수 있습니다.
  • 디렉토리 제목(제목에 사용자 환결설정 대체 변수가 있는 경우에 필요).

작성자 페이지에 실리기 원하면 다음과 같은 추가 필드를 포함시킬 수 있습니다.

  • 작성자의 사진. 사진 URL. 70x100 PNG 형식이 선호되지만 JPG/GIF 형식도 지원됩니다.
  • 작성자에 대한 설명. 본인에 대한 설명. 500글자 이내가 되도록 합니다.
  • 작성자의 링크. 웹사이트, 블로그 등의 링크.
  • 작성자의 인용구. 포함하려는 인용구. 300글자 이내가 되도록 합니다.

자세한 내용은 여기를, 예제를 보려면 여기를 참조하십시오.

2단계: 강력한 보안 가젯을 작성했는지 확인합니다.

보안 위험을 최소화하는 방식으로 가젯을 암호화했는지 확인합니다.

3단계: 해당하는 로캘 정보를 추가합니다.

<ModulePrefs><Locale> 태그를 사용하여 가젯에서 지원하는 로캘을 지정할 수 있습니다. 자세한 내용은 XML 참조의 ModulePrefs/Locale을 참조하십시오.

4단계: 가젯을 추가하기 쉽도록 만듭니다.

가젯을 홍보하려면 가젯에 "Google에 추가" 버튼을 만드는 것이 좋습니다.

5단계: 가젯을 Google에 제출합니다.

여기에서 가젯을 Google에 제출할 수 있습니다. GGE 파일 > 게시 명령을 사용하여 콘텐츠 디렉토리에 가젯을 제출할 수도 있습니다. 디렉토리에서 가젯을 찾는 방법과 가젯의 위치를 결정하는 기준에 대한 설명은 FAQ를 참조하십시오.

제출한 가젯 관리

각기 다른 URL에 있는 여러 버전의 가젯을 제출했는데 그 중 한 버전을 공식 버전으로 지정하려는 경우 igoogle-기존 문제 추적 프로그램을 사용하여 변경을 요청할 수 있습니다.

맨위로