"일렉트론 vs. 타우리" 나에게 적합한 크로스 플랫폼 프레임워크는?

러스트 기반의 타우리(Tauri)냐, 자바스크립트 기반 일렉트론(Electron)이냐? 자신의 프로젝트에 이상적인 프레임워크는 무엇인지 알아보자.

ⓒ Getty Images Bank

크로스 플랫폼 애플리케이션에 관해 대부분 개발자가 동의하는 한 가지를 꼽으라면 시중에 나와 있는 많은 크로스 플랫폼 프레임워크 중 하나를 사용하는 것보다 HTML, CSS, 자바스크립트를 사용해서 GUI를 만드는 편이 더 쉽다는 것이다. 일렉트론과 같은 프레임워크는 두 세계의 장점을 모두 제공한다. 자바스크립트 또는 다른 언어로 애플리케이션을 만들고 웹 브라우저에서 HTML을 앱의 GUI로 사용할 수 있다.

이 분야에서 일렉트론이 가장 유명하지만, 유일한 프레임워크는 아니다. 일렉트론과 같은 맥락의 프레임워크로 타우리가 있다. 일렉트론에 비해 더 새로운 프로젝트인 만큼 아직 기반은 비교적 빈약하지만 타우리 내부에는 주목할 만한 아키텍처 차이점이 있다. 몇 가지 중요한 측면에서 타우리 프로젝트는 일렉트론으로 개발된 프로젝트에 비해 더 컴팩트하고 더 미래지향적이며 더 강력하고 유연하다.

두 프레임워크를 나란히 두고 비교해 보자.

일렉트론의 작동 방식

대부분 사람은 지금 이 글을 웹 브라우저에서 읽고 있을 것이다. 일렉트론의 핵심 기술이 바로 웹 브라우저다.

깃허브에서 개발한 일렉트론은 핵심 웹 브라우저 프로젝트인 구글 크롬, 마이크로소프트 엣지의 기반인 크로미엄(Chromium), 그리고 Node.js(및 구글 V8) 자바스크립트 런타임에 의존한다. 일렉트론 프로젝트는 애플리케이션 코드와 함께 크로미엄 기반 웹 브라우저의 포터블 인스턴스를 다시 패키징한다. 앱을 실행하면 앱이 브라우저를 실행하고, 브라우저는 번들로 포함된 자바스크립트 기반 애플리케이션을 로드하는 방식이다.

웹 브라우저에서 가능한 모든 것은 일렉트론 애플리케이션에서도 가능하다. 사실 일렉트론 앱은 웹 브라우저보다 더 많은 일을 할 수 있다. 패키징된 브라우저 요소에는 전통적입 브라우저 기반 앱(가령 프로그레시브 웹 앱)은 할 수 없는 방식으로 로컬 시스템을 다룰 권한이 있기 때문이다.

인기 있는 애플리케이션 상당수가 일렉트론을 사용한다. 텍스트 편집기이자 구성 가능한 IDE인 비주얼 스튜디오 코드도 그중 하나다. 디스코드 메시징 앱, 옵시디언 필기 프로그램, 도커 데스크톱, 깃허브 데스크톱 슬랙, 베이스캠프 3도 모두 일렉트론 앱이다.

일렉트론 앱 중에서는 좋지 않은 의미로 유명한 사례도 있다. 예를 들어 마이크로소프트 팀즈는 최근 빌드에서 대폭 개선되긴 했지만, 일렉트론 앱이라는 이유로 많은 비판을 받고 있다.

일렉트론 기반 앱에 대한 일반적인(전적으로 타당한) 비판 중 하나는 점유 공간이다. 일렉트론 앱에는 고유한 자체 웹 브라우저가 함께 제공되는데, 실행 시 완전히 별도의 웹 브라우저 프로세스를 가동해야 한다. 일렉트론 앱은 수백 메가바이트 또는 그 이상의 디스크 공간을 소비하며 메모리 사용 공간도 일반적으로 비슷한 용량을 점유한다. 물론 최신 하드웨어에서 일반적으로 이 정도 부하는 문제가 되지 않지만 더 중요한 질문은 더 나은 방법이 있지 않냐는 것이다.

VS 코드는 인기 있는 일렉트론 앱이다. 모든 시각적 요소와 상호운용성은 독립적인 브라우저 구성요소에 의해 제공된다. 전체적인 시스템과의 상호작용도 이 구성요소가 처리한다. ⓒ Foundry

타우리의 작동 방식

러스트로 만들어진 타우리 프로젝트의 기본 개념도 일렉트론과 비슷하다. 웹 페이지를 UI로 사용하는 앱을 만들고, 이 앱을 번들로 묶어 독립적인 웹 브라우저를 통해 실행되도록 한다.

