2024. 12. 23. 18:32ㆍDesktop/Electron
닭 잡는데 소 잡는 칼 쓰는 상황
개발 1년 차가 조금 넘어갈 무렵, 다수의 키오스크 기기 안에 들어갈 정보 안내성 프로그램을 제작하는 일을 맡았습니다. 전시, 미디어 아트를 다루는 회사 특성상 프로그램 제작 프로세스는 대부분 유니티로 이루어졌습니다. 유니티는 훌륭한 도구이고, 멋진 효과나 기능을 다루는데 특출 났지만, 저의 경우에 다음과 같은 상황을 겪었습니다.
- 높은 리소스 사용량
유니티는 저장용량과 사용하는 컴퓨팅 자원 모두 많이 사용합니다. 때문에 프로그램에 제공하려는 기능이 단순할수록 불필요한 사양을 많이 요구하게 되었습니다. 예를 들어, 미니 PC 스펙의 컴퓨터에서는 유니티를 구동하는 것 자체가 너무 많은 자원을 사용하여, 속도가 느려지는 등의 사용자 경험에 부정적인 영향을 끼쳤습니다. 또한 이를 방지하기 위해 하드웨어에 더 많은 금액을 투자를 해야만 하는 문제가 있었습니다.
- 유니티에 대한 어려움
저의 주요 기술 스택은 웹 기술이며, 유니티에는 익숙하지 않고 제대로 배운 적도 없습니다. 유니티를 차근차근 배워 프로그램을 제작하기엔 시간이 부족하고, 품질을 보장하기도 어렵다고 판단했습니다. 따라서 기존에 잘 아는 언어를 최대한 활용할 수 있는 방법을 찾는 방법을 살펴보았습니다.
- UI 제작의 한계점
유니티도 UI 툴을 지원하고, 에셋스토어에서 많은 UI 관련 프레임워크나 리소스를 제공합니다. 하지만 커스텀 UI를 제작하려면 결국 유니티 생태계 바깥의 기술이나 기능을 사용해 해당 UI를 가져와야 했습니다. 개인적으로 포토샵이나 일러스트레이터 등을 잘 다루지 못하는데, 외부 툴을 사용해 해당 UI를 이미지로 잘라와 사용하는데 소요되는 시간이 비효율적이라고 느꼈습니다.
때문에 제가 새롭게 선택한 프레임워크는 일렉트론(Electron)이었습니다.
일렉트론이란 무엇인가?
일렉트론은 웹 기술을 사용하여 데스크톱 애플리케이션을 개발할 수 있도록 해주는 프레임워크입니다. Node.js 와 Chromium을 기반으로 동작하며, 같은 코드 베이스로 Windows, MacOS, Linux에서 동작할 수 있도록 해줍니다.
Node.js 는 Electron 프로그램이 동작할 환경을 조성하고 컴퓨터와 직접적으로 상호작용합니다. 앱의 수명 주기를 관리하거나, 로컬 자원에 접근하는 등의 일을 수행합니다. 일종의 백엔드라고 불 수도 있겠습니다. 이것을 메인 프로세스(main process)라고 부릅니다.
Chromium 은 사용자가 보는 화면(창) 을 구성하고 사용자와 상호작용합니다. UI, 인터랙션 표시, 미디어 재생, 데이터 입출력 등을 수행합니다. 일종의 프론트엔드로 이해할 수 있겠습니다. 이것을 렌더러 프로세스(renderer process)라고 부릅니다.
렌더러 프로세스는 일렉트론에서 여러 개가 있을 수 있습니다. 인터넷 브라우저 창을 여러 개 띄우는 것과 같습니다. 각 창은 독립적인 렌더러 프로세스상에서 구동합니다.
메인 프로세스와 렌더러 프로세스를 서로 연결해 둘 사이의 통신을 하는 채널이 있습니다. 이를 IPC (Inter-Process Communication) 통신이라고 부릅니다. IPC 로 데이터를 송수신하거나 명령을 전달할 수 있습니다.
왜 일렉트론인가?
제가 생각한 Electron 의 장점은 다음과 같습니다.
- 웹 기술을 기반으로 하는 개발
HTML, CSS, Javascript 만으로 데스크톱 앱을 개발할 수 있습니다. 주 기술 스택이 웹 쪽인 저에게는 이것만 한 조건이 없습니다. 과거 다른 데스크톱 기반 앱을 개발할 때, 기능보다도 UI 구현에 애를 먹었던 경험이 있습니다. JavaFX(자바 기반 UI 앱 제작 프레임워크) 나 PyQt(파이썬 기반 UI 앱 제작 프레임워크) 등을 잠깐 만질 기회가 있었는데, 해당 언어 숙지 + 프레임워크 학습 이중고를 겪은 터라, 기존에 익숙한 언어로 바로 개발을 진행할 수 있다는 것은 큰 장점입니다.
- 웹 프레임워크 사용 가능
Electron 은 브라우저 엔진인 Chromium 으로 화면을 구성합니다. 화면 랜더링 방식이 웹 기술을 사용하기 때문에 다양한 React, Vue, Angular 등 웹 기반 프레임워크들을 사용 가능하며, 해당 프레임워크에서 파생된 다른 플러그인, 프레임워크들도 통합이 가능합니다. 디자인 프레임워크 또한 사용 가능해서 웹에 적용하는 UI를 그대로 Electon에서 사용 가능합니다. 이는 앱 구성의 프론트엔드 부분의 학습곡선을 상당히 경감시켜 주고, 익숙한 개발환경을 통해 생산성을 높일 수 있습니다.
- 검증된 기술과 커뮤니티
Electron 을 사용해서 서비스하는 앱은 VScode, slack, Figma, Discord 등 유명 프로그램이 포진하고 있습니다. 글로벌 기업들이 사용하는 만큼 안정성과 성능이 입증되었으며, 넓은 사용자층을 바탕으로 한 플러그인, 프레임워크 또한 충실히 갖추어져 있습니다. 이를 통해 개발자는 효율적으로 데스크톱 앱을 개발, 배포할 수 있습니다.
- 크로스 플랫폼 개발
하나의 코드 베이스(Javascript) 만으로 다양한 운영체제를 가진 데스크톱 앱을 만들 수 있는 호환성은 분명한 장점입니다. 빌드 도구에서 설정을 조정하면 각 OS 별로 맞는 설치 파일을 빠르게 만들 수 있습니다.
다만 아쉬운 점들도 분명 존재합니다.
- 네이티브 앱보다 낮은 성능, 많은 리소스 사용량
Electron의 Node.js 와 Chromium 은 분명 웹 개발자에게 친숙한 환경이지만, Chronium 특성상 시스템의 성능을 최대한으로 사용하기엔 부족합니다. 백그라운드에서 앱을 2개 사용하는 것이니, 네이티브 앱에 비하면 용량이 크고, 메모리도 많이 사용합니다. 또한 Node.js 와 Chromium 프로세스를 2개를 거치는 경우 동작 과정도 비효율적이 됩니다.
- 복잡한 보안, 통신 관련 설정
Electron 은 웹 엔진과 로컬 컴퓨팅에 동시에 접근할 수 있는 환경입니다. 이에 외부에서 실행된 악의적 공격에 노출될 가능성이 커서 보안 환경에 대해 신경 써야 할 것이 많습니다. 또한 보안상 메인 프로세스와 렌더러 프로세스가 분리되어 있어 각 프로세스가 할 일을 별개 스크립트로 분리해야 하고, 이를 IPC로 연결시켜는 추가 작업이 필요합니다.
- 모바일 개발 불가
Electron 은 크로스 플랫폼 앱 개발을 표방하긴 하지만 모바일 앱을 지원하지 않습니다. 때문에 모바일에서 크로스 플랫폼 앱을 만들려면 React Native 나 Flutter 같은 별도 프레임워크를 사용해야 합니다.
지금까지 Electron 을 선택한 이유와 간단한 개요를 살펴보았습니다. 다음 포스팅에서는 Electron의 프로세스가 왜 분리되어 있고, 보안 설정이 왜 다른 앱 프레임워크에 비해 까다로운지 다루어보겠습니다.
2025.01.09 - [Desktop/Electron] - [Electron] 2. 일렉트론이 보안상 까다로운 이유
참고
'Desktop > Electron' 카테고리의 다른 글
| [Electron] 3. 일렉트론 설치와 실행 (3) | 2025.01.20 |
|---|---|
| [Electron] 2. 일렉트론이 보안상 까다로운 이유 (5) | 2025.01.09 |