🚀 나만의 프롬프트 관리 크롬 확장 프로그램 만들기 완벽 가이드

Obsidian, Notion, Google Sheets보다 더 간단하고 빠르게! Google Apps Script + Chrome Extension으로 어디서든 나만의 프롬프트를 불러와 사용하는 방법

1. 글의 목적

ChatGPT, Claude, Gemini, Perplexity 등 AI 서비스에서 반복적으로 쓰는 프롬프트가 있다면, 매번 복사·붙여넣기 하는 것은 비효율적입니다. 이 글에서는 크롬 확장 프로그램과 Google Apps Script를 이용하여

원격 프롬프트 DB 연동
태그별 분류
검색/필터링
바로 붙여넣기(단축키 ALT+P)
다크모드 지원 까지 구현하는 방법을 안내합니다.

2. 완성 예시

단축키 ALT+P → 팝업창 열림
프롬프트 검색 & 태그 필터
{{date}}, {{clipboard}}, {{selection}} 자동 치환
원클릭 복사 또는 현재 커서 위치에 바로 삽입
Google Sheets 연동으로 모든 기기에서 동기화

3. 준비물

항목	설명
Google 계정	Google Apps Script & Google Sheets 사용
Chrome 브라우저	확장 프로그램 실행
이미지 에셋	아이콘 (16, 32, 48, 192, 512px) PNG
기초 텍스트 편집기	VS Code, Sublime Text 등

4. Google Sheets 준비

새 스프레드시트 생성
- 시트 이름: prompts
- 첫 번째 행에 다음 헤더 추가
```
id | title | tags | body | updatedAt | token
```

예시 데이터 입력

uuid-001 | 요약(핵심5) | summary | 다음 텍스트를 핵심 5개로 요약:\n\n{{selection}} | 2025-08-09T12:00:00Z | mySecretToken
uuid-002 | 번역-문체보존 | translate | 다음 텍스트를 문체를 살려 번역:\n\n{{selection}} | 2025-08-09T12:00:00Z | mySecretToken

5. Google Apps Script 작성

Google Sheets 메뉴 → 확장 프로그램 → Apps Script
Code.gs에 아래 코드 붙여넣기

function doGet(e) {
  const tokenParam = e.parameter.token || "";
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("prompts");
  const data = sheet.getDataRange().getValues();
  const headers = data.shift();
  const result = data.map(row => {
    let obj = {};
    headers.forEach((h, i) => obj[h] = row[i]);
    return obj;
  }).filter(r => !r.token || r.token === tokenParam);
  return ContentService.createTextOutput(JSON.stringify({ prompts: result }))
    .setMimeType(ContentService.MimeType.JSON);
}

배포 → 새 배포 → 웹 앱
- 액세스 권한: 모든 사용자
- URL 복사 (나중에 Chrome 확장 옵션에서 입력)

6. 크롬 확장 프로그램 폴더 구성

prompt-dock/
 ├── manifest.json
 ├── popup.html
 ├── popup.css
 ├── popup.js
 ├── icons/
 │    ├── icon16.png
 │    ├── icon32.png
 │    ├── icon48.png
 │    ├── icon192.png
 │    └── icon512.png

7. manifest.json 작성

{
  "manifest_version": 3,
  "name": "Prompt Dock",
  "version": "1.0",
  "description": "나만의 프롬프트를 검색하고 즉시 삽입",
  "permissions": ["storage", "activeTab", "scripting", "clipboardWrite", "clipboardRead"],
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "icons/icon16.png",
      "32": "icons/icon32.png",
      "48": "icons/icon48.png"
    }
  },
  "icons": {
    "16": "icons/icon16.png",
    "32": "icons/icon32.png",
    "48": "icons/icon48.png",
    "192": "icons/icon192.png",
    "512": "icons/icon512.png"
  },
  "commands": {
    "open_prompt_dock": {
      "suggested_key": { "default": "Alt+P" },
      "description": "프롬프트 도크 열기"
    }
  }
}

8. 팝업 화면 코드

popup.html / popup.css / popup.js 앞서 만든 UI/JS 코드를 복사하여 저장 (다크모드, 태그 필터, CRUD, 자동치환 기능 포함)

9. 확장 프로그램 로드

Chrome → chrome://extensions
개발자 모드 ON
압축 해제된 확장 프로그램 로드
prompt-dock 폴더 선택
ALT+P로 실행 테스트

10. 프롬프트 관리 방법

프롬프트 추가

팝업 상단의 + 새로 클릭
제목, 태그, 본문 입력
{{selection}} : 현재 선택 텍스트 자동삽입
{{clipboard}} : 클립보드 내용 자동삽입
{{date}} : 오늘 날짜 삽입

프롬프트 수정/복제/삭제

각 카드 하단의 버튼으로 실행

태그 필터

상단 태그 칩 클릭 → 해당 태그만 필터링

11. SEO 최적화 포인트

