관리 메뉴

개발 여행자, 현

[CCC - 보기쉬운 유튜브 자동자막] 크롬 익스텐션 배포하기 본문

React

[CCC - 보기쉬운 유튜브 자동자막] 크롬 익스텐션 배포하기

예스현 2023. 7. 25. 19:50

 

기획부터 디자인, 프론트엔드, 백엔드 모든 과정을 혼자 고군분투하여 만든 'CCC 서비스' 개발 과정을 기록하고자 한다.

CCC란 보기쉬운 유튜브 자동자막 서비스로, 유튜브 자동자막의 사용 경험을 높이고자 만든 서비스이다.

자세한 내용은 배포 이후 별도의 포스팅으로 소개하고자 한다.

 

이번 포스팅에서는 크롬 익스텐션 배포 방법을 간략하게 소개한다.

 

크롬 익스텐션 배포하기


 1. 크롬 웹 스토어에 접속 후 설정 아이콘을 클릭하여 개발자 대시보드 클릭


 

2. Chrome 앱스토어 개발자로 등록하기 위한 수수료 $5를 결제


나는 해외결제 카드가 있어서 문제없이 진행했는데, 아마 Master 카드나 Visa 카드와 같이 해외결제 가능한 카드만 되는듯 하다.

 

 

3. 결제가 완료되면 개발자 대시보드 페이지에 접근이 가능


현재 검토를 대기중인 상황에서 찍은 사진이라, 항목이 2개 올라가있지만

처음 접속한다면 비어있는 상황일 것이다.

 

4. 개발자 계정 설정


왼쪽 탭에서 '계정' 버튼을 클릭하여 프로필을 설정한다.

서비스에 표시될 이름이라고 하여 무난하게 Hyun이라고 작성하였다.

이메일도 필수로 입력해야 한다.

인증을 안받은 상태에서 서비스를 등록하려고 하니 진행이 되지않았다.

 

연락처 이메일 주소를 입력하고 인증은 받아야지만 서비스를 등록할 수 있다.

 

작성한 이메일로 들어가서 인증을 해주면 계정에서 설정해야 되는 부분은 끝이다.

++ 나는 추가적으로 서비스 업데이트 완료, 리뷰작성 등의 이벤트가 발생했을 때 알림을 받고자 설정했다.

기본값은 알림을 받지않는 걸로 저장되어 있으니 수정하면 된다.

 

5. 서비스 추가 - 스토어 등록 정보


다시 항목 탭으로 돌아와 우측 상단의 '새 항목' 버튼을 클릭한다.

파일은 buile 폴더를 zip 형태로 압축하여 올리면 된다.

나는 맥북이라 혹시 몰라서 Keka 서비스를 이용하여 압축했다.

 

그럼 다음과 같은 화면이 나올텐데, 서비스의 명칭은 manifest.json에 작성한 내용이 자동으로 기입된다.

 

사진은 검토 중인 사진이어서 회색으로 표시가 되어있지만

서비스 설명을 작성하고, 카테고리와  언어를 설정하면 된다.

이후 스토어에 기재할 아이콘과 설명을 할 수 있는 캡처화면을 업로드한다.

기존에 만들었던 아이콘과 캡쳐화면이 해상도에 맞지않아서 Figma를 활용하여 해상도를 설정했다.

 

https://www.iloveimg.com/ko/resize-image#resize-options,pixels

Figma 사용이 어려운 사람들은 해당 사이트에서도 가능하니 참고하길 바란다.

 

6. 서비스 추가 - 개인 정보 보호 관행


마지막 단계인 개인 정보 보호 관행 페이지 작성 부분이다.

이 부분을 잘 작성해야지 반려가 되는 일이 적다고 한다.

 

크롬 익스텐션은 서비스의 '범위'를 민감하게 체크하는 것 같다.

서비스가 어느 페이지에서 어떤 목적으로 사용하는지 입력한다.

manifest.json의 permission 부분에 작성한 내용은 자동으로 기재되어 있다.

permissions: ['tabs', 'activeTab', 'https://www.youtube.com/*'],

나는 tabs와 activeTab 권한을 요청하였기에, 관련 내용을 기재했다.

 

 

7. 제출하여 검토받기


이전 단계를 전부 작성하였으면 하단의 데이터 사용여부와, 약관동의를 선택하고

우측 상단의 '제출하여 검토받기' 버튼을 클릭한다

 

그럼 다음과 같이 사용 범위를 제한하라는 안내문을 볼 수 있는데, 

나는 설정하지 않은 부분이었어서 재설정하여 업로드했다.

안해도 상관은 없지만, 조금 더 까다롭게 검토가 진행된다고 하여서 수정했다.

검토 대기 중이라는 알림창을 보면 끝이다.

 

검수는 빠르면 1일, 길면 4일 정도 소요된다고 한다.

 

검토 대기 중을 보는 순간부터 시작이라는데, 어떻게 반려될지 걱정된다.. 한 번에 통과되기를....

 

이상으로 글을 마친다.

 

 

+ 반려가 정말 많이 된다고 해서 걱정했는데, 다행히 4일째 되던 날 승인됐다 :) 

 

 


참고문헌

https://zuminternet.github.io/Zum-Chrome-Extension/

 

크롬 확장프로그램 개발⛏️ 회고

Vue.js를 이용하여 줌 확장프로그램을 개발하는 과정에 대한 회고입니다.

zuminternet.github.io

https://chrome.google.com/webstore/category/extensions?hl=ko 

 

Chrome 웹 스토어

Chrome에 사용할 유용한 앱, 게임, 확장 프로그램 및 테마를 찾아보세요.

chrome.google.com