TL;DR

이 프로젝트는 WorkBuddy 데스크톱의 설치 파일을 수정하지 않고 로컬 CDP를 통해 CSS 변수와 DOM을 주입해 이미지 하나로 테마를 생성하고 즉시 적용하는 도구이다. 툴은 WorkBuddy를 --remote-debugging-port로 재시작해 renderer를 찾아 Runtime.evaluate로 스타일과 우측 상단 메뉴를 삽입하며 색상 추출과 localStorage 기반 영구화를 지원한다. 이 방식은 앱 서명을 보존하면서 라이트·다크 자동 적응과 빠른 전환을 제공하나 CDP 주입 특성상 WorkBuddy를 수동 재실행하면 주입이 해제되므로 재적용이 필요하다.

주요 기능

• 즉시 전환한다. 테마 적용 시 WorkBuddy 우측 상단에 테마 메뉴가 추가되어 설치된 테마와 원본 인터페이스 간을 클릭으로 지연 없이 전환할 수 있다. 전환 동작은 런타임에서 DOM과 CSS를 주입해 수행된다.
• 업로드한다. 메뉴에서 로컬 이미지를 업로드하면 canvas 기반 색상 추출과 webp 압축 과정을 거쳐 이미지 하나로 테마를 생성하고 localStorage에 저장한다. 저장된 테마는 메뉴에서 즉시 적용과 삭제가 가능하다.
• 자동 적응한다. 테마의 surface 밝기 값을 기준으로 data-vscode-theme-kind 속성을 변경해 VS Code 스타일 컨트롤의 라이트/다크를 자동으로 전환한다. 이 방식은 컨트롤 일관성을 유지하면서 시각적 충돌을 줄인다.
• 비파괴적으로 작동한다. 원소의 app.asar나 설치 디렉토리를 변경하지 않고 127.0.0.1 로컬 바인딩된 CDP를 통해 CSS 변수와 배경 이미지를 덮어써서 테마를 적용한다. 앱 서명과 설치 파일은 원본 상태로 유지된다.

어떻게 동작하는가

도구는 WorkBuddy를 --remote-debugging-port=9223 옵션으로 재시작해 로컬 CDP 엔드포인트를 확보한다. 로컬의 http://127.0.0.1:9223/json/list에서 renderer를 찾아 CDP의 Runtime.evaluate로 CSS와 DOM 노드를 주입해 60개 이상의 --cb-* 변수와 배경 이미지를 덮어쓴다. 추가로 메뉴 DOM을 삽입해 사용자 업로드, 색상 추출, localStorage 기반 영구화와 즉시 전환을 구현한다.

해결 문제

WorkBuddy 공식 클라이언트의 테마 커스터마이징이 기본적으로 제공되지 않거나 설치 파일을 수정해야 하는 경우가 발생한다. 이 프로젝트는 설치 파일과 서명을 건드리지 않고 로컬 CDP 주입으로 테마를 적용해 업데이트 이후 재적용 부담을 낮춘다. 또한 업로드한 단일 이미지를 자동으로 색상으로 변환해 즉시 테마로 반영하므로 사용자별 커스터마이징 과정을 단순화한다.

지금 주목받는 이유

원문은 AI 보조 SKILL로 한 번에 설치를 자동화하는 워크플로와 로컬 CDP를 통한 비파괴적 UI 커스터마이징 조합으로 사용 편의성을 높인 점을 핵심 이유로 제시하고 있다.

차별점

• 비파괴적 CDP 주입 방식을 사용해 app.asar와 설치 디렉토리를 변경하지 않고 테마를 적용한다.
• 이미지 하나에서 자동 색상 추출과 webp 압축을 거쳐 즉시 사용할 수 있는 테마를 생성하고 localStorage에 보관한다.
• WorkBuddy의 data-vscode-theme-kind을 기준으로 라이트/다크 전환을 자동으로 적용해 네이티브 컨트롤과 시각적 일관성을 유지한다.

사용 사례

• 데스크톱 WorkBuddy 사용자가 공식 테마만으로 시각적 만족을 얻지 못할 때 개인 이미지로 빠르게 테마를 생성해 인터페이스를 맞춤화하는 데 사용된다.
• 디자이너나 테마 제작자가 여러 배경 이미지에 대한 즉석 미리보기를 확인하고 색상 팔레트와 라이트·다크 전환을 테스트할 때 유용하다.
• 관리자가 테스트 환경에서 앱 설치 파일을 변경하지 않고 테마 효과를 시연하거나 사용자가 손쉽게 원상복구 가능한 방식으로 데모를 준비할 때 활용된다.

시작하기

WorkBuddy 데스크탑이 설치되어 있어야 한다. macOS에서는 제공된 scripts/apply.command를 더블클릭하거나 ./scripts/apply.command를 실행하면 되고 특정 테마를 적용하려면 node src/cli.mjs apply --theme genshin-night 같은 명령을 사용하면 된다. Windows에서는 PowerShell로 .\scripts\apply.ps1을 실행하거나 필요 시 .\scripts\find-workbuddy.ps1로 경로를 찾은 뒤 적용하고, 처음 실행 시 Set-ExecutionPolicy 권한 설정이 필요할 수 있다.

요구사항

• WorkBuddy 데스크톱이 로컬에 설치되어 있어야 한다.
• macOS 또는 Windows 환경에서 제공된 .command 또는 .ps1 스크립트를 실행할 수 있어야 하며 Windows는 PowerShell 실행 정책 설정이 필요할 수 있다.
• node 명령이 README 명령 예시에서 사용되므로 node 실행 환경이 있어야 CLI로 테마 생성과 적용을 직접 실행할 수 있다.

이미지 분석