가젯 문서 검색
죄송합니다. 이 문서는 더 이상 최신 버전이 아닙니다. 가장 최근 업데이트된 문서를 보시려면 영어 버전을 참고로 해주십시오. 불편을 끼쳐드려 죄송합니다.

가젯 게시

본 설명서는 여러 가젯 게시 옵션에 대해 설명합니다.

목차

  1. 가젯 게시 위치
  2. 게시 준비
    1. 높이 및 너비 테스트
  3. 다른 Google 제품에 게시하기
    1. 호환성
    2. Google 데스크톱에 가젯 추가하기
    3. Google 페이지 작성기에 가젯 추가하기
  4. 콘텐츠 디렉토리게 게시하기
    1. 제출한 가젯 관리하기
  5. 신디케이션을 통해 게시하기
    1. 신디케이션용 가젯 만들기
    2. 신디케이션 환경에서 테스트하기
    3. 신디케이션에 제출하기

가젯 게시 위치

가젯을 게시할 수 있는 위치는 다음과 같습니다.

가젯이 모든 환경에 적합한 것은 아닙니다. 다음 표에는 각 환경별 요구사항이 정리되어 있습니다.

대상 환경 요구사항
iGoogle 사용자가 가젯을 iGoogle에 추가하기 위한 특별한 요구사항이나 제한은 없습니다.
Google 페이지 작성기 및 Google 데스크톱과 같은 기타 Google 제품 가젯은 html-inline 콘텐츠 유형이 될 수 없습니다. 일부 제품의 경우 사용자 환경설정(userprefs) 수정 상자가 사용자에게 표시되지 않습니다. 해당 수정 상자의 설정 환경에 따라 가젯의 기능이 달라져서는 안 되는 부분이 있기 때문입니다.
Google 콘텐츠 디렉토리 콘텐츠 디렉토리에 가젯을 제출하는 개발자는 콘텐츠 디렉토리에 게시에 나와 있는 도움말을 따라야 합니다.
신디케이션 가젯은 html-inline 콘텐츠 유형이 될 수 없습니다. 동적 높이 및 환경 설정 구성(setprefs) 기능은 신디케이션 환경에서 작동하지 않습니다. 사용자 환경설정(userprefs) 수정 상자가 사용자에게 나타나지 않도록 하였습니다. 각 사용자 설정 환경설정의 수정 상자를 통해 가젯의 특정 기능이 수정되어서는 안 되기 때문입니다.

게시 준비

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

모든 가젯에 대해 다음 테스트를 수행하세요.

_IG_FetchContent()를 사용하는 경우 원본 데이터를 사용할 수 없게 되거나 오류가 반환될 때 어떤 일이 발생하는지 테스트하세요. URL을 임시로 다른 URL로 변경한 후 해당 테스트를 진행하는 것도 한 방법입니다.

너비 및 높이 테스트

가젯 크기 조정 방법은 주로 실행되는 환경에 따라 크게 달라집니다. 가젯이 신디케이션에서 실행되는 경우 지정된 높이와 너비는 사이트 소유자를 위한 제안일 뿐 소유자가 마음대로 변경할 수 있습니다. iGoogle의 경우 너비 설정은 무시되고 가젯의 너비가 32%로 자동 설정됩니다.

동적 높이는 iGoogle에서만 작동하기 때문에 신디케이션에서 다양한 크기로 가젯을 테스트해야 합니다. 신디케이션 페이지 작성기에서 다음 형식의 URL을 사용하여 가젯을 테스트할 수 있습니다.

http://gmodules.com/ig/creator?synd=open&url=[gadget-url]

가젯을 디자인하고 테스트할 때 200 - 600픽셀 범위의 임의의 너비에 대해 준비하세요. 일부 가젯은 너비가 훨씬 커야 할 수도 있습니다. 일반적으로 여분의 공간이 주어질 때 가젯이 올바르게 표시되도록 디자인하세요. 예를 들어, 지도 가젯은 영역을 채워야 하고, 사진 가젯은 프레임 중앙에 위치해야 하며, 텍스트 가젯은 텍스트가 상단에 있어야 합니다. 또한 일반적으로 하단에 삽입되는 '자세한 내용은 여기를 클릭하세요' 링크는 가젯 창 하단 보다는 콘텐츠 근처에 위치하는 것이 좋습니다.

