HTML5 로 데스크탑 어플리케이션 만들기 2

HTML5 로 데스크탑 어플리케이션 만들기2

안녕하세요. CX 사업본부 MD 왓썹입니다.

지난 포스팅에서 HTML 데스크탑 어플리케이션에 대해 알아보았는데요. 

이번 포스팅에서는 node-webkit 을 이용하여 데스크탑 어플리케이션을 직접 만들어 보도록 하겠습니다.

 

1. 설치

NodeJS - https://nodejs.org

node-webkit 은 NodeJS 를 기반으로 하기 때문에 기본적으로 NodeJS 가 설치되어 있어야 합니다.

NodeJS 는 위에 링크된 공식 홈페이지에서 각자의 OS 에 맞는 인스톨러를 다운로드 하여 설치하실 수 있습니다.

NodeJS 설치가 완료 되었다면 node-webkit 을 설치하셔야 하는데요. 

OS (Window, Linux, Mac) 별로 설치법이 다소 차이가 있기 때문에 이점 유의하여 설치하시기 바랍니다.

여기서는 window 에서 설치를 해보도록 하겠습니다.

node-webkit - http://nwjs.io/

먼저 위의 링크로 이동하시면 각자 OS 에 맞게 바이너리 형태로 다운로드 받을 수 있습니다.

압축을 풀고 나면 nw.exe 실행 파일이 포함된 디렉토리가 생성 되며, 별도의 설치 없이 바로 사용하실 수 있으나, 사용의 편의성을 위해 node-webkit 을 환경 변수에 등록하여 사용하도록 하겠습니다.

 

먼저 C:\Program Files (x86)\nwjs 디렉토리에 압축을 해제한 node-webkit 파일을 넣습니다.

아래와 같이 PATH 변수에 C:\Program Files (x86)\nwjs 를 추가합니다.

(window 10 에서는 환경 변수 편집 창이 보기 좋게 변했네요.)

그 다음 사용자 변수에 nw 를 추가하고 값을 C:\Program Files (x86)\nwjs\nw 로 설정합니다.

마지막으로 커맨드 창을 열고 nw 를 입력합니다.

아래와 같이 나오면 설치 완료!!

2. 테스트

설치가 완료되었으니 실제로 데스크탑 어플리케이션을 만들어 봐야겠죠?

먼저 TEST 폴더를 생성하고 TEST 폴더 안에 index.html 파일을 생성합니다.

여기서 생성하신 index.html 파일은 어플리케이션 실행 시 처음으로 로드 될 페이지이며 

package.json 파일에서 수정이 가능합니다.

node-webkit 은 앞의 포스팅에서 말씀 드린 바와 같이 웹킷 엔진을 사용하기때문에 

크로스 브라우징을 신경쓰지 않아도 되는 장점이 있습니다.

현재 index.html 페이지에서는 webPonent chart 의 pie chart 를 초기화 하는 과정을 구현하였습니다.

다음으로 TEST 폴더 안에 package.json 파일을 생성하고 아래와 같이 입력합니다. 

package.json 파일에서는 어플리케이션 시작 시 처음 로드 할 페이지를 설정 할 수 있으며, 

그 밖에도 윈도우 창의 환경 설정 및 아이콘 설정, 툴바, 창의 넓이와 높이 등 

다양한 설정을 할 수 있습니다.

이렇게 작성을 완료하셨다면 커맨드 창에서 nw TEST 를 입력합니다.

이렇게 나오면 성공!!

HTML, Javascript, CSS 를 이용하여 아주 간단하게 데스크탑 어플리케이션이 만들어졌습니다.

참고로 node-webkit 은 다음과 같은 Native UI API 를 제공합니다.

Extended Window APIs

- window

- Frameless Window

Menus

- Menu

- MenuItem

- Window menu - notes on window’s menubar

Platform Services

- App - per-app global functions

- Clipboard - or Pasteboard

- Tray - or Status Icon, Status Item, Notification Area Icon

- File dialogs

- Shell – platform-dependent desktop functions

- Handling files and arguments

- Screen – Screen geometry functions

그 밖에 조금 더 상세히 알고 싶으신 분은

Native UI API - https://github.com/nwjs/nw.js/wiki/Native-UI-API-Manual

위의 링크를 참조하시기 바랍니다.

3. 마치며...

이번 포스팅에서는 node-webkit 을 설치하고 테스트를 해보는 시간을 가졌는데요. 

다음편에서는 node-webkit 의 Native UI API 와 NodeJS 의 모듈을 적용하는 방법 등을 

알아보도록 하겠습니다. 

감사합니다.