[바이브코딩-EP18] AI 크롬 확장 프로그램 만들기 - Manifest V3와 AI 연동

브라우저를 열 때마다 반복되는 지루한 작업들, 혹시 AI가 대신해 주면 좋겠다고 생각해 본 적 없나요?

2026년 현재, AI 기술은 크롬 확장 프로그램 개발 환경에도 혁신적인 변화를 가져왔습니다. 특히 Manifest V3로의 전환과 함께 AI 모델을 직접 연동하여 사용자의 생산성을 극대화하는 확장 프로그램을 만드는 것이 가능해졌습니다. 단순한 웹 서핑을 넘어, 나만의 AI 비서를 브라우저에 탑재하는 시대가 도래한 것입니다.

이 글에서는 최신 Manifest V3 구조를 기반으로 Claude나 GPT 같은 강력한 AI 모델을 크롬 확장 프로그램에 연결하는 실제적인 방법을 다룹니다. 또한, 구글이 내장 AI로 밀고 있는 Gemini Nano의 활용 가능성과 현실적인 제약, 그리고 AI 코딩 도구를 활용해 개발 과정을 획기적으로 단축하는 노하우까지 상세히 안내해 드립니다.

표: Manifest V3와 Manifest V2 주요 변경점 및 AI 연동 관련 비교

Manifest V3, 무엇이 달라졌고 왜 중요한가요?

Manifest V3는 크롬 확장 프로그램의 보안, 성능, 그리고 개인 정보 보호를 대폭 강화하기 위해 도입된 새로운 아키텍처입니다. 기존 Manifest V2는 이제 지원이 종료되었거나 곧 종료될 예정이므로, 현재 모든 신규 확장 프로그램은 Manifest V3를 따라야 합니다. 이 변화는 개발자에게 새로운 학습 곡선을 요구하지만, 사용자에게는 더욱 안전하고 효율적인 경험을 제공합니다.

가장 큰 변화 중 하나는 백그라운드 스크립트가 '서비스 워커'로 대체되었다는 점입니다. 서비스 워커는 필요할 때만 활성화되는 이벤트 기반 스크립트로, 확장 프로그램의 리소스 사용량을 줄이고 성능을 향상시킵니다. AI API를 호출하거나 복잡한 연산을 수행할 때, 이 서비스 워커가 효율적으로 작동하며 브라우저의 부담을 덜어줍니다.

또한, 외부에서 호스팅되는 코드나 인라인 스크립트 사용이 엄격히 제한됩니다. 모든 코드는 확장 프로그램 패키지 내부에 포함되어야 합니다. 이 조치는 보안을 강화하지만, AI 모델 업데이트나 외부 라이브러리 관리에 있어 개발자가 더 신중하게 접근해야 함을 의미합니다.

강력한 AI 모델을 브라우저에 심는 방법

크롬 확장 프로그램에 AI 기능을 추가하는 핵심은 바로 클라우드 기반 AI API를 연동하는 것입니다. 현재 가장 널리 사용되는 Claude API나 GPT API는 강력한 텍스트 생성, 요약, 번역, 분석 기능을 제공합니다. 이들을 확장 프로그램에 연결하면 사용자는 브라우저 내에서 직접 AI의 지능을 활용할 수 있습니다.

예를 들어, 웹 페이지의 내용을 즉시 요약해 주거나, 특정 문단을 다른 언어로 번역하고, 심지어는 웹 폼을 AI가 분석하여 자동으로 채워주는 기능까지 구현할 수 있습니다. 이 과정에서 Manifest V3의 서비스 워커는 AI API 호출을 담당하는 핵심적인 역할을 수행합니다. 사용자가 확장 프로그램 아이콘을 클릭하거나 특정 단축키를 누르면, 서비스 워커가 해당 요청을 처리하고 AI API에 데이터를 전송한 뒤, 응답을 받아 다시 사용자 인터페이스에 표시하는 방식입니다.

