Learning Notes

고급 과정: Chrome Web Store 등록하기

DESIGN WORKBENCH 같은 로컬 Chrome 확장앱을 zip 공유용 개인 도구에서 Chrome Web Store에 등록 가능한 패키지로 준비하는 고급 체크리스트입니다.

이 문서는 DESIGN WORKBENCH를 zip 공유용 개인 도구에서 Chrome Web Store에 등록 가능한 확장앱으로 준비하는 과정입니다. 기초 과정에서는 zip 압축 해제 -> chrome://extensions -> 압축해제된 확장 프로그램 로드까지만 다루고, 이 문서는 공개 배포나 비공개/제한 배포를 원할 때 사용합니다.

참고한 로컬 자료:

  • C:\Users\sound\.codex\skills\chrome-extension-webstore-builder\references\webstore-submission-playbook.md
  • C:\Users\sound\.codex\skills\chrome-extension-webstore-builder\references\release-checklist.md
  • docs/store-listing.md
  • docs/privacy.md

공식 확인 기준:

  • Chrome Developer Dashboard에서 zip 업로드 후 Store Listing, Privacy, Distribution, Test instructions 탭을 채웁니다.
  • Privacy 탭에는 단일 목적, 권한 사유, 원격 코드 여부, 데이터 사용 선언, 개인정보처리방침 URL이 필요합니다.
  • 설명, 아이콘, 스크린샷이 비어 있거나 부정확하면 거절될 수 있습니다.

1. 등록 전에 결정할 것

먼저 이 확장을 누구에게 배포할지 정합니다.

방식 언제 쓰나
Public 누구나 검색해서 설치할 수 있게 공개할 때
Unlisted 링크를 아는 사람만 설치하게 할 때
Private / Trusted testers 일부 사용자에게만 테스트 배포할 때
Enterprise 조직 단위 배포가 필요할 때

이 프로젝트는 처음에는 Unlisted 또는 제한 테스트가 적합합니다. 지인에게 zip을 나눠주던 흐름에서 웹스토어 링크 공유로 자연스럽게 넘어갈 수 있습니다.

2. 개발자 계정 준비

필요한 것:

  • Google 계정
  • Chrome Web Store Developer Dashboard 접속
  • 개발자 등록
  • 계정 2단계 인증
  • 개인정보처리방침을 올릴 공개 HTTPS URL

실무 팁:

  • 개인정보처리방침은 GitHub Pages로 올리는 것이 가장 쉽습니다.
  • docs/privacy.md를 HTML로 바꿔 공개 URL을 만들면 됩니다.
  • 등록용 이메일이나 GitHub Issues 같은 지원 채널도 정해 둡니다.

3. 출시 zip 만들기

웹스토어에는 프로젝트 폴더 전체가 아니라 실행에 필요한 파일만 들어간 zip을 올립니다.

현재 프로젝트에서는 다음 명령을 씁니다.

1
.\build.ps1

생성 예시:

1
dist/workbench-v3.0.0.zip

