Electron을 활용해 빠르게 프로토타입을 구축

AI 비즈니스 컨설턴트로서, VS Code 환경에서 Electron을 활용해 빠르게 프로토타입을 구축하고 실제 설치 파일(.exe)까지 추출하는 실무 프로세스를 3단계로 정리해 드립니다.

---

1. 초기 환경 구축 (Setting Up)

가장 먼저 VS Code 터미널(Ctrl + `)을 열고 프로젝트 폴더에서 아래 명령어를 순서대로 입력하세요.

1. 프로젝트 초기화: package.json 파일을 생성합니다.Bashnpm init -y
2. Electron 설치: 개발 도구로 사용할 일렉트론을 설치합니다.Bashnpm 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라는 도구를 추천합니다.

1. 빌더 설치:Bashnpm install electron-builder --save-dev
2. 빌드 설정: package.json 파일 맨 아래에 다음 내용을 추가합니다.JSON"build": { "appId": "com.yourname.app", "win": { "target": "nsis", "icon": "icon.ico" } }
3. 최종 추출: 아래 명령어를 입력하면 dist라는 폴더가 생기며 그 안에 설치용 .exe 파일이 생성됩니다.Bashnpx electron-builder

---

💡 컨설턴트의 핵심 팁

• 실시간 반영: 개발 중에 코드를 고칠 때마다 앱을 껐다 켜기 귀찮다면 npm install electron-reloader --save-dev를 설치해 사용하세요. 코드를 저장하자마자 앱 화면이 바로 갱신됩니다.
• 아이콘 주의: .exe 파일에 들어갈 아이콘은 반드시 256×256 픽셀 이상의 .ico 파일이어야 에러가 나지 않습니다.