개발자가 만드는 Chrome Extension — 아이디어에서 스토어 등록까지

아이디어 검증

Marginy의 시작은 단순했다. 이커머스에서 상품을 보면서 “수수료 빼면 실제로 얼마 남지?”를 매번 계산기를 열어서 확인하고 있었다. 이걸 상품 페이지에서 바로 보여주면 편하겠다고 생각했다.

Chrome Extension이 적합한 경우:

• 특정 웹사이트에서 정보를 추출하거나 추가할 때
• 브라우저의 기존 흐름을 방해하지 않고 기능을 덧붙일 때
• 항상 켜져 있어야 하지만, 독립 앱을 만들 정도는 아닐 때

반대로 적합하지 않은 경우:

• 복잡한 데이터 입력이 필요한 경우 → 웹앱이 낫다
• 오프라인 동작이 필수인 경우 → 데스크톱 앱이 낫다

프로토타입 — 하루 만에

첫 프로토타입은 하루 만에 만들었다. content script로 쿠팡 상품 페이지에서 가격을 추출하고, 수수료를 계산해서 페이지에 오버레이를 표시하는 것이 전부였다.

// 가격 추출
const priceEl = document.querySelector('.total-price strong');
const price = parseInt(priceEl.textContent.replace(/,/g, ''));

// 수수료 계산 (단순 버전)
const fee = price * 0.1;
const profit = price - fee;

// 오버레이 삽입
const overlay = document.createElement('div');
overlay.innerHTML = `순이익: ${profit.toLocaleString()}원`;
priceEl.parentNode.appendChild(overlay);

이 50줄짜리 스크립트가 “이거 쓸 만하다”를 확인해줬다. 프로토타입의 목적은 완성이 아니라 검증이다.

본격 개발

프로토타입에서 제품으로 가기 위해 추가한 것들:

1. 다중 플랫폼 지원

쿠팡만이 아니라 네이버 스마트스토어, 11번가도 지원해야 했다. 플랫폼마다 DOM 구조가 다르므로, 각 플랫폼용 파서를 분리했다.

interface PlatformParser {
  name: string;
  matchUrl: (url: string) => boolean;
  extractProduct: (doc: Document) => Product | null;
}

새 플랫폼을 추가할 때 인터페이스만 구현하면 된다.

2. 수수료 데이터 관리

플랫폼 수수료는 카테고리마다 다르고, 주기적으로 변한다. 하드코딩하면 업데이트할 때마다 확장 프로그램을 재배포해야 한다. Cloudflare Workers에 수수료 API를 만들어서 원격으로 업데이트한다.

3. Popup UI

React로 Popup을 만들었다. 계산 결과를 상세하게 보여주고, 플랫폼 간 비교도 가능하게 했다.

스토어 등록 과정

개발자 등록

• Chrome Web Store 개발자 등록: 일회성 $5
• 신원 확인에 1~2일 소요

심사 준비물

• 확장 프로그램 ZIP 파일
• 아이콘: 128x128 PNG
• 스크린샷: 1280x800 또는 640x400, 최소 1장
• 설명문: 기능, 권한 사용 이유
• 개인정보 처리방침 URL

권한 정당화

심사에서 가장 중요한 부분이다. 요청하는 권한마다 “왜 필요한지”를 설명해야 한다.

• activeTab: “현재 탭의 상품 가격을 읽기 위해”
• storage: “사용자 설정(기본 수수료율 등)을 저장하기 위해”
• host_permissions: “쿠팡, 네이버 상품 페이지에서만 동작하기 위해”

불필요한 권한을 요청하면 심사에서 거절된다.

심사 기간

• 첫 등록: 3~7일
• 업데이트: 1~3일
• 거절 시: 수정 후 재제출, 다시 3~7일

업데이트 전략

스토어에 올린 후에도 계속 업데이트해야 한다.

• 수수료 변경: API에서 처리, 확장 프로그램 업데이트 불필요
• 새 플랫폼 추가: 확장 프로그램 업데이트 필요 (content script 추가)
• 버그 수정: 긴급한 경우 심사 빠른 트랙 요청 가능

버전 관리를 manifest.json의 version 필드로 한다. 시맨틱 버저닝을 따르되, 스토어 표시용이므로 메이저 버전을 자주 올리지 않는다.

배운 것들

• DOM은 변한다: 이커머스 사이트는 A/B 테스트를 자주 한다. 클래스명에 의존하면 깨진다. 가능하면 데이터 속성이나 구조적 선택자를 사용
• 권한은 최소한으로: 필요 없는 권한은 심사를 느리게 하고, 사용자 신뢰를 떨어뜨린다
• 오프라인 대비: 네트워크가 없어도 기본 수수료율로 계산할 수 있게 로컬 폴백을 준비

정리

Chrome Extension은 “브라우저 위에서 동작하는 미니 앱”이다. 프로토타입이 빠르고, 배포가 간단하고, 기존 웹사이트에 가치를 더할 수 있다. 아이디어가 있다면 하루 만에 프로토타입을 만들어보자.