댓글 검색 목록

[기타] chrome extention - 28. 웹스토어 자습서 : 시작하기

페이지 정보

작성자 운영자 작성일 20-11-06 10:08 조회 627 댓글 0

웹 앱이 있습니까? 이 튜토리얼에 따라 기존 웹 앱을 Chrome 웹 스토어에 추가하세요.

웹 앱이 아직 없는 경우 소유하고 있는 다른 웹 사이트에서 이 자습서를 계속 따를 수 있습니다. 사이트는 몇 가지 디자인 원칙을 따라야 하지만 모든 웹 사이트는 설치 가능한 웹 앱이 될 수 있습니다.

참고 : 웹 앱 대신 Chrome 확장 프로그램 또는 Chrome 앱 개발에 관심이 있는 경우 확장 프로그램 가이드 또는 Chrome 앱 가이드를 따르세요. 그런 다음 이 페이지로 돌아가서 5 단계 : 앱 압축부터 시작합니다.

1 단계 : 준비

시작하기 전에 웹 앱을 선택하고 해당 사이트의 소유권을 확인할 수 있는지 확인하십시오. 또한 Chrome 웹 스토어 개발자 대시 보드의 위치를 기록해 둡니다.

게시 할 웹 앱을 선택하고 홈페이지 URL과 여기에 포함 된 다른 모든 URL을 기록해 둡니다. 웹 앱이 없습니까? 이 튜토리얼의 목적에 따라 Blogger에서 블로그를 만들고 앱처럼 취급 할 수 있습니다. 왜 Blogger인가? 자동으로 블로그 하위 도메인의 소유자로 등록되므로 앱을 좀 더 쉽게 게시 할 수 있습니다.
웹 앱을 호스팅 하는 사이트의 소유권을 증명할 수 있는지 확인하십시오. (Blogger 블로그를 만든 경우 이미 소유하고 있는 경우에는 걱정하지 마십시오.) 소유권 주장에 대한 자세한 내용은 Google 웹 마스터 도구 도움말 사이트 추가를 참조하십시오.
참고 : 앱을 게시하기 직전까지 실제로 소유권을 확인할 때까지 기다릴 수 있습니다.
Chrome 웹 스토어 개발자 대시 보드를 북마크합니다.

2 단계 : 매니페스트 파일 만들기

모든 앱에는 앱을 설명하는 manifest.json이라는 JSON 형식 파일인 매니페스트가 필요합니다.

앱의 매니페스트를 포함 할 myapp이라는 디렉터리를 만듭니다.
참고 : 원하는 경우 다른 디렉토리 이름을 사용할 수 있습니다. 변경할 수 없는 유일한 이름은 manifest.json입니다.
이 새 디렉터리에서 manifest.json이라는 텍스트 파일을 만들고 다음 코드를 여기에 복사하여 앱을 반영하도록 기울임 꼴 텍스트를 변경합니다.

{
  "name": "Great App Name",
  "description": "Pithy description (132 characters or less, no HTML)",
  "version": "0.0.0.1",
  "manifest_version": 2,
  "icons": {
    "128": "icon_128.png"
  },
  "app": {
    "urls": [
      "http://mysubdomain.example.com/"
    ],
    "launch": {
      "web_url": "http://mysubdomain.example.com/"
    }
  }
}

모든 새 앱은 따옴표 없이 매니페스트 버전 2를 지정해야 합니다 (매니페스트 버전 설명서 참조). 나머지 필드는 "urls"및 "web_url"을 제외하고는 매우 간단합니다. 이 예에서 이러한 필드는 동일한 값을 갖지만 의미는 다릅니다.

"web_url"

사용자가 앱을 시작할 때 브라우저에 표시되는 페이지를 지정합니다.

"urls"

앱에있는 다른 모든 웹 페이지의 시작 URL을 지정합니다. 이 예에서 http://mysubdomain.example.com/page1.html 및 http://mysubdomain.example.com/subdir/page2.html은 모두 앱에 있습니다. 포함 된 파일이나 이미지와 같은 자산에 대해서는 URL을 지정할 필요가 없습니다. 현재 도메인 이름 뒤에는 하나 이상의 문자 ( "/")가 와야 합니다.

