Electron 프레임 없는 윈도우 만들기

Node.js Electron 프레임 없는 윈도우 만들기

Discord는 Electron으로 개발 된 대표적인 앱이다.

개인적으로는 Electron을 사용할 때 좋은 본보기가 될 수 있는 앱이라고 생각한다.

근데 처음 Electron을 사용할 때는 Windows의 기본 프레임이 거슬린다.

해당 프레임을 제거하고, 드래그가 가능한 부분을 만들고 앱을 종료할 수 있는 버튼을 만드는 법을 적어보려고 한다.

우선 Electron에서 프레임을 제거할때는 BrowserWindow 객체를 생성할 때 frame 속성에 false를 주면 된다.

const {app, BrowserWindow} = require('electron')

const path = require('path')

function createWindow () {

win = new BrowserWindow({show: false, width: 800, height: 600, frame: false, resizable: false})

win.loadURL(path.join(__dirname, '/index.html'))

win.once('ready-to-show', () => {

win.show()

})

}

function quit() {

if (process.platform != 'darwin') {

app.quit()

}

}

app.on('ready', createWindow)

app.on('window-all-closed', quit)

우선 내가 개발하고 있는 앱의 소스다.

BrowserWindow 객체를 생성할 때 frame 속성에 false를 주는 건 위에서 설명한 것과 같이 프레임을 제거하는 부분이고,

show 속성에 false를 준 이유는 처음에는 보여주지 않고, 페이지의 로딩이 완료된 이후 윈도우를 보여주기 위해서이다.

show 속성에 false를 준 뒤, win.once 부분의 소스를 넣으면 페이지의 로딩이 완료되었을때 윈도우가 보이게 된다.

그 다음 resizable 속성은 윈도우의 사이즈를 사용자가 변경할 수 있게 하냐, 못하냐 지정하는 속성이다.

커스텀 프레임을 만들때는 드래그 속성과, 윈도우 닫는 법만 알아두면 쉽게 만들 수 있다.

-webkit-app-region: drag;

드래그가 가능하게 하고 싶은 곳에 CSS로 -webkit-app-region: drag; 속성을 주면 해당 부분을 통해 윈도우를 움직일 수 있다.

const remote = require('electron').remote

const currentWindow = remote.getCurrentWindow()

function window_close() {

currentWindow.close()

}

function window_minimize() {

currentWindow.minimize()

}

이 소스는 윈도우 닫기와 최소화 기능을 제공하는 자바스크립트다.

해당 소스를 HTML에서 가져온 뒤 닫기 버튼의 onclick 이벤트에 window_close() 를 주면 윈도우가 종료되는 걸 확인할 수 있다.