사실 PWA라도 Mozilla에서 Firefox가 로컬 상에 설치할 수 있게 만들어주었으면 좋겠지만 데스크톱에서 Firefox는 실제로 PWA를 설치할 수 있는 기능조차 없다. 왜 그런지는 모르겠으나 개인적으로 수십개의 Chromium을 돌리느니 Chrome 하나로 퉁치고 싶다.

현재 글에 나오는 모든 환경은 ElectronJS 혹은 Node.JS 데스크톱 크로스 플랫폼을 기준으로 합니다.


Chromium 기반 렌더러의 크로스 플랫폼 앱의 등장과 문제점

크로스 플랫폼 데스크톱 앱을 만들기 위해서 개발자들이 한 생각은 웹 브라우저로 콘텐츠를 렌더링하는 것이었다. Chromium과 Firefox 모두 이미 Linux, Mac OS X, Windows에서 실행가능한 Executable이 존재하기 때문이다. 소제에는 NW.js의 등장이라고 써놓았을지라도 실제로 수많은 언어에서 시스템에 접근하는 부분만 잘 조절하고 언어의 독립 실행파일만 있다면 쉽게 이를 구현할 수 있다.

실제로 Linux, Mac OS X, Windows 3개의 플랫폼을 모두 지원하는 것은 힘든 일이 맞고 모바일 또한 존재하니 실제로는 iOS와 Android까지 5개의 플랫폼을 지원해야 한다. 하지만 그것이 쉽지는 않다. (물론 모바일 애플리케이션에도 크로스 플랫폼이라는 개념이 존재하고 React Native 등과 같은 라이브러리로 애플리케이션을 실제로 개발할 수 있다.) 그러나 이러한 크로스 플랫폼의 전형적인 문제점은 모두 Chromium에서 비롯되었고 모두 공통되는 몇 가지 문제점을 가지게 되었다.

기본적으로 크로스 플랫폼 애플리케이션은 렌더러 프로세스와 일반적으로 로직을 실행하는 백엔드가 나뉘어지게 된다. 이 때 ElectronJS의 경우에는 IPC 커넥션을 사용하여 두 프로세스 간에 데이터 교환이 이루어지게 된다. 이 때 렌더러 프로세스로 Chromium을 채택했고 백엔드로 Node.JS executable이 들어간다.

과도한 메모리 사용과 애플리케이션 용량

Chromium이 렌더러로 사용되어 일어나게된 끔찍한 상황 중에 하나이다. 렌더러로 사용되기만 했으면 오히려 다행이라고 생각될 수도 있지만 실제로 웹사이트가 화면 하나로 만들어지는 경우가 아니라면 더 고려할 점이 많아지게 된다. 예를 들어 YouTube는 영상 그리고 소리까지 담당해야 한다. 현재 가장 널리 사용되고 있는 크로스 플랫폼 라이브러리인 ElectronJS는 FFmpeg를 내장하고 있고 이 FFmpeg는 정확히 Chromium에 한 번 더 귀속한다.

이러한 애플리케이션을 분석해보면 크게 4가지로 나누어진다.

  • dependency (node_modules)
  • code (asar archive)
  • application backend (node.js)
  • renderer (chromium)

이미 예제 애플리케이션만으로 100MB를 훌쩍 넘어버린 애플리케이션의 모습에 당황한 사람들은 적지 않다. (알던 분 중에 이를 20MB까지 줄인 분이 있었는데 예상으로는 의존성 파일은 추후에 다운로드하는 것으로 대체한 것 같다. 당시 정확한 방법을 직접 알려주시지는 않았지만 타임머신이라는 단어를 언급했었다.) 그리고 HTML DOM 렌더링으로 메모리는 적어도 10MB 이상 사용하게 된다. 네이티브로 개발할 때보다 수없이 많은 추가 자원이 소모된다.

소스코드의 쉬운 발췌와 수정

Discord를 사용하는 사람이라면 한 번 쯤은 BetterDiscord라고 Discord 애플리케이션의 수정 버전에 대해서 들어보았을 것이다. 실제로 이 수정 버전은 합법적인 선 상에 있지 않다. 하지만 이는 매우 쉽게 유저들에 의해서 메인테이닝되고 관리되었다. 하지만 실제로 여기에서 말하고 싶은 맥락은 쉽게 수정되고 발췌된다는 것이 아니라 이로 인해서 보안 문제가 실제로 발생하고 있다는 것이다.

얼마 전에 퍼진 바이러스 중 일부는 Discord 소스 코드를 직접 덮어씌워 시스템 정보를 임의의 서버로 전송하는 작업을 하고 있었다. 이 바이러스가 설치되는 과정은 정말로 파일 몇 개를 대체한 것 뿐이었다. 당시 정보에 따르면 해커는 Node.JS에서 main 함수라고 볼 수 있는 index.js 파일에 악성 코드가 포함된 모듈의 경로를 포함했고 복사된 추가 파일의 함수가 자동으로 실행되어 서버에 정보를 전송하게 만들었다.

Chrome으로 사이트를 로컬에 앱으로써 설치하기

Progress Web App은 말 그대로 웹 앱이다. 그저 웹이 아닌 앱이라는 점에서 중요한 차이점이 하나 더 생긴다. 오프라인 자원을 사용하여 더 빠른 웹 서비스의 로드 속도 등을 꾀해낸다는 것이다. Chrome에는 이러한 PWA를 위한 Chrome App 전용의 윈도우 프레임이나 기능이 포함되어 있고 우린 이 기능을 매우 쉽게 사용할 수 있다. 설치하면 시스템에 바로가기도 생성되어 실제로 사용 시에는 위화감을 느낄 필요가 없다. 또한 Chrome의 최신 버전과 속도를 즉시 느낄 수 있다는 점에서 충분히 설치할 가치가 있다.

위와 같이 설치하는 방법은 모든 웹 페이지에서 작동하고 쉬우며 단 16KB의 추가 공간을 차지한다.

  1. 앱으로 만들고 싶은 웹 사이트에 접속하고 Favicon이 로드될 때까지 기다린다.
  2. 크롬의 메뉴에서 ‘도구 더보기’를 찾아 클릭하면 ‘바로가기 만들기’라는 도구를 볼 수 있다.
  3. 바로가기 만들기 도구를 사용하여 창으로 열기 옵션을 활성화한 채로 새 바로가기를 만든다.

바로가기를 만들 때 중요한 점은 창으로 열기 옵션을 활성화해야 한다는 것이다.

바로가기를 만들면 Chrome의 새 창이 열리고 로드된 Favicon으로된 새로운 앱이 만들어진다. 이는 시작화면에서도 찾을 수 있다. ‘Chrome 앱’이라는 폴더 밑에 Google 앱이 생겼을 것이다.

이 새로운 Google 앱은 기존에 설치된 모든 Chrome 확장 프로그램을 사용할 수 있다. 만약에 애드블럭과 같은 플러그인을 사용한다면 앱 내 광고 또한 제거할 수 있고 타 플러그인의 기능도 그대로 사용할 수 있게 된다. 말이야 프라이버시 보호겠지만 실제로는 광고를 보지 않아도 된다는 점에서 매우 좋다고 생각한다.