5분만에 웹사이트로 윈도우 프로그램(웹앱) 만드는 법 (ELECTRON, NODE.JS)

서론

안녕하세요. 오늘은 이런 주제를 갖고왔습니다.

바로 5분만에 웹사이트로 윈도우 프로그램을 만드는 프로젝트죠

 

이게 가능한 이유는 오픈소스인 ELECTRON 이라는 NODEJS 기반 프로젝트로 가능했습니다

이 프로젝트를 한 마디로 설명하자면 

 

웹사이트에 접속할 수 있는 윈도우 크롬창 만들기 혹은 HTML파일로 앱 만들

와 동일합니다

 

그렇지만 차이점은 EXE를 이용한 [ 배포 ] 설치가 가능하다는 점,

잘 이용하면 JS를 사용해 유저와의 입출력을 처리할 수 있다는 점,

웹사이트만 잘 만들었으면 앱을 따로 개발하지 않아도 된다는 점이죠 + HTML / JS /CSS로 작성 가능

물론 용량이 커진다는 문제가 하나 있긴 하지만, 단순하게 웹사이트만 만들어서 앱을 손쉽게 설계할 수 있다는 매리트가 주어진다는 점입니다.

 

https://www.electronjs.org/

Build cross-platform desktop apps with JavaScript, HTML, and CSS | Electron

https://www.electronjs.org/apps

Electron

 

일렉트론의 강점 중에 또 다른 점은 바로 크로스 플랫폼으로 맥, 윈도우에 상관 없이 동작한다는 점이며

방대한 오픈소스 플랫폼에서 수정되고 삭제되며 정말 큰 프로젝트가 되었다는 점입니다

 

 

보시다시피 위 스샷처럼 정말 많은 앱들이 일렉트론으로 개발되었습니다 ( 물론  VSC도 포함이구요 )

 

종속성 설치 방법

이 프로젝트에는 크게 2가지의 옵션 아니 프로그램이 필요합니다.

 

1. NODE.JS 설치

2. ELECTRON NPM 설치

 

https://nodejs.org/en

Node.js — Run JavaScript Everywhere

 

NODE JS는 위 사이트에서 받아주면 됩니다 (UI가 조금 바뀌었네요)

 

ELECTRON 설치 & 프로그램 완성하기

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

 

1. 우선 위의 명령어를 차례대로 실행해 환경을 구성해줍니다

( 명칭은 달라도 OK )

 

{
  "name": "my-electron-app",
  "version": "1.0.0",
  "description": "Hello World!",
  "main": "main.js",
  "author": "[깃허브 닉네임]",
  "license": "MIT"
}

 

이런 식으로 package.json 파일에 데이터를 작성해줍니다

 

npm install --save-dev electron

 

그러면 이런 식으로 electron 파일을 설치해줍니다

 

{
  "scripts": {
    "start": "electron ."
  }
}

 

마지막으로 scripts에 electorn .이라는 명령어를 추가하고

터미널에서 npm start를 시작하면 개발 시작입니다

 

그런데 이 경우 main.js를 불러오게 되는데 기본 값에서는 index.html / style.css / main.js를 통해서 처리해야 합니다

이러면 5분이라는 시간에 맞지 않게 되죠

 

그래서 저희는 기존에 존재하는 웹사이트를 웹앱으로 패키징 할 겁니다.

+ Cloudflare Cache 기능 사용 시 속도 향상을 시킬 수 있음 + v8 엔진용 압축 등

 

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

const urls = [
    "https://웹사이트로 만들 도메인 입력"
]

const createWindow = () =>{
    win = new BrowserWindow({
        center: true,
        resizable: true,
        title: "프로그램 이름",
        icon: path.join(__dirname, 'assets/png/64x64.png'),
        webPreferences:{
            nodeIntegration: false,
            show: false
        },
        menu: null
    });
    win.maximize();
    // win.webContents.openDevTools();
    console.log(urls[0]);

    win.loadURL(urls[0]);
    win.once('ready-to-show',()=>{
        win.show()
    });
    win.setMenu(null);
    win.on('closed',()=>{
        win = null;
    });
}

app.on('ready', createWindow);

 

이 코드를 main.js에 붙여넣고 재실행을 하면 원하는 웹사이트가 보여질 겁니다

개발자 모드를 굳이 키고 싶으시면 주석처리된 

win.webContent .. ..를 주석 풀어주세요

 

그리고 electron build 툴을 사용해 빌드를 하고 배포하면 끝입니다 

보안 경고의 경우 다운로드 하는 사람이 충분히 많고, 오류를 제기하지 않아야 하기에 시간이 걸리며

 

앱 인증서의 경우 돈을 내고 인증을 받으면 해결됩니다 ( 인증서 없음 오류 )