NW.js를 통한 웹 언어로 데스크톱용 어플리케이션 생성

요샌 웹언어(HTML+ JavaScript ...)를 활용해서 다양한 어플리케이션을 만들곤하죠~ 

물론 정말 고성능이 필요하거나 등등 여러가지 상황을 보았을 때에는...

C언어나 Java.. Python 같은 것을 가지고 어플리케이션 만드는 것을 많이 하게되는데

이번 포스팅에서는 웹을 주로 하고 계시는 분들이 간혹 데스크톱 용 어플리케이션을 간단하게 

만들기 위한 소프트웨어(?)에 대해서 소개하고자 합니다.

당연히 그렇겠지만 NodeJS 기반으로 되어 있는 것이고... 

NodeJS 안에 nwjs 라는 놈입니다.

소개를 보시려면 아래 사이트로 가시면될 것 같구요 :)

https://nwjs.io/

자 그럼 어떻게!? 웹 언어만을 가지고 데스크톱용 어플리케이션을 만드는지 한번 보시죠~ 

순서를 보면 간단합니다.

1. NodeJS 설치 한다.

2. nwjs 와 nw를 설치한다.

3. 데스크톱 용으로 만들 웹 페이지를 만든다.

4. root 디렉토리에 package.json을 만든다.

5. cmd 명령어로 빌드를 한다.!

총 5개의 구성으로 되어 있죠~?

자.. 그럼 가 봅시다~

1. NodeJS 설치한다.

   당연히, 사이트 들어가서 안정화된 버전을 다운로드 받아서 설치합니다 

     https://nodejs.org/ko/

   (리눅스 계열일 경우에는 당연히 apt 또는 yum 으로 간단히 설치하면될꺼같네요)

    데비안 계열 설치 방법 링크 : https://github.com/nodesource/distributions/blob/master/README.md

    그 외 다른 계열 설치 방법 링크 : https://nodejs.org/ko/download/package-manager/#debian-and-ubuntu-based-linux-distributions-enterprise-linux-fedora-and-snap-packages

   

2. nwjs와 nw를 설치한다.

   NodeJS를 설치하면 cmd (Windows), Terminal (Linux 계열) 에서 npm명령어를 사용할 수 있겠죠~?

   그렇다면 명령어를 통해 nw와 nwjs를 설치합니다.

   전반적으로 어디서든 명령어를 사용할 수 있게 글로벌 옵션을 주고 설치하는 걸 권장힙니다

$ sudo npm install nw -g $ sudo npm install nwjs -g $ sudo npm install -g nw-builder 윈도우인 경우 > npm install nw -g > npm install nwjs -g > npm install -g nw-builder

이러면 이제 웹 페이지를 어플리케이션으로 빌드할 환경은 모두 구성됩니다.

이 때 nw-builder 를 추가하는 이유로는... 좀 더 쉽게 빌드를하기 위한 방법이 있기 때문입니다. 

(이걸 추가하지 않으면 수동으로 어플리케이션을 빌드해야되더라구요)

자 그럼 이제 웹 페이지를 만들어보겠습니다.

3. 데스크톱 용으로 만들 웹 페이지를 만든다. 

   정말 간단한 것을 만들 생각이시면 index.html 이거 하나만 있으면 될 것 같구요

   만약 jquery나 등등 여러 라이브러리들을 사용한다면 lib 폴더를 만들고 이미지가 추가된다 하면 img 폴더를 만들고

   정말 그냥 웹 페이지 만드는 구성대로 만듭니다.

   전 테스트를 위해 아래 보여지는 구성으로 만들었습니다. 

   어떠한 간단한 알고리즘에 의해서 숫자를 입력하면 해당 숫자를 일정한 배열로 출력하게 해주는 페이지입니다. 

   

보시는 것 처럼 그냥 웹페이지에서 구동되는 웹 페이지입니다. 

자 그럼 이어서 바로 package.json에 대해 설명하겠습니다.

4. root 디렉토리에 package.json을 만든다.

   아래 그림 처럼 lib 폴더와 index.html 폴더 외 package.json 파일이 추가되었습니다.

   해당 파일에는 빌드하기 위한 정보가 들어 있습니다.

   전 최소한의 필요한 정보만 작성하였고, 여기에 작성할 수 있는 내용을 좀 더 자세히 보기 위해서는 아래 링크를 확인해주세요

   (https://github.com/nwjs/nw.js/wiki/manifest-format)

5. cmd 명령어로 빌드한다. 

   앞서 nw-builder를 설치했기 때문에, package.json이 있는 디렉토리로 가서 아래 명령어를 하면 원하는 환경에 빌드가 가능합니다

$nwbuild -p "osx32,osx64,win32,win64,linux32,linux64" ./  >nwbuild -p "osx32,osx64,win32,win64,linux32,linux64" ./

이 때 -p 뒤에 나오는 것들은 원하는 것들만 작성하면됩니다 (굳이 모든 환경이 필요없다면 하실 필요 없는거예요)

저 같은 경우에는 Win 64 만 필요했기 때문에 아래와 같이 작성했어요

>nwbuild -p "win64" ./

이렇게 하면 build 라는 폴더가 생성되고 그 안에 exe 파일이 생성되면서 실행할 수 있도록 만들어 집니다.

이렇게 자동으로 만드는 것이 조금 단점(?)이라고 생각이 되는 것 중에 하나가

용량이 무지하게 큽니다...

원래 간단한 프로그램이면 뭐 정말 웹킷만 있으면되서 별도 모듈이 필요하지 않지만...

자동 빌드를 사용하면 nw.js 모듈이 모두 기본적으로 추가되기 때문에 용량이 엄청 커지더라구요 ㅠㅠ

그래도 간혹 이렇게 웹 언어만을 가지고 응용프로그램 만들어서 배포하는 경우가 필요한 경우

엄청 유용하게 사용할 수 있는거 같습니다 :)