시작하며
지금까지 일렉트론을 통해 pc앱 개발/빌드/유지보수를 해오면서 개인적으로 공부도 하고 정리도 하고 회사 내에서 간간이 세미나도 진행해 왔다. 하지만 돌아보면 A to Z의 글로 흐름 있게 '잘' 남기지는 못한 것 같아 글로 남겨야 한다는 필요성을 느꼈고, 일렉트론에 대한 공부가 필요한 사람들이 참고하면 좋을만한 정보들이 내 개인 노션에만 잠들어있는 게 아쉬웠다.
앞으로 블로그에 쓰인 시리즈의 글을 통해 누군가가 아래의 정보들을 얻어갈 수 있도록 작성해 나가는 것이 목표다.
일렉트론이 무엇인지,
일렉트론의 프로세스 구조는 어떻게 생겼는지,
본인이 개발한 웹 서비스로 어떻게 pc 앱을 만들 수 있는지,
어떻게 인증서를 넣어 빌드를 하는지,
자동 배포 구조는 어떻게 만드는지
사실 일렉트론을 주제로 꾸준히 글을 쓰는 건 작년부터 이어온 목표였다. 하지만 바쁘다는 핑계로 하다가 멈추고 하다가 멈췄던 오랜 목표를 올 해는 꼭 마무리하고 싶어서, 얼마 전 읽은 책 내용처럼 이렇게 소문을 내어본다. :)
이루고 싶다면 소문을 내라!
그럼 서론은 접고 일렉트론이 무엇인지부터 알아보자.
데스크탑 애플리케이션
Electron은 JavaScript, HTML 및 CSS를 사용하여 데스크탑 애플리케이션을 구축하기 위한 프레임워크이다.
먼저 '데스크탑 애플리케이션' 그 자체에 대해 '웹 응용 프로그램'과 비교를 통해 기본적인 특성을 간단히 알아보자.
1. 설치와 업데이트
당연하겠지만 웹 서비스는 서버에서 모든 업데이트가 이루어지고 서버 반영시 사용자에게 즉시 전달된다. 따라서 사용자가 직접 설치할 필요가 없이 새로고침하여 페이지를 다시 로드하거나 종료한 다음 계정에 다시 로그인하기만 하면 된다.
반면에 데스크탑 앱은 새 버전이 출시될 때마다 업데이트되는 컴퓨터에 직접 설치해야 하기 때문에 각 컴퓨터에서 버전을 추적해야 하는 필요성이 있다. 업데이트와 관련한 로직도 작성해야하고 서비스의 규모가 있는 경우 Install과 Uninstall 여부에 대해 추적하고 개발해야 한다.
2. 서버의 필요여부
웹 애플리케이션 의 경우 위에서 언급한 내용처럼 로컬 또는 클라우드 서버에 게시되고 업데이트 프로세스는 그곳에서 발생된다. 그렇기 때문에 어떤 경우에도 서버가 필요하고, 인터넷 연결 속도와 원격 서버의 성능에 따라 영향을 받는다. 브라우저를 통해 작업할 프론트엔드만 필요해도 어딘가에 백엔드를 호스팅 하는 것이 필수적이라는 뜻이다.
하지만 데스크톱 애플리케이션은 서버와는 별개로 설치되는 앱 자체에 자율적으로 코드를 작성하여 작동하므로, 클라이언트 쪽의 로직으로만 서비스 구현이 가능한 경우 서버 호스팅이 필요하지 않다. 따라서 데스크탑 앱을 구현할 때 가장 중요한 것은 내부 코드의 품질과 이 코드가 실행되는 하드웨어의 안정성이다. 물론 서버와의 통신이 필요하지 않은 서비스의 경우이고, 서버와의 통신이 필요하다면 웹과 동일한 문제가 발생한다.
3. 보안처리
데스크톱 애플리케이션의 경우 웹을 개발할 때 보다 더 많은 자유도와 권한을 갖게 되는데, 이 점은 더 많은 점을 고려해야한다는 뜻이기도 하다. 데스크탑 앱은 파일시스템, 사용자 쉘 등에 접근이 가능하기 때문에 악의적으로 파일 시스템 접근을 제어할 수도 있고 레지스트리에 접근할 수도 있다. 또한 BrowserWindow나 View에 url를 로드하는 방식으로도 쓸 수 있으므로 애플리케이션 내에 의도치 않은 임의의 콘텐츠가 표시될 가능성도 있다. 데스크탑 앱을 개발하는 개발자라면 이러한 보안적 이슈가 있을 수 있음을 충분히 인지하고 직접 처리해야 한다.
Electron의 장점
그렇다면 이번에는 데스크탑 애플리케이션을 만들기 위한 프레임워크로써의 일렉트론이 어떤 장점을 가졌는지 알아보자.
1. JavaScript 코드베이스
웹 개발자들이라면 각 브라우저의 차이 때문에 "conditional code"를 작성해야 하는 것의 피로함을 알 것이다. 크롬과 firefox 에서는 동작하지만 ie에서는 동작하지 않는 경우 분기처리나 예외처리를 하는 경우도 흔하다.
Electron의 경우 Chromium과 Node.js를 바이너리에 내장하고 있기 때문에, 하나의 JavaScript 코드베이스를 유지하면서 Windows, macOS 및 Linux에서 작동하는 크로스 플랫폼 앱을 만들 수 있다. 따라서 자바스크립트를 사용하는 웹 개발자라면 일렉트론을 통해 새로운 언어를 배울 필요 없이 기존의 언어를 유지하며 데스크탑 애플리케이션을 만들 수 있다. 물론 Frontend Framework 3대장인 Angular, React, Vue Framework도 Electron과 같이 사용할 수 있다.
2. 크로스 플랫폼 지원
윈도우·맥OS·리눅스와 같은 OS 플랫폼에서 동작하는 데스크톱 애플리케이션을 지원하려면 각 OS마다 최적화된 작업이 필요하다. OS별로 API 선언 및 제공이 달라지기 때문에 그에 맞는 상호작용이 가능한 프레임워크나 언어가 필요했다. 하지만 일렉트론의 경우 세 가지 OS에 대한 빌드를 지원하고 설치되도록 설정할 수 있다. 따라서 OS 관련 지식이 부족한 웹 개발자더라도, 플랫폼에 대한 처리의 대부분은 일렉트론이 처리하므로 개발자는 응용 프로그램의 로직적인 부분에 집중할 수 있다.
3. 써드파티 모듈 사용
Node.js의 모든 빌트인 모듈과 써드파티 모듈을 사용할 수 있다. npm 레지스트리에 등록된 대부분의 모듈도 이용 가능하며 Node.js를 통해 파일시스템에 접근하고 네트워크 리소스를 제약 없이 사용할 수도 있다.
4. 꾸준한 릴리즈
Electron 은 https://releases.electronjs.org/ 에서 볼 수 있지만 활발한 업데이트가 이뤄진다. 물론 그만큼 버그도 자주 발견되지만, 바로 버그 픽스 릴리즈가 올라와 매번 따라가기 힘들 정도이기도 하다. 또한 데스크탑 애플리케이션을 위한 다양한 프레임워크 중에서도 오랜 기간 인기를 얻고 있어 그만큼 커뮤니티와 정보가 비교적 많은 편이다.
Electron의 단점
1. 설치 파일 용량 및 메모리 사용량
일렉트론은 구동에 필요한 npm 모듈들도 함께 패키징 되어 있고, UI를 렌더링 하기 위해 크로미움을 사용한다. 크로미움과 Node.js 가 기본적으로 포함되기 때문에 일렉트론으로 개발한 데스크톱 애플리케이션은 기본 용량이 100MB 이상이다. 또한 나중에 설명할 크로미움의 프로세스의 기본 구조를 따라가기 때문에 기본 2~3개 혹은 그 이상의 프로세스를 사용한다. Chromium이 메모리를 미친 듯이 잡아먹는다는 사실은 이미 알 사람은 모두 알 것이라고 생각한다. 이로 인해 초기 설치에 필요한 파일 용량과 설치된 파일의 메모리 사용량이 크다. '왜 이렇게 설치 용량이 큰가요? 메모리를 많이 잡아먹는 것 같은데요?'라는 말은 앞으로 일렉트론으로 개발 및 배포를 할 사람이라면 점점 자연스럽게 받아들이게 될 것이고 크로미움의 구조를 매번 설명하게 될 것이다....
2. 상대적으로 느린 속도
하나의 플랫폼을 위해 특별히 개발되어 최적화된 네이티브 애플리케이션에 비해서는 다양한 플랫폼을 위한 일렉트론은 효율성이 다소 떨어진다.
지금까지 데스크탑 애플리케이션의 특성과 일렉트론이 무엇인지에 대해 가볍게 알아보았다.
다음 포스팅에서는 구체적으로 일렉트론의 프로세스 구조가 어떻게 되어있는지 더 자세히 알아보고, 프로세스 간 통신하는 방법에 대해 알아볼 예정이다.
궁금하다면 구독과 좋아요 !
'Dev Note > Electron' 카테고리의 다른 글
| 2. 일렉트론의 프로세스 구조와 통신에 대해 알아보자. (0) | 2023.03.12 |
|---|---|
| 일렉트론 커스텀 네비게이션바 (0) | 2021.08.24 |
