맥에서도 쓰려고 위젯을 Electron으로 옮겼다

플러그인 쪽은 Claude Code 플러그인 API만 써서 운영체제를 타지 않는다. 문제는 화면에 그리는 위젯이었다. PowerShell과 WPF로 만들어서 맥에서는 아예 뜨지 않았다. 플러그인과 위젯이 폴더 하나에 둔 파일로만 주고받는 구조라, 위젯만 새로 만들면 플러그인은 거의 그대로 둘 수 있었다.

Electron 하나로 두 운영체제를 맡긴다

따져 본 방법은 세 가지였다.

git clone으로 받아 쓰는 플러그인이라 받는 사람이 직접 빌드하는 방식은 피하고 싶었다. Electron은 npm으로 받으면 맥의 격리 표시가 붙지 않아서, 개발자 서명 없이도 경고 없이 실행된다. 무거운 건 감수하고 Electron으로 정했다.

창은 모니터 하나를 덮고 움직이지 않는다

WPF 위젯을 다듬는 내내 괴롭힌 문제가 있었다. 카드나 패널이 열리고 닫힐 때마다 창 크기를 바꿨고, 창을 옮기는 순간과 다시 그리는 순간이 한 프레임 어긋나 내용이 튀었다. 자리를 미리 잡아 두는 식으로 하나씩 막아 왔다.

새 위젯은 처음부터 다르게 잡았다. 투명한 창 하나가 코어가 있는 모니터의 작업 영역 전체를 덮는다. 코어, 카드, 패널, 채팅은 전부 그 안에서 위치만 바뀐다. 무엇이 열리고 닫혀도, 코어를 끌어도 창은 그대로라서 튈 일이 없다. 창이 움직이는 건 코어를 다른 모니터로 넘길 때뿐이다.

빈 곳은 클릭이 아래 창으로 그대로 지나가야 한다. 창 전체를 마우스가 통과하게 두고, 페이지가 마우스 위치를 계속 받아 보다가 코어나 카드 위에 오면 그때만 클릭을 받게 바꾼다.

win.setIgnoreMouseEvents(true, { forward: true })
ipcMain.on('pointer', (_e, isOverPiece) => win.setIgnoreMouseEvents(!isOverPiece, { forward: true }))

도트 글씨는 글꼴의 비트맵을 직접 찍는다

WPF에서는 Windows 글꼴 엔진으로 맑은 고딕을 번짐 없이 찍어 도트 글씨를 만들었다. 브라우저는 글자를 늘 부드럽게 그리기 때문에, 캔버스에 그린 뒤 반투명한 픽셀을 잘라 내 봤다. 획 굵기가 들쭉날쭉하고 뭉툭해서 쓸 수 없었다. 맑은 고딕은 맥에 없고, 저장소에 넣어 배포할 수도 없다.

그래서 도트 전용 한글 글꼴인 갈무리를 비교해 보고, 획 두께가 원래 글씨와 가장 비슷한 갈무리14를 골랐다. SIL 오픈 폰트 라이선스라 위젯과 같이 배포할 수 있고, 두 운영체제에서 모양이 같다. 다만 원래 글씨보다 조금 커서, 한눈에 보는 호버 카드는 한 단계 작은 갈무리11로 바꿨다.

비트맵은 글자마다 폭, 높이, 위치와 점 배열만 남겨 묶었다. 한글 전체가 들어 있어도 글꼴 하나에 1MB가 안 되고, 브라우저 글꼴 엔진을 거치지 않으니 Windows와 맥에서 점 하나까지 같다. 줄 높이도 글꼴이 알려 주는 여백 대신 실제 글자 높이에 맞췄다.

설치는 실행기 하나가 맡는다

플러그인은 세션이 시작될 때 node app/launch.js만 부른다. 실행기는 Electron이 없으면 ~/.claude/orbit-hud-live/runtime에 설치하고, 위젯을 띄운 뒤 바로 끝난다. 플러그인 폴더에 설치하지 않은 건, 코드를 고칠 때마다 다시 불러오는 감시 기능이 수천 개 파일 변화에 반응할 수 있어서다. 데이터 폴더도 플러그인 위치가 아니라 홈 폴더를 기준으로 찾게 바꿨다.

감수한 것

위젯을 띄우려면 받는 사람 컴퓨터에 Node.js가 있어야 하고, 첫 실행에 1분쯤 걸린다. 메모리도 예전 위젯보다 조금 더 쓴다. 맥에서는 아직 직접 실행해 보지 못했다.