NW.js의 선언 설정

NW.js의 초기 선언 설정법에 관한 내용입니다.

NW.js 프레임워크 소개 포스트에도 서술한 것처럼 NW.js 앱을 만들려면 package.json 파일이 필수적으로 있어야 합니다. 일단, 가장 간단하게 설정한 예를 보겠습니다.

{
	"name": "helloworld",
	"main": "index.html"
}

name과 main입니다. 최소한 이 두 개는 필요합니다. name은 앱의 이름, main은 처음으로 보여줄 문서입니다. 필수적인 것은 아니지만 추가로 "version": "1.0.0" 식으로 앱의 버전을 선언할 수도 있습니다.

http://docs.nwjs.io/en/latest/References/Manifest%20Format/으로 들어가면 더욱 다양한 설정에 대해 볼 수 있습니다. 이 포스트에서는 그들 중 자주 쓰이는 속성에 대해 서술합니다.

{
	"name": "helloworld",
	"main": "index.html"
	"window": {
		"icon": "icon.png",
		"width": 400,
		"height": 600,
		"resizable": false
	}
}

4번 줄부터 9번 줄까지는 창에 관한 설정을 한 예입니다.

icon은 제목 표시줄 위쪽과 작업 표시줄에 표시될 아이콘을 의미합니다. 파비콘과 함께 있을 경우는 파비콘을 무시하고 package.json에서 설정된 아이콘이 표시됩니다.
width와 height는 창의 폭과 높이입니다. 프레임을 제외한 부분의 폭과 높이를 의미하므로 프레임이 있을 경우 실제 크기는 지정한 것보다 더 크게 됩니다.
resizable은 창의 크기를 변경할 수 있는가의 여부를 설정하는 것입니다. false로 설정하면 창의 크기를 변경할 수 없습니다. 다만, resizable을 false로 하였더라도 자바스크립트를 사용하여 창의 크기를 변경하는 것은 가능합니다.

그 외에도 여러 설정들이 가능합니다. 그 중에서 유용한 윈도우 설정들을 나열하자면,

id: 창에 id를 설정합니다. (문자열)
min-width, min-height: 조절할 수 있는 창의 최소 크기를 설정합니다. (숫자)
max-width, max-height: 조절할 수 있는 창의 최대 크기를 설정합니다. (숫자) 최소 크기와 최대 크기를 같게 하면 크기 조절이 불가능한 상태가 됩니다. 다만, 최소 크기와 최대 크기를 같게 하는 방법보다는 resizable을 false로 해서 창 크기를 고정하는 것이 더 좋습니다.
always_on_top: 항상 모든 창의 위에 놓을 것인지 설정합니다. (true/false)
frame: 이것은 프레임셋과 관련된 설정이 아니라 창틀이 보이게 할 것인지를 설정하는 것입니다. false로 설정하면 전체 화면으로 보는 것처럼 창틀이 숨겨집니다. 다만 이 경우 제목 표시줄도 숨겨집니다. (true/false)
fullscreen, kiosk: 전체 화면으로 표시됩니다. kiosk의 경우 말 그대로 무인화상기기에 최적화된 모드가 됩니다. (true/false)

그 밖에도 윈도우 관련 설정은 아니지만 user-agent와 chromium-args도 유용한 설정입니다.

참고: 윈도우 설정 중 toolbar 설정은 0.13.0에서 툴바가 삭제되면서 사용하지 않게 된 설정입니다.

Sponsor Link