AI 비즈니스 컨설턴트로서, VS Code 환경에서 Electron을 활용해 빠르게 프로토타입을 구축하고 실제 설치 파일(.exe)까지 추출하는 실무 프로세스를 3단계로 정리해 드립니다.
1. 초기 환경 구축 (Setting Up)
가장 먼저 VS Code 터미널(Ctrl + `)을 열고 프로젝트 폴더에서 아래 명령어를 순서대로 입력하세요.
- 프로젝트 초기화:
package.json파일을 생성합니다.Bashnpm init -y - Electron 설치: 개발 도구로 사용할 일렉트론을 설치합니다.Bash
npm install electron --save-dev
2. 프로토타입 핵심 코드 작성
프로토타입 가동을 위해 최소 2개의 파일이 필요합니다.
① main.js (창을 띄우는 두뇌 역할)
프로젝트 루트 폴더에 새 파일을 만들고 아래 코드를 복사해 넣으세요.
JavaScript
const { app, BrowserWindow } = require('electron');
function createWindow() {
const win = new BrowserWindow({
width: 1200,
height: 800,
webPreferences: {
nodeIntegration: true
}
});
// 만들어둔 웹 페이지(index.html)를 불러옵니다.
win.loadFile('index.html');
}
app.whenReady().then(createWindow);
② package.json 수정 (실행 명령 설정)
scripts 부분을 찾아 아래처럼 수정합니다. 이제 npm start만 치면 앱이 실행됩니다.
JSON
"main": "main.js",
"scripts": {
"start": "electron ."
}
3. 설치 파일(.exe)로 변환하기
프로토타입이 완성되었다면, 이제 고객이나 사용자가 깔아서 쓸 수 있는 파일로 포장해야 합니다. Electron Builder라는 도구를 추천합니다.
- 빌더 설치:Bash
npm install electron-builder --save-dev - 빌드 설정:
package.json파일 맨 아래에 다음 내용을 추가합니다.JSON"build": { "appId": "com.yourname.app", "win": { "target": "nsis", "icon": "icon.ico" } } - 최종 추출: 아래 명령어를 입력하면
dist라는 폴더가 생기며 그 안에 설치용.exe파일이 생성됩니다.Bashnpx electron-builder
💡 컨설턴트의 핵심 팁
- 실시간 반영: 개발 중에 코드를 고칠 때마다 앱을 껐다 켜기 귀찮다면
npm install electron-reloader --save-dev를 설치해 사용하세요. 코드를 저장하자마자 앱 화면이 바로 갱신됩니다. - 아이콘 주의:
.exe파일에 들어갈 아이콘은 반드시 256×256 픽셀 이상의 .ico 파일이어야 에러가 나지 않습니다.