Nativefier: 웹사이트를 데스크탑 프로그램으로!

이게 뭐냐면, Electron 을 사용해서 PWA 를 만들어주는 도구다. 크롬 계열을 쓰고 있다면 굳이 필요하진 않은데, macOS 를 쓰다보니 이런 게 없으면 다소 불편함을 느낄 수 밖에 없게 됐다.

뭐가 불편하냐고?
macOS 에선 웹앱을 단독으로 실행했을 경우, 브라우저도 함께 떠버린다. 즉, 난 구글 캘린더 웹앱만 실행하고 싶었는데, 크롬 브라우저(그리고 내가 열어놓은 수많은 탭탭탭…)도 한꺼번에 다 열려버린다는, 다소 짜증나는 상황에 봉착하게 된다. 리눅스엔 이런 문제가 없다.

또, 리눅스(특히나 아치리눅스)에선 해결이 되긴 했지만, Latte Dock 과 문제도 있었다.
요런 조런 상황을 피해가기 위해선 Nativefier 같은게 필수.

---

리눅스에선 아직까진 딱히 필요하지 않아서 설치하지 않았다. 아래 내용은 macOS 용이다.

npm 설치

nativefier 는 Electron 기반이고, 이를 위해선 npm 이 필요하다. npm 설치는 Homebrew 로 할 수도 있고, pkg 로 할 수도 있지만, 관리(삭제!)를 위해서는 Homebrew 가 편하다.

brew install npm

Nativefier 설치

설치 명령은 다음과 같다.

sudo npm install -g nativefier

제작자 설명서엔 sudo 가 빠져있지만, sudo 없이 하면 허가권 문제로 설치가 완료되지 않는다. 뭔가 다른 방법이 있는진 모르겠으나, 아무튼 sudo 는 필요하다.

PWA 만들기

만드는 법은 아주 간단.

$ nativefier --name '네이버 사전' 'https://en.dict.naver.com/#/mini/main'
$ nativefier --name 'Google Calendar' 'https://calendar.google.com/calendar/u/0/r'

이렇게 --name 으로 원하는 이름을 주고, PWA 로 만들기 원하는 사이트 주소를 넣어주면 완성. (그러나…!!!)

저렇게 끝이면 좋겠는데, 여기엔 또 큰 문제가 있다.

한국어로 제목은 불가!?

— 2023.08.02 현재, Nativefier 50.1.1 하에서 한글 문제는 나타나지 않는다.

터미널에서 저 명령을 내리고 나면, 명령을 내린 경로에 디렉토리가 하나 만들어진다. 네이버 사전 결과는 ‘네이버 사전-darwin-arm64‘ 이다. 이 안에 들어가면 .app 이 있고, 그걸 적절한 위치(/Applications, 또는 ~/Applications) 로 복사해주면 끝이다. (리눅스에선 어떻게 될지 궁금하네. .desktop 까지 만들어주려나?)

그런데, 첫번째 예로 든 ‘네이버 사전’에는 아래와 같은 문제가 있다.

‘Dock 에 유지’ 를 해놓으면, 저렇게 물음표가 뜨고 실행이 되지 않는다. 뭐가 문제인지 검색을 해봤는데, 결과는 의외로, ‘프로그램이 삭제됐을 때 이런 현상이 나타난다’ 였다.

삭제됐다고?? 멀쩡히 잘 있는데??
순간 문득, 설마?? 하는 생각이 스쳤다.
그래, 문제는 한글. ‘네이버 사전’이라고 한국어로 이름을 줬더니 이런 현상이 벌어졌다. 아마도 NFD/NFC 문제가 아닐까 하는 막연한 짐작만. Nativefier 책임은 아닐 듯 한데.. 오토메이터 등으로 다른 App. 을 만들어보면 확실히 알 수 있겠지만.. (귀찮다!)

아무튼, 이름만 영어로 바꿔주면 된다. 굳이 다시 nativefier 를 돌릴 필요는 없고, 만들어진 .app 의 앞 부분만을 영어로 교체해주면 아무런 무리가 없다.
여기서 한가지.

$ nativefier --name '네이버 사전' 'https://en.dict.naver.com/#/mini/main'
$ nativefier --name 'Naver Dictionary' 'https://en.dict.naver.com/#/mini/main'

위 두 개의 차이는? Spotlight 에서 검색할 때, ‘네이버 사전’으로 할 지, 아니면 ‘Naver Dictionary’ 로 할 지가 정해진다. 한국어로 검색을 하고 싶다면, --name 한글.. 을 사용한 뒤, 생성된 *.app 을 영어로 바꾸는 편이 좋다.

두번째 Google Calendar 는 조금 더 복잡한 과정을 겪어야 한다.

Google 계정 문제 (? 아래 참고.)

Nativefier Github Issue 페이지에서 아주 상세하게(지루하게..) 다루고 있다. 그걸 취합하여 문서화도 해놓았다.
위에 써놓은대로 설정하면, 구글 계정 로그인이 안된다. 제대로된 브라우저가 아니라며 다른 브라우저를 쓰라고 한다. (어쩌라고?)

따라서 구글 계정을 사용하려면, 그리고 macOS 라면 이렇게 해줘야 한다.

$ nativefier --user-agent safari --name 'Google Calendar' 'https://calendar.google.com/calendar/u/0/r'

관건은 --user-agent safari. 설명에는 firefox 또는 safari 를 사용하라 했는데, macOS 에선 firefox 로는 잘 안되는 듯 하다. 타 OS 에선 firefox 가 되는 모양이다.
safari 로 했더라도, 몇번 실패할 때도 있었다. 로그인이 안되면 다시 실행해보거나, 그래도 안되면 firefox, safari 등을 번갈아 사용해서 만들어보다보면 결국 되긴 되던데.. (이게 좀 복불복인 듯..?)
Nativefier Build Commands Catalog 엔, 구글 계정 문제 말고도 기타 다른 상황 대처법도 나와있다. 문제가 생겼을 때 우선 여기부터 보면 되겠다. (근데 아직까진 구글과 사전 쪽 말곤 딱히 쓰는게 없으니..)

Old build detected! (새로 만들라고??)

몇 달 잘 썼는데, 오늘 갑자기 이런 문구가 뜬다.

This app was built a long time ago. Nativefier uses the Chrome browser (through Electron), and it is insecure to keep using an old version of it. Please upgrade Nativefier and rebuild this app.

Nativefier 는 최신판으로 올라가 있음에도 이런 오류가 발생한다. 아마도, 판올림이 되면 프로그램 생성을 다시 해줘야 하나보다. (아니, 그럼 매번 귀찮아서 어떻게 쓰라고…??? 스크립트라도 만들어야 하나???)
다만, 모든 프로그램(웹사이트)에서 이렇진 않고, 구글 관련 PWA 에서만 이 오류가 나타난다. 아마도 구글이 브라우저 체크를 해서 그러는 모양이다.