다른 Google 사이트에 게시하기

Google 가젯의 뛰어난 장점 중 하나는 가젯을 iGoogle에서 만들고 테스트한 다음 Google 데스크톱Google 페이지 작성기와 같은 다른 제품에서 사용할 수 있다는 점입니다. 또는 신디케이션을 사용하여 Blogger나 개인 HTML 페이지에 가젯을 배포할 수 있습니다. 자세한 내용은 신디케이션을 통해 게시하기를 참조하시기 바랍니다.

호환성

대부분의 가젯은 Google 데스크톱 및 Google 페이지 작성기에 추가할 수 있습니다. 하지만 Google 데스크톱 가젯 및 Google 페이지 작성기 가젯과 완벽하게 상호교환되지는 않습니다. 다음은 호환성 관련 제한 사항입니다.

Google 데스크톱에 가젯 추가하기

가젯을 데스크톱 사이드바를 통해 데스크톱에 추가하려면 다음 단계를 따르세요.

  1. 사이드바 상단에서 추가를 클릭합니다.
  2. 가젯 사양의 URL을 가젯 검색 텍스트 입력란에 입력하고 가젯 검색을 클릭합니다. 가젯이 검색되면 가젯 제목이 추가 버튼 옆에 표시됩니다. 추가를 클릭합니다.

Google 페이지 작성기에 가젯 추가하기

Google 페이지 작성기에 가젯을 추가하려면 다음 단계를 따르세요.

  1. 페이지 관리자의 편집기에서 페이지를 엽니다.
  2. 가젯을 추가할 필드에 커서를 놓습니다.
  3. 오른쪽 하단에 있는 가젯 추가를 클릭합니다.
  4. 페이지에 가젯 추가 대화상자에서 URL로 추가를 클릭하면 가젯 사양의 URL을 입력할 수 있는 텍스트 입력란이 표시됩니다. URL을 입력하고 추가를 클릭합니다. 미리보기 화면으로 이동합니다. 해당 화면에서 확인을 클릭하고 추가된 가젯을 확인합니다.
  5. 편집기로 돌아가서 가젯을 끌어 위치를 결정합니다. 작업이 완료되면 게시를 클릭합니다.

콘텐츠 디렉토리에 게시하기

가젯 디자인, 구현 및 테스트를 완료한 후 가젯을 Google에 제출하여 콘텐츠 디렉토리에 게시하세요. 제출 과정은 가젯을 신디케이션 디렉토리에 게시할 때와 동일합니다. 자세한 내용은 신디케이션 가젯을 참조하시기 바랍니다. 다음은 가젯 게시를 준비할 때 따라야 할 일반적인 단계입니다.

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

참조에는 가젯 '메타' 정보를 제공하는 데 필요한 모든 <ModulePrefs> 속성이 나와 있습니다. 다음은 가젯 사양에 포함되어야 할 정보입니다.

작성자 페이지 목록에 등록하고 싶은 경우 다음 필드를 포함시킬 수 있습니다.

자세한 내용을 보려면 여기를, 예제를 참조하려면 여기를 클릭하세요.

2단계: 튼튼하고 안전한 가젯을 만듭니다.

보안 위험을 최소화하는 방향으로 가젯을 코딩해야 합니다.

3단계: 호환성 요구사항을 추가합니다.

일부 환경에서는 가젯이 실행되지 않습니다. 가젯을 실행하려면 특정 브라우저 또는 소프트웨어가 필요할 수 있습니다. <ModulePrefs> 아래의 <MayRequire> 태그를 사용하여 가젯의 특수 요구사항에 대한 정보를 제공할 수 있습니다. 자세한 내용은 호환성 요구사항 지정을 참조하시기 바랍니다.

4단계: 관련 로케일 정보를 추가합니다.

<ModulePrefs> 아래의 <Locale> 태그를 사용하여 가젯에서 지원하는 로케일을 지정할 수 있습니다. 자세한 내용은 로케일 지정을 참조하시기 바랍니다.

5단계: 사용자들이 가젯을 쉽게 추가할 수 있도록 합니다.

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

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

