NWJS 노드웹킷(Node-Webkit.js) 알아보기

안녕하세요.

오늘은 Node-Webkit에 대해 알아보도록 하겠습니다.

먼저 NWJS 즉 Node-Webkit.js에 대해 간단히 설명을 드리겠습니다.

Node-Webkit.js 란? 노드웹킷JS는 기본으로 크로미움브라우저(Chromium) + Node.js를 합친 웹 어플리케이션(web application) 입니다. Node.js 기반으로 크롬 브라우저의 축소판인 크로미움을 띄우면서 별도의 어플리케이션 역할을 합니다. 그렇다면, 왜 웹 어플리케이션을 사용할까요? 모든 사용자는 서로다른 브라우저를 사용하고있습니다. 예를들어서 사용자1은 인터넷 익스플로러를 사용하고 저는 크롬 브라우저를 사용합니다. 그리고 어떤 웹개발자가 인터넷익스플로러와 크롬브라우저 사용자 기준으로 웹페이지를 만들었어요. 그런데 사용자2가 파이어폭스 브라우저로 접속하였는데 이것을 고려하지 않은 웹페이지는 깨져 보이지 않는 상황이 됩니다. 그렇다면, 개발자가 또 수정작업과 업데이트를 해야겠죠.  수정작업을 통해서 기존 잘되던 브라우저도 번거로워질수도 있을뿐만 아니라 귀찮습니다. 하지만, 웹어플리케이션으로 제작될경우 별도의 브라우저를 설치할 필요없이 바로 실행을 할 수 있게 됩니다. 웹어플리케이션 종류는 여러가지(electron 등)가 있습니다. 그중하나가 노드웹킷(NWJS) 입니다.

그렇다면, 간단한 실행방법 및 소개를 진행하겠습니다.

노드웹킷 (NWJS) ?

노드웹킷은 많이 사용되고있는 웹어플리케이션 입니다.

지원은 3가지 OS(운영체제)에서 지원되고 있습니다.

Windows, Linux, MAC OS 3가지 모두 지원되고 있습니다. 

(추가적으로 테스트해본결과 라즈베리파이OS인 라즈비언(Raspbian)에서도 실행파일의 변형으로 실행가능합니다.)

위에서 간단히 설명을 드렸다싶이, 노드웹킷은 나의 웹페이지 혹은 특정 웹페이지를 어플리케이션(실팽파일) , 나만의 브라우저로 만들어줍니다.

간혹가다 CSS나 스크립트들이 인식이 잘 되지 않는 경우가 있으나 빠른 업데이트와 빠른 피드백으로 Fix되고 있습니다.

자세한 사항은 아래 NWJS 대표 홈페이지와 문서를 통해 확인하실수 있습니다.

Node-webkit 공식 홈페이지 : https://nwjs.io/

Node-webkit 개발 문서 : http://docs.nwjs.io/en/latest/For%20Users/Getting%20Started/

Node-webkit Github :  https://github.com/nwjs/nw.js

Windows에서 노드 웹킷 간단 사용하기

윈도우10에서 노드웹킷(Node-webkit)에 대해 간단한 사용법을 알려드리고자 합니다.

디테일한 심화과정은 개발 문서에 자세히 기록되어있으며, 기능이 상당히 많기때문에 찾아서 진행하는 재미를 가지실 수 있을것입니다.

혹여나 도움이 필요하시다면 댓글을 달아주시면, 알고있는 선에서 답을 해드리도록 하겠습니다.

먼저 노드웹킷(NWJS) 공식홈페이지에서 SDK를 다운받습니다.

(노말버전과 차이점은 동일하게 빌드와 배포가 가능하지만, 노말에서는 기능이 빠졌습니다. 개발자모드등 용량도 당연히 더 적습니다.)

압축을 해제하시면 위의 파일들이 나타납니다.

해당파일 하나하나 설명을 드릴수는 없지만,

CSS 및 JS를 처리해주는 파일도 있고, 동영상, 플래시등 웹 환경에서 원활히 실행을 도와주는 파일들의 구성 그리고 배포를 도와주는 파일 구성 입니다.

배포할때 최대한 파일을 줄여보려고 하였으나, 배포하고나서는 거의 대부분이 필수파일 역할을 하였습니다.

{
  "name": "helloworld",
  "main": "http://google.com"
}

** 이제 가장 중요한 작업 입니다. **

메모장(Notepad) 혹은 에디트플러스(EditPlus)에서 JSON파일을 하나 만들어줍니다.

위 사진과 스크립트는 최소 실행의 기본 스크립트 이며 필수 요소 입니다.

제가 작성한 스크립트는 일단 이름은 helloworld' 이며 노드웹킷을 실행하면 구글을 띄우게 하였습니다.

(자신이 제작한 html 파일이나 웹 주소를 입력하셔도 가능합니다)

그리고 설치한 노드웹킷 폴더안에 package.json 으로 저장하여 넣어주세요.

package.json 기준으로 노드웹킷이 실행 됩니다.

그리고 nw.exe를 실행하게되면, 구글을 주소를 입력해논 스크립트가 동작을하여 구글페이지가 나오게 되었습니다.

(사이즈 및 전체화면 툴바없애기 스크롤 없애기등 기능은 노드웹킷 문서를 살펴보시고 package.json에 해당 기능 스크립트를 추가하시면 됩니다.)

이렇게 노드웹킷의 간단실행기는 끝 입니다.

윈도우를 제외한, 리눅스, 맥에서도 동일한 형태의 구동이 가능합니다.

하지만 저렇게 설정을하게되면 설정값이 노출이되며 부가 파일들이 주렁주렁 많기때문에 사용자들에게 배포하기에는 문제가 많습니다.

그렇기때문에 노드웹킷에서 배포를하게된다면 파일을 확 줄어주게 됩니다.

(완전이 싱글 EXE로 줄어들진 않습니다.)

Windows에서 노드 웹킷 배포 하기

1. 먼저 package.json파일을 zip파일으로 압축을 해줍니다.

2. 그뒤 package.zip을 app.nw 로 변경해줍니다. (확장자까지 변경 입니다.)

3. 윈도우 명령어 프롬프트(cmd)를 실행합니다.

명령어 프롬포트를 실행후

1. 노드웹킷을 설치한 폴더로 cd(change dir) 이동합니다. 

2. copy /b nw.exe+app.nw app.exe 를 입력합니다.

3. app.exe가 생성됩니다. (배포완료)

app.exe와 함께 최소한의 파일들만으로도 package.json없이 실행이 가능 합니다.

(하지만 최소한이라고 해도 꾀 많습니다.)

여기까지 노드웹킷의 간단한 사용법과 배포방법을 마치겠습니다.

배포후에도 부수적으로 필요파일이 많기때문에 다음에 단일파일(Single-exe)로 줄이는 툴 사용방법은 아래링크로 다음 포스팅에서 확인할수 있습니다.

단일 실행 파일 만들기 (Enigma Virtual Box) : https://web-inf.tistory.com/29

감사합니다.