AI를 사용하여 Chrome 확장 프로그램을 6개 만든 방법: 프로그래밍 미경험자로부터의 개발 플로우
요약
프로그래밍 경험이 전무한 사람도 AI를 활용하여 Chrome 확장 프로그램(Chrome Extension)을 빠르고 효율적으로 개발할 수 있음을 보여주는 과정입니다. 이 글에서는 Claude, ChatGPT, Gemini 등 여러 AI 툴을 조합하여 아이디어 리서치부터 기획, 코드 구현 및 디버깅에 이르는 전 과정을 소개합니다. 핵심은 코딩 능력 자체가 아니라 '무엇을 할 수 있는지'를 아는 지식과 AI에게 정확한 지시(Prompt)를 내리는 방법론입니다.
핵심 포인트
- AI 툴 조합 활용: 리서치(ChatGPT, Gemini), 설계/지시서 작성(Claude), 구현/디버깅(Claude Code) 등 각 단계별로 최적화된 AI 툴을 사용해야 합니다.
- 개발의 핵심은 '프롬프트 엔지니어링': 코드를 직접 짜는 것보다 어떤 기능을 만들 수 있는지 아는 지식과, 이를 AI에게 명확하게 지시하는 능력이 중요합니다.
- 체계적인 개발 플로우: ① AI로 아이디어 리서치 → ② Claude로 랭킹 정리/기획 → ③ Claude Code에 지시서 전달 및 구현 → ④ 에러 발생 시 원인 분석 요청 순으로 진행됩니다.
- 수익화 및 확장성 고려: ExtensionPay를 활용하여 Stripe 연동 기반의 수익 모델(일회성 구매/구독)을 구축할 수 있으며, MCP나 API 같은 개념 이해가 개발 폭을 넓힙니다.
저는 코드를 거의 쓰지 못합니다.
하지만 AI를 사용하여 1주일 만에 6개의 Chrome 확장 프로그램(Chrome Extension)을 만들었습니다. 간단한 것이라면 1시간에 1개를 만들 수 있는 페이스입니다.
이 기사에서는 프로그래밍 초보자가 AI를 활용하여 Chrome 확장 프로그램을 개발하는 구체적인 플로우(Flow)를 소개합니다.
| 확장 프로그램 | 개요 | 개발 시간 |
|---|---|---|
| YouTube Shorts Killer | Shorts 숨기기 | 약 1시간 |
| X Detox | X의 노이즈 제거 | 약 2시간 |
| PromptStash | 프롬프트(Prompt) 관리 | 약 3시간 |
| DataPick | 노코드(No-code) 스크레이핑 | 약 1일 |
| 楽天セラーズ・アナリティクス (라쿠텐 셀러즈 애널리틱스) | 구매 대행 분석 | 약 2일 |
| Arbitra | 가격 비교 | 개발 중 |
| 툴 | 용도 | 과금 상황 |
|---|---|---|
| Claude | 설계, 사양 결정, 지시서 작성 | 유료 버전 |
| ChatGPT | 리서치, 다른 관점의 확인 | 무료 버전 |
| Gemini | 리서치 | 무료 버전 |
| Claude Code | 구현, 디버깅 (Debug) |
Cursor 포인트는 Claude만 유료 버전으로 사용하고 있습니다. 설계와 지시서 작성이 가장 중요하기 때문에 여기에 투자하고 있습니다.
① AI로 리서치 (수익화할 수 있을 법한 앱을 찾는다)
↓
② Claude로 내용을 정리하여 랭킹 형식으로 만든다
...
Claude, ChatGPT, Gemini 세 가지를 사용하여 리서치합니다.
AI에 따라 리서치 결과가 꽤 다르기 때문에, 여러 개를 사용하는 것을 추천합니다.
프롬프트(Prompt) 예시:
「Chrome 확장 프로그램으로 수익화할 수 있을 법한 아이디어를 10개 내줘.
경쟁자가 적고, 개인 개발로 만들 수 있는 규모의 것으로」
리서치 결과를 Claude에 전달하여 랭킹 형식으로 정리하게 합니다.
프롬프트(Prompt) 예시:
「다음 아이디어를 수익성·개발 난이도·경쟁 상황을 고려하여
랭킹 형식으로 정리해줘」
개발할 앱이 결정되면, Claude에게 지시서를 작성하게 합니다.
프롬프트(Prompt) 예시:
「○○라는 Chrome 확장 프로그램을 만들고 싶어.
다음 내용을 포함한 개발 지시서를 작성해줘:
...
지시서를 Claude Code에 전달하여 구현하게 합니다.
제가 직접 쓰는 것보다 AI에게 맡기는 것이 확실히 질이 높습니다. 그리고 압도적으로 빠릅니다.
작동하지 않을 경우에는 에러(Error)를 그대로 Claude에 붙여넣어 상담합니다.
프롬프트(Prompt) 예시:
「다음 에러가 발생하고 있습니다. 원인과 해결 방법을 알려줘:
[에러 메시지를 복사/붙여넣기]」
AI를 사용한 개인 개발에서 코드를 쓰는 기술은 솔직히 필요 없습니다.
배워야 할 것은 **「무엇을 할 수 있는지」**를 아는 것입니다.
| 용어 | 의미 | 활용처 |
|---|---|---|
| MCP | AI에게 다른 서비스의 조작을 시키는 메커니즘 | Claude Desktop과의 연동 |
| API | 서비스 간을 연동시키는 창구 | 데이터 취득, 외부 연동 |
| Webhook | 이벤트를 트리거(Trigger)로 자동 처리 | GitHub Release 감지 등 |
「이런 것을 할 수 있다고 하더라」라고 알고 있는 것만으로도 개발의 폭이 완전히 달라집니다.
모르는 것은 전부 AI에게 묻는다
추천을 솔직하게 따른다
익숙해지면 의문도 생긴다 → 다시 질문한다
이 반복만으로도 충분히 해나갈 수 있습니다.
| AI | 특기 | |
|---|---|---|
| Claude | 설계, 장문의 지시서, 코드 생성 | |
| ChatGPT | 아이디어 도출, 일반적인 질문 | |
| Gemini | 최신 정보 리서치 |
AI를 여러 개 동시에 구동하기도 하지만, PC 사양에 따라서는 그냥 꺼지기도 합니다.
Chrome 확장 프로그램의 수익화에는 ExtensionPay를 사용하고 있습니다.
Stripe 연동이 간단함
일시불 / 구독(Subscription) 모두 대응
구현이 몇 줄로 끝남
코드를 못 써도 AI로 개발 가능
중요한 것은 「지시를 내리는 방법」
여러 AI를 구분해서 사용하면 리서치의 질이 올라감
ExtensionPay로 수익화도 간단함
다음 기사에서는 마케팅 자동화에 대해 쓰겠습니다.
이 기사를 쓴 시점에는 6개였던 확장 프로그램이 14개까지 늘어났습니다.
PromptStash - AI 프롬프트를 저장·관리 (19개 서비스 대응)
DataPick - 웹 페이지에서 데이터를 추출
SnippetVault - 코드 스니펫(Snippet) 관리
ReadMark - 독서 위치를 기억
YouTube Shorts Killer - YouTube Shorts를 숨김
X Detox - X(Twitter)의 노이즈 제거
ZenRead - 집중 독서 모드
楽天セラーズ・アナリティクス (라쿠텐 셀러즈 애널리틱스) - 라쿠텐 시장의 출품자 분석
Arbitra - 가격 비교 툴
Japanese Font Finder - 웹사이트의 일본어 폰트 특정
TVerPlus - TVer의 시청 경험 개선
Yahoo快適 (Yahoo 쾌적) - Yahoo!의 브라우징 경험 개선
物件賃貸分析 (물건 임대 분석) - 임대 물건의 분석
物件購入分析 (물건 구입 분석) - 구입 물건의 분석
모든 확장 기능의 상세 정보 → S-Hub
이 기사의 「그 이후」나, 더 구체적인 노하우를 작성하고 있습니다.
코드를 작성할 수 없는 내가 AI로 Chrome 확장 프로그램을 6개 만든 개발 플로우 — 실제로 어떻게 AI로 개발하고 있는가
개인 개발의 마케팅은 「분석」 이전의 문제였다 — 「판매」의 벽에 부딪힌 후에 배운 것
해외 대상 마케팅을 시도해 보았다 — 영어 시장으로의 도전
n8n으로 GitHub Release → 복수 SNS 자동 포스팅을 구축했다 — 마케팅 자동화의 메커니즘
AI 자동 생성 콘텐츠
본 콘텐츠는 Zenn AI의 원문을 AI가 자동으로 요약·번역·분석한 것입니다. 원 저작권은 원저작자에게 있으며, 정확한 내용은 반드시 원문을 확인해 주세요.
원문 바로가기