타우리의 큰 차이점은 브라우저 전체를 번들로 묶지 않는다는 점이다. 대신 타우리는 앱이 실행되는 운영체제가 무엇이든 그에 맞는 네이티브 시스템 웹뷰 구성요소를 사용한다. 따라서 몇 메가바이트의 작은 번들로 앱을 제공할 수 있다. 타우리 번들은 WRY를 사용해 네이티브 웹 뷰와 통신하며, 시스템 트레이 및 기타 리소스와의 인터페이스, 그리고 창 관리에는 tao를 사용한다.

대부분의 HTML/CSS/JS 프레임워크를 사용할 수 있고 Vue.js, 스벨트(Svelte), 리액트, 솔리드JS(SolidJS), 앵귤러(Angular), 프리액터(Preact), 유(Yew), 렙토스(Leptos), 시카모어(Sycamore) 등 많은 인기 있는 프레임워크를 기본 지원한다. 또한 기존 웹 프로젝트를 타우리의 백엔드로 마이그레이션할 수도 있다.

타우리의 단점을 굳이 하나 꼽자면 러스트에 대해 어느 정도의 경험이 필요하다는 점이다. 앱의 백엔드 또는 “서버 측” 부분은 러스트로 작성되며, 전체 패키지는 독립 러스트 실행 파일로 컴파일되어 제공된다.

전체 애플리케이션을 클라이언트 측 자바스크립트 앱으로 작성할 수 있지만 이 경우 기능이 상당히 제약된다. 또한 백엔드에 러스트 외의 다른 런타임 또는 언어(예를 들어 파이썬)를 사용하는 것도 가능은 하지만 여전히 러스트에 대한 편향성이 강한 프레임워크다.

러스트가 아직 익숙하지 않다면 타우리 리포지토리의 예제 애플리케이션을 통해 러스트의 기초를 익히고 특정 개념이 어떻게 실행되는지 살펴볼 수 있다(예를 들어 실행 시 스플래시 화면이 있는 앱).

일렉트론과 달리 적어도 아직까지는 타우리로 빌드되는 주류 데스크톱 애플리케이션이 많지는 않다. 일렉트론의 오랜 기반 때문일 수도 있고, 자바스크립트 대비 러스트의 상대적인 복잡성 때문일 수도 있다. 그러나 상용과 오픈소스를 포괄한 꽤 많은 앱이 타우리로 만들어지고 있다. 예를 들어 포스트레스SQL용 GUI 클라이언트 pg매직(pgMagic), 파일 전송 툴 페이로드(Payload), 팀 채팅 앱 누어(Noor) 등이 있다.

타우리로 작성된 파일 전송 앱인 페이로드. 런타임 메모리 사용량은 마이크로소프트 윈도우에서 4MB에 불과하면서도 일렉트론 앱에서 가능한 모든 시스템 수준 기능에 똑같이 액세스할 수 있다. ⓒ Foundry

타우리냐, 일렉트론이냐?

지금은 일렉트론이 가장 유명하고 잘 알려진 크로스 플랫폼 UI 프레임워크다. 일렉트론은 많은 비판에도 불구하고 우수한 시스템 통합과 풍부한 GUI를 갖춘 크로스 플랫폼 애플리케이션을 제공하기 위한 기본 선택으로 여전히 인기가 높다. 그러나 일렉트론의 메모리 소비와 바이너리 크기에 대한 불만은 타당하다. 또한 이러한 문제점이 금방 사라지지도 않을 것이다. 일렉트론 앱의 설계 자체와 밀접하게 연관된 문제인 만큼 해결하려면 일렉트론 또는 기반 브라우저 구성요소를 재설계하는 수밖에 없기 때문이다.

타우리 앱은 디스크 공간과 메모리를 덜 사용하도록 처음부터 다르게 설계됐다. 그러나 새로운 기술이고, 비교적 새로운 언어이자 개발 생태계도 아직 초기인 러스트에 크게 의존한다는 점에서 불리하다. 타우리를 사용하려면 백엔드와 프론트 엔드에 각각 러스트와 자바스크립트를 사용해야 한다.

결론

러스트에 이미 능숙하거나 러스트를 익힐 계획이고 결과물과 그 결과물의 메모리 소비량이 중요하다면 타우리가 최선이다. 자바스크립트에 이미 능숙하고(특히 다른 일렉트론 기반 앱을 제공한 경험이 있고 그 지식을 활용하고자 하는 경우) 일렉트론의 메모리 소비량과 바이너리 크기가 문제가 되지 않는다면 일렉트론이 최선이다.
editor@itworld.co.kr

Serdar Yegulalp editor@itworld.co.kr
저작권자 한국IDG & ITWorld, 무단 전재 및 재배포 금지