플러그인 허브

플러그인 허브는 작은 도구를 찾고, 설치하고, 실행하는 곳입니다. 플러그인은 창이 있는 스니펫이며, 다른 스니펫과 같이 저장됩니다. 검색 창 마켓플레이스 탭에서도 열 수 있습니다.

@codeexpander/plugin-timestamp

Install

Timestamp

JSON format

json

QR code

Plugin Hub: install by npm package name. A plugin is a snippet with plugin_mode, not a separate table.

플러그인이 하는 일

플러그인은 CodeExpander 안에서 도는 미니 앱입니다. 할 수 있는 것:

사용자 도구 추가 — 타임스탬프 변환, JSON 포맷터, 색 추출기, 계산기
파일 처리 — 검색 창에 파일을 끌어다 놓으면 플러그인이 파싱하고 변환
워크플로 통합 — QR 코드 생성, Base64 인코딩/디코딩, SQL 포맷
AI 기능 — 코드 리뷰, 자동 주석, 테스트 생성

플러그인 설치

npm에서 (권장)

가장 빠른 설치:

메인 창 또는 검색 창에서 플러그인 허브를 엽니다
설치 섹션에 npm 패키지 이름을 칩니다(예: @codeexpander/plugin-timestamp)
설치를 클릭합니다

공식 플러그인은 @codeexpander/plugin-* 접두사를 쓰며 팀이 고릅니다.

요구 사항: 시스템에 Node.js와 npm이 설치되어 있어야 합니다.

로컬 디렉터리에서

기기에 플러그인 폴더가 있으면:

디렉터리에서 가져오기를 클릭합니다
plugin.json과 진입 파일이 있는 폴더를 고릅니다
플러그인이 목록에 바로 나타납니다

AI에서 (MCP)

AI가 플러그인을 만들게 합니다.

설정 → MCP에서 MCP 서버를 켭니다
AI 어시스턴트(Cursor, Claude Desktop 등)를 연결합니다
필요한 것을 설명합니다. 예: 「CSV를 Markdown 표로 바꾸는 플러그인을 만들어 줘」
AI가 플러그인을 만들고 자동으로 설치합니다

플러그인 관리

둘러보기와 검색

플러그인 허브는 설치한 플러그인을 카드로 보여 줍니다. 검색 칸으로 필터:

이름 — 예: “timestamp”
분류 — 예: “개발자 도구”, “변환기”
설명 — 키워드 검색

플러그인 실행

플러그인 허브에서 — 카드 클릭으로 UI를 엽니다
검색 창에서 — 플러그인 이름 또는 정의한 명령 트리거를 칩니다
파일과 함께 — 검색 창에 파일을 끌어다 놓으면 파일 인식 플러그인이 자동으로 켜집니다

고정과 정리

고정하면 자주 쓰는 플러그인이 검색 창 빈 상태에 나타납니다
숨기기로 거의 안 쓰는 플러그인의 잡음을 줄입니다
제거로 완전히 지웁니다

플러그인 구조

플러그인은 본질적으로 특수 스니펫입니다.

plugin.json — 메타데이터(이름, 설명, 아이콘, 분류, 진입 파일)
진입 파일 — 플러그인 UI(HTML/JS)
명령 — 검색 창용 선택적 키워드 트리거

예: 「타임스탬프 변환」 플러그인이 정의할 수 있는 것:

명령: ts — 검색에서 ts 1714392000을 치면 바로 변환
UI: 플러그인 허브에서 열면 달력 피커

직접 플러그인 만들기

옵션 1: 수동 (개발자)

폴더를 만듭니다.


my-plugin/
  plugin.json    ← 매니페스트
  index.html     ← UI

plugin.json 예:


{
  "main": "index.html",
  "title": "My Plugin",
  "description": "Does something useful",
  "category": "Tools",
  "features": [
    {
      "code": "myCmd",
      "explain": "Run my command",
      "cmds": ["my", "mp"]
    }
  ]
}

플러그인 허브 → 디렉터리에서 가져오기로 가져옵니다.

옵션 2: AI 보조 (모두)

MCP로 연결한 AI 어시스턴트에 아이디어를 설명합니다. AI가:

HTML/JS를 쓰고
매니페스트를 만들고
자동으로 설치합니다

예 프롬프트: 「선택한 텍스트의 단어를 세는 플러그인을 만들어 줘. 검색 창용 wc 명령도 넣어 줘.」

보안

플러그인은 메인 앱보다 권한이 적은 작은 창에서 돕니다.

스니펫 라이브러리를 직접 훑을 수 없습니다
클립보드와 토스트는 허용할 때까지 기다립니다
플러그인 목록이 창 능력을 선언하면 앱이 그걸 강제합니다

전형적인 워크플로

개발자 툴킷

설치: @codeexpander/plugin-timestamp, @codeexpander/plugin-json, @codeexpander/plugin-color

일상:

검색 창 → ts + 타임스탬프 붙여넣기 → 즉시 변환
검색 창 → json + JSON 붙여넣기 → 포맷과 검증
검색 창 → color + HEX 붙여넣기 → RGB/HSL 변환 보기

콘텐츠 크리에이터

설치: @codeexpander/plugin-qr, @codeexpander/plugin-base64

검색 창 → qr + URL 붙여넣기 → QR 코드 이미지 생성
검색 창 → b64 + 텍스트 붙여넣기 → Base64 인코딩/디코딩

팀 사용자 플러그인

팀이 내부 플러그인을 만듭니다.

회사 API 서명 생성
내부 문서 템플릿
배포 명령 러너

npm 비공개 레지스트리 또는 로컬 디렉터리 동기화로 공유합니다.

플러그인 백엔드

어떤 플러그인은 한 번에 끝납니다. 어떤 것은 잠깐 계속 돌아야 합니다. 설정 → 확장 → 플러그인 백엔드를 열어 타임아웃과 동시에 돌 수 있는 수를 제한합니다. 이 컴퓨터에서입니다. 플러그인 창은 의도적으로 메인 창보다 파일을 덜 만집니다. 개발 중에는 설정에서 허용된 로컬 폴더를 고릅니다.

플러그인 개발

날짜를 고른 뒤 넣는 작은 도구가 필요합니다. 두 번째 제품을 설치하지 않습니다. 플러그인은 플러그인 모드가 켜진 스니펫이며, 작은 창을 열 수 있습니다.

Develop snippet plugin

Create from a template, import a folder, or use Cursor + CodeExpander MCP.

1Create a plugin

Use Cursor (MCP)Recommended

Enable the MCP server in Settings, then ask the AI to generate a snippet.

codeexpander-plugins

Public repo: spec and examples.

2Import into CodeExpander

Import from folder

Pick a folder with plugin.json and an entry file.

Choose folder

Import as dev linkLocal dev

Stores the manifest only; files are read live. Limited by dev_plugin_base_dirs.

Choose folder

Plugin Dev window: step 1 create via Cursor MCP; step 2 import folder or soft-link. A plugin is a plugin_mode snippet, not another table.

경로	언제
플러그인 개발 창	템플릿에서 단계를 따르거나 폴더를 가져오기
로컬 폴더	허용된 디렉터리에 매니페스트와 진입 페이지가 이미 있음
플러그인 허브	마켓에서 설치하면 스니펫이 됨
설정의 MCP	편집기의 AI에게 스펙으로 스니펫을 만들라고 요청

작성된 스펙은 설정 → MCP 카드에 있습니다.

같이 보기: MCP