Cross Platform Application 개발하기 — 1편 : NWJS + Node-Java (Nw-Gyp)

Brant Hwang

Published in

QueryPie

9 min readAug 10, 2015

대부분의 초기 스타트업은 지극히 제한적인 개발리소스 (인력, 자원, 비용 등..) 을 최대한 활용해서 MVP를 만들고, 시장에서 검증받고, 지속적으로 Time To Market을 실현해야 합니다.

만약 내가 서비스 하고 싶은 스타트업 아이템이 슬랙같은 서비스라면 어떻게 접근해야 할까요?

Slack은 현재 Mac, Windows, iOS, Android 등 PC/Mobile 할 것 없이 모든 플랫폼들을 지원하고 있습니다.

물론 슬랙이 많은 투자를 통해서 플랫폼 별로 개발자를 채용 후에 플랫폼별 앱들을 개발 했을 수 있지만, 제가 알고있는 슬랙은 초창기부터 모든 플랫폼들의 앱을 서비스 해왔고, 그 안에는 NWJS, Electron, Cordova와 같은 다양한 Cross Platform Application 개발 툴들이 있었기에 빠르게 시장에 제품을 내놓을 수 있었고, 이후 빠른 속도로 서비스를 발전 시킬 수 있었다고 생각합니다.

이번 포스팅에서는

1) NWJS

2) Node-Java

3) Node-Gyp & NW-Gyp

위 3가지를 간단하게 소개해보려 합니다.

- NWJS

NW.js is an app runtime based on Chromium and node.js. You can write native apps in HTML and JavaScript with NW.js. It also lets you call Node.js modules directly from the DOM and enables a new way of writing native applications with all Web technologies.

NWJS의 Github 에서는 NWJS를 위와 같이 소개하고 있습니다.

Chromium 과 node.js 기반의 Application Runtime 이며, HTML과 JavaScript를 이용해서 Native Application을 개발 할 수 있다고 합니다.

조금더 쉽게 이야기하면 NWJS는 각 플랫폼별 (Windows, Linux, MacOS) Native 기능들을 구현 해 놓아서, 개발자가 JavaScript를 Interface 통해 개발 할 수 있도록 만들어놓은 Framework 입니다.

즉, NWJS 기반에서 개발을 하게되면 JavaScript를 통해 Native 제어 ( File, Device I/O .. ) 등을 Native 수준으로 사용 할 수 있고, HTML + CSS + JS를 통해 웹 기반으로 UI를 구성 할 수 있습니다.

즉, 한번의 JavaScript Coding으로 Linux, Windos, MacOS 상에서 동일한 기능을 할 수 있는 애플리케이션을 개발 할 수 있다는 의미입니다. 물론 HTML/CSS로 작성된 UI도 OS 별로 완전히 동일하게 보이겠지요.

또한 수많은 기존 Node Package들을 npm을 통해 함께 사용 할 수도 있습니다.

Hello World를 한번 띄워보겠습니다.

1) Node.js를 먼저 설치합니다. (https://nodejs.org)

2) node -v 으로 Node.js가 잘 설치되었는지 확인합니다.

3) nwjs 애플리케이션을 생성합니다.

# npm init
# npm install nwjs
# npm install nw

package.json을 열고 다음과 같이 수정합니다.

