Page

Work

WORKY mini

ElectronReactTypeScriptTailwind

ROLE
기획 · 개발 · 검증
PERIOD
2026.05
WORKY mini 화면 1

본문

개요

Worky 웹과 연동되는 Windows 데스크탑 앱입니다. 거래처별 카카오톡 채팅방을 빠르게 열고, 보고 메시지를 클립보드에 복사해 반복 작업을 줄이는 것이 목적입니다.

거래처 선택부터 카카오톡 채팅방 활성화, 메시지 복사까지 이어지는 흐름을 정하고 Claude Code와 구현·검증했습니다.

구현

  • 거래처 목록을 Supabase Realtime으로 웹과 실시간 동기화
  • 라이트·다크·시스템 테마를 지원하며 좁은 창에서도 주요 기능과 정보가 잘리지 않도록 레이아웃을 구성
  • 창 가장자리 자석 기능과 최상단 고정 핀으로 작은 화면에서도 쓰기 편하게 설계
  • 작은 보조 창으로 사용하는 환경을 고려해 좁은 폭부터 레이아웃을 설계하고 넓은 화면으로 확장

트러블슈팅

토스트 팝업이 화면에 보이지 않음

부모 컨테이너의 스택 컨텍스트에 갇혀 토스트가 다른 요소 뒤로 숨었습니다. createPortal로 document.body에 직접 렌더링해 해결했습니다. 같은 시기 Worky 웹의 모달 버그와 원인이 완전히 같았습니다.

한글 채팅방 이름으로 창을 찾지 못함

PowerShell 출력 인코딩 문제로 한글이 깨지거나 창을 못 찾는 일이 반복됐습니다. 문자열을 안전하게 전달하는 변환을 도입해 해결했습니다. 다국어 UI를 다루던 QA 경험에서, 텍스트 자체보다 인코딩과 전달 방식에서 문제가 생기는 경우가 많다는 걸 알고 있었던 게 원인 추적에 도움이 됐습니다.

창 활성화 속도가 기대에 못 미침

처음에는 외부 라이브러리로 Windows API를 직접 호출했는데 느려서 PowerShell 방식으로 바꿨고, 이후 창 찾기와 활성화가 각각 별도 프로세스로 실행되는 비효율을 발견해 하나로 통합했습니다. 결과적으로 의존성 하나가 통째로 사라지고 구조가 더 단순해졌습니다.