[Electron] Vue.js 웹 애플리케이션? 데스크톱 애플리케이션이 되어라!

1. 브라우저 정책으로 사용자와 상호작용 없는 오디오 재생 불가 문제

브라우저 정책으로 사용자와 상호작용없는 오디오의 재생이 안 되는 문제가 있어서 고민하고 리서치하다가 일렉트론을 이용한 데스크톱 애플리케이션으로 실행하면 오디오 재생이 가능하다는 것을 알게 되었다. 그래서 배포된 Vue.js 애플리케이션을 데스크톱 애플리케이션으로 만들어 보았다.

 

2. 일렉트론 프로젝트 생성하여 오디오 재생 성공!

2.1. 일렉트론 프로젝트 생성

일렉트론 공식 페이지의 Quick Start를 참고하여 프로젝트를 생성하였다. 데스크톱 애플리케이션으로 만들고자하는 웹 애플리케이션과는 별도로 일렉트론 프로젝트를 생성한다.

// 별도의 일렉트론 프로젝트 폴더 생성 => 이동 => 설치 명령어 실행
npm i

 

2.2. 의존성 설치

프로젝트 생성 후 일렉트론, 일렉트론 빌더 의존성을 각각 설치한다.

// 일렉트론 의존성 설치
npm install --save-dev electron

// 일렉트론 빌더 의존성 설치
npm install electron-builder --save-dev

 

2.3. package.json에 속성 추가

프로젝트 실행을 위한 "start", 빌드를 위한 "build"  속성을 추가한다.

// package.json

{
  // (생략)
  "private": true, // 코드 비공개
  "main": "main.js",
  "scripts": {
    "start": "electron .", // 일렉트론 프로젝트 실행
    "build": "electron-builder" // 일렉트론 프로젝트 빌드
  },
  // (생략)
  "devDependencies": {
    "electron": "^26.2.2",
    "electron-builder": "^24.6.4"
  }
}

 

2.4. main.js 작성

웹 애플리케이션을 데스크톱 애플리케이션으로 만드는 핵심 로직은 main.js에 작성한다. 아래 코드는 Quick Start에서 제공하는 코드를 거의 그대로 쓴 것이다. 이 코드로 빌드하면 데스크톱용 설치 파일이 생성되고 브라우저 없이 애플리케이션이 실행된다. 그리고 오디오도 아무 문제 없이 재생된다.

// main.js // 일반적으로 main.js에서 시작한다.

const { app, BrowserWindow } = require("electron");
const path = require("node:path");

// 창 크기를 설정한다.
const createWindow = () => {
  const mainWindow = new BrowserWindow({
    width: 1920,
    height: 1080
  });

  // URL의 웹 애플리케이션을 데스크톱 애플리케이션으로 만든다.
  mainWindow.loadURL(
    "http://localhost:8080/"
  );
};

app.whenReady().then(() => {
  createWindow();

  app.on("activate", () => {
    if (BrowserWindow.getAllWindows().length === 0) createWindow();
  });
});

app.on("window-all-closed", () => {
  if (process.platform !== "darwin") app.quit();
});

 

참고 자료
https://www.electronjs.org/docs/latest/tutorial/quick-start