Mac 데스크탑앱 만들기

Mac 데스크탑앱 만들기

window와 다르게 mac은 실행 파일이 폴더로 되어 있습니다.
즉, window에서 구분되어 있는 것이 mac에서는 합쳐져 있다고 생각하면 됩니다.

nwjs 0.72.0을 이용해서 실행 파일을 만들어 보겠습니다.

1. nw.js 다운로드

https://dl.nwjs.io/v0.74.0/nwjs-sdk-v0.74.0-osx-x64.zip

0.74.0으로 한 이유는 해당 버전부터 저희 프로그램의 Web, 하드웨어(POS, 바코드 프린터)등이 연결이 되기 때문입니다.
추가로 다운로드를 확인하고 싶으시면 해당 링크로 들어가시면 됩니다.
https://dl.nwjs.io/v0.72.0/

2. 실행할 파일 build

3. nwjs.app수정

여기서 부터가 진짜입니다.
nwjs.app에 2번을 넣어서 적용하면 됩니다.

전체 구조를 보면 다음과 같습니다.

📦Paeng.app
 ┗ 📂Contents
    ┣ 📂Frameworks
    ┣ 📂Library
    ┣ 📂MacOS
    ┃ ┗ 📜paeng
    ┣ 📂Resources
    ┃ ┣ 📂app.nw //build 한 파일들 넣는 곳
    ┃ ┣ ...
    ┃ ┗ 📜app.icns //실행 파일 아이콘
    ┣ 📜Info.plist //실행 파일 설정 관련 파일
    ┗ 📜PkgInfo

 

3-1. nwjs.app을 원하는 이름으로 바꾸기

$ mv nwjs.app Paeng.app

 

3-2. 실행 파일 아이콘 바꾸기

$ cd Paeng.app/Contents/Resource/
$ cp ~/paeng.icns app.icns

 

3-3. 실행 파일 적용

$ cd Paeng.app/Contents/Resource/
$ mkdir app.nw
$ app.nw
$ cp -a ~/paeng/dist/* .
$ cd ../../MacOS/
$ mv nwjs paeng

 

3-4. 실행 파일 설정 바꾸기

Info.plist 을 다음과 같이 수정하면 됩니다.

<!-- Info.plist -->
...
        <key>CFBundleDisplayName</key>
    <string>Paeng(MAC)</string>
...
CFBundleExecutable
        <key>CFBundleExecutable</key>
    <string>paeng</string>
...

 

마치며

Mac용 데스크탑앱을 만들게 되었습니다.
그런데 아직 App Store에는 올리지 않았습니다.
Window의 Roaming, Local등 어려운 부분이 많아 쉽지 않았는데 Mac도 Info.plist등 장난아니였습니다.
그래도 새로운 것을 배운다는 느낌이 좋았고 좀 더 완성도 있는 Mac 데스크탑 앱을 만들고 싶다는 욕심도 생겼습니다.

긴 글 읽어주셔서 감사합니다.