웹으로 PC프로그램 만들 수 있다!!? (Electron + Vuejs)

javascript의 유연함때문인지 많은 플랫폼을 javascript언어를 기준으로 개발하려는 시도들이 많이 있었고, 지금도 많은 시도들이 있는 것으로 보입니다. 그 중에서 흥미있는 것 중 하나인 Electron, 그리고 웹에서 이제 막 유명해지려고 하는 vue.js의 대해서 간략하게 정리해보려 합니다.

Electron (일렉트론)

기존 PC프로그램을 만드려면 C/C++(MFC , QT), C# 혹은 Java등의 언어들로 개발해야한다고 떠올리실 것 같습니다. 하지만 이러한 언어를 주로 다루는 개발자들보다는 웹개발자들이 비율적으로 훨씬 많은 것으로 알고 있습니다. 실제로 회사를 다니고 일을 하다보면 웹도 필요하면서 동시에 PC프로그램을 만들어야 하는 수요들이 심심치 않게 있다는 것을 피부로 느끼게 됩니다. 이러한 문제 때문인지 이를 해결하려는 움직임들이 곳곳에서 보이기 시작했습니다. 일렉트론 이전에 nw.js 라는 것이 나와서 한참 유명해지려고 하다가 지금은 일렉트론으로 atom, visual studio code, slack 들을 만들었다는 광고(?)들과 함께 어느정도 자리를 잡았습니다. 일렉트론의 뿌리는 nw.js라고 얼핏듣기는 했으나, 정확한 자료조사를 해보지 않은 관계로 자세한 설명은 나중에 따로 진행해보도록 하겠습니다 : )

일렉트론은 JavaScript언어로 개발가능해놓은 프레임워크이며, 일렉트론 코어에서 JavaScript 언어로 네이티브 Win/Mac/Linux API를 요청할 수 있도록 개발되어 있습니다. UI의 경우는 웹개발자들이 쉽게 개발할 수 있도록 HTML/CSS/JavaScript를 기본적으로 사용하도록 합니다. 이는 하나의 Chromium 브라우저로 생각하시면 편할 것 같습니다.
UI는 HTML/CSS로 제작하며, 각 기능들은 브라우저 JavaScript로, OS 컨트롤은 일렉트론에서 네이티브기능을 랩핑해준(감싸준) 일렉트론 API를 통해 쉽게 진행할 수 있는 정말 유용한 프레임워크 입니다.

Vuejs (뷰)

요즘은 웹페이지라고 부르기보다는 웹 애플리케이션이라고 부르는 경우가 많이 있습니다. 이는 웹조차도 복잡성이 높아지고 있고, 실시간 적인 요소와 동시에 많은 UI들을 변경해야하는 부분들이 많아지면서 변화하고 있는 것 같습니다.
기존 웹개발을 한다고 하면 JavaScript 어느정도와 jQuery정도 다룰수 있으면 가능했던 부분이 지금은 각 변수들을 항상 감시하고 있어야하며, 네트워크를 백그라운드로 수시로 요청하며 오프라인에서도 동작해야하며, 정기적으로 동기화작업도 하면서 메모리관리까지 해야하는 많은 것들을 고려하며 개발을 해야 합니다.
이러한 부분들을 고려하여 나온 프론트엔드 프레임워크들이 있으며, 흔히들 알고 있는 Angularjs, Reactjs와 지금 제가 설명하려고 하는 Vuejs가 있습니다.
프레임워크에서 정해준 라이프사이클에 따라 UI들이 생성되고 갱신되도록 설계된 틀 안에서 구현하려는 로직만 집중하여 개발할 수 있도록 도와주는 좋은 프레임워크입니다.
Vuejs로 쉽게 UI와 기능들을 만들고 Electron으로 PC프로그램까지 만들어주는 과정을 간단하게 튜토리얼로 진행하여 조금이나마 이해를 시켜드리려고 합니다.

Tutorial

