크로스 플랫폼 데스크탑앱을 웹기반 기술로 쉽게 만들 수 있도록 하는,
일렉트론에 대해 알아보아요!
저는 픽스팀에서 현재 일렉트론을 사용하여, 데스크탑앱을 개발하고 있습니다.
일렉트론으로 데스크탑앱을 개발하면서 이해했던 일렉트론에 대한 기능, 장점, 단점, 주의 할 점과 같은 내용들을
알아보는 시간을 가져보려고 합니다.
일렉트론?
ElectronJS는 자바스크립트로 크로스플랫폼 데스크탑앱(Windows, MacOS, Linux)을 웹기반 기술로 만들 수 있게 도와주는 프레임워크 입니다.
프론트엔드 개발자라면, 약간의 추가적인 공부만 하면, 데스크탑앱을 쉽게 만들어 낼 수 있습니다.
웹기반 기술로 만든다구요?
정말 말이 안되는 것처럼 보여도, 일렉트론은 크로미움 웹엔진이 탑재되어 있어, 이를 통해서 화면단을 렌더링합니다. 이는 HTML문서를 해독하고, CSS로 스타일을 입힐 수 있으며, JS로 로직을 작성할 수 있음을 의미합니다.
프론트 기술을 그대로 데스크탑앱에 이식할 수 있게 됩니다.
그래서, 프론트엔드 개발자라면, 일렉트론은 너무 쉽게 학습이 가능합니다.
ReactJS, VueJS도 지원하고 있습니다. 심지어 웹뷰로도 동작할 수 있습니다.
OS(운영체제)단의 기능을 사용하기 위해서는 어떻게 해야 할까요?
단순히 화면만 보여주는 것은, 일반적인 웹사이트과 다른 점이 없습니다.
데스크탑앱은, 트레이(Tray), 알림(Notification), 백그라운드 동작, 비명시적 파일 제어와 같은 OS와 직접적으로 연동되는 네이티브한 기능을 사용할 수 있습니다.
하지만, 프론트엔드 기술만으로는 이런 네이티브한 기능을 구현하는 것은 어렵습니다.
이런 부분들은 일렉트론에서 Node.JS환경의 코드로 작성할 수 있도록 제공하고 있습니다.
프로그램의 실행 흐름이 어떻게 되나요?
프로그램의 실행은 최초에는 NodeJS 환경으로 시작됩니다.
그리고, 트레이가 필요하면 트레이를 설정하고, 어떤 화면을 표시하고 싶으면, 해당 화면이 담긴 HTML파일을 입력으로 주어 창을 띄울 수 있습니다.
이때 해당 화면은 React가 될 수 있고, Vue, 바닐라HTML, 웹뷰라면 URL형태의 입력이 될 수 있습니다.
그러면, 크로미엄 엔진이 해당 View를 해석하고 화면이 렌더링 될 수 있습니다.
그럼, HTML이 띄워지면, OS단의 기능과 통신은 어떻게 해요?
프론트엔드에서 특정기능을 수행하다가 내부적으로 어떤 로직이 성공하면, OS단의 네이티브한 알림(Notification)이 띄워져야 한다고 해봅시다.
근데 일렉트론에서의 프론트단은 정말로 진짜 프론트 기술만 사용할 수 있는 영역입니다.
프론트 단을 Renderer Process라고 표현하는데, 여기서는 OS단의 기능에 접근 할 수 없습니다.
일렉트론은 프로그램단 코드와 프론트 단의 프로세스가 분리되어있습니다. 하나의 프로세스가 아닙니다. 그래서 실행영역이 공유되지 않아 IPC통신을 수행해야 합니다.
일렉트론에서는 이를 위해서, 미리 IPC 통신 이벤트를 정의할 수 있습니다. 그리고 해당 IPC이벤트는 프론트에서 실행할 수 있습니다. 이벤트는 프론트의 전역 객체인 window객체에 담길 수 있습니다.
여기서 알림을 띄워주려면, 일렉트론단에서 우선적으로 알림을 실행하는 함수를 정의하고, 이를 이벤트로 노출시키고, 프론트에서는 해당 이벤트를 호출하면 결론적으로는 프론트단에서도 네이티브 알림(Notification)을 호출할 수 있게 됩니다.
이런 구조로 돌아가므로, 굳이 HTML, CSS, JS를 내장으로 포함시키지 않아도, 완전히 분리된 웹뷰 환경에서도 일렉트론과 상호작용이 가능해지게 됩니다.
또한, 모든 이벤트를 노출시키지 않으므로, 좀 더 안전한 구조를 가질 수 있게 됩니다.
보안 위협?
일렉트론에서 프론트를 개발할 때, 가장 중요시해야 할 부분은 XSS(크로스 사이트 스크립팅)을 막는 것입니다.
남이 작성한 게시글을 불러왔는데, 해당 코드에 일렉트론으로 부터 이벤트를 통해 USER데이터를 빼돌리고, 이런 다음 알 수 없는 다른 서버로 전송하는 로직이 포함 될 수 있기 때문입니다.
프론트 개발시에는, 타인이 만든 객체를 조회했을 때, XSS공격이 동작되지 않도록 안전한 조치가 필요합니다. 예를 들면 InnerHTML와 같은 위험한 기능을 사용하지 않는 것입니다.
일렉트론은 기본적으로, 개발자도구를 지원합니다. 일렉트론 설정에서는 isDevTools 라는 옵션을 주어 개발자 도구를 활성 / 비활성 처리를 수행할 수 있습니다.
또한, app.isPackaged 와 같은 조건문을 추가하여, 개발환경에서는 개발자 도구를 허용할 수 있도록, 빌드 된 이후에는 개발자 도구의 Open을 막을 수도 있습니다.
빌드된 파일이 실제로 사용자가 사용하게 될 때는, 개발자도구를 노출시키지 않는 것이 보안에 매우 유리합니다.
크로스 플랫폼 고려사항
일렉트론은 윈도우, 맥, 리눅스 3가지의 플랫폼을 지원합니다.
하지만, 각 플랫폼마다 기능이 다른 부분들이 있어, 특정 플랫폼을 대상으로 특정 기능을 차별하여 제공하기도 합니다. 이는 이벤트도 마찬가지 입니다.
일렉트론은 현재 실행중인 플랫폼을 구분하는 변수를 제공하므로, 이를 통해서 범용적이지 않은 특정 기능을 사용 할 때는 별도의 코드로 분리해야 할 수 있습니다.
예를 들면, MacOS는 하단에 Dock을 제공합니다. 윈도우에게는 없는 기능입니다. 그래서 Dock에 특정기능을 추가했다고, Windows 유저들도 좋아하겠지? 이런 생각을 할 수도 있습니다.
Windows 유저들은 그런 기능이 있는지도 모를 것입니다.
그럼 이에 대한 대안으로 Windows 사용자들을 위한 다른 기능을 제공해야 할 것입니다. Tray에 다른 기능을 추가하든가에 대한 처리가 필요할 수도 있습니다.
이와 같이 OS단에서 처리해야 하는 코드들은 제공하려는 플랫폼들이 모두 제공이 가능한 기능인지 확인하고, 안 될 경우에는 선택적 분기처리가 반드시 필요합니다.
앱 빌드
일렉트론은 크로스 플랫폼을 지원합니다. 가장 쉽게 빌드하는 방법은 electron-bulider 패키지를 통해서 빌드를 수행하는 방법입니다.
이를 통해서, mac용, window용, linux용 빌드를 쉽게 진행 할 수 있고,
빌드시 보여지는 ICON설정도 쉽게 진행 할 수 있습니다.
또한, 빌드시에는 icon의 유무가 매우 중요하게 됩니다. 특히 windows는 icon을 통해서 앱의 위치를 파악하는 경우가 있습니다. 그래서 icon없이 빌드하는 경우, 나중에 앱 업데이트 / 앱 삭제가 안되는 불상사가 발생할 수도 있습니다.
앱 업데이트
일렉트론 생태계에서는 앱이 자동으로 Update할 수 있는 라이브러리를 제공하고 있습니다.
Github으로 배포할 수도 있고, AWS S3를 통한 배포도 지원합니다.
또한 커스텀하게 private하게 앱업데이트 파일을 제공하고 싶으면, “generic” 옵션을 통해서 우리가 별도의 최신 앱파일이 존재하는 파일서버 링크를 제공해주면 됩니다.
일렉트론은 자동으로 이를 참조하여 앱을 업데이트 할 수 있습니다.
단점
일렉트론 앱의 화면 단은 그냥 크롬 브라우저라고 생각하시면 될 것 같습니다.
그 만큼 메모리를 많이 먹고 있음을 의미합니다. 개발자는 프론트 창의 갯수를 제어해서 메모리를 너무 많이 차지 하지 않도록 제어할 필요성이 있습니다.