// service-worker.js (예시)
chrome.runtime.onMessage.addListener(async (request, sender, sendResponse) => {
  if (request.action === "summarizePage") {
    const pageContent = await getPageContent(); // 현재 페이지 콘텐츠 가져오는 함수
    try {
      const response = await fetch("https://api.openai.com/v1/chat/completions", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          "Authorization": `Bearer YOUR_API_KEY`
        },
        body: JSON.stringify({
          model: "gpt-3.5-turbo",
          messages: [{ role: "user", content: `다음 텍스트를 요약해줘: ${pageContent}` }]
        })
      });
      const data = await response.json();
      sendResponse({ summary: data.choices[0].message.content });
    } catch (error) {
      console.error("Error calling AI API:", error);
      sendResponse({ error: "AI 요약 중 오류가 발생했습니다." });
    }
    return true; // 비동기 응답을 위해 true 반환
  }
});

위 코드는 서비스 워커에서 GPT API를 호출하여 페이지 내용을 요약하는 아주 간략한 예시입니다. 실제 구현 시에는 API 키 보안, 에러 처리, 사용자 인터페이스 업데이트 등 고려할 요소가 많습니다.

Chrome Built-in AI (Gemini Nano)의 현실적인 위치

구글은 온디바이스 AI 모델인 Gemini Nano를 크롬 브라우저에 내장하여 사용자 경험을 향상시키려 하고 있습니다. 이론적으로는 확장 프로그램이 Gemini Nano를 직접 활용하여 클라우드 API 호출 없이도 AI 기능을 구현할 수 있다면 혁신적일 것입니다. 그러나 2026년 현재까지 Gemini Nano는 주로 구글 자체 서비스나 특정 기기(예: 픽셀폰)에 최적화되어 있으며, 크롬 확장 프로그램 개발자가 일반적인 API 형태로 접근하여 활용하기에는 현실적인 제약이 많습니다.

현재로서는 Gemini Nano가 제공하는 기능은 웹 페이지에서 텍스트를 선택했을 때 나타나는 요약이나 문맥 인식 기능 등, 브라우저 자체의 내장 기능으로 제한되는 경향이 있습니다. 개발자가 확장 프로그램 내에서 Gemini Nano의 추론 엔진을 직접 제어하고 커스터마이징하는 것은 아직 어려운 부분입니다. 따라서 대부분의 AI 기반 크롬 확장 프로그램은 여전히 Claude나 GPT 같은 클라우드 기반 API를 활용하는 것이 일반적이고 효율적인 접근 방식입니다. 온디바이스 AI의 발전 속도를 주시하되, 당장 확장 프로그램을 개발한다면 클라우드 API 연동에 집중하는 것이 현명합니다.

AI 코딩 도구로 개발 속도 올리기

AI 코딩 도구는 확장 프로그램 개발 과정을 비약적으로 단축시켜 줍니다. Cursor나 Claude Code와 같은 도구들은 자연어 프롬프트만으로 코드 초안을 생성하거나, 기존 코드를 분석하여 개선점을 제안하고, 버그를 찾아 수정하는 데 도움을 줍니다. 마치 옆에 숙련된 페어 프로그래머가 앉아 있는 것과 같습니다.

💻 사례: 마케터 A씨의 업무 자동화 확장 프로그램 제작기

마케터 A씨는 코딩 경험이 거의 없지만, 매일 수십 개의 경쟁사 웹사이트에서 특정 키워드를 추출하고, 해당 키워드가 포함된 문장을 요약하는 작업에 지쳐 있었습니다. 그는 AI 코딩 도구의 도움을 받아보기로 했습니다.