Electron, Vuejs 를 사용하기 전에 node.js를 설치하면 쉽게 시작할 수 있습니다. ( 둘 다 NPM모듈을 사용하고 있기 때문에 node.js를 설치하도록 합니다.)

node.js 공식 홈페이지(한국어)

이번 튜토리얼에서 진행할 때, 실제 기능이 들어간 애플리케이션을 만들기 보다는 기본적으로 제공한 것이 어떻게 PC프로그램까지 만들어지는지 간략한 진행과정을 설명할 것입니다.
각각 자세한 설명 혹은 문서가 필요할 경우 공식홈페이지를 참고해주세요.

Vuejs 공식 홈페이지(한국어)

Electron 공식 홈페이지

Vuejs를 사용할 때, 원래는 이 것, 저 것 신경써야할 것들이 많이 있는데, vue-cli라는 것을 사용하면 이러한 부분들을 쉽게 해결해줍니다. (다만, 나중에 집중적으로 사용할 때에는 vue-cli가 어떤 역할을 하는지 하나하나 살펴보면 좋습니다.)

vue-cli를 먼저 전역으로 설치해줍니다.

$ npm install -g vue-cli

상황에 따라 권한을 요구할 수 있기 때문에 위 명령어로 설치가 안된다면 아래 명령어로 설치를 진행해주세요.

$ sudo npm install -g vue-cli

설치가 완료되면 적당한 위치로 가서 아래 명령어를 실행하여 Vuejs 프로젝트를 생성하도록 합니다.
(아래에서는 webpack-simple로 진행했지만, 실제 개발시에는 webpack으로 진행하는 것을 추천합니다.)

# 프로젝트를 생성합니다.
$ vue init webpack-simple vue-electron-project

# 생성된 프로젝트로 이동하여 npm모듈들을 설치합니다.
$ cd vue-electron-project && npm install

vue init 중에 나오는 질문들은 열심히 엔터를 쳐줍니다. (엔터를 치면 프로젝트가 기본으로 설정됩니다)
NPM 설치가 끝나고 npm run dev 명령어를 실행하면 뭔가 빌드를 진행하고 연결되어 있는 웹브라우저에 hello world 같은 페이지가 출력되는 것을 확인하실 수 있습니다.

이걸로 Vuejs 개발준비는 완료되었습니다.
여기에서는 Vuejs에 어떻게 개발하는 것보다는 Vuejs로 만들고 electron에 올리는 것을 중점적으로 설명하는 포스팅이기에 Vuejs관련코드들은 넘어가도록 하겠습니다.

Vuejs는 정상적으로 작동되는 것을 확인했으니, 일렉트론에서 동작할 수 있도록 Vuejs프로젝트를 배포파일로 생성하도록 합니다.

앗! 생성하기전에 이것만 간단하게 수정해주세요!
webpack.config.js 파일을 텍스트편집기로 열어서 아래처럼 수정해주세요.

output: {
  publicPath: './dist/'    // ‘/dist’로 되어 있던 것을 ‘./dist’로 수정합니다.
}

그리고 index.html도 수정합니다.

<script src="/dist/build.js"></script>
<!-- 위 코드를 아래 코드로 수정합니다. -->
<script src="./dist/build.js"></script>

일렉트론에서 경로불러올 때 살짝 다른 부분을 수정한 것인데, 지금 일렉트론에서 Vuejs프로젝트 화면을 보여주기 위해 임시적으로 변경한 것이고 실제 프로젝트 진행시에는 위와 다를 수 있으니 참고정도만 하시면 될 것 같습니다 : )

$ npm run build

빌드된 파일이 /dist 폴더에 생성되는데, 조금 있다가 일렉트론쪽에 넣을 예정이니 잠시 놔두도록 합니다.

이제 일렉트론 프로젝트를 생성할 시간입니다.
일렉트론도 위에서 vue를 설치했던 것처럼 기본적으로 프로젝트가 생성될 수 있도록 도와주는 툴이 있습니다. electron-forge라는 npm모듈입니다.

