서비스 모음으로 돌아가기
Developer Brief
ClipBoard
클립보드 히스토리 매니저
Electron + React + better-sqlite3 로 만든 클립보드 히스토리 데스크탑 앱입니다. 메인 프로세스가 클립보드를 폴링해 로컬 SQLite에 영구 저장하고, 전역 단축키로 토글하는 frameless 오버레이 창에서 지난 항목을 검색·고정·재복사합니다. macOS·Windows를 지원합니다.
기술 스택
Electron 30React 18TypeScriptTailwind CSS 3better-sqlite3electron-storeVite 5electron-builder
아키텍처
메인 프로세스 · preload · 렌더러 세 계층으로 분리하고, 렌더러는 오직 preload가 contextBridge로 노출한 window.clipboardAPI를 통해서만 메인과 통신합니다. 네이티브 모듈(better-sqlite3)과 클립보드 접근은 메인 프로세스에만 두어 렌더러를 격리했습니다.
Main Process
- clipboard.ts가 500ms 간격으로 시스템 클립보드를 폴링해 변경분만 저장(직전 항목과 중복이면 건너뜀), 이미지 채널을 먼저 확인해 text·link·image로 분류
- better-sqlite3로 userData/clipboard.db에 영구 저장, created_at 인덱스와 pinned 컬럼 마이그레이션 관리
- globalShortcut으로 오버레이 창을 토글하고 electron-store에 단축키·테마·보관 정책을 저장, 트레이 메뉴와 로그인 시 자동 실행 제공
Renderer & IPC
- React 18 + TailwindCSS로 오버레이 UI 구성, 설정 창은 별도 HTML 없이 #settings 해시로 같은 번들을 분기 렌더링
- 렌더러 → 메인은 window.clipboardAPI.xxx() → ipcRenderer.invoke → ipcMain.handle, 메인 → 렌더러는 webContents.send를 preload 구독(onNewItem·onCleared·onToast·onThemeChanged)으로 수신
- 보관 기간(일)·최대 개수 초과 시 오래된 항목부터 자동 정리하되 고정 항목은 제외
Security & Build
- contextIsolation: true, nodeIntegration: false로 렌더러를 격리하고 네이티브 모듈은 메인 프로세스에서만 사용
- 메인·preload는 CommonJS로 빌드해 require('electron')의 named export가 동작하도록 유지(ESM 빌드 시 named import가 깨짐)
- vite-plugin-electron으로 번들, electron-builder로 Windows NSIS·macOS DMG 배포
문제 · 해결
문제
설정에서 전역 단축키를 새로 녹화할 때, 사용자가 누른 조합이 globalShortcut에 걸려 오버레이 창만 뜨고 정작 입력이 렌더러까지 도달하지 못함
해결
녹화 중에는 settings:setRecording으로 전역 단축키를 잠시 해제해, 입력한 키 조합이 오버레이를 띄우지 않고 렌더러 입력으로 그대로 도달하도록 처리
향후 계획
아직 개발하지 않았지만, 현재 한계를 인지하고 다음 단계로 고려하는 항목입니다.
예정
500ms 폴링 → OS 클립보드 변경 이벤트로 전환
현재는 500ms 주기 폴링으로 클립보드 변경을 감지해 구현이 단순하지만, 최대 0.5초의 반영 지연과 상시 폴링에 따른 불필요한 CPU·전력 소모가 있음. OS가 제공하는 네이티브 클립보드 변경 이벤트를 구독하는 방식으로 바꿔 지연을 없애고 유휴 시 자원 사용을 줄일 여지가 있음
스크린샷