A씨는 Cursor에 다음과 같은 프롬프트를 입력했습니다. "Manifest V3 기반 크롬 확장 프로그램을 만들어줘. 이 확장 프로그램은 사용자가 보고 있는 웹 페이지에서 특정 키워드를 입력하면, 해당 키워드가 포함된 모든 문장을 찾아내고, 그 문장들을 Claude API를 이용해 50자 이내로 요약해주는 기능을 가져야 해. 서비스 워커와 팝업 UI 코드를 포함하고, API 키는 안전하게 관리될 수 있도록 구성해줘."

Cursor는 Manifest 파일부터 서비스 워커, 팝업 HTML/JS/CSS 코드까지 기본적인 구조를 빠르게 생성해 주었습니다. A씨는 생성된 코드를 보며 Manifest V3의 구조를 조금씩 이해할 수 있었고, Claude API 호출 부분과 UI 연결 부분을 AI의 도움을 받아 수정하고 보완했습니다. 물론, API 키를 환경 변수로 관리하거나, 사용자의 입력값을 검증하는 등의 보안 및 안정성 관련 부분은 추가적인 학습과 AI의 조언을 통해 직접 구현해야 했습니다. 몇 번의 시행착오 끝에 A씨는 특정 키워드를 입력하면 페이지 내 관련 문장들을 자동으로 찾아 요약해주는 자신만의 확장 프로그램을 만들 수 있었습니다. 이 경험을 통해 A씨는 코딩 문턱이 생각보다 높지 않다는 것을 깨달았습니다. 의외로 간단합니다.

💻 사례: 디자이너 B씨의 번역 및 스타일 가이드 확장 프로그램

디자이너 B씨는 해외 레퍼런스 사이트를 자주 방문하는데, 이미지 속 텍스트나 특정 디자인 용어를 빠르게 번역하고, 번역된 내용을 바탕으로 자신만의 디자인 스타일 가이드에 맞게 재구성하는 데 어려움을 겪었습니다. B씨는 AI 코딩 도구와 GPT API를 활용하기로 했습니다.

B씨는 Claude Code에 "사용자가 웹 페이지에서 텍스트를 드래그하면, 해당 텍스트를 GPT API로 번역하고, 번역된 내용에 '모던 미니멀리즘' 디자인 원칙을 적용하여 간결하고 명확하게 재구성해주는 크롬 확장 프로그램의 Manifest V3 코드를 작성해줘. 팝업 창에 번역 결과와 재구성된 텍스트를 보여주고, 사용자가 복사할 수 있도록 버튼도 추가해줘."라고 요청했습니다.

Claude Code는 기본적인 번역 로직과 함께, '모던 미니멀리즘' 원칙을 적용하는 GPT 프롬프트 예시까지 포함한 코드를 생성해 주었습니다. B씨는 생성된 코드를 바탕으로 GPT API 호출 시 프롬프트를 더욱 구체화하여 자신이 원하는 디자인 톤앤매너에 맞는 결과물을 얻도록 반복적으로 실험했습니다. 예를 들어, "번역 후, 다음 디자인 원칙(간결성, 여백 활용, 명확한 타이포그래피)에 맞춰 핵심 메시지만 남겨줘"와 같이 프롬프트를 다듬었습니다. 이 과정에서 AI 코딩 도구는 디버깅 지원과 코드 설명으로 B씨가 코드를 이해하고 개선하는 데 큰 도움이 되었습니다. 결과적으로 B씨는 레퍼런스 분석 시간을 획기적으로 줄여주는 자신만의 맞춤형 도구를 손에 넣게 되었습니다. 이게 핵심입니다.

크롬 웹 스토어 심사 통과를 위한 최종 점검

열심히 만든 확장 프로그램이 크롬 웹 스토어에 등록되지 못하면 모든 노력이 헛수고가 됩니다. Manifest V3는 보안과 개인 정보 보호를 강조하는 만큼, 심사 기준 또한 까다로워졌습니다. 몇 가지 중요한 팁을 알려드립니다.

