클립보드 — 텍스트, 이미지, 파일 복사와 붙여넣기

"클립보드는 앱과 OS 사이의 데이터 교환 채널" — 텍스트뿐 아니라 이미지, HTML, 파일 경로까지 다룰 수 있습니다.

텍스트 클립보드

JAVASCRIPT

const { clipboard } = require('electron');

// 텍스트 복사
clipboard.writeText('복사할 텍스트');

// 텍스트 읽기
const text = clipboard.readText();
console.log('클립보드 내용:', text);

// 클립보드 비우기
clipboard.clear();

HTML 클립보드

JAVASCRIPT

// HTML 복사 (서식 유지)
clipboard.writeHTML('<b>굵은 글씨</b>와 <i>기울임</i>');

// HTML 읽기
const html = clipboard.readHTML();

// 텍스트와 HTML 동시에 쓰기
clipboard.write({
  text: '굵은 글씨와 기울임',  // 일반 텍스트 폴백
  html: '<b>굵은 글씨</b>와 <i>기울임</i>',
});

이미지 클립보드

JAVASCRIPT

const { clipboard, nativeImage } = require('electron');

// 이미지 복사
const image = nativeImage.createFromPath('screenshot.png');
clipboard.writeImage(image);

// 이미지 읽기
const clipImage = clipboard.readImage();
if (!clipImage.isEmpty()) {
  const buffer = clipImage.toPNG();
  fs.writeFileSync('pasted-image.png', buffer);
}

IPC를 통한 안전한 클립보드 접근

JAVASCRIPT

// main.js
ipcMain.handle('clipboard:read', () => {
  return {
    text: clipboard.readText(),
    html: clipboard.readHTML(),
    hasImage: !clipboard.readImage().isEmpty(),
  };
});

ipcMain.handle('clipboard:writeText', (_event, text) => {
  clipboard.writeText(text);
});

ipcMain.handle('clipboard:readImage', () => {
  const image = clipboard.readImage();
  if (image.isEmpty()) return null;
  return image.toPNG().toString('base64');
});

// preload.js
contextBridge.exposeInMainWorld('electronAPI', {
  clipboardRead: () => ipcRenderer.invoke('clipboard:read'),
  clipboardWrite: (text) => ipcRenderer.invoke('clipboard:writeText', text),
  clipboardReadImage: () => ipcRenderer.invoke('clipboard:readImage'),
});

클립보드 감시

JAVASCRIPT

// 주기적으로 클립보드 변경 감지
class ClipboardWatcher {
  constructor(interval = 1000) {
    this.lastText = '';
    this.interval = interval;
    this.timer = null;
    this.callbacks = [];
  }

  start() {
    this.lastText = clipboard.readText();
    this.timer = setInterval(() => {
      const current = clipboard.readText();
      if (current !== this.lastText) {
        this.lastText = current;
        this.callbacks.forEach(cb => cb(current));
      }
    }, this.interval);
  }

  stop() {
    if (this.timer) {
      clearInterval(this.timer);
      this.timer = null;
    }
  }

  onChange(callback) {
    this.callbacks.push(callback);
  }
}

면접 포인트 정리

clipboard 모듈은 메인/렌더러 양쪽에서 사용 가능하지만 보안상 메인에서 IPC 경유 권장
텍스트, HTML, 이미지를 모두 다룰 수 있음
clipboard.write()로 여러 형식을 동시에 쓸 수 있음 (폴백용)
클립보드 감시는 네이티브 이벤트가 없어 폴링 방식 사용

클립보드를 다뤘으면, 다음은 화면 캡처를 알아봅시다.