Skip to main content

커스텀 윈도우 상호작용

커스텀 드래그 가능 영역 설정​

기본적으로 윈도우는 운영체제가 제공하는 타이틀 바를 통해 드래그할 수 있다. 기본 타이틀 바를 제거한 앱은 app-region CSS 속성을 사용해 윈도우를 드래그할 수 있는 영역을 직접 정의해야 한다. app-region: drag를 설정하면 특정 사각형 영역을 드래그 가능하게 표시할 수 있다.

드래그 가능한 영역은 모든 포인터 이벤트를 무시한다는 점에 유의해야 한다. 예를 들어, 드래그 가능한 영역과 겹치는 버튼 엘리먼트는 해당 영역에서 마우스 클릭이나 마우스 진입/이탈 이벤트를 발생시키지 않는다. app-region: no-drag를 설정하면 드래그 가능한 영역에서 특정 사각형 영역을 제외해 포인터 이벤트를 다시 활성화할 수 있다.

전체 윈도우를 드래그 가능하게 만들려면 body에 app-region: drag 스타일을 추가하면 된다:

styles.css
body {
  app-region: drag;
}

전체 윈도우를 드래그 가능하게 설정했다면, 버튼도 드래그 불가능하게 표시해야 한다. 그렇지 않으면 사용자가 버튼을 클릭할 수 없다:

styles.css
button {
  app-region: no-drag;
}

커스텀 타이틀 바만 드래그 가능하게 설정했다면, 타이틀 바 안의 모든 버튼도 드래그 불가능하게 설정해야 한다.

팁: 텍스트 선택 비활성화​

드래그 가능한 영역을 만들 때, 드래그 동작과 텍스트 선택이 충돌할 수 있다. 예를 들어, 타이틀 바를 드래그할 때 실수로 텍스트 내용을 선택할 수 있다. 이를 방지하려면 다음과 같이 드래그 가능한 영역 내에서 텍스트 선택을 비활성화해야 한다:

.titlebar {
  user-select: none;
  app-region: drag;
}

팁: 컨텍스트 메뉴 비활성화​

일부 플랫폼에서 드래그 가능한 영역은 비클라이언트 프레임으로 처리된다. 따라서 해당 영역을 마우스 오른쪽 버튼으로 클릭하면 시스템 메뉴가 나타날 수 있다. 모든 플랫폼에서 컨텍스트 메뉴가 올바르게 동작하도록 하려면 드래그 가능한 영역에 커스텀 컨텍스트 메뉴를 사용하지 않는 것이 좋다.

클릭 가능한 윈도우 만들기​

마우스 이벤트를 무시하는 클릭 가능한 윈도우를 만들려면 win.setIgnoreMouseEvents(ignore) API를 호출한다:

main.js
const { BrowserWindow } = require('electron')
const win = new BrowserWindow()
win.setIgnoreMouseEvents(true)

마우스 이벤트 전달하기 macOS Windows​

마우스 메시지를 무시하면 웹 콘텐츠가 마우스 움직임을 인식하지 못하게 된다. 이는 마우스 이동 이벤트가 발생하지 않음을 의미한다. Windows와 macOS에서는 선택적 매개변수를 사용해 마우스 이동 메시지를 웹 페이지로 전달할 수 있다. 이를 통해 mouseleave와 같은 이벤트가 발생하도록 할 수 있다.

main.js
const { BrowserWindow, ipcMain } = require('electron')
const path = require('node:path')

const win = new BrowserWindow({
  webPreferences: {
    preload: path.join(__dirname, 'preload.js')
  }
})

ipcMain.on('set-ignore-mouse-events', (event, ignore, options) => {
  const win = BrowserWindow.fromWebContents(event.sender)
  win.setIgnoreMouseEvents(ignore, options)
})
preload.js
window.addEventListener('DOMContentLoaded', () => {
  const el = document.getElementById('clickThroughElement')
  el.addEventListener('mouseenter', () => {
    ipcRenderer.send('set-ignore-mouse-events', true, { forward: true })
  })
  el.addEventListener('mouseleave', () => {
    ipcRenderer.send('set-ignore-mouse-events', false)
  })
})

이 코드는 #clickThroughElement 엘리먼트 위에 마우스가 있을 때 웹 페이지를 클릭할 수 없게 만들고, 그 외의 영역에서는 정상적으로 작동하도록 한다.