참고 : 앱에 페이지가 하나만 있는 경우 "urls"필드를 생략 할 수 있습니다.

호스팅 된 앱의 매니페스트에 포함될 수 있는 항목에 대한 자세한 내용은 호스팅 된 앱을 참조하세요.

3 단계 : 이미지 가져 오기

앱에는 아이콘과 하나 이상의 스크린 샷과 하나의 프로모션 이미지가 필요합니다. 아이콘은 새 탭 페이지에서 사용되며 상점에서도 사용될 수 있습니다. 스크린 샷은 앱의 스토어 목록에 사용됩니다. 프로모션 이미지는 스토어의 메인 페이지와 스토어가 여러 앱을 제공하는 다른 장소에서 사용됩니다.

이미지 제공의 앱 아이콘 섹션에서 지침을 따르는 아이콘을 생성하거나 찾습니다.
myapp 디렉토리에 icon_128.png라는 이름으로 아이콘을 넣으십시오.
이미지 제공의 스크린 샷 섹션에 있는 지침에 따라 앱의 스크린 샷을 하나 이상 찍습니다.
각 스크린 샷을 1280x800 또는 640x400 픽셀로 편집합니다. 큰 스크린 샷은 고해상도 디스플레이에서 더 잘 보입니다.
프로모션 이미지를 하나 이상 만듭니다. 크기는 440x280이어야 하며 이미지 제공의 프로모션 이미지 섹션에 있는 지침을 따릅니다. 920x680 및 1400x560 프로모션 이미지를 제공 할 수도 있습니다.

참고 : 홍보 이미지는 사람들이 앱을 알아 차릴 수 있는 주요 방법입니다. 예쁘고 유익하게 만드십시오!

참고 : 아직 아이콘이 없는 경우 manifest.json 파일에서 다음 행을 임시로 제거하여 이 튜토리얼을 계속할 수 있습니다.

"icons": {
"128": "icon_128.png"
},

4 단계 : 앱이 작동하는지 확인

이 단계에서는 압축을 푼 앱을 브라우저에 로드 하여 앱이 유효한지 확인할 수 있습니다.

