이 포스트에서는 NW.js 프레임워크를 소개합니다.
구글 V8 자바스크립트 엔진으로 개발된 Node.js 플랫폼이 있습니다. NW.js는 이 Node.js 플랫폼을 기반으로 고안된 프레임워크로, 구글 크롬에 사용하는 크로미움 엔진을 내장하여 HTML 문서로 웹앱이 내장된 네이티브 애플리케이션(하이브리드 앱)을 만들 수 있게 하는 프레임워크입니다.
NW.js 프레임워크로 “Hello, world!”라는 문구를 출력하는 앱을 만들면 다음과 같이 됩니다.
이처럼 UI가 구글 크롬의 그것과 같습니다.
NW.js의 장점으로는 HTML과 CSS, 자바스크립트를 능숙하게 다룰 수 있으면 손쉽게 하이브리드 앱을 만들 수 있다는 점입니다.
하지만, 용량이 비대해진다는 단점도 있습니다. 한 예로, “Hello, world!” 하나만 출력하는 앱을 만들어도 용량이 100MB를 넘어갑니다. 이는 NW.js가 크로미움 엔진을 내장함으로써 발생하는 문제입니다. NW.js로 만든 앱을 배포할 때 이 점을 염두에 둘 필요가 있습니다.
NW.js의 주소는 https://nwjs.io/입니다. 들어가면 NW.js 프레임워크를 다운로드할 수 있는데, 일반용과 개발자용의 두 가지로 다운로드할 수 있습니다.
기본적으로 일반용과 개발자용은 앱을 실행하는 데 있어서는 차이가 없습니다. 하지만, 결정적인 차이가 있는데,
위의 것은 일반용으로 실행하였을 때, 아래의 것은 같은 앱을 개발자용으로 실행하였을 때입니다. 오로지 개발자용으로 실행하였을 때만 디버그 기능을 사용할 수 있습니다. 따라서, 개발할 때는 개발자용으로 실행하되 배포할 때는 일반용으로 배포하는 것을 권장합니다.
포스팅한 김에 이 예제처럼 “Hello, world!”를 출력하는 앱을 만들어 보겠습니다.
먼저, 프로젝트 디렉터리를 만들고 그 안에 package.json 파일을 다음과 같은 내용으로 생성합니다. (중요! package.json 파일은 필수적으로 있어야 합니다.)
{
"name": "helloworld",
"version": "1.0.0",
"main": "index.html"
}
이는 앱 이름은 “helloworld”로 하고 버전은 “1.0.0”으로, 처음 실행할 페이지의 이름은 “index.html”로 한다는 의미입니다.
그리고, 같은 디렉터리에 index.html 파일을 다음과 같이 만듭니다.
<!DOCTYPE html> <html> <title>Hello, world!</title> <body> <h1>Hello, world!</h1> </body> </html>
index.html 파일까지 만들었으면, 콘솔창에 다음과 같이 입력합니다. (앱 문서를 저장한 디렉터리의 이름이 helloworld라고 가정합니다)
prompt> nw helloworld
만약 환경변수로 NW.js 설치 디렉터리를 PATH로 등록하였다면 앱 문서를 저장한 디렉터리로 가서
prompt> nw .
이렇게 입력하는 것도 가능합니다.
실행 결과는
앞에서 나온 것과 같이 Hello, world!가 출력됩니다.
이렇게 NW.js 프레임워크로 HTML 기반 하이브리드 앱을 만들어 볼 수 있습니다.
“NW.js 프레임워크 소개”의 2개의 생각