Electron 개발 환경 구축 및 개발

수성컴전자방입니다. Electron이라는 프레임워크를 사용하면 HTML, CSS, JavaScript를 사용하여 웹 개발하듯이 PC용 응용 프로그램을 만들 수 있습니다. 오늘은 Electron 개발 환경을 구축하고 기초적인 개발 방법을 알아보겠습니다.

1. Electron 개발 환경 구축

1.1. Node.js가 필요합니다. Node.js가 설치되어 있지 않다면 먼저 설치합니다.
Windows PC에 Node.js 설치, npm 명령어

1.2. Electron 개발할 폴더에서 터미널을 열고 npm init -y 명령을 실행하여 초기화합니다. 그러면 package.json이 생성됩니다.

Electron 개발 설치
1.3. npm install --save-dev electron 명령을 실행합니다.

Electorn 개발 환경의 기본적인 폴더 구조는 아래와 같습니다.

📁node_modules
index.html: 앱 실행 첫 화면
main.js: 앱 구동과 관련된 JavaScript 코드
package-lock.json
package.json
기타 웹 개발에 사용한 파일들(css, js, 이미지 등)

2. package.json

package.json을 수정합니다.

{
  "name": "electron_practice",
  "version": "1.0.0",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "keywords": [],
  "author": "Sooseongcom",
  "license": "ISC",
  "description": "Electron Practice",
  "devDependencies": {
    "electron": "^33.2.1"
  }
}

[Line 4 main]
“main”: “main.js”로 수정합니다.

[Line 6 scripts]
scripts 중괄호 안에 “start”: “electron .”을 작성합니다.
이제 npm start 명령을 실행하면 electron . 명령이 실행됩니다.

나머지는 여러분 상황에 맞게 임의로 수정하시길 바랍니다.

3. main.js

main.js를 생성하고 아래와 같이 작성합니다.

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

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()
  }
})

[Line 3~10 createWindow 함수 정의]
앱 실행 시 창을 만드는 것에 대한 내용입니다.

[Line 5 width]
width: 800
창 가로 길이를 입력합니다.

[Line 6 height]
height: 600
창 세로 길이를 입력합니다.

[Line 9]
win.loadFile(‘index.html’)
앱을 실행하면 index.html을 띄웁니다.

[Line 12~13]
앱을 실행하면 createWindow 함수를 호출하여 창을 생성합니다.

[Line 15~19(macOS를 위한 코드)]
macOS는 창이 모두 닫혀도 앱이 종료되지 않습니다. 따라서 창이 1개도 없을 때 createWindow 함수를 호출하는 코드가 필요합니다.

[Line 21~25(Windows와 Linux를 위한 코드)]
창이 모두 닫히면 앱을 종료합니다.

4. 웹 소스코드 작성

이제 웹개발하듯이 소스코드를 작성합니다. 다만, 이때 첫 화면은 index.html로 합니다.
이 글에서는 https://github.com/sooseongcom/test.git 예제를 사용하겠습니다. 제 예제를 그대로 사용하시려면 깃을 클론하거나 소스코드들을 내려받아 프로젝트 폴더 안에 넣으시면 됩니다.

electron_practice
제 예제를 그대로 사용할 경우 프로젝트 폴더 안에 이러한 파일들이 있게 됩니다.

5. 디버깅(npm start)

이제 작성한 코드를 실제 앱으로 띄워 보겠습니다.

5.1. npm start 명령을 실행합니다.

서버에 오신 것을 환영합니다.
5.2. 웹 소스코드대로 앱이 구현되었습니다.

6. 개발자 도구 사용하기

웹 개발을 해 보신 분이라면, 개발자 도구를 찾게 되실 것입니다. 개발자 도구를 사용하려면 View→Toggle Developer Tools를 클릭하거나 단축키 Ctrl+Shift+I를 누릅니다.

오른쪽에 DevTools 생김
그러면 창 오른쪽에 개발자 도구가 나옵니다.

7. Electron Security Warning 해결(CSP 메타태그, 새로고침)

개발자 도구에서 Console 탭을 보면 Electron Security Warning (Insecure Content-Security-Policy) 경고가 뜨는 것을 보실 수 있습니다. 이것은 CSP 메타태그를 추가하여 해결할 수 있습니다.

index.html
7.1. 모든 HTML 코드의 head 태그 그룹에 아래 코드를 추가하시면 됩니다.

<!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
<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'"/>

이 메타태그를 추가하면 inline JavaScript가 작동하지 않으며 같은 출처에서만 리소스(ex. 스크립트)를 로드할 수 있게 됩니다.
참고) inline JavaScript는 XSS 취약점 문제가 있음.

7.2. 새로고침을 위해서 View→Force Reload를 클릭하거나 Ctrl+Shift+R을 누릅니다.

깨끗한 개발자 Console
7.3. 더 이상 개발자 도구 Console에 Electron Security Warning이 뜨지 않습니다.

8. 앱 아이콘 변경

앱의 아이콘을 바꾸어 보겠습니다.
8.1. 아이콘을 png 파일로 준비합니다. 저는 image 폴더를 만들고 그 안에 아이콘을 넣어 두겠습니다.

8.2. main.js를 수정합니다.(아래 코드블록의 2, 8행을 확인하세요!)

const { app, BrowserWindow } = require('electron/main')
const path = require('node:path')

const createWindow = () => {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    icon: path.join(__dirname, '/image/icon.png')
  })

  win.loadFile('index.html')
}

// 이후 생략(3번 문단 예제와 동일)

[Line 2 path]
const path = require(‘node:path’)
Node.js의 path 모듈을 불러옵니다.

[Line 8 icon]
icon: path.join(__dirname, ‘/image/icon.png’)
path.join method는 플랫폼(Windows/Linux/macOS)별로 구분자를 사용하여 경로를 정규화 해 줍니다. path.join의 2번째 인자에 아이콘 파일 경로를 넣습니다.

아이콘 변경됨
8.3. npm start로 실행해 보면 타이틀바와 작업 표시줄의 아이콘이 변경된 것을 보실 수 있습니다.

9. 글 마무리

원래는 빌드(실행파일 생성)까지 한 번에 다루면 좋겠지만, 빌드는 운영체제마다 다르므로 별도의 글로 다루겠습니다. 제 글을 읽어 주셔서 감사합니다. 다음에 만나요!

10. 참고 자료

1) Cyp. 2021. “일렉트론(Electron) 쉬운 사용법”, Cyp Software Blog. (2024. 12. 28. 방문). https://cypsw.tistory.com/entry/일렉트론Electron-쉬운-사용법
2) 백씨네. 2023. “230811 - Electron.js 기초”, BAEK’space. (2024. 12. 28. 방문). https://baekspace.tistory.com/231
3) OpenJS Foundation and Electron contributors. 2023. “Building your First App”, Electron. (2024. 12. 28. 방문). https://www.electronjs.org/docs/latest/tutorial/tutorial-first-app
4) 허나니. 2023. “『Client 02 』 [React] [Electron] React 사이드 메뉴, Electron Icon 변경하기”, 네트워크 전공이 개발자로 살아가는 이야기. (2024. 12. 28. 방문). https://na-nii.tistory.com/entry/05-React-Electron-React-사이드-메뉴-Electron-Icon-변경하기
5) 김요한. 2019. “NodeJS에서 Path 사용방법”, 김요한 개발 블로그. (2024. 12. 28. 방문). https://yohanpro.com/posts/js/node-path

필자(수성컴)의 노트북은 갤럭시 북 Flex2입니다.(Windows 11)

목차