VS Code, Discord, Slack, Skype와 같은 데스크탑 툴들을 보면 뭔가 느낌이 비슷하다는 것을 느낄 것이다. 그리고 보통 윈도우, Mac, 리눅스와 같이 멀티플랫폼을 지원하고 있다. 이러한 데스크탑 어플리케이션은 어떻게 만들었을까? 정답은 바로 Electron으로 만들었다.
Electron은 HTML, JavaScript, CSS를 이용하여 웹기반으로 데스크탑 어플리케이션을 만들 수 있게 해준다. 이 과정을 실습해보면서 간단한 데스크탑 어플리케이션을 만들어보도록 하자.
Electron 이란
Framework
Electron은 JavaScript, HTML, CSS를 이용하여 데스크탑 어플리케이션을 만들기 위한 프레임워크이다.
독립적인 실행환경
Electrond은 Node.js와 Chromium을 바이너리에 포함시키기 때문에 독립적으로 데스크탑에서 실행이 가능하다.
Cross Platform
JavaScript 코드 기반의 하나의 소스코드로 Window, macOS, Linux 에서 모두 동작하는 cross-platfrom 앱을 만들수 있다.
Electron 개발 준비
기본적으로 웹개발과 Node.js에 대한 지식이 필요하다.
그리고 아래와 같은 툴이 먼저 준비되어 있어야 한다.
| Node.js / npm | Node.js 개발 환경 필요 Electron실행시에는 로컬시스템의 Node.js를 사용하지 않고, 앱자체에 Node.js 런타임이 번들링되므로, 최종사용자는 Node.js를 설치할 필요가 없다. |
| Code Editor | Visual Sutdio Code와 같은 에디터 프로그램 사용 |
| Command Line | Command-line interface (CLI) 터미널 필요 대부분의 Code Editor에서 제공됨 |
Electron 프로젝트 만들기
간단한 Electron 프로젝트를 만들어서 데스크탑에서 실행되는 실행파일까지 만들어보자.
가장 먼저 프로젝트 폴더 생성 후 프로젝트 폴더로 이동한다.
HelloElectron이라는 프로젝트 폴더를 만든다.
$ mkdir HelloElectron
$ cd HelloElectron
그리고 아래와 같이 npm 초기화를 하고 electron을 설치한다.
$ npm init
$ npm install --save-dev electron
그리고나서 main.js 파일을 만들고 package.json에서 main와 scripts 을 추가해준다.
main.js
console.log('Hello Electron')
package.json
{
"main": "main.js",
"scripts": {
"start": "electron ."
},
"devDependencies": {
"electron": "^25.0.0"
}
}
여기까지 만들었으면 이제 실행을 해보자.
$ npm run start실행을 시키면 터미널창에 Hello Electron이 출력이 되는걸 볼 수 있다.
현재 단계에서는 방금 실행한 Electron 앱이 실행되서 프로세스가 생성되지만 아직까지는 화면에 보여지는 윈도우가 없다.
화면에 보여지는 윈도우를 만들자
이제는 HTML 페이지를 하나 만들어서 윈도우가 보여지게 만들어보자. 화면에 보여질 index.html 파일을 만들고 main.js를 수정한다.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta
http-equiv="Content-Security-Policy"
content="default-src 'self'; script-src 'self'"
/>
<meta
http-equiv="X-Content-Security-Policy"
content="default-src 'self'; script-src 'self'"
/>
<title>Hello Electron</title>
</head>
<body>
<h1>Hello Electron</h1>
</body>
</html>
main.js
const { app, BrowserWindow } = require('electron')
const createWindow = () => {
const win = new BrowserWindow({
width: 800,
height: 600
})
win.loadFile('index.html')
}
app.whenReady().then(() => {
createWindow()
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow()
}
})
})
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
})
실행
그리고 다시 실행해보자.
$ npm run start
그러면 이제는 화면에 윈도우가 하나 보여진다. 생성된 윈도우에서는 아까 만들었던 index.html 파일의 html 문서가 렌더링되는 걸 볼 수 있다.
자 이제 우리는 Electron을 이용해서 데스크탑에서 실행되는 어플리케이션을 하나 만들었다. 이제는 HTML, JavaScript, CSS를 이용하여 화면에 보여질 페이지를 만들면 되는 것이다. 윈도우, 리눅스, 맥OS에서 돌아가는 데스크탑 어플리케이션을 이렇게 웹페이지를 만들듯이 아주 편하게 만들 수 있다.
어플리케이션 패키징
이제는 지금까지 만든 코드를 패키징해서 다른 응용프로그램처럼 실행파일을 클릭하면 실행이 되도록 독립적인 프로그램을 만들어보자.
프로그램을 다른사람이 사용할때 Node.js를 설치하고 npm run start로 실행이 되게 해서는 안될 것이다.
Electron Forge를 이용해서 distributable을 생성할 것이다.
Distributable 이란 윈도우에서는 Installer 또는 macOS에서는 Portable 실행 파일을 말한다.
Electron Forge 설치
가장 먼저 아래의 명령어를 실행하여 Electron Forge를 설치한다.
$ npm install --save-dev @electron-forge/cli
$ npx electron-forge import
그러면 package.json 파일의 내용이 자동으로 아래와 같이 추가가 된다.
{
"scripts": {
"start": "electron-forge start",
"package": "electron-forge package",
"make": "electron-forge make"
}
}
그리고 forge.config.js 파일이 자동으로 생성이 된다.
module.exports = {
packagerConfig: {},
rebuildConfig: {},
makers: [
{
name: '@electron-forge/maker-squirrel',
config: {},
},
{
name: '@electron-forge/maker-zip',
platforms: ['darwin'],
},
{
name: '@electron-forge/maker-deb',
config: {},
},
{
name: '@electron-forge/maker-rpm',
config: {},
},
],
};
여기까지 확인을 했으면 이제 마지막으로 패키징 명령만 내리면 된다.
패키지 생성
아래 명령어를 실행하자.
$ npm run make그러면 아래와 같이 진행사항이 출력되면서 패키징이 진행된다.
패키징 파일 위치
패키징된 결과는 out 폴더에 위치한다. 프로젝트 폴더를 보면 out 이라는 이름으로 폴더가 생성된걸 볼 수 있다.
out 폴더 아래에 2개의 폴더가 생성되었다.
- helloelectron-darwin-x64
- make
이중에 make 폴더에 distributable이 생성된다. 즉 배포가능한 실행파일이 만들어졌다. 개발하는 플랫폼 환경에 따라 결과물이 달라질 수는 있는데, macOS에서는 아래처럼 zip 파일이 생성된다. zip 파일 압축을 풀면 macOS에서 실행가능한 .app 파일이 나온다.
실행
helloelectron.app 파일을 클릭해서 실행하면 우리가 만든 어플리케이션이 데스크탑에서 실행되는 것을 볼 수 있다.
마무리하며
Electron을 이용하여 아주 간단한 프로젝트를 만들어서 실행파일까지 생성하는 것을 해보았다. 이제 남은 것은 Electron에 있는 API를 활용하여 다양한 기능을 만드는 것과 React나 Vue와 같은 프론트엔드 라이브러리를 통합시켜서 개발하는 것이다. 이런 것들을 이용해서 VSCode와 같은 멋진 툴들을 만들어보자.
'개발' 카테고리의 다른 글
| Vue Multiple Layout (다중 레이아웃) 적용하기 (2) | 2023.06.07 |
|---|---|
| [Vue + Vite] 근데 Vite는 뭔가요? (2) | 2023.06.06 |
| Vue.js 강좌 2. 템플릿 문법 (2) | 2023.05.06 |
| Nuxt SSR 상황에서 axios 요청에 쿠키 넘기기 (1) | 2023.04.27 |
| Javascript 터치 이벤트 Offset 구하기 (2) | 2023.04.23 |
댓글