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

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

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

지난 포스팅에서는 node-webkit 을 이용하여 간단한 데스크탑 어플리케이션을 만들어 테스트해보는 시간을 가졌는데요. 이번 포스팅에서는 node-webkit이 실제 프로젝트에 적용되어 어떻게 사용되는지 알아보도록 하겠습니다.

 

1. 프로젝트 소개

먼저 node-webkit 을 적용할 프로젝트는 웹포넌트 팀에서 개발한 webPonent-publisher 로 조금은 생소하지만 아주 편리한 웹 코드 편집 툴 입니다. 
웹포넌트 퍼블리셔는 프로토타입 및 샘플 소스 작성 등에 특화된 실시간 웹 코드 에디터로, 웹포넌트 차트&그리드의 각 기능에 해당하는 다양한 샘플 코드 (HTML, CSS, JS) 를 사용자에게 제공하고 있으며, 커스터마이징 테스트를 위한 편집 기능도 제공하고 있습니다.

자세한 사항은 www.webponent.com 에서 확인해 보세요.

 

2. 프로젝트 준비

지난 포스팅에서 node-webkit 을 적용하기 위해서는 package.json 파일이 반드시 필요하다고 말씀드렸는데요. 먼저 터미널을 실행한 후 해당 프로젝트 폴더로 이동하여 package.json 파일을 생성합니다.

이렇게 작성하신 후에 몇 가지 질문에 대한 답을 하시면 package.json 파일이 생성되는데요. 이때 package.json 에서 가장 중요한 항목은 “name” 과 “version” 으로 이는 각 패키지의 고유성을 판별하게 되므로 필수로 입력하여야 합니다. 그 외에도 description, keywords, homepage, license 등 사용자의 필요에 따라 작성을 완료해 주면 됩니다.

작성이 완료되면 이렇게 package.json 파일이 생성된 것을 확인 할 수 있습니다.

별도로 수정할 사항이 있다면 package.json 파일을 직접 수정하시면 되는데요. 위에는 프로젝트에 적용하기 위해 작성된 package.json 파일입니다. 정상적으로 작성을 하였는지 테스트를 진행해 보도록 하겠습니다.

테스트 방법은 이전 포스팅에서 말씀 드렸다시피 터미널에서 프로젝트가 있는 디렉토리로 이동 후 
nw [프로젝트 명] 을 입력하시면 됩니다. node-webkit 설치 방법은 이전 포스팅을 참고하세요.

위에 생성한 데스크탑 어플리케이션이 바로 웹포넌트 팀에서 개발한 webPonent-Publisher 입니다.

현재는 webPonent CHART&GRID 의 플러스 에디션 이상을 구입하신 분에 한해서만 서비스를 제공하고 있습니다.

막간을 이용해서 webPonent-Publisher 에 대해 설명을 한다면,

편집기 명칭

1.     샘플 파일 선택 메뉴

2.     CSS 편집기

3.     HTML 편집기

4.     JAVASCRIPT 편집기

5.     미리 보기 화면

왼쪽에 보이는 SAMPLE FILE 에 200 개 이상의 webPonent CHART&GRID 샘플을 등록하여 쉽고 간편하게 사용할 수 있도록 제공하고 있습니다. 샘플을 선택하게 되면 오른쪽의 CSS, HTML, JAVASCRIPT 편집 창에 해당 코드를 불러와 미리 보기 화면에 렌더링 됩니다. 또한 해당 소스를 직접 편집하여 수정된 부분을 실시간으로 확인해 볼 수 있기 때문에 사용 편의성 및 생산성에 많은 도움을 줍니다.

더 자세한 사항은 www.webponent.com 에서 확인하세요^^

 

3. 노드 모듈 사용하기

node-webkit 은 NodeJS 를 기반으로 하기 때문에 NodeJS 의 API 와 모든 서드 파티 모듈들과 완벽하게 호환이 가능하다는 점이 가장 큰 장점으로 볼 수 있습니다.

노드 모듈 시스템은 어플리케이션에서 다른 자바스크립트 파일들을 인클루드 해주는 역할을 합니다. 즉 Github 에 올라와 있는 핵심 라이브러리들의 소스 코드를 확인하는 것이 가능하기 때문에 어플리케이션을 개발함에 있어 생산성 및 유지보수 등에서 효과적인 시스템이라 할 수 있습니다.

모듈을 사용하는 것은 매우 간단합니다.