확장 프로그램 관리 페이지를 엽니다 : chrome : // extensions.
개발자 모드에 +가 있으면 +를 클릭합니다.
+가-로 변경되고 더 많은 버튼과 정보가 나타납니다.
압축을 푼 확장 프로그램 로드 버튼을 클릭합니다.
파일 대화 상자가 나타납니다.
파일 대화 상자에서 myapp 디렉토리를 선택합니다.
오류 대화 상자가 표시되지 않는 한 이제 앱을 설치 한 것입니다.
참고 : 확장 프로그램을 로드 할 수 없다는 오류 대화 상자가 표시되면 매니페스트 파일에 유효한 JSON 형식이 있고 manifest.json (예 : manifest.json.txt 또는 manifest.json.rtf가 아님)이라는 이름인지 확인하세요. JSON 유효성 검사기를 사용하여 매니페스트 형식이 유효한지 확인할 수 있습니다. 종종 서식 문제는 쉼표 (,) 및 따옴표 ( ")와 관련되어 있습니다. 너무 많거나 충분하지 않습니다. 예를 들어 매니페스트의 마지막 항목 뒤에 쉼표가 있으면 안됩니다.
새 탭을 만듭니다.
새로 설치된 앱의 아이콘은 새 탭 페이지의 Google 크롬 런처에 표시됩니다. 앱 영역이 최소화 된 경우 지정한 아이콘 대신 웹 사이트 파비콘이 표시됩니다.
앱 아이콘을 클릭합니다.
이제 앱을 시작했습니다. 브라우저 창에 웹 사이트가 표시되어야 합니다. 그렇지 않은 경우 매니페스트에서 "web_url"값을 변경하고 앱을 다시 로드 한 다음 해당 아이콘을 다시 클릭합니다.

5 단계 : 앱 압축

manifest.json 및 아이콘이 포함 된 디렉토리의 ZIP 아카이브를 만듭니다. Windows에서는 myapp을 마우스 오른쪽 버튼으로 클릭하고 보내기> 압축 (zip) 폴더 메뉴 항목을 선택하여 이 작업을 수행 할 수 있습니다. Mac OS X에서는 myapp을 control- 클릭하고 "myapp"압축을 선택합니다.

명령 줄을 사용하려면 다음을 입력 할 수 있습니다.

zip -r myapp.zip myapp

참고 : 앱이 Native Client를 사용하는 확장 프로그램 또는 패키지 앱인 경우 사용자 다운로드 패키지의 크기를 줄이는 방식으로 애플리케이션 디렉터리 계층 구조와 ZIP 파일을 구성 할 수 있습니다. 자세한 내용은 사용자 다운로드 패키지 크기 줄이기를 참조하세요.

6 단계 : 앱 업로드

이 단계에서는 5 단계에서 생성 한 ZIP 파일을 업로드합니다.

개발자 계정 인 Google 계정 (소유권을 확인하고 앱을 게시하는 데 사용할 계정)을 결정합니다. 개인 Gmail 계정을 사용하는 대신 앱 전용 계정을 만들 수 있습니다. 자세한 내용은 앱 게시에서 개발자 계정 선택을 참조하십시오.
참고 : 블로그를 만든 경우 해당 블로그를 만드는 데 사용한 계정을 선택하십시오.
Chrome 웹 스토어 개발자 대시 보드로 이동하여 개발자 계정에 로그인합니다.
개발자 계정이 없는 경우 대시 보드에 액세스하려고 할 때 지금 Chrome 웹 스토어 개발자로 등록하고 일회성 요금을 지불하라는 메시지가 표시됩니다. 이미 개발자 계정이 있지만 일회성 요금을 지불 한 적이 없는 경우 동일한 재 입력 페이지가 표시되며 지금 일회성 요금을 지불해야 합니다.
로그인하면 이미 업로드 한 설치 가능한 웹 앱, 확장 프로그램 및 테마 목록이 표시됩니다.
대시 보드에서 새 항목 추가 버튼을 클릭합니다.
설치 가능한 웹 앱, 확장 프로그램 또는 테마를 업로드 한 적이 없다면 계속 진행하기 전에 개발자 계약에 동의해야 합니다.
파일 선택을 클릭하고 5 단계에서 생성 한 ZIP 파일을 선택한 다음 업로드를 클릭합니다.
오류 메시지가 표시되면 오류를 수정하고 디렉토리를 다시 압축 한 다음 ZIP 파일을 업로드하십시오.

몇 초 안에 앱의 편집 페이지가 표시됩니다. 상단에 "urls"및 "web_url"필드에 지정한 사이트에 대한 소유권을 확인해야 한다는 경고가 표시 될 수 있습니다. 이 경고에는 앱을 게시하기 전에 언제든지 소유권을 확인할 수 있는 Google 웹 마스터 도구로 연결되는 링크가 있습니다.

7 단계 : 양식 작성 및 이미지 업로드

이 단계에서는 대시 보드의 편집 페이지를 사용하여 스토어의 앱 목록에 대한 정보를 제공합니다.

자세한 설명 섹션에서 앱을 설명하는 텍스트를 입력합니다.
아이콘 섹션에서 ZIP 파일에 넣은 것과 동일한 128x128 아이콘을 업로드합니다.
스크린 샷 섹션에서 앱의 스크린 샷을 하나 이상 업로드합니다 (1280x800 또는 640x400). 4 개 또는 5 개가 더 좋을 것입니다.
프로모션 이미지 섹션에서 프로모션 이미지를 업로드합니다 (최소 440x280 이미지를 업로드해야 함).
확인 된 웹 사이트 섹션에서 앱이 "공식 항목"인 웹 사이트를 선택합니다. 드롭 다운에는 본인이 확인 된 소유자 인 도메인 만 나열됩니다.
카테고리 섹션에서 앱에 대한 카테고리를 하나 이상 선택합니다. 자세한 내용은 모범 사례에서 앱의 범주 선택을 참조하십시오.
앱 요금을 청구하려면 가격 및 결제 섹션에서 가격과 결제 시스템을 지정하세요. 지원되는 지역에 거주하는 경우 내장 된 Chrome 웹 스토어 결제 시스템을 사용할 수 있습니다. 결제 옵션에 대한 자세한 내용은 앱 수익 창출을 참조하십시오.
수정 페이지 하단에서 초안 저장 및 대시 보드로 돌아 가기를 클릭합니다.

참고 : 이미 Google Play에서 앱을 호스팅하고 있고 Chrome 웹 스토어 앱 목록에 'Android에서 사용 가능'링크가 표시되도록 하려면 앱의 이름이 Google Play 목록과 동일해야 하며 두 앱이 모두 소유되어 있어야 합니다. 동일한 개발자 계정으로. CWS 항목을 다른 개발자 계정으로 전송하려면 이 양식을 제출해야 합니다.

8 단계 : 앱 목록 미리보기 및 개선

이제 스토어에서 앱 목록이 어떻게 표시되는지 확인할 수 있습니다.

대시 보드에서 앱의 "편집"링크를 클릭하여 편집 페이지로 돌아갑니다.
수정 페이지 하단에서 변경 사항 미리보기를 클릭합니다. 다음과 같은 페이지가 표시되어야 합니다.

참고 : 아직 스크린 샷을 제공하지 않은 경우 페이지 왼쪽 상단에 큰 빈 공간이 있습니다.
이미지와 텍스트가 보기 좋으며 제공 한 링크가 유효한지 확인하십시오. Google 브랜드를 언급하는 경우 브랜드 가이드 라인을 따르세요.
페이지 상단에서 "편집"링크를 클릭하여 편집 페이지로 돌아갑니다.
원하는 사항을 개선 한 후 임시 저장을 클릭하고 대시 보드로 돌아갑니다.
참고 : 앱 목록을 완성하기 전에 사용자가 앱을 어떻게 찾을 지 생각해보고 자세한 설명에 검색 할 가능성이 있는 용어가 포함되어 있는지 확인하세요. 유사한 앱 목록을 확인하여 앱을 표시하는 방법에 대한 아이디어를 얻으십시오.

9 단계 : 테스트, 배포, 게시, 개선, 반복

앱을 테스트하여 사용자가 좋은 경험을 할 수 있는지 확인하십시오. 앱에서 사용자 동의가 필요한 지리적 위치 또는 알림과 같은 기능을 사용하는 경우 매니페스트에 권한 필드를 추가하는 것이 좋습니다.
아직 지원 사이트가 없는 경우 새로 만듭니다. 앱 목록에 지원 사이트 링크를 제공하면 사용자가 문제를 보고 하는 방법으로 사용자 리뷰 섹션을 사용하는 대신 사용할 수 있습니다.
앱과 앱이 의존하는 사이트가 준비되면 앱을 웹에 배포합니다 (아직 공개되지 않은 경우).
Chrome 웹 스토어 개발자 대시 보드에서 '게시'링크를 클릭하여 Chrome 웹 스토어에 앱 목록을 게시합니다.
앱을 게시하면 목록이 나와 Chrome 웹 스토어에 액세스 할 수 있는 모든 사용자에게 표시됩니다. 사람들은 앱을 구매하고 (충전 한 경우) 설치할 수 있습니다. 앱을 설치할 때 ZIP 파일에 업로드 한 모든 항목이 포함 된 .crx 파일을 다운로드합니다.
앱을 게시 한 후 앱의 목록 또는 .crx 파일을 변경하려면 대시 보드를 사용하여 업데이트하십시오. 업데이트 된 .crx 파일을 앱에 푸시 하려면 매니페스트에서 버전 번호를 늘리고 새 ZIP 파일을 대시 보드에 업로드 한 다음 변경 사항을 게시하면 됩니다. 이미 앱을 설치 한 사용자는 자동으로 업데이트를받습니다.

다음은?

Overview

Chrome 웹 스토어를 잘 사용하는 데 필요한 개념적 배경 지식을 얻으십시오.

Checking for Payment

Licensing API를 사용하여 사용자가 앱 비용을 지불했는지 확인하는 방법을 알아 봅니다.

Samples

Licensing API를 사용하는 호스팅 된 앱의 여러 언어로 된 샘플을 찾습니다.

Tutorial: Licensing API

Licensing API를 사용하여 사용자가 지불했는지 확인하는 앱을 만드는 전체 예제를 살펴 봅니다.

앱을 작성하려는 경우 관심 있는 앱 유형에 대한 개발자 문서를 참조하세요.