첫째, 필요 최소한의 권한만 요청해야 합니다. manifest.json 파일에 명시된 권한이 확장 프로그램의 기능에 꼭 필요한 것인지 심사관은 면밀히 검토합니다. 예를 들어, 페이지 요약 기능만 있다면 activeTab 권한으로 충분하며, all_urls 같은 광범위한 권한은 특별한 사유 없이는 거부될 수 있습니다.

둘째, 명확한 개인 정보 처리 방침을 제공해야 합니다. AI API를 사용한다면, 사용자의 어떤 데이터가 AI 서버로 전송되는지, 어떻게 처리되고 저장되는지 투명하게 명시해야 합니다. 이는 사용자의 신뢰를 얻는 데도 필수적입니다.

셋째, 안정적인 작동과 오류 처리는 기본입니다. AI API 호출 실패 시 사용자에게 적절한 안내 메시지를 제공하고, 확장 프로그램이 비정상적으로 종료되지 않도록 견고하게 설계해야 합니다.

넷째, 확장 프로그램 설명과 스크린샷을 성의 있게 작성해야 합니다. 기능이 명확하게 드러나고, 사용자가 어떤 이점을 얻을 수 있는지 한눈에 알 수 있도록 해야 합니다. 심사관도 결국 사람입니다.

마지막으로, 테스트를 충분히 진행해야 합니다. 다양한 환경과 시나리오에서 확장 프로그램이 예상대로 작동하는지 확인하고, 특히 Manifest V3의 서비스 워커 생명주기(life cycle)를 이해하고 그에 맞춰 코드를 작성했는지 점검해야 합니다. 절대 아닙니다.

나만의 AI 비서를 브라우저에 탑재하는 여정

AI 크롬 확장 프로그램 개발은 단순히 코드를 작성하는 것을 넘어, 사용자의 불편함을 AI로 해결하고 새로운 가치를 창출하는 과정입니다. Manifest V3의 변화에 적응하고, Claude나 GPT 같은 강력한 AI 모델을 효과적으로 연동하며, AI 코딩 도구의 도움을 받는다면 누구나 자신만의 독창적인 AI 확장 프로그램을 만들 수 있습니다.

물론, 이 과정에서 기술적인 난관에 부딪히거나 AI 모델의 한계에 직면할 수도 있습니다. 하지만 꾸준히 학습하고 실험하며 문제를 해결해 나가는 과정 자체가 개발의 즐거움입니다. 여러분의 아이디어가 브라우저 속 AI 비서로 탄생하는 그 순간을 기대합니다.

---

오늘 바로 시도해볼 것 3가지

1. Manifest V3 기본 구조 살펴보기: 빈 크롬 확장 프로그램 프로젝트를 만들고 manifest.json 파일을 열어 Manifest V3의 필수 필드들을 직접 확인해 보세요.
2. AI 코딩 도구에 간단한 기능 요청하기: Cursor나 Claude Code에 "웹 페이지의 특정 텍스트를 복사하는 크롬 확장 프로그램 만들어줘"와 같이 간단한 프롬프트를 입력하여 코드 생성 과정을 경험해 보세요.
3. 무료 AI API 엔드포인트 테스트: Claude나 GPT의 무료 또는 체험판 API를 사용하여 간단한 텍스트 생성 또는 요약 기능을 API 클라이언트(예: Postman)에서 직접 호출해 보세요.

---

다음 편에서는 AI 자동화 봇 만들기에 대해 다룹니다. 슬랙, 디스코드, 카카오톡 봇에 Claude와 GPT를 연동하여 더욱 강력한 자동화 시스템을 구축하는 방법을 알아보겠습니다.

---

참고: 본 글은 정보 제공 목적으로 작성되었으며, 특정 상품·서비스의 가입이나 구매를 권유하지 않습니다. 투자·재무·건강·법률 관련 판단은 반드시 전문가와 상담하시기 바랍니다. 글에 포함된 정보는 작성일 기준이며, 이후 변경될 수 있습니다.