[WebTranslator 개발기 #20] 크롬 웹 스토어 출시를 위한 모든 준비: 아이콘 교체, 실물 스크린샷, 심사 필수 요건 총정리

앞서 19편에서는 한국어 웹페이지에서 텍스트를 드래그하여 복사할 때 단어 사전 팝업이 커서를 가로막던 문제를 분석하고, 10% 언어 비율 임계값(Threshold) 판정과 ECMAScript 최신 유니코드 속성(\p{L}) 정규식 보정을 통해 스마트 드래그 필터링을 완성한 과정을 살펴보았습니다.

이로써 텍스트 인라인 번역부터 단어 사전 팝업, 다크모드 환경 적응 렌더링, 툴바 빠른 설정까지 모든 핵심 기능 구현과 실전 사용성 검증을 마쳤습니다. 이제 로컬 개발 단계를 마무리하고, 전 세계 사용자들이 다운로드할 수 있는 구글 크롬 웹 스토어(Chrome Web Store) 정식 출시 단계로 나아갈 차례였습니다.

처음에는 단순히 완성된 소스 코드를 압축(.zip)하여 개발자 대시보드에 업로드하면 곧바로 배포가 끝날 것이라 생각하기 쉽습니다. 하지만 실제로 크롬 웹 스토어 등록 절차에 들어가 보면 계정 2단계 인증과 등록비 결제부터, 엄격한 규격의 그래픽 에셋(아이콘 3종, 1280x800 실물 스크린샷), 다국어 메타데이터, 개인정보 보호 관행 작성까지 사전에 갖추어야 할 필수 준비물이 매우 방대합니다.

이번 글에서는 크롬 웹 스토어에 확장 프로그램을 정식 출시하기 위해 요구되는 5대 필수 요건을 총망라하여 정리하고, 기존의 임시 말풍선 아이콘을 번역 전용 아이콘으로 교체한 배경과 AI 가짜 이미지를 배제한 실물 스크린샷 제작 과정을 공유하고자 합니다.

1. 크롬 웹 스토어 정식 출판을 위한 5대 필수 요건 총정리

구글 크롬 웹 스토어는 사용자의 보안과 브라우징 품질을 유지하기 위해 개발자 프로그램 정책(Developer Program Policies)을 통해 심사 기준을 적용하고 있습니다. 스토어 등록을 위해 사전에 준비해야 할 항목들은 크게 5가지 영역으로 나뉩니다.

이 중 하나라도 누락되거나 규격에 맞지 않으면 개발자 대시보드에서 배포 버튼 자체가 비활성화되거나, 제출 후 심사관에 의해 반려(Rejected) 처리됩니다.

2. 그래픽 에셋 1: 임시 말풍선 아이콘 교체와 현실적 타협

가장 먼저 해결해야 했던 과제는 프로그램의 얼굴인 아이콘 에셋의 교체였습니다.

프로젝트 초기 단계에서는 빠른 기능 프로토타이핑을 위해 템플릿에 포함되어 있던 '채팅 말풍선' 형태의 범용 아이콘을 그대로 사용하고 있었습니다. 하지만 이 상태로 스토어에 등록할 경우, 사용자가 툴바나 스토어 검색 결과에서 WebTranslator를 번역기가 아닌 메신저나 실시간 채팅 도구로 오인할 위험이 컸습니다.

1인 개발 환경에서 아이콘 디자인에 며칠씩 시간을 쏟을 수는 없었기에, "사용자가 보았을 때 적당히 번역 아이콘이구나 하는 직관적 인상을 주는 것"을 목표로 현실적인 타협점을 찾았습니다.

1. 시각적 심볼 정립: 글로벌 웹페이지를 상징하는 지구본(Globe)과 다국어 변환을 상징하는 언어 전환 기호(A/文)를 결합한 간결한 실루엣 채택.
2. 다중 해상도 래스터라이징: 16x16, 48x48, 128x128 픽셀 크기의 투명 배경 PNG 파일로 각각 내보내어 icons/ 폴더에 배치.
3. 매니페스트 연동: manifest.json의 최상위 icons 필드와 브라우저 상단 툴바 액션인 action.default_icon에 동시 매핑.

{
  "name": "__MSG_appName__",
  "version": "1.0.0",
  "description": "__MSG_appDescription__",
  "default_locale": "ko",
  "icons": {
    "16": "icons/icon16.png",
    "48": "icons/icon48.png",
    "128": "icons/icon128.png"
  },
  "action": {
    "default_title": "__MSG_appName__",
    "default_popup": "optionPopup.html",
    "default_icon": {
      "16": "icons/icon16.png",
      "48": "icons/icon48.png",
      "128": "icons/icon128.png"
    }
  }
}

화려한 3D 예술 작품은 아니지만, 크롬 툴바의 작은 16px 공간에서도 뭉개짐 없이 선명하게 번역 도구임을 식별할 수 있는 실용적인 아이콘 구성을 완성했습니다.

3. 그래픽 에셋 2: AI 가짜 이미지 거부와 실물 스크린샷 1280x800 구성

아이콘 다음으로 중요한 그래픽 에셋은 사용자가 스토어 상세 페이지에서 가장 먼저 확인하는 스토어 스크린샷(Store Screenshots)입니다. 이 과정에서 한 차례 큰 방향성 수정이 있었습니다.

AI 생성 가짜 이미지의 위험성과 정책 준수

개발 지원 AI 도구는 처음에 미드저니나 DALL-E 스타일의 화려한 3D 가상 렌더링 그래픽을 스토어 스크린샷으로 등록하자고 제안했습니다. 사이버틱한 네온 라인과 가상의 브라우저 목업이 들어간 화려한 이미지였습니다.

하지만 이는 구글 크롬 웹 스토어의 "오해 소지가 있는 메타데이터(Misleading Metadata)" 정책을 위반하는 행위였습니다. 구글 정책은 프로그램의 실제 동작 화면과 동떨어진 과장된 마케팅 이미지를 허위 정보로 규정하여 심사를 반려합니다.

직접 캡처한 4종의 실물 스크린샷과 AI 배치 보조

실제 웹사이트 환경에서 직접 캡처를 진행한 후, 여러 장의 캡처본을 정돈된 하나의 스토어용 이미지로 배치·합성하는 작업에만 AI를 보조 도구로 활용했습니다:

1. 실물 스크린샷 1 (전체 페이지 인라인 번역): Steam 상점 페이지에서 Alt+A를 눌렀을 때 원래의 레이아웃과 버튼 디자인을 깨뜨리지 않고 자연스러운 한국어로 번역된 실제 화면.
2. 실물 스크린샷 2 (드래그 단어 사전 팝업): 영문 문단에서 단어를 드래그했을 때 0.8초 만에 즉각 렌더링되는 발음 기호, 품사별 뜻, 실생활 예문 사전 카드 화면.
3. 실물 스크린샷 3 (옵션 페이지 & 다중 번역 엔진): Google 번역, Gemini AI, OpenAI GPT, Claude, 로컬 Ollama를 선택할 수 있는 직관적인 옵션 UI 화면.
4. 실물 스크린샷 4 (툴바 빠른 설정 팝업): 툴바 아이콘 클릭 시 나타나는 빠른 번역 토글 및 실시간 폰트 크기 조절 슬라이더 화면.

스토어 심사관이 보더라도 실제 동작을 즉시 신뢰할 수 있고, 사용자가 설치 전 기능을 정확히 파악할 수 있는 1280x800px 규격의 정직한 시각 자료 4종을 dist/screenshots/에 구축 완료했습니다.

4. 배포 패키지 정리 및 다국어 메타데이터 구축

그래픽 에셋이 완성된 후, 배포 패키지(dist/web-translator-v1.0.0.zip)의 무결성과 스토어 등록 정보(Store Listing Metadata)를 정리했습니다.

불필요한 파일이 배제된 클린 패키징

확장 프로그램 소스 폴더 내에 존재하는 .git, 임시 문서(docs/), 원본 PSD/디자인 파일, 미사용 모듈 등이 ZIP 압축에 포함되면 패키지 용량이 불필요하게 커지고 심사 시 감점 요인이 됩니다.

따라서 manifest.json, src/, _locales/, icons/, content.css, HTML 파일들만 포함된 초경량 정규 배포 패키지 web-translator-v1.0.0.zip을 생성했습니다.

다국어(i18n) 스토어 설명문 준비

한국 사용자뿐만 아니라 글로벌 사용자를 위해 _locales/ko/messages.json과 _locales/en/messages.json을 완비하여 스토어 상세 설명(Detailed Description)을 이원화했습니다:

5. 마무리하며: 권한 축소와 다음 편 예고

이번 포스팅에서는 크롬 웹 스토어 출시에 필요한 5대 필수 요건 체크리스트를 총정리하고, 임시 말풍선 아이콘 교체와 1280x800 실물 스크린샷 제작, 그리고 정규 배포 패키지 구축 과정을 살펴보았습니다.

스토어 등록 정보 중 '개인정보 보호 관행(Privacy Practices)' 탭은 매니페스트에 선언된 권한에 따라 작성해야 하는 데이터 사용 항목과 사유가 달라집니다. 권한이 많아질수록 각각의 데이터 수집 여부와 정당한 이유를 개별적으로 작성해야 하므로 불필요한 권한은 최대한 줄여야 합니다.

WebTranslator에서 실제로 사용하는 권한은 설정 저장을 위한 storage와 웹페이지 텍스트 감지 및 번역 API 통신을 위한 host_permissions(<all_urls>) 단 2개뿐입니다. 하지만 초기 개발 과정에서 AI 에이전트가 편의상 실제 쓰지도 않는 부가 권한들을 덕지덕지 붙여놓은 상태였습니다.

다음 글에서는 AI가 추가했던 불필요한 권한들을 모두 걷어내고 storage와 host_permissions 2개만 남겨 개인정보 보호 항목을 깔끔하게 작성하고, 최종 출시 버튼을 누르기까지의 실전 대처 과정을 다루겠습니다.

혹시 크롬 확장 프로그램을 스토어에 출시하면서 권한 설정이나 스토어 에셋 준비 과정에서 겪으셨던 경험이 있으신가요? 댓글로 의견을 남겨주시면 감사하겠습니다.