{
  "name": "nwjs-example",
  "version": "1.0.0",
  "description": "",
  "main": "index.html",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

index.html 파일을 package.json과 동일한 위치에 생성하고 HelloWorld를 작성합니다.

<html>
<body>
<h1>Hello World</h1>
</body>
</html>

터미널에서 실행해봅니다.

# nw .

마치 웹브라우저와 같은 창에 HTML로 작성한 코드가 화면에 보이네요. (물론 다양한 옵션을 통해 TitleBar, 주소창 등을 모두 제거 할 수 있습니다. 기본 셋팅이 개발모드라 개발에 필요한 버튼들이 기본적으로 표시 됩니다. )

이렇게 간단한 코드 몇 줄로 NWJS 애플리케이션이 탄생했고, 이 애플리케이션은 Windows, Linux, Mac에서 모두 동일한 Look & Feel로 동작합니다.

그렇다면 nw-builder를 통해 실제 모든 플랫폼용으로 컴파일 가능한지 한번 확인해보겠습니다.

# npm install -g nw-builder
# sudo nwbuild -p "osx32,osx64,win32,win64,linux32,linux64" ./

Windows, Linux, OSX 32/64 Bit 모두 빌드 되었습니다.

한번의 JavaScript, HTML, CSS 개발을 통해서 모든 플랫폼에서 동일하게 동작하는 애플리케이션 개발. 어떤가요?

NWJS에 대한 더 자세한 내용은 Github에 아주 많으니 참고하세요!( https://github.com/nwjs/nw.js )

- Node-Java & GYP

NWJS는 NWJS API 이외에도, C/C++, Java, Python등의 랭귀지로 개발된 라이브러리들을 NWJS에서 JavaScript로 사용 할 수있도록 GYP라고 하는 모듈을 제공합니다.

GYP는 다음과 같은 역할을 합니다.

NWJS에 없는 API들을 Java, Python등으로 구현하면 GYP가 OS 영역과 NWJS 사이에서 Bridge 역할을 하면서 Native Language로 만든 라이브러리를 NWJS 상에서 JavaScript로 사용 할 수 있도록 해줍니다.

예를들면, Java로 구현된 특별한 알고리즘이 있습니다. 이 알고리즘은 굉장히 복잡한 로직들을 가지고 있어 JavaScript로 재 작성 하기에는 많은 시간이 걸립니다. 개발자는 Java로 작성된 알고리즘을 그대로 JavaScript에서 사용 하기를 원하고요.

GYP와 Node-Java를 사용하면 NWJS 상에서 Java Class를 JavaScript로 사용 할 수 있습니다.

GYP는 Node-Gyp과, NW-Gyp가 있는데, NW-Gyp는 Node-Gyp의 Hack 버전입니다. ( 즉, Node-Gyp를 가져다가 조금 수정해서 NWJS에서 돌아 갈 수 있도록 개발 했다고 합니다 )

간단한 덧셈을 하는 Java Class를 만들고, 이 클래스를 JavaScript에서 호출 해보겠습니다.

# npm install -g nw-gyp
# npm install java
# cd node_modules/java
# nw-gyp configure --target=0.10.5
# nw-gyp build

src/com/axisj/node/java/example/Test.java

package com.axisj.node.java.example;public class Test {public static int addNumbers(int a, int b) {
        return a + b;
    }
}

Test.java와 같은위치에 컴파일 된 Test.class를 위치 시켜놓았습니다.index.html<html>
<head>
    <script type="text/javascript">
        var java = require("java");java.classpath.push("./src");
        var Test = java.import("com.axisj.node.java.example.Test");var result = Test.addNumbersSync(2, 3);
        document.write("Result : " + result);
    </script>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
실행합니다!  ( nw . )

되네요! JavaScript를 통해서 Class를 Import 하고 호출했더니, 실제 자바코드에서 구현한 결과가 JavaScript에 전달되고, 그 결과를 화면에 출력했습니다.이제 Java로 만들어진 수많은 jar 파일들과, 직접 작성한 Java 코드들도 이제 NWJS에서 사용 할 수 있게 되었습니다.더 자세한 내용은 Node-Java Github에 잘 나와있습니다!간단하게 NWJS를 이용해서 HTML, CSS, JS 기반으로 Cross Platform Application을 어떻게 개발 해야할지, 또 NWJS가 가진 한계를 3rd Language(Java) 와 Gyp를 이용해서 확장하고, NWJS에 연결하는 방법까지 살펴보았습니다.아직 국내에서는 사례가 많지 않지만, 해외에서는 NWJS, Electron 기반으로 다양한 Cross Platform Application을 개발하는 추세로 가고 있는것 같습니다.스타트업을 준비하는 팀이라면 꼭 NWJS와 Electron을 눈여겨 보세요!

Cross Platform Application 개발하기 — 1편 : NWJS + Node-Java (Nw-Gyp)

- NWJS

- Node-Java & GYP

Written by Brant Hwang