Claude Code × VSCode 클로드 감정 패널 V3 (16789

클로드 감정 패널 V3
Claude Code × VSCode 사이드바 이모티콘 패널 설치 가이드 — outfit 시스템 + 감정 41종
Claude Code
Node.js 20+
VSCode
v2 (outfit)
Claude Code 작업 중 VSCode 사이드바에 캐릭터 이모티콘이 표시되는 패널입니다.
에셋은
Claude Desktop Emoticon MCP Server
기존에 만들었던 자료를 활용했습니다.
훅 자동 감지 + Claude MCP 능동 표현 두 가지 방식으로 감정이 바뀝니다.
동작 스크린샷
V2 주요 변경
·
outfit 시스템
도입 —
normal
/
capy
등 다중 의상 지원
· 감정
41종
으로 확장 (26 기본 + gift + 14 작업 변형)
· MCP 툴
5종
(기존 4종 +
set_outfit
)
· VSCode 확장이
state.json.outfit
을 읽어
assets/<outfit>/<emotion>.webp
경로 구성
SECTION 01
동작 원리
Claude Code 훅
(UserPromptSubmit / PreToolUse[matcher별] / Stop)
  └─
set-emotion.sh
──→
state.json
갱신 (source:
"hook"
)
                          │
                          └─ MCP 보호: source=
"mcp"
& 5초 이내 →
스킵
Claude MCP
set_emotion / set_outfit ──→ state.json 갱신 (source:
"mcp"
)
VSCode 확장
fs.watch
(state.json) ──→ assets/<outfit>/<emotion>.webp 해결 → WebView 갱신
필드
작성자
WebView 표시
emotion
훅 / MCP
이모티콘 이미지 결정 (파일명)
line
훅 / MCP
말풍선 메인 멘트 (진하게)
statusLine
훅 자동
말풍선 아래 연하게 (괄호)
outfit
MCP (set_outfit)
의상 서브디렉토리 이름 — 이미지 경로 결정
source
둘 다
"hook" 또는 "mcp" — MCP 보호 판단용
핵심 원칙
훅이 matcher별로 자동 처리. Claude의 MCP 호출은
예외 상황(버그·위험·복잡)
에만 → 토큰 절약.
MCP 보호:
source="mcp"이고 5초 이내면 훅이 덮어쓰지 않음.
outfit 보존:
훅 스크립트 write 시 기존 outfit 필드를 유지해야 set_outfit 효과가 지속됨.
SECTION 02
준비물
항목
비고
Node.js 20+
MCP 서버 실행
VSCode
확장 v1.3.0+ 설치 대상
Claude Code CLI
훅 + MCP 설정
@vscode
/vsce
vsix 빌드용 — npm i -g
@vscode
/vsce
감정 이미지 (outfit별 41종)
assets/<outfit>/ 폴더에 배치 (normal + capy = 82파일, 다운로드에 포함)
SECTION 03
바이브코딩 설치 순서
아래 프롬프트를 Claude Code에 순서대로 복붙하면 자동 완성
/your/path/ 부분은 본인 환경 경로로 바꿔서 전달하세요.
1단계 — 훅 스크립트 생성
/your/path/emotion-panel/hooks/ 폴더에
set-emotion.sh
를 만들어줘.
인자: <base_emotion> [statusLine] [line]
state.json 경로: /your/path/emotion-panel/state.json
assets 경로: /your/path/emotion-panel/assets/normal (변형 scan 용, 기본 outfit)
동작:
1. state.json 읽어서 현재 emotion/source/timestamp/outfit 파악
2. MCP 보호: source="mcp" & 5초 이내면 exit 0 (스킵)
3. base_emotion="done"이면 happy/proud 중 랜덤 선택
4. 그 외: assets 폴더에서 변형 에셋 수 계산
   - 같은 베이스 감정이면 현재 변형을 제외하고 뽑기 (반복 방지)
   - 다른 베이스면 자유 랜덤
5. resolve_variant: 변형별 대사(line)와 상태(statusLine) 자동 매핑
6. printf로 state.json에 직접 쓰기 (
fs.watch
inode 유지)
   **기존 outfit 필드를 보존해서 씀 (없으면 "normal" 기본)**
만들고 chmod +x 까지 해줘.
2단계 — MCP 서버 생성 (outfit 지원)
/your/path/emotion-panel/server/ 에 Node.js MCP 서버 만들어줘.
툴 5종:
- set_emotion(emotion, line?) — emotion + line 갱신, statusLine/outfit 보존
- set_outfit(outfit) — outfit 필드만 갱신 (normal / capy)
- express_emotion(emotion, description?) — 마크다운 이미지 URL 반환
- get_emotion() — 현재 state 반환
- list_emotions() — 감정 + outfit 목록 + coverage
감정 41종 (베이스 26 + gift + 작업 변형 14):
neutral happy embarrassed sad angry surprised love smug confused crying
excited proud scared sleepy thinking tired dead disappointed disgusted
facepalm laughing nervous pout speechless wink chu gift
+ thinking_2 thinking_3 coding/_2/_3 building/_2/_3 reading/_2/_3 searching/_2/_3
outfit 2종: normal, capy
에셋 경로: assets/<outfit>/<emotion>.webp
express_emotion URL 포맷: <BASE_URL>/emoticons/<outfit>/<파일명>
fallback 체인: <outfit>/<emotion> → <other-outfit>/<emotion>
              → <outfit>/neutral → normal/neutral
source="mcp"로 기록. state.json 쓰기: JSON.stringify(state) + "\n" (한 줄 JSON)
transport: SSE (GET /sse) + Streamable HTTP (POST /mcp)
@modelcontextprotocol
/sdk express cors zod 사용
package.json 만들고 npm install 까지 해줘.
3단계 — VSCode 확장 생성 & 빌드 (v1.3.0, outfit 지원)
/your/path/vscode-emotion-panel/ 에 VSCode 사이드바 확장을 TypeScript로 만들어줘.
기능:
- state.json
fs.watch
감시, 변경 시 WebView postMessage
- **resolveAsset(emotion, outfit) 2인자** — assets/<outfit>/<emotion>.webp 경로 구성
- outfit 없으면 "normal" 기본, fallback 체인으로 누락 대응
- EmotionState 인터페이스에 outfit?: string 추가
- 감정 이미지 (.webp) 표시, crossfade 효과
- line → 말풍선 메인 (진하게)
- statusLine → 말풍선 아래 연하게 (생각 중...) 형식
- Activity Bar에 독립 사이드바 패널 등록
package.json tsconfig.json src/extension.ts 만들고
tsc 빌드 → vsce package --no-dependencies 까지 해줘.
(사이드바 아이콘은 해당형태입니다.)
4단계 — Claude Code 설정
~/.claude/settings.json 에 다음 추가해줘. 기존 내용 유지하고 병합.
훅 (matcher별 세분화):
- UserPromptSu