software

Gemini Nano로 완전 로컬 프롬프트 향상 Chrome 확장 프로그램을 만들었습니다

발행: (2025년 12월 8일 오전 06:00 GMT+9)
8 min read
원문: Dev.to

Source: Dev.to

문제: 프롬프트를 충분히 명시하지 않음

대부분의 사람들은 ChatGPT(또는 다른 LLM)를 검색창처럼 사용합니다: 반쯤 떠오른 생각을 입력하고 Enter를 눌러 마법을 기대하죠. 결과는 보통 괜찮지만, 뛰어나지는 않습니다.

흔히 발생하는 문제

  • 수준, 맥락, 제약조건이 없는 “시험을 위해 이 주제를 설명해줘” 같은 모호한 프롬프트.
  • 입력/출력 형식, 엣지 케이스, 성능 제약이 명시되지 않은 코딩 요청.
  • 대상 독자, 톤, 길이가 빠진 글쓰기 과제.

잘 설계된 프롬프트는 다음을 가능하게 합니다:

  • 여러 차례의 왕복을 줄인다.
  • 더 신뢰할 수 있고 테스트 가능한 결과물을 만든다(특히 코드와 분석에 대해).
  • AI 도구를 실제 워크플로우에서 실제로 활용할 수 있게 만든다.

아이디어

보통처럼 타이핑하고, 한 번의 버튼 클릭으로 거친 텍스트를 고품질 프롬프트로 바꿀 수 있다면 어떨까요?

Prompt Enhancer는 ChatGPT 위에 정확히 그 기능을 추가합니다. 워크플로우를 바꾸지 않으면서 약간의 초능력을 부여합니다.

사용자 관점에서의 작동 방식

  1. 확장 프로그램을 설치하고 활성화합니다.
  2. Chrome에서 ChatGPT를 엽니다.
  3. 입력창에 거친 아이디어를 입력합니다.
  4. 텍스트 영역 옆에 작은 “Enhance” 버튼이 나타납니다.
  5. Enhance를 클릭(또는 키보드 단축키 사용) → 잠시 기다리면 → 거친 텍스트가 다듬어진 구조화된 프롬프트로 교체됩니다.

향상된 프롬프트는 일반적으로:

  • 누락된 맥락(대상, 제약조건, 형식)을 추가합니다.
  • 작업을 명확히 합니다(요약 vs 비평 vs 생성 vs 설명).
  • 출력 형식을 지정합니다(불릿 리스트, 표, 주석이 포함된 코드 등).

다시 작성된 프롬프트를 검토하고 필요하면 수정한 뒤, 평소처럼 Enter를 누르면 됩니다.

키보드 단축키

구성 가능한 단축키를 통해 파워 유저는 전 과정을 키보드만으로 진행할 수 있습니다:

Type → Enhance → Enter

기술 아키텍처

Prompt Enhancer는 Manifest V3 Chrome 확장 프로그램으로, 세 가지 주요 구성 요소로 이루어져 있습니다:

  1. manifest.json – 권한, 콘텐츠 스크립트 매치, 기타 메타데이터 선언.
  2. 콘텐츠 스크립트 – ChatGPT DOM과 상호작용하고, Enhance 버튼을 삽입하며, 이벤트를 처리.
  3. Prompt API 연동 – 내장된 Gemini Nano 모델을 로컬에서 호출.

Manifest V3 기본 구조

{
  "manifest_version": 3,
  "name": "Prompt Enhancer",
  "version": "1.0",
  "description": "Rewrite rough prompts into high‑quality prompts for ChatGPT using Gemini Nano.",
  "permissions": ["activeTab", "scripting"],
  "host_permissions": ["https://chat.openai.com/*"],
  "content_scripts": [
    {
      "matches": ["https://chat.openai.com/*"],
      "js": ["contentScript.js"]
    }
  ]
}
  • 최소 권한을 부여해 확장 프로그램을 안전하게 유지하고 Chrome Web Store 검토를 간소화합니다.
  • 콘텐츠 스크립트는 ChatGPT 페이지를 감지하고, 주요 텍스트 영역을 찾아 부동형 Enhance 버튼을 삽입한 뒤 클릭/키보드 이벤트를 청취합니다.
  • ChatGPT UI는 자주 변경되는 React 앱이므로, 스크립트는 안정적인 셀렉터, 폴백 휴리스틱(예: “가장 큰 textarea”) 및 **MutationObserver**를 사용해 재렌더링 후에도 버튼을 재배치합니다.

Prompt API를 통한 Gemini Nano 연동

// Example of creating a Gemini Nano model instance
if (chrome.ai && chrome.ai.languageModel) {
  const model = await chrome.ai.languageModel.create({
    temperature: 0.2,
    topK: 40,
    // other model options...
  });

  const metaPrompt = `
    You are a prompt‑engineering assistant. Rewrite the user's text as a clear,
    detailed prompt that specifies context, output format, and constraints,
    without changing the core intent.
  `;

  const response = await model.prompt(`${metaPrompt}\nUser: ${roughText}`);
  // `response` now contains the enhanced prompt
}
  • 로컬 실행이므로 지연 시간이 낮고 예측 가능하며 네트워크 왕복이 없습니다.
  • Chrome이 Gemini Nano를 제공하는 한, Wi‑Fi가 꺼져 있어도 확장 프로그램이 동작합니다.
  • Gemini Nano는 아직 초기 단계이므로 방어적인 오류 처리가 필요합니다; 모델을 사용할 수 없을 경우 친절한 대체 메시지를 표시합니다.

현재 제공되는 기능 (v1)

  • ChatGPT 프롬프트 텍스트 영역에 떠다니는 “Enhance” 버튼.
  • Gemini Nano를 이용한 온‑디바이스 프롬프트 향상, Chrome Prompt API 사용.
  • 외부 API나 API 키가 전혀 필요 없는 완전 로컬 처리.
  • 파워 유저를 위한 키보드 단축키 지원.
  • ChatGPT와 자연스럽게 어우러지는 최소한의 네이티브 UI.

이 확장 프로그램은 Chrome 웹 스토어에 공개되어 있으며, 다른 확장 프로그램처럼 설치할 수 있습니다.

배운 점

  • 권한 및 프라이버시: 어떤 데이터에 접근하고 왜 필요한지 명확히 설명합니다.
  • 사용자 흐름이 모델보다 중요: 타이핑 흐름을 방해하지 않으며, 빠른 시각적 피드백을 제공하고 원래 의도를 존중합니다.
  • 초기 채택 트레이드오프: 일부 사용자는 플래그를 활성화하거나 Dev/Canary 빌드를 사용해야 할 수 있으므로, 견고한 폴백 메시지가 필수입니다.

Prompt Enhancer는 로컬 LLM을 중심으로 간단하고 잘 통합된 UX가 일상적인 AI 활용을 얼마나 크게 향상시킬 수 있는지를 보여줍니다.

Back to Blog

관련 글

더 보기 »