키워드 조합: 프롬프트 관리, 크롬 확장 프로그램, Google Apps Script, ChatGPT 자동화, 프롬프트 도크
제목, H1, H2, alt 속성, 이미지 캡션에 키워드 포함

메타 설명 예시:

ChatGPT, Claude 등 AI 프롬프트를 효율적으로 관리하는 크롬 확장 프로그램 제작 가이드. Google Sheets 연동으로 어디서든 동기화.

12. 추천 태그

#프롬프트관리 #ChatGPT #크롬확장프로그램 #GoogleAppsScript #AI자동화 #프롬프트DB #태그필터 #프롬프트저장소

13. 마무리

이 확장 프로그램을 이용하면 매번 프롬프트를 검색하거나 복사/붙여넣기할 필요 없이 한 번 저장해둔 프롬프트를 단축키로 불러와 사용할 수 있습니다. Google Sheets 연동을 통해 어디서나 동기화되므로, PC와 노트북, 심지어 다른 사무실 컴퓨터에서도 동일한 환경을 유지할 수 있습니다.

📌 다음 발전 방향

실시간 동기화 주기 설정 (예: 1분마다 자동 업데이트)
태그별 색상 커스텀
프롬프트 즐겨찾기 고정
다중 원격 DB 지원

🔥 파비콘(아이콘)부터 배포까지: “Prompt Dock” 크롬 확장 완전 제작 가이드 (SEO 최적화)

파비콘/아이콘 개념과 규격
아이콘 디자인: 원칙과 제작(툴별 방법)
사이즈 변환(16/32/48/128/192/512) & 파일명 규칙
프로젝트 폴더 구조와 manifest.json
팝업/옵션 UI 연결 체크
Google Sheets + Apps Script 연동
단축키 & 사용법
배포/업데이트 & 디버깅
자주 묻는 질문(FAQ)

1) 파비콘/아이콘 개념과 규격

파비콘(favicon): 웹사이트 즐겨찾기/탭에 노출되는 16×16, 32×32 작은 아이콘.
크롬 확장 아이콘: 툴바·확장 관리·웹스토어 등에 노출. 권장 세트
- 16×16 (icon16.png)
- 32×32 (icon32.png)
- 48×48 (icon48.png)
- 128×128 (icon128.png) ← 크롬 확장 필수
- 추가: 192×192, 512×512는 브랜드 자산/오픈그래프/배포 썸네일로 유용

디자인 팁(중요):

캔버스 대비 여백 10~14% → 작은 사이즈에서 퍼짐/찐빵 방지
단순한 실루엣 + 2~3색 → 16px에서도 식별
텍스트는 한 글자(예: “P”)까지만. 작은 크기에서 가독성 확보
배경은 단색 또는 투명, 프레임/테두리는 얇게(1~2px)
다크/라이트 모두에서 구분되도록 대비 확보

2) 아이콘 디자인: 원칙과 제작(툴별)

A. 온라인(가장 쉬움)

favicon.io: “P” 같은 단일 글자 로고를 빠르게 만들기 좋음
1. Text → Font/Background 선택 → PNG 다운로드
2. 512×512 이상 소스 png도 함께 생성되면 활용

B. Canva / Figma

512×512 아트보드로 시작 → 중앙 정렬
도형 + 이니셜(“P”)로 단순 로고 구성
내보내기 PNG(투명 배경)

C. Illustrator/Photoshop/Procreate

벡터(일러) 권장 → 512×512 아트보드 → PNG (300dpi, sRGB)

3) 사이즈 변환 & 파일명 규칙

최소 세트(확장 필수)

icons/icon16.png
icons/icon32.png
icons/icon48.png
icons/icon128.png

확장 사용 + 마켓/브랜딩까지 고려

추가로 icon192.png, icon512.png 보유 추천

빠른 리사이즈 방법

Windows

그림판: 원본 열기 → 크기 조정(픽셀) → 128×128 저장 … 반복
PowerToys Image Resizer: 다중 파일 일괄 리사이즈

macOS

미리보기: 도구 → 크기 조절 → 저장
Automator: 일괄 워크플로우로 리사이즈

CLI (선택: ImageMagick 설치 시)

magick icon-source-512.png -resize 128x128 icons/icon128.png
magick icon-source-512.png -resize 48x48  icons/icon48.png
magick icon-source-512.png -resize 32x32  icons/icon32.png
magick icon-source-512.png -resize 16x16  icons/icon16.png

검증 체크리스트

가장자리 1~2px 여백 유지되는지
16px에서 형태 식별 가능한지 확대/축소로 검사
투명 배경이라면 아웃라인이 배경색과 겹쳐도 보이는지

4) 프로젝트 폴더 & manifest.json

폴더 구조

prompt-dock/
 ├─ manifest.json
 ├─ popup.html
 ├─ popup.css
 ├─ popup.js
 ├─ options.html
 ├─ options.js
 ├─ content.js
 ├─ service_worker.js
 └─ icons/
     ├─ icon16.png
     ├─ icon32.png
     ├─ icon48.png
     └─ icon128.png
    (선택) icon192.png, icon512.png

