✔️ 1. 개발환경 준비
먼저 Electron을 사용하기 위해 필요한 개발환경을 준비합니다.
이번 글에서는 다음 환경을 기준으로 진행합니다.
| 구분 | 내용 |
| OS | Windows |
| 개발 도구 | Visual Studio Code |
| 런타임 | Node.js |
| 패키지 관리 | npm |
| 프레임워크 | Electron |
💡 참고
Node.js를 설치하면 npm(Node Package Manager)도 함께 설치됩니다. npm을 이용하여 Electron과 같은 필요한 패키지를 설치하고 관리할 수 있습니다.
✔️ 2. Node.js 설치하기
Electron은 Node.js를 기반으로 동작하기 때문에 먼저 Node.js를 설치합니다.
1️⃣ Node.js 다운로드
Node.js 공식 홈페이지에서 설치 파일을 다운로드합니다.
여기서 LTS(Long Term Support) 버전을 선택하는 것을 추천합니다.
2️⃣ Node.js 설치
다운로드한 설치 파일을 실행하고 기본 설정으로 설치를 진행합니다.
설치가 완료되었다면 정상적으로 설치되었는지 확인합니다.
VS Code의 터미널 또는 명령 프롬프트에서 다음 명령어를 입력합니다.
node -v
정상적으로 설치되었다면 현재 설치된 Node.js 버전이 출력됩니다.
vXX.XX.X
그리고 npm도 확인:
npm -v
버전이 정상적으로 출력된다면 Node.js와 npm 설치가 완료된 것입니다.
✔️ 3. Electron 프로젝트 만들기
Node.js 설치가 완료되었다면 Electron 프로젝트를 생성합니다.
먼저 Electron 프로젝트를 저장할 폴더를 만들고 해당 폴더를 VS Code로 열어줍니다.
그다음 VS Code 터미널에서 다음 명령어를 실행합니다.
npm init명령어를 실행하면 프로젝트 이름, 버전, 설명, 시작 파일 등의 정보를 입력할 수 있습니다.
처음에는 기본값으로 진행해도 되므로 대부분의 항목은 Enter를 눌러 기본값으로 넘어가면 됩니다.
💡 참고
`npm init`에서 표시되는 설정 입력 과정을 생략하고 기본값으로 바로 프로젝트를 생성하려면 다음 명령어를 사용할 수 있습니다.
npm init -y
설정이 완료되면 프로젝트 폴더에 package.json 파일이 생성됩니다.
✔️ 4. Electron 설치하기
이제 생성한 Node.js 프로젝트에 Electron을 설치합니다.
npm install --save-dev electron설치가 완료되면 node_modules 폴더와 함께 package-lock.json 파일이 생성됩니다.
그리고 package.json의 devDependencies에 Electron이 추가된 것을 확인할 수 있습니다.
"devDependencies": {
"electron": "^XX.XX.X"
}
💡 참고
--save-dev 옵션은 개발 과정에서 필요한 패키지를 개발 의존성으로 설치하기 위해 사용합니다.
✔️ 5. Electron 설치 확인하기
마지막으로 Electron이 정상적으로 설치되었는지 확인합니다.
npx electron --versionElectron 버전이 정상적으로 출력된다면 설치가 완료된 것입니다.
✔️ 6. Electron 실행 준비하기
"npm install --save-dev electron"까지 완료했다면, Electron을 실행하기 위한 기본 파일을 만들어야 합니다.
먼저 프로젝트 폴더에 main.js 파일과 index.html 파일을 생성합니다.
프로젝트 구조는 다음과 같습니다.
electron-app
├─ node_modules
├─ .gitignore
├─ index.html
├─ main.js
├─ package-lock.json
├─ package.json
└─ README.md
🔹 main.js
먼저 main.js에 Electron을 실행하기 위한 기본 코드를 작성합니다.
main.js는 Electron 애플리케이션의 시작점 역할을 하는 파일입니다.
const { app, BrowserWindow } = require('electron');
const createWindow = () => {
const win = new BrowserWindow({
width: 800,
height: 600
});
win.loadFile('index.html');
};
app.whenReady().then(() => {
createWindow();
});이 코드는 Electron 애플리케이션이 실행할 때 800 × 600 크기의 창을 생성하고 index.html을 화면에 표시하도록 합니다.
main.js에서는 Electron 애플리케이션을 실행하고, 브라우저 창을 생성한 후 index.html을 화면에 표시하도록 설정합니다.
🔹 index.html
다음으로 Electron 창에 표시할 간단한 HTML 화면을 작성합니다.
index.html은 Electron 창에 표시할 기본 화면을 구성하는 HTML 파일입니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Electron App</title>
</head>
<body>
<h1>Hello Electron!</h1>
</body>
</html>여기까지 작성하면 Electron을 실행하기 위한 기본 파일 구성이 완료됩니다.
다만 Electron이 main.js를 시작 파일로 인식할 수 있도록 package.json도 수정해야 합니다.
package.json에서 다음 부분을 찾습니다.
"main": "index.js"이를 다음과 같이 변경합니다.
"main": "main.js"이렇게 설정하면 Electron이 main.js를 애플리케이션의 시작 파일로 사용하게 됩니다.
✔️ 7. Electron 실행
이제 Electron을 실행하기 위한 명령어를 package.json에 추가합니다.
"package.json"의 scripts 부분을 다음과 같이 수정합니다.
"scripts": {
"start": "electron ."
}
💡 참고
electron .에서 .은 현재 프로젝트 폴더를 의미합니다.
설정이 완료되었다면 VS Code 터미널에서 다음 명령어를 실행합니다.
npm start정상적으로 실행되면 다음과 같은 Electron 창이 나타납니다.
Electron 창에 Hello Electron!이 표시된다면 Electron 개발환경 구성이 정상적으로 완료된 것입니다.
'개발공부기록 > Electron 데스크톱 앱 개발' 카테고리의 다른 글
| [Electron 데스크톱 앱 개발] #6: Electron 앱 설치 오류 원인 확인하기 (0) | 2026.09.16 |
|---|---|
| [Electron 데스크톱 앱 개발] #5: Electron 앱 패키징하기 (Windows 실행 파일 만들기) (0) | 2026.09.16 |
| [Electron 데스크톱 앱 개발] #4: UI 디자인 개선하기 (랜덤 룰렛) (0) | 2026.09.15 |
| [Electron 데스크톱 앱 개발] #3: 첫 번째 Electron 앱 만들기 (랜덤 룰렛) (0) | 2026.09.15 |
| [Electron 데스크톱 앱 개발] #1: Electron 입문, 데스크톱 앱 개발을 시작해보자 (0) | 2026.09.11 |