nodeJS 에서는 일반적으로 핵심 라이브러리의 이름이나 로드하고자 하는 모듈 파일의 경로를 하나의 인자로 갖는 require() 함수를 통하여 모듈을 불러와 사용할 수 있습니다.

require() 를 사용하여 파일을 인클루드 하는 방법은 3가지가 있습니다.

1.     상대 경로 - require(‘./lib/test.js’);

2.     절대 경로 - require(‘/home/lib/ test.js’);

3.     검색 - require(‘test’);

첫번째, 두번째 방법은 해당 경로에서 모듈을 로드하게 됩니다.

세번째 방식은 현재 실행 디렉토리를 먼저 찾고 없으면, 어플리케이션 디렉토리의 하위 디렉토리인 /node_modules/ 라는 디렉토리를 찾게 되는데, 이 디렉토리는 node 의 모듈을 저장하는 디렉토리로 이 디렉토리에서도 찾지 못한다면 부모 디렉토리로 이동하여 /node_modules/ 디렉토리를 찾게 됩니다. 모듈을 찾을 때까지 같은 시도를 하게 되며 최종적으로는 파일 시스템의 루트까지 올라가서 찾게 됩니다.

아래는 일반적인 어플리케이션을 개발하는데 필요한 모듈을 정리한 것으로 참고하시면 좋을 것 같습니다.

webPonent-publisher 에서는 다음과 같은 모듈을 사용하고 있습니다.

가장 먼저 node-webkit 의 네이티브 API 인 “nw.gui” 모듈을

var gui = requir(‘nw.gui’);

형태로 읽어와

var win = gui.Window.get();

형태로 인스턴스를 만들고 윈도우를 다루는 기능을 수행하도록 합니다. 이 윈도우 인스턴스를 이용해서 윈도우 창 닫기, 크기 조절, Developer Tools 창을 띄우기 등의 기능을 구현할 수 있습니다.

한가지 더 살펴보자면

“node-webkit-fdialogs” 모듈을 이용하여 파일 업로드 및 다운로드가 가능합니다.

위에는 “node-webkit-fdialogs” 모듈의 readFile() 을 이용하여 파일을 불러오는 예로,

데이터 문자열을 파싱해서 javascript object 형으로 변환하여 webPonent-publisher 의 CSS, HTML, JS, Libraries 에 각각 추가되도록 합니다.

파일 저장은 파일 업로드와 마찬가지로 “node-webkit-fdialogs” 모듈의 saveFile() 을 이용해 저장합니다. 코드를 살펴보면 JSON 개체를 String 형으로 변환하고, 변환된 문자열을 다시 버퍼 데이터로 변환해 줍니다.  버퍼 객체는 실제 기본 메모리를 할당하기 때문에 생성시 크기를 지정해야 합니다. 여기에서는 UTF8 문자열을 사용하는 버퍼를 생성하였습니다. 이렇게 생성된 버퍼 데이터는 saveFile() 을 통해 저장됩니다.

webPonent-publisher 의 우측 상단에 파일 불러오기 및 저장하기 버튼을 클릭하여 잘 적용되었는지 테스트를 해본 결과 문제 없이 잘 되고있네요^^

노드 모듈을 잘 활용한다면 이 외에도 높은 수준의 개발 능력을 필요로 하는 작업들도 매우 간단하게 개발 할 수 있습니다.

4. 마치며..

지금까지 node-webkit 을 이용해서 실제 프로젝트를 데스크탑 어플리케이션으로 만드는 과정들을 살펴 보았는데요.

node-webkit 은 기존 웹을 구현하던 방식 그대로 개발하고 플랫폼 별로 어플리케이션으로 만들어 배포 할 수 있다는 것이 가장 큰 장점이 아닐까 싶습니다. 더불어 UI 에서 노드 모듈을 사용할 수 있는 점, 크로스 브라우징이 필요 없는 점, 보안의 향상 등은 생산성과 유지보수 등에서 상당히 매력적인 요소라 할 수 있습니다.

한편으로는 안정적이지 못하다는 인식과 제품에 적용하는 것에 대한 부담을 느낄 수도 있습니다. 하지만 현재 많은 업체들이 node-webkit 을 이용해 데스크탑 어플리케이션을 개발함으로써 node-webkit 의 안정성을 입증 해나가고 있습니다.

기회가 된다면 경험해 볼 것을 추천 드립니다.

node-webkit 을 이용하여 만든 프로젝트

https://github.com/nwjs/nw.js/wiki/List-of-apps-and-companies-using-nw.js