[Electron] 007. Electron 애플리케이션 개발 단계, 간단한 애플리케이션 만들기

웹 기술을 사용하여 데스크톱 애플리케이션을 만드는 것은 많은 개발자들에게 매력적인 선택입니다. Electron은 JavaScript, HTML 및 CSS를 사용하여 크로스 플랫폼 데스크톱 애플리케이션을 개발할 수 있게 해주는 프레임워크입니다. 이 글에서는 Electron 애플리케이션 개발의 기본 단계와 간단한 애플리케이션을 만드는 방법을 소개하겠습니다.

Electron 소개

Electron은 GitHub에서 개발한 오픈 소스 프레임워크로, Node.js와 Chromium을 기반으로 합니다. 이를 통해 개발자는 웹 애플리케이션의 기초로 데스크톱 애플리케이션을 쉽게 만들 수 있습니다.

Electron의 주요 장점은 다음과 같습니다:

  • 크로스 플랫폼 지원: Windows, macOS, Linux에서 실행 가능.
  • 웹 기술 사용: HTML, CSS, JavaScript로 UI 개발.
  • 모듈과 패키지의 풍부한 생태계: Node.js와 NPM으로 쉽게 확장 가능.

Electron 애플리케이션 개발 단계

1. 개발 환경 설정

Electron 애플리케이션을 개발하기 위해서는 Node.js와 npm(Node Package Manager)이 필요합니다. 이 두 가지를 설치하는 것부터 시작하세요.

sudo apt install nodejs npm

Node.js와 npm이 설치되었으면, 프로젝트 디렉토리를 만들고 초기화해 보겠습니다.

mkdir my-electron-app
cd my-electron-app
npm init -y

위 명령어는 새로운 디렉토리 `my-electron-app`을 만들고, 기본 패키지.json 파일을 생성합니다.

2. Electron 설치

이제 Electron을 설치해 보겠습니다. 아래 명령어를 실행하여 Electron을 프로젝트에 추가합니다.

npm install electron --save-dev

이 명령어는 Electron을 개발 의존성으로 설치합니다.

3. 애플리케이션 구조 설정

Electron 애플리케이션의 기본 구조는 다음과 같습니다:

  • main.js: 메인 프로세스 파일 (애플리케이션의 백그라운드에서 실행).
  • index.html: 사용자 인터페이스를 위한 HTML 파일.
  • package.json: 애플리케이션의 메타데이터와 설정.

각 파일을 생성하고 다음의 내용을 추가해 보겠습니다.

touch main.js index.html

4. 메인 프로세스 설정

main.js 파일에 다음의 코드를 추가합니다.

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

let mainWindow;

function createWindow() {
    mainWindow = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            nodeIntegration: true,
        }
    });

    mainWindow.loadFile('index.html');

    mainWindow.on('closed', function () {
        mainWindow = null;
    });
}

app.on('ready', createWindow);

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

app.on('activate', function () {
    if (mainWindow === null) {
        createWindow();
    }
});

위 코드는 Electron 애플리케이션의 기본적인 메인 프로세스를 설정합니다. BrowserWindow를 생성하여 HTML 파일을 로드합니다.

5. HTML 파일 설정

이제 index.html 파일에 아래와 같은 내용을 추가해 보겠습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>간단한 Electron 애플리케이션</title>
</head>
<body>
    <h1>안녕하세요! Electron 애플리케이션입니다.</h1>
    <p>여기는 기본적인 Electron 애플리케이션 UI입니다.</p>
</body>
</html>

6. 애플리케이션 실행

모든 설정이 끝났다면, 이제 애플리케이션을 실행해 보겠습니다. 아래 명령어를 실행하세요.

npx electron .

이 명령어는 현재 디렉토리에서 Electron 애플리케이션을 실행합니다. 이제 간단한 Electron 애플리케이션이 화면에 나타날 것입니다.

결론

이와 같이 Electron을 이용하여 간단한 데스크톱 애플리케이션을 만드는 방법을 살펴보았습니다. Electron은 웹 개발 기술을 사용하여 크로스 플랫폼 애플리케이션을 쉽게 만들 수 있는 강력한 프레임워크입니다. 사용자 경험을 고려한 UI 디자인과 다양한 Node.js 모듈을 활용해 더욱 풍부한 기능을 가진 애플리케이션을 개발할 수 있습니다.

Electron을 통해 더 많은 프로젝트에 도전해 보시기 바랍니다.