웹스토어용 zip에 들어가야 하는 것:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
manifest.json
background.js
sidepanel.html
styles.css
app.js
data.js
palette.js
search.js
data/*.js
icons/icon-16.png
icons/icon-32.png
icons/icon-48.png
icons/icon-128.png
README.md

넣지 않는 것이 좋은 것:

1
2
3
4
5
6
7
docs/
dist/
build.ps1
rename-brand.ps1
icons/icon-master.png
icons/icon-256.png
icons/icon-512.png

4. 업로드 전 품질 검사

최소 검사:

1
2
3
4
node --check app.js
node --check background.js
node --check palette.js
node --check search.js

매니페스트 참조 검사:

1
2
3
4
5
6
7
8
9
10
11
12
13
@'
const fs = require('fs');
const manifest = JSON.parse(fs.readFileSync('manifest.json', 'utf8'));
const refs = [
  manifest.side_panel?.default_path,
  manifest.background?.service_worker,
  ...Object.values(manifest.icons || {}),
  ...Object.values(manifest.action?.default_icon || {})
].filter(Boolean);
const missing = refs.filter((p) => !fs.existsSync(p));
if (missing.length) throw new Error(`Missing: ${missing.join(', ')}`);
console.log(`manifest ok: ${refs.length} references`);
'@ | node

체크리스트:

  • manifest_version이 3인가
  • 모든 manifest 참조 파일이 존재하는가
  • 권한이 sidePanel, storage, tabs처럼 필요한 것만 있는가
  • 원격 스크립트 로딩이나 eval이 없는가
  • 개인정보처리방침이 실제 동작과 일치하는가
  • 아이콘 16/32/48/128이 있는가
  • 스크린샷을 실제 앱 화면으로 준비했는가

5. Developer Dashboard 업로드

절차:

  1. Chrome Web Store Developer Dashboard 접속
  2. Add new item 클릭
  3. dist/workbench-v3.0.0.zip 업로드
  4. manifest 오류가 없는지 확인
  5. 좌측 메뉴의 탭을 하나씩 채움

주요 탭:

탭 하는 일
Package 업로드된 zip과 버전 확인
Store Listing 이름, 요약, 설명, 스크린샷, 카테고리
Privacy 단일 목적, 권한 사유, 데이터 사용 선언, 개인정보처리방침
Distribution 공개 범위, 국가, 가격
Test instructions 심사자가 기능을 확인하는 방법

6. Store Listing 입력 예시

자세한 복붙용 문구는 docs/store-listing.md에 있습니다.

추천 이름:

1
Workbench - Creator/Dev/Marketing/Education

한 줄 설명:

1
창작자, 개발자, 마케터, 교육자를 위한 직군별 도구를 워크플로 프리셋과 키보드 우선 UI로 묶은 Chrome 사이드패널.

카테고리:

1
Productivity

설명 작성 원칙:

  • 기능을 실제 동작 기준으로 씁니다.
  • 키워드를 반복해서 나열하지 않습니다.
  • “최고”, “유일”, “공식” 같은 검증 어려운 표현을 피합니다.
  • 개인정보와 권한 설명이 Privacy 탭과 충돌하지 않게 합니다.

7. 스크린샷 준비

최소 1장이 필요하지만 3-5장을 추천합니다.

추천 캡처:

  1. 메인 화면: 도메인 스위처, 프리셋, 카드 리스트
  2. Command Palette 열린 화면
  3. 상세 Drawer 화면
  4. 개인 워크벤치에 도구가 담긴 화면
  5. 다크/라이트 테마 비교

권장 이미지:

  • 스크린샷: 1280x800 또는 640x400
  • 스토어 아이콘: 128x128
  • 선택 프로모션 이미지: 440x280, 1400x560

8. Privacy 탭 작성

이 앱의 핵심 답변은 “로컬 저장, 외부 전송 없음”입니다.

단일 목적 예시:

1
창작자, 개발자, 마케터, 교육자가 자주 쓰는 도구를 Chrome 사이드패널에서 워크플로 단위로 탐색하고 실행할 수 있게 합니다.

권한 사유:

1
2
3
4
5
6
7
8
sidePanel:
확장 프로그램을 Chrome 사이드패널로 표시하기 위해 필요합니다.

storage:
즐겨찾기, 메모, 컬렉션, 최근 사용, 워크벤치 큐, 테마 설정을 사용자의 브라우저 로컬 저장소에 저장하기 위해 필요합니다.

tabs:
사용자가 도구 카드나 워크벤치 큐를 클릭했을 때 해당 도구를 새 탭으로 열기 위해 필요합니다. 탭 내용이나 방문 기록을 읽지 않습니다.

원격 코드:

1
No. 이 확장 프로그램은 원격 코드를 다운로드하거나 실행하지 않습니다.

데이터 사용 선언:

1
사용자 데이터를 외부 서버로 전송하지 않습니다. 즐겨찾기, 메모, 컬렉션, 최근 사용, 클릭 카운트, 워크벤치 큐는 chrome.storage.local에만 저장됩니다.

주의:

  • favicon 이미지는 https://www.google.com/s2/favicons에서 불러옵니다.
  • 이것은 도구 도메인 아이콘 표시 목적이며, 자체 서버로 사용자 데이터를 보내는 기능은 아닙니다.
  • 이 내용은 docs/privacy.md에도 일관되게 적혀 있어야 합니다.

9. 개인정보처리방침 URL 만들기

웹스토어에는 공개 HTTPS 개인정보처리방침 URL이 필요합니다.

추천 방식:

  1. GitHub 공개 저장소를 만듭니다.
  2. docs/privacy.md 내용을 privacy.html 또는 GitHub Pages 문서로 공개합니다.
  3. GitHub Pages를 켭니다.
  4. 생성된 URL을 Privacy 탭에 입력합니다.

예시:

1
https://<your-handle>.github.io/workbench/privacy.html

10. Test Instructions 작성

심사자가 로그인이나 특별한 계정 없이 기능을 확인할 수 있게 씁니다.

예시:

1
2
3
4
5
6
7
8
1. 확장 프로그램을 설치합니다.
2. Chrome 툴바에서 Workbench 아이콘을 클릭하거나 Alt+D를 눌러 사이드패널을 엽니다.
3. 상단 도메인 스위처에서 교육, 개발자, 창작자, 마케팅 도메인을 전환합니다.
4. 검색창에 "React" 또는 "AI"를 입력해 도구 카드가 필터링되는지 확인합니다.
5. 도구 카드를 클릭해 상세 Drawer를 엽니다.
6. 즐겨찾기와 메모를 입력한 뒤 사이드패널을 닫았다 다시 열어 저장 상태를 확인합니다.
7. 카드의 워크벤치 추가 버튼을 눌러 개인 워크벤치에 담고, "모두 열기" 버튼으로 새 탭이 열리는지 확인합니다.
8. Command Palette(Ctrl+K 또는 Cmd+K)를 열어 도구 검색과 액션 실행을 확인합니다.

11. Distribution 설정

처음 제출할 때 추천:

  • 가격: Free
  • 공개 범위: Unlisted 또는 Trusted testers로 시작
  • 지역: 특별한 이유가 없다면 전체
  • 게시 방식: 심사 통과 후 수동 게시를 선택하면 더 안전합니다.

12. 제출 전 마지막 체크

제출 버튼을 누르기 전:

  • Cannot submit 항목을 열어 모든 blocker를 제거합니다.
  • Store Listing에 설명, 아이콘, 스크린샷이 들어갔는지 확인합니다.
  • Privacy 탭에서 권한 사유가 모두 채워졌는지 확인합니다.
  • 개인정보처리방침 URL이 외부에서 열리는지 확인합니다.
  • zip 버전이 manifest.json의 version과 맞는지 확인합니다.
  • 제출 후 상태가 pending review로 바뀌는지 확인합니다.

13. 반려되었을 때 대응

반려되면 한 번에 많은 것을 바꾸지 말고, 리뷰어가 지적한 항목과 연결되는 최소 수정만 합니다.

자주 나오는 문제:

문제 대응
스크린샷 부족 실제 사용 화면 스크린샷 추가
권한 사유 부족 sidePanel, storage, tabs 사유를 구체화
개인정보처리방침 URL 오류 공개 HTTPS URL로 교체
원격 코드 답변 불일치 구현과 Privacy 답변을 일치시킴
설명이 모호함 단일 목적과 실제 기능 중심으로 수정

수정 후:

  1. 코드나 문서 수정
  2. manifest.json version 증가
  3. .\build.ps1
  4. 새 zip 업로드
  5. 간단한 수정 설명과 함께 재제출

14. 버전 업데이트 절차

새 버전을 배포할 때:

1
2
3
4
5
6
1. manifest.json의 version을 올립니다.
2. 변경 사항을 README 또는 릴리즈 노트에 적습니다.
3. .\build.ps1로 새 zip을 만듭니다.
4. Dashboard의 Package 탭에 새 zip을 업로드합니다.
5. 필요하면 Store Listing 설명을 업데이트합니다.
6. Submit for review를 누릅니다.

예시:

1
"version": "3.0.1"

버전 규칙:

  • 작은 문구 수정/버그 수정: 3.0.1
  • 기능 추가: 3.1.0
  • 구조가 크게 바뀜: 4.0.0

15. 수업에서 고급과정으로 가르치는 순서

추천 진행:

  1. 기초 과정에서 만든 zip을 다시 빌드한다.
  2. zip 안에 들어간 파일과 빠진 파일을 비교한다.
  3. manifest.json 권한을 하나씩 설명한다.
  4. docs/privacy.md를 읽고 실제 동작과 맞는지 검토한다.
  5. docs/store-listing.md의 문구를 Dashboard 입력값으로 바꾼다.
  6. 스크린샷 3장을 만든다.
  7. Privacy 탭 답변을 작성한다.
  8. Test instructions를 작성한다.
  9. 제출 전 checklist를 돌린다.
  10. 실제 제출은 선택 과제로 둔다.

이 순서로 가르치면 초보자는 “코드를 완성하는 것”과 “배포 가능한 제품으로 설명하는 것”이 다르다는 점을 배울 수 있습니다.

지식 링크

연결된 글

이 글을 언급한 글

언급: 고급 과정: Chrome Web Store 등록하기 DESIGN WORKBENCH 만들기: 초보자용 Chrome 확장앱 튜토리얼 좋은 디자인 도구 목록을 매일 쓰는 Chrome 사이드패널 확장앱으로 바꾸는 초보자용 실습 기록입니다. manifest.json, 사이드패널, 검색, 로컬 저장, zip 공유까지 단계별로 정리합니다.
Next Reading

더 읽어보기

DESIGN WORKBENCH 만들기: 초보자용 Chrome 확장앱 튜토리얼 좋은 디자인 도구 목록을 매일 쓰는 Chrome 사이드패널 확장앱으로 바꾸는 초보자용 실습 기록입니다. manifest.json, 사이드패널, 검색, 로컬 저장, zip 공유까지 단계별로 정리합니다. Google Cloud Knowledge Catalog OKF 실습: 메타데이터를 옵시디언 마크다운으로 만들고 그래프로 시각화하기 Google Cloud Knowledge Catalog의 OKF 예제 번들을 Cloud Shell에서 실행하고, HTML 그래프와 Obsidian 그래프 뷰로 확인하는 실습 기록입니다. A Personal RAG System: Turning Obsidian Notes Into An AI Reference Library A practical path for starting RAG from Obsidian note hygiene, metadata, reviewed permanent notes, and verification loops instead of jumping straight into vector databases.
Comments

댓글

GitHub 계정으로 의견을 남길 수 있습니다. 댓글은 GitHub Discussions에 저장됩니다.