Google에 가젯을 제출하려면 여기를 클릭하세요. 디렉토리에서 가젯을 검색하는 방법 및 위치 결정 요소에 대한 설명은 FAQ를 참조하세요. 제3자 웹페이지에서 실행할 수 있도록 신디케이션용으로 가젯을 만드는 방법은 신디케이션 가젯을 참조하세요.

제출된 가젯 관리

여러 버전의 가젯을 여러 URL로 제출하고 이중 한 버전을 공식 버전으로 지정하려면 별칭 요청 제출 페이지를 사용하세요.

신디케이션을 통해 게시하기

신디케이션을 사용하면 Google 가젯을 제 3자 웹페이지에 배포할 수 있습니다. 예를 들어, 다음은 본 웹페이지에서 실행 중인 가젯입니다.

이를 어떻게 구현합니까? 페이지의 HTML에 <script src ="http://gadget-URL..." </script> 문자열을 추가하세요. 이에 대한 자세한 내용이 뒤에 나옵니다.

여기를 클릭하면 해당 가젯을 페이지 작성기에서 열 수 있습니다.

신디케이션용 가젯 만들기

가젯을 신디케이션용으로 준비하기 위해 취해야 할 특별한 조치는 없습니다. 하지만 신디케이션 자격을 충족하기 위해 가젯은 다음 도움말을 따라야 합니다.

본 설명서에서는 다음 샘플 가젯을 사용합니다. 가젯은 사진, 연령 및 취미를 포함한 사용자 프로필을 표시합니다. 사용자가 배경 색상을 설정할 수도 있습니다.

<?xml version="1.0" encoding="UTF-8" ?> 
<Module>
    <ModulePrefs title="Card for __UP_myname__" height="400" />
    <UserPref name="myname" display_name="Name" default_value="Touki" />
    <UserPref name="myphoto" display_name="Photo" default_value="http://doc.examples.googlepages.com/touki.jpg" />
    <UserPref name="myage" display_name="Age" default_value="4" />
    <UserPref name="myhobby" display_name="Hobbies" default_value="agility, swimming" />
    <UserPref name="mycolor" display_name="Color" default_value="Pink" datatype="enum" >
        <EnumValue value="Pink" />
        <EnumValue value="Red" />
        <EnumValue value="Aqua" />
        <EnumValue value="Lime" />
        <EnumValue value="Yellow" /> 
        <EnumValue value="Orange" />
        <EnumValue value="White" />
    </UserPref>
<Content type="html"> 
<![CDATA[ 
    <div id="content_div" style="font-size:12pt; font-family:Arial, Helvetica; text-align:center; padding:5px;">
    <script type="text/javascript">
    // Get userprefs
    var prefs = new _IG_Prefs(__MODULE_ID__);
    showCard();
    
    // Display the card showing the user profile   
    function showCard (){
        // Apply userpref-specified background color to the div
        var element = document.getElementById('content_div');
        element.style.backgroundColor = prefs.getString("mycolor");
        // Build HTML string used to display content
        var html = "";
        html += '<img src="' + prefs.getString("myphoto") + '">';
        html += "<br><b>Age: </b>" + prefs.getString("myage");
        html += "<br><b>Hobbies: </b>" + prefs.getString("myhobby");
        // render HTML string in the div
        _gel("content_div").innerHTML = html;
    }
    </script>
]]> 
</Content>
</Module>

신디케이션 환경에서 테스트하기

신디케이션 환경에서 가젯을 테스트하려면 다음과 같이 하세요.

http://gmodules.com/ig/creator?synd=open&url=[gadget-url]

다음 URL을 사용하면 페이지 작성기에서 샘플 가젯을 볼 수 있습니다.

http://gmodules.com/ig/creator?synd=open&url=http://doc.examples.googlepages.com/baseball-card.xml 

테스트를 위해 캐시를 비활성화하려면 &nocache=1 매개변수를 URL에 추가하세요. 하지만 라이브 가젯을 배포할 때는 성능이 저하되기 때문에 &nocache=1은 사용하지 않아야 합니다.

http://gmodules.com/ig/creator?synd=open&nocache=1&url=http://doc.examples.googlepages.com/baseball-card.xml

페이지 작성기 사용

사이트 소유자는 페이지 작성기 도구를 사용하여 다음 작업을 수행할 수 있습니다.

위의 URL을 사용하여 샘플 가젯의 페이지 작성기를 열면 다음 화면이 나타납니다.