Electron Forge Github 저장소

electron-forge도 npm 모듈로 배포되어 있기 때문에 콘솔창에서 쉽게 설치할 수 있습니다. 이 모듈도 전역에서 사용되어야 하기 떄문에 아래와 같이 global 모드로 설치해줍니다.

$ npm install -g electron-forge

그리고 나서 역시 적절한 폴더에서 프로젝트를 생성합니다. (같은 프로젝트에서 진행해도 되지만 여기에서는 따로따로 진행하도록 하겠습니다)

$ electron-forge init electron-app-project
$ cd electron-app-project
$ npm install
$ electron-forge start

이렇게 순서대로 진행하면 기본적으로 구성된 일렉트론 PC 앱이 실행됩니다.

자, 그러면 아까전에 빌드했던 Vuejs 파일들을 가져오도록 합니다.
Vuejs 프로젝트로 만들었던 폴더에 있는 index.html과 /dist를 일렉트론 폴더에 있는 /src에 복사하도록 합니다.

위 사진처럼 index.html, /dist만 가져와서 /src에 넣기만 하면 됩니다.

그리고 electron-forge로 만들면 개발자도구가 항상 출력되어 뭔가 멋지지않은 느낌이 있는데, 개발자도구를 안나오도록 코드를 살짝 수정하도록 하겠습니다.

일렉트론 프로젝트에서 src/index.js파일을 텍스트편집기로 열도록 합니다. 그리고 아래처럼 해당 라인을 주석처리해줍니다. (아마 18라인정도에 있지 않을까 예상해봅니다)

// Open the DevTools.
// mainWindow.webContents.openDevTools();

그리고 다시 electron-forge start를 실행하면!?

짜잔! PC 프로그램으로 원하는 페이지를 출력했습니다.
꼭 Vuejs로 하지 않고 다른 프레임워크로 진행해도 되며, 아니면 일반 홈페이지 만들듯이 웹페이지로 구성할 수도 있습니다. PC알림을 띄운다거나 트레이모드로 변경 혹은 파일시스템접근할 때만 Electron API를 활용하여 요청만 하시면 됩니다.

음.. 그런데 이렇게 열심히 포스팅을 하고 인터넷을 검색해보니 electron-vue이라는 것이 있었습니다.
아직 사용은 안해봤지만 나름 정리도 잘 되어 있는 것 같고, 이 포스팅 읽어보시고 같이 참고해보시면 개발할 때 많은 도움이 되실 것 같습니다 : )

Electron Vue 메뉴얼

마치며

단순하게 보면 하나의 웹 브라우저라고도 말씀드릴 수 있을 것 같습니다. 하지만 거기에 추가적으로 OS를 직접 컨트롤 할 수 있는 JavaScript API를 제공하게 되면서 진짜 웹으로 PC개발을 할 수 있는 상황이 열린 것 같습니다.
제가 위에서 포스팅한 내용은 Vuejs와 Electron으로 어떻게 개발을 해야하는 것보다는 이러이러한 형식으로 PC프로그램이 나오게 됩니다를 간략하게 설명드리고, 간단하게 따라해보면서 실제 PC에서 실행되는 것을 보여드리고 싶었습니다.
개인적인 프로젝트에서는 Vuejs와 Electron을 활용하여 개발을 진행하고 있는데, 어느정도 잘 마무리가 된다면 각각 어떤식으로 개발해야하는지 다시 한 번 포스팅을 할 수 있는 기회가 있지 않을까라는 생각도 해봅니다.
글을 쓰다보니, 정말 너무 간단하게 주저리주저리 적은 것 같아 죄송스런 마음도 있지만, 위 부분에서 궁금한 내용이 있으실 경우 댓글 혹은 이메일로 보내주시면 친절히 답변드리도록 하겠습니다 : )
감사합니다.