manifest.json (MV3, 아이콘 포함/팝업 단축키)

{
  "manifest_version": 3,
  "name": "Prompt Dock",
  "short_name": "PromptDock",
  "version": "1.2.0",
  "description": "원클릭 프롬프트 검색·삽입 확장 (Google Sheets 연동)",
  "icons": {
    "16": "icons/icon16.png",
    "32": "icons/icon32.png",
    "48": "icons/icon48.png",
    "128": "icons/icon128.png"
  },
  "action": {
    "default_title": "Prompt Dock",
    "default_popup": "popup.html",
    "default_icon": {
      "16": "icons/icon16.png",
      "32": "icons/icon32.png",
      "48": "icons/icon48.png"
    }
  },
  "options_ui": { "page": "options.html", "open_in_tab": true },
  "background": { "service_worker": "service_worker.js" },
  "permissions": ["storage", "activeTab", "scripting", "clipboardWrite", "contextMenus"],
  "host_permissions": ["https://script.google.com/*", "https://script.googleusercontent.com/*"],
  "content_scripts": [
    { "matches": ["<all_urls>"], "js": ["content.js"], "run_at": "document_idle" }
  ],
  "commands": {
    "_execute_action": {
      "suggested_key": { "default": "Ctrl+Shift+P" },
      "description": "Prompt Dock 팝업 열기"
    },
    "insert_last_prompt": {
      "suggested_key": { "default": "Alt+Shift+P" },
      "description": "마지막 프롬프트 재삽입"
    }
  }
}

팁: Alt+P는 크롬/OS 단축키와 충돌할 수 있어 Ctrl+Shift+P 권장. 오류 “아이콘 못 찾음” 발생 시 → 파일 존재 여부/경로 철자부터 점검하세요.

5) 팝업/옵션 UI 연결 체크

popup.html 최소본이 열리면 경로 정상.
이후 제공된 리뉴얼 버전의 popup.html/css/js로 교체 → 태그 칩/키보드 내비/토스트/복제·삭제까지 작동.
options.html/js 안전본 사용: MV3 CSP로 인라인 스크립트 금지. defer 또는 DOMContentLoaded 바인딩 필수.

설치/테스트

chrome://extensions → 개발자 모드
압축해제된 확장 프로그램 로드 → 폴더 선택
툴바 핀 고정 → 아이콘 클릭(또는 단축키)
팝업 UI 정상 노출 확인

6) Google Sheets + Apps Script 연동

시트

시트명: Prompts (대소문자 정확히)
헤더(1행): id | title | tags | body | updatedAt | token
token이 빈 행은 공개, 값이 있으면 해당 토큰으로만 필터

Apps Script

스프레드시트 바인딩 스크립트 추천(확실함)
또는 독립형이라면 SpreadsheetApp.openById('시트ID') 방식

배포 설정

배포 > 웹 앱
- 실행 사용자: 나
- 액세스: 링크가 있는 모든 사용자
배포 후 /exec URL 복사
시크릿 창에서 /exec?ping=1 → JSON {ok:true,...} 확인

확장 옵션에 입력

API URL: /exec
토큰: (시트 token과 일치 시 비공개 행만 조회)

7) 단축키 & 사용법

팝업 열기: Ctrl+Shift+P
마지막 프롬프트 재삽입: Alt+Shift+P
팝업 내: 검색 → ↑/↓ 이동 → Enter로 사용
치환 변수:
- {{date}} 오늘 날짜
- {{clipboard}} 클립보드 텍스트
- {{selection}} 현재 탭 드래그 선택 텍스트

8) 배포/업데이트 & 디버깅

업데이트: 코드 변경 → chrome://extensions에서 리로드
옵션 빈 화면: 인라인 스크립트 사용 여부, 콘솔 에러 확인
JSON 파싱 오류: /exec에서 HTML(로그인/에러) 반환 → 배포 권한 재설정
삽입 안 됨: 특수 에디터는 클립보드 복사 모드로

9) 자주 묻는 질문(FAQ)

Q1. 192×192, 512×512도 manifest에 넣어야 하나요? A. 확장 동작에는 128까지면 충분합니다. 192/512는 브랜딩(웹스토어/OG)에 유용하므로 자산으로 보관하세요.

Q2. 아이콘이 흐릿합니다. A. 소스(512×512)에서 여백 10~14% 유지, 선/글자 두께를 굵게. 리사이즈 시 샤픈 옵션을 쓰거나 수동 힌팅을 고려하세요.

Q3. 토큰이 있는데도 목록이 비어 보입니다. A. 옵션 페이지의 토큰 값과 시트 token 필드가 정확히 일치해야 합니다. 공백/대소문자 확인.

나만의 프롬프트 관리 크롬 확장 프로그램 만들기 완벽 가이드