브라우저 확장프로그램 시리즈 (1/5)
1편에서는 확장프로그램이 무엇이고, 어떤 생태계 위에서 돌아가며, 왜 지금 배워볼 만한 기술인지 큰 그림을 먼저 그려봅니다.
들어가며 — 이미 당신은 확장프로그램의 세계에 살고 있다
유튜브에서 광고가 안 뜨나요? 그건 uBlock Origin 같은 확장프로그램 덕분일 가능성이 높아요.
회원가입할 때 비밀번호가 자동으로 채워지나요? 1Password나 Bitwarden 같은 확장이 해주고 있는 거예요.
영어 기사를 한국어로 한 방에 바꿔 읽나요? Google Translate 확장이 뒤에서 열심히 일하고 있죠.
우리는 이미 확장프로그램(Extension) 이라는 작은 도구들에 둘러싸여 살고 있어요. 그런데 막상 “직접 만들 수 있을까?” 하고 생각하면 막막하게 느껴집니다. 네이티브 앱처럼 복잡할 것 같고, 뭔가 특수한 언어를 배워야 할 것 같고요.
결론부터 말하면 그렇지 않아요. 확장프로그램은 결국 HTML, CSS, JavaScript로 만드는 작은 웹앱이에요. 간단한 웹페이지를 만들어본 적 있다면 이미 70%는 준비가 끝난 셈입니다.
이번 5부작 시리즈에서는 확장프로그램을 처음 접하는 분부터 웹 개발 경험이 있는 분까지, 모두가 자기만의 확장프로그램을 만들고 스토어에 배포하기까지의 전 과정을 따라가볼 거예요. 첫 편인 오늘은 코드 대신 판을 먼저 봅니다. 이 생태계가 어떻게 생겨먹었는지 알아야, 앞으로 배울 것들이 어디에 어떻게 쓰이는지 감이 잡히거든요.
확장프로그램이란 무엇인가
가장 간단하게 정의하면 이래요.
확장프로그램은 브라우저 위에서 돌아가는 작은 프로그램이다. 웹페이지를 조작하거나, 브라우저 자체에 새로운 기능을 붙일 수 있다.
일반 웹사이트와의 차이가 중요해요. 웹사이트는 자기 자신(그 사이트의 페이지)만 다룰 수 있지만, 확장프로그램은 브라우저에서 열린 모든 페이지와 브라우저 자체의 기능을 건드릴 수 있어요. 물론 사용자가 권한을 허락한 범위 안에서요.
예를 들어볼게요.
- 일반 웹사이트는
naver.com이면naver.com안에서만 작동해요. 다른 탭에서 뭐가 열려 있는지 알 수 없죠. - 확장프로그램은 “모든 페이지에서 자동으로 다크 모드 적용” 같은 걸 할 수 있어요. 유튜브, 네이버, 깃허브, 어디든지요.
이게 확장프로그램의 진짜 힘이에요. “브라우저 전체를 무대로 쓸 수 있다” 는 것.
확장프로그램이 실제로 하는 일들
우리가 매일 쓰는 확장프로그램들이 어떤 일을 하는지 보면 감이 잡혀요.
- uBlock Origin — 광고 차단. 웹페이지가 불러오는 광고 요청을 중간에서 막아요.
- 1Password / Bitwarden — 비밀번호 관리. 로그인 폼을 감지해서 자동으로 채워줘요.
- Grammarly — 영어 맞춤법 검사. 텍스트 입력 필드를 감지해서 실시간으로 교정해줘요.
- Honey — 쇼핑몰 할인 쿠폰 자동 적용. 결제 페이지를 감지해서 쿠폰을 시도해봐요.
- React Developer Tools — 개발자 도구 확장. F12에 새 탭을 추가해서 React 컴포넌트 구조를 보여줘요.
- Momentum — 새 탭을 예쁜 대시보드로 바꿔줘요.
공통점이 보이시나요? 웹페이지를 읽고, 조작하고, 브라우저 UI를 확장하는 일들이에요. 그리고 이 모든 게 HTML/CSS/JS로 만들어져 있어요.
생태계 지도 — 어디서 돌아가는가
여기가 많은 사람들이 헷갈려 하는 지점이에요. “크롬 확장”이라고 부르는데, 엣지에서도 되고 브레이브에서도 되고요. 왜 그럴까요?
Chromium이라는 공통 기반
답은 Chromium이라는 오픈소스 프로젝트에 있어요.
Chromium은 구글이 주도하는 브라우저의 오픈소스 알맹이예요. 크롬은 이 Chromium에 구글 로고, 자동 업데이트, 계정 동기화 같은 걸 얹어서 완성한 제품이고요. 그러니까:
크롬 = Chromium + 구글의 추가 요소
그런데 이 Chromium이 오픈소스로 공개되어 있다 보니, 다른 회사들도 가져다 쓰기 시작했어요. 바퀴를 다시 발명할 필요가 없으니까요. 결과적으로 지금은 이렇게 돼 있어요.
| 브라우저 | 제조사 | 기반 |
|---|---|---|
| Chrome | Chromium | |
| Edge | Microsoft | Chromium (2020년부터) |
| Brave | Brave Software | Chromium |
| Opera | Opera | Chromium (2013년부터) |
| Arc | The Browser Company | Chromium |
| Naver Whale | 네이버 | Chromium |
| Samsung Internet | 삼성 | Chromium |
| Vivaldi | Vivaldi Technologies | Chromium |
이들 모두가 같은 확장프로그램 API를 지원해요. 즉 한 번 만들면 이 모든 브라우저에서 돌아간다는 뜻이에요.
시장 점유율로 보면 Chromium 계열이 전 세계 데스크톱 브라우저의 70% 이상을 차지해요. 엄청난 커버리지죠.
Chromium 바깥 세상
물론 모든 브라우저가 Chromium은 아니에요.
Firefox는 Mozilla 재단이 만드는 독립 진영이에요. Gecko라는 자체 엔진을 씁니다. 확장프로그램 API도 비슷하지만 완전히 같진 않아요. 네임스페이스가 chrome.* 대신 browser.*를 쓰는 식의 차이가 있어요. 다행히 요즘은 양쪽 다 대응하는 라이브러리가 있어서 한 코드베이스로 둘 다 지원할 수 있어요.
Safari는 애플이 만드는 브라우저로, WebKit 엔진을 써요. 확장프로그램 개발 방식이 완전히 달라서 — Xcode로 개발하고 앱스토어 심사를 받아야 해요 — 보통은 별도 프로젝트로 취급합니다.
이 시리즈에서는 Chromium 기반 확장프로그램에 집중할 거예요. 가장 넓은 시장을 커버하고, 가장 배우기 쉽고, 대부분의 실습이 엣지·브레이브 등에서도 그대로 돌아가니까요.
Manifest V3 — 지금 이 시대의 규칙
확장프로그램을 검색하다 보면 “Manifest V2” 와 “Manifest V3” 라는 용어가 자주 나와요. 이게 뭐고 왜 중요한지 짚고 넘어갈게요.
manifest.json은 확장프로그램의 설계도예요. 이 확장이 뭘 할 수 있고 어떤 권한이 필요한지 선언하는 파일이죠. 브라우저는 이 파일을 읽고 확장프로그램을 로드해요.
Manifest V2와 V3는 이 설계도의 버전이에요. V2가 오랫동안 표준이었는데, 2024년을 기점으로 크롬에서 V2 지원이 완전히 종료되고 V3만 쓸 수 있게 됐어요.
V3의 주요 변화
입문자 입장에서 알아둘 핵심만 짚으면 이래요.
Background Page가 Service Worker로 바뀜. V2에서는 백그라운드에서 계속 돌아가는 “페이지”가 있었는데, V3에서는 필요할 때만 깨어났다가 할 일 없으면 자는 Service Worker로 바뀌었어요. 메모리는 절약되지만, 코드 작성 방식도 달라졌어요.
보안 강화. 외부에서 코드를 불러와서 실행하는 게 제한됐어요. 확장프로그램 안에 들어 있는 코드만 실행할 수 있어요.
네트워크 요청 제어 방식 변경. V2에서는 모든 요청을 JavaScript로 감시하고 막을 수 있었어요(webRequest). V3에서는 미리 규칙을 선언해두면 브라우저가 알아서 처리하는 방식(declarativeNetRequest)이 기본이에요. 광고 차단기 개발자들이 이 부분 때문에 논란이 많았어요.
새로 시작하는 우리는 그냥 V3로 배우면 됩니다. V2는 이제 과거의 유물이에요.
확장프로그램으로 할 수 있는 것 — 가능성의 맛보기
“구체적으로 뭘 만들 수 있는데?” 이 질문에 대한 짧은 답변이에요. (전체 목록은 2편에서 상세히 다룰 거예요.)
할 수 있는 일 12가지
- 웹페이지 조작 — DOM 읽고 수정, CSS 주입, 요소 추가·삭제
- 브라우저 UI 확장 — 툴바 아이콘, 컨텍스트 메뉴, 사이드 패널
- 탭·창 관리 — 탭 조회, 그룹화, 세션 저장
- 데이터 저장 — 로컬·동기화 저장소로 설정 보관
- 네트워크 요청 제어 — 요청 감시, 차단, 리다이렉트
- 쿠키·북마크·히스토리 접근 — 브라우저 데이터 읽고 쓰기
- 다운로드 관리 — 다운로드 시작, 관찰, 제어
- 알림·알람 — 시스템 알림, 타이머
- 단축키 등록 — 커스텀 키보드 숏컷
- 클립보드·스크린샷 — 복사·붙여넣기·화면 캡처
- 외부 API 호출 — CORS 제약 없이 외부 서비스 연동
- 개발자 도구 확장 — F12에 커스텀 패널 추가
할 수 없는 일 (한계선)
반대로 못 하는 것도 분명히 있어요. 이걸 모르면 “이런 걸 만들고 싶었는데 왜 안 되지?” 하고 시간을 낭비하게 돼요.
- OS 수준 작업 (파일 시스템 직접 접근, 다른 프로그램 실행)
- 다른 확장프로그램의 데이터·동작 조작
chrome://내부 페이지나 웹 스토어 페이지에서 동작- 24시간 백그라운드 상주 (Service Worker는 일정 시간 idle하면 종료)
- 페이지 자체의 JavaScript 전역 변수에 직접 접근
이 한계선 안에서 아이디어 대부분은 실현 가능해요. 2편에서 “뭘 만들면 좋을지” 구체적인 아이디어 20여 개를 소개할 거예요.
필요한 기술 스택 — 의외로 간단하다
“그래서 뭘 배워야 해요?” 이 질문에 대한 답도 간단해요.
필수 지식
- HTML — 팝업이나 옵션 페이지 UI 만들기
- CSS — 스타일링
- JavaScript — 확장의 심장. ES6+ 문법이면 충분
- JSON — manifest.json 작성용. 구조만 알면 됨
웹 개발 처음이면 HTML/CSS/JS 기초 정도만 익히고 와도 충분해요. 복잡한 프레임워크 지식은 필요 없어요.
있으면 좋은 것
- Chrome DevTools 사용 경험 — 디버깅의 90%가 여기서 일어나요
- TypeScript — 중형 이상 프로젝트에 강력 추천
- React / Vue 등 프레임워크 — 복잡한 UI가 필요할 때
개발 환경
- VS Code 같은 텍스트 에디터
- 크롬 또는 엣지 브라우저
- 폴더 하나 만들고 파일 몇 개 놓으면 끝
빌드 도구, 서버 설정, 터미널 명령어 없이 시작할 수 있어요. “파일 만들고 → 브라우저에 로드하고 → 테스트” 의 단순한 루프예요.
진짜 난이도는 어디에 있나
많은 분들이 “확장프로그램 어렵다”고 하는데요, 사실 어려운 건 문법이나 API가 아니에요. 아키텍처예요.
일반 웹앱은 한 페이지에서 모든 게 일어나요. <script> 태그 하나에 모든 로직이 들어가도 돌아가죠.
확장프로그램은 다릅니다. 팝업, 백그라운드 서비스 워커, 콘텐츠 스크립트, 옵션 페이지 — 이 네 가지가 각각 다른 환경에서 돌아가고, 서로 메시지로만 통신해요.
이 멀티 컨텍스트 구조를 이해하는 게 첫 번째 허들이에요. 3편에서 이 구조를 집중적으로 파헤칠 거예요.
두 번째 허들은 권한 설계예요. 뭘 하려면 어떤 권한이 필요한지, 최소한의 권한으로 기능을 구현하는 법을 익히는 데 시간이 좀 걸려요. 권한을 과하게 요구하면 스토어 심사에서 반려되거나, 통과해도 사용자가 설치를 꺼려요.
수익 구조와 현실 — 과연 돈이 될까
많이들 궁금해하시는 부분이라 짚고 넘어갈게요.
크롬 웹 스토어의 유료 결제 시스템은 2020년에 종료됐어요. 그래서 확장프로그램 자체를 유료로 판매하는 건 이제 불가능해요.
대신 주류가 된 모델은 Freemium이에요. 기본 기능은 무료로 주고, 프리미엄 기능은 자체 서버로 결제를 받는 방식이죠. Stripe나 Paddle 같은 결제 서비스로 돈을 받고, 라이선스 키를 발급해서 프리미엄 기능을 활성화하는 식이에요.
광고 수익은 스토어 정책상 제한이 많아요. 확장 안에 광고를 박으면 심사에서 반려되기 쉽습니다.
솔직한 현실은, 확장프로그램 자체로 큰돈을 벌기는 어려워요. 대신 이런 가치들이 있어요.
- 포트폴리오 파워업 — “스토어에 내 확장프로그램 있어요”는 개발자 이력서에 강력한 한 줄
- 사용자 확보 채널 — 본 서비스(웹앱, SaaS)로 연결하는 관문으로 활용
- 개인 생산성 도구 — 내가 쓰려고 만든 게 많은 사람한테도 쓸모 있을 수 있음
- 오픈소스 기여 — 깃허브 스타 쌓고 커뮤니티 인지도 올리기
돈보다는 사용자를 얻는 채널로서의 가치가 훨씬 커요. 그리고 그 사용자 경험이 다른 기회로 이어지는 거죠.
이 시리즈에서 우리가 할 일
5부작이 끝날 때쯤이면 여러분은 다음을 할 수 있게 돼요.
- ✅ 확장프로그램 생태계를 이해하고, 어떤 아이디어가 실현 가능한지 판단할 수 있다
- ✅ 확장프로그램의 구조를 이해하고, 공식 문서를 읽을 수 있다
- ✅ 처음부터 끝까지 하나의 확장프로그램을 직접 만들 수 있다
- ✅ 크롬·엣지 스토어에 배포하고, 사용자 피드백을 받을 수 있다
- ✅ 더 고도화하고 싶을 때 어디로 가야 할지 안다
시리즈 구성은 이래요.
- 1편 (지금) — 생태계와 큰 그림
- 2편 — 무엇을 만들 수 있나 (할 수 있는 것 전체 지도 + 프로젝트 아이디어 20+)
- 3편 — 확장프로그램의 해부학 (4가지 구성 요소와 통신 방식)
- 4편 — 첫 확장프로그램 만들기 (30분 실습)
- 5편 — 세상에 내보내기 (배포, 유지보수, 그 다음)
각 편은 독립적으로도 읽을 수 있게 썼지만, 순서대로 따라오시면 자연스럽게 수준이 올라가요.
마무리하며
첫 편은 여기까지예요. 코드 한 줄 없었지만, 앞으로 배울 것들이 어떤 세계에서 돌아가는지 감을 잡으셨길 바라요.
한 줄로 요약하면 이래요.
확장프로그램은 HTML/CSS/JS로 만드는 작은 웹앱이다. Chromium이라는 공통 기반 덕분에 전 세계 브라우저 사용자의 70% 이상에게 도달할 수 있고, 진입장벽은 의외로 낮다. 진짜 난이도는 문법이 아니라 멀티 컨텍스트 아키텍처를 이해하는 데 있다.
다음 편에서는 “그래서 구체적으로 뭘 만들 수 있나” 를 파헤칠 거예요. 할 수 있는 것 전체 목록과, 난이도별로 정리한 프로젝트 아이디어 20여 개를 준비하고 있어요. 여러분이 이 시리즈를 끝내고 만들 첫 프로젝트를 결정하는 편이 될 거예요.
그럼 다음 편에서 만나요. 👋