페이지 작성기

유의사항:

<script src="http://gmodules.com/ig/ifr?url=http://doc.examples.googlepages.com/baseball-card.xml&up_myname=Touki
&up_myphoto=&up_myage=&up_myhobby=&up_mycolor=Pink&synd=open&w=320&h=400&title=Card+for+__UP_myname__
&border=%23ffffff%7C3px%2C1px+solid+%23999999&output=js"></script>

해당 URL에는 다음 매개변수가 포함됩니다.

Google 페이지 작성기에서 페이지를 만들고 'html 수정' 모드로 전환한 다음 페이지 작성기에서 생성된 문자열을 Google 페이지 작성기 웹페이지의 HTML에 붙여넣는 방식으로 신디케이션에서 가젯을 테스트할 수 있습니다. 페이지를 게시하면 페이지 작성기에서 지정한 설정을 사용하는 라이브 가젯이 해당 페이지에 포함됩니다.

Blogger에서 가젯을 테스트할 수도 있습니다. 신디케이션 가젯을 Blogger에 배포하려면, 특정 페이지의 HTML이 아닌 템플릿에 가젯을 추가해야 합니다. Blogger에서는 높이가 잘릴 수 있기 때문에 가젯의 크기가 작은 것이 더 유리합니다.

현지화 설정

가젯에 현지화에서 설명한 <Locale> 요소가 있는 경우 페이지 작성기에 가젯이 지원하는 언어 메뉴가 포함됩니다. 언어를 선택하면 &lang 매개변수를 통해 가젯의 신디케이션 URL에 언어가 추가됩니다. &country 매개변수도 포함되며 기본 설정은 ALL입니다.

<script src="http://gmodules.com/ig/ifr?url=http://examples.com/hello-i18n.xml...&amp;lang=zh-CN&amp;country=ALL...</script>

&country 설정을 변경하려면 수동으로 URL을 수정해야 합니다. 가젯 <Locale>언어나 국가를 추가하기 위해 URL을 변경하는 것은 아무런 효과도 내지 못합니다.

iGoogle이 지원하는 언어와 국가 목록은 지원 언어 및 국가를 참조하시기 바랍니다.

테두리

페이지 작성기에서 대상 웹페이지에 표시될 가젯의 테두리를 선택할 수 있습니다. 테두리 종류는 2가지가 있습니다. 이미지 기반 테두리와 CSS 기반 테두리입니다.

이미지 기반 테두리

이미지 기반 테두리는 http://hostname/some/path/ 형식의 URL에서 참조합니다. 주소 끝에 반드시 ‘/’가 있어야 합니다. 이미지 기반 테두리는 9개 이미지 집합을 사용합니다.

'너비 x 높이' 치수는 다음과 같습니다.

기본 집합은 http://www.google.com/ig/images/...에서 확인할 수 있습니다(예: http://www.google.com/ig/images/br.gif).

CSS 기반 테두리

페이지 작성기에 제공되는 테두리 중 일부는 CSS 정의를 기반으로 합니다. CSS 기반 테두리는 CSS 매개변수가 정의하는 선 집합으로 이루어져 있으며 형식은 다음과 같습니다.

<bgcolor>|<n>px, <n>px <linetype> <color>|<n>px, <n>px <linetype> <color>|...

여기서 색상은 '검은색'과 같은 일반 색상 이름일 수도 있고 #000000와 같은 RGB 값일 수도 있습니다. 선 형식은 표준 CSS입니다. 자세한 내용을 보려면 여기를 클릭하세요.

한 예로, 다음 테두리는 흰 배경에 두 개의 검은색 선을 인쇄합니다. 테두리는 URL 이스케이프를 사용합니다.

 &border=%23ffffff%7C1px%2C1px+solid+black%7C1px%2C1px+solid+black%7C0px%2C1px+black

신디케이션용 제출

가젯을 일반 콘텐츠 디렉토리에 제출한 것과 같은 방식으로 신디케이션 디렉토리에 제출할 수 있습니다. 자세한 내용을 보려면 여기를 클릭하세요. 신디케이션 제출 요건을 충족하기 위해서는 가젯을 인라인할 수 없으며 가젯에서 상태를 저장할 수도 없습니다.

위로 이동

업데이트 날짜: