Claude Code × VSCode 클로드 감정 패널 V2 (16721

클로드 감정 패널 V2
Claude Code × VSCode 사이드바 이모티콘 패널 설치 가이드
Claude Code
Node.js 20+
VSCode
Claude Code 작업 중 VSCode 사이드바에 캐릭터 이모티콘이 표시되는 패널입니다.
에셋은
Claude Desktop Emoticon MCP Server
기존에 만들었던 자료를 활용했습니다.
훅 자동 감지 + Claude MCP 능동 표현 두 가지 방식으로 감정이 바뀝니다.
동작 스크린샷
gif는 용량땜시 색상이 적게나오는데 눈색깔은 정상적으로 초록색읾
SECTION 01
동작 원리
Claude Code 훅
(UserPromptSubmit / PreToolUse[matcher별] / Stop)
  └─
set-emotion.sh
──→
state.json
갱신 (source:
"hook"
)
                          │
                          └─ MCP 보호: source=
"mcp"
& 5초 이내 →
스킵
Claude MCP
set_emotion ──→ state.json 갱신 (source:
"mcp"
, 버그·위험만)
VSCode 확장
fs.watch
(state.json) ──→ WebView 이미지 + 말풍선 업데이트
필드
작성자
WebView 표시
emotion
훅 자동
이모티콘 이미지 결정
line
훅 / MCP
말풍선 메인 멘트 (진하게)
statusLine
훅 자동
말풍선 아래 연하게 (괄호)
source
둘 다
"hook" 또는 "mcp" — MCP 보호 판단용
핵심 원칙
훅이 matcher별로 자동 처리. Claude의 MCP 호출은
예외 상황(버그·위험·복잡)
에만 → 토큰 절약.
MCP 보호:
source="mcp"이고 5초 이내면 훅이 덮어쓰지 않음.
SECTION 02
준비물
항목
비고
Node.js 20+
MCP 서버 실행
VSCode
확장 설치 대상
Claude Code CLI
훅 + MCP 설정
@vscode
/vsce
vsix 빌드용 — npm i -g
@vscode
/vsce
감정 이미지 40종 (기본 30 + 변형 10)
assets/ 폴더에 배치 (다운로드 파일에 포함)
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
동작:
1. state.json 읽어서 현재 감정/source/timestamp 파악
2. MCP 보호: source="mcp" & 5초 이내면 exit 0 (스킵)
3. base_emotion="done"이면 happy/proud 중 랜덤 선택
4. 그 외: assets 폴더에서 변형 에셋 수 계산 (예: coding.webp, coding_2.webp, coding_3.webp → 3종)
   - 같은 베이스 감정이면 현재 변형을 제외하고 뽑기 (반복 방지)
   - 다른 베이스면 자유 랜덤
5. resolve_variant: 변형별 대사(line)와 상태(statusLine) 자동 매핑
6. printf로 state.json에 직접 쓰기 (
fs.watch
inode 유지)
만들고 chmod +x 까지 해줘.
2단계 — MCP 서버 생성
/your/path/emotion-panel/server/ 에 Node.js MCP 서버 만들어줘.
툴: set_emotion(emotion, line?) / get_emotion() / list_emotions()
감정 26종: 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
set_emotion은 line만 갱신, statusLine은 기존 값 보존, source를 "mcp"로 기록
state.json 쓰기: JSON.stringify(state) + "\n" (한 줄 JSON 필수 — pretty-print 시 훅 sed 파싱 실패)
transport: SSE (GET /sse) + Streamable HTTP (POST /mcp)
@modelcontextprotocol
/sdk express cors zod 사용
package.json 만들고 npm install 까지 해줘.
3단계 — VSCode 확장 생성 & 빌드
/your/path/vscode-emotion-panel/ 에 VSCode 사이드바 확장을 TypeScript로 만들어줘.
기능:
- state.json
fs.watch
감시, 변경 시 WebView postMessage
- 감정 이미지 (.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별 세분화):
- UserPromptSubmit:
set-emotion.sh
thinking '' ''
- PreToolUse matcher=Edit|Write:
set-emotion.sh
coding '' ''
- PreToolUse matcher=Bash:
set-emotion.sh
building '' ''
- PreToolUse matcher=Read|Glob|Grep:
set-emotion.sh
reading '' ''
- PreToolUse matcher=Agent:
set-emotion.sh
searching '' ''
- Stop:
set-emotion.sh
done '' ''
(statusLine/line은
set-emotion.sh
내 resolve_variant가 자동 매핑)
MCP 서버:
{ "mcp-emoticon": { "type": "sse", "url": "
http://localhost:3100/sse
" } }
5단계 —
CLAUDE.md
감정 규칙 추가
CLAUDE.md
에 아래 섹션 추가해줘:
## 감정 표현 (Emotion Panel MCP)
훅이 emotion+statusLine+line 자동 세팅. set_emotion 호출은 최소화.
호출 조건 (이 경우에만):
- 심각한 버그/오류 발견 (sad, crying, dead)
- 위험한 작업 직전 — 파일 삭제, force push 등 (nervous)
- 예상보다 훨씬 복잡할 때 (tired, confused)
- 그 외엔 호출 금지
호출 시: line 파라미터 필수, 말투 ~요/~에요, 15자 이내
SECTION 04
훅 감정 매핑
도구별로 다른 감정이 자동 표시 + 변형 3종 랜덤 순환
이벤트
베이스 감정
변형 순환
대사 예시
UserPromptSubmit
thinking
thinking / thinking_2 / thinking_3
음... 생각 중이에요
PreToolUse
[Edit|Write]
coding
coding / coding_2 / coding_3
코드 수정 중이에요~
PreToolUse
[Bash]
building
building / building_2 / building_3
차근차근 쌓는 중...
PreToolUse
[Read|G