Skip to main content

Dock

Electron은 macOS Dock에서 앱 아이콘을 설정할 수 있는 API를 제공한다. macOS 전용 API를 사용해 커스텀 Dock 메뉴를 만들 수 있으며, Electron은 앱 Dock 아이콘을 최근 문서와 앱 진행 상태와 같은 크로스 플랫폼 기능의 진입점으로 활용한다.

커스텀 Dock은 사용자가 전체 앱 윈도우를 열지 않고도 빠르게 작업을 수행할 수 있는 단축키를 추가하는 데 주로 사용된다.

Terminal.app의 Dock 메뉴:

Dock Menu

커스텀 Dock 메뉴를 설정하려면 macOS에서만 사용 가능한 app.dock.setMenu API를 사용해야 한다.

docs/fiddles/features/macos-dock-menu (34.1.1)Open in Fiddle
const { app, BrowserWindow, Menu } = require('electron/main')

function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600
  })

  win.loadFile('index.html')
}

const dockMenu = Menu.buildFromTemplate([
  {
    label: 'New Window',
    click () { console.log('New Window') }
  }, {
    label: 'New Window with Settings',
    submenu: [
      { label: 'Basic' },
      { label: 'Pro' }
    ]
  },
  { label: 'New Command...' }
])

app.whenReady().then(() => {
  if (process.platform === 'darwin') {
    app.dock.setMenu(dockMenu)
  }
}).then(createWindow)

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow()
  }
})

Electron 애플리케이션을 실행한 후, 앱 아이콘을 우클릭하면 방금 정의한 커스텀 메뉴를 확인할 수 있다:

macOS dock menu