[Electron] 튜토리얼 Part 1: 시작하기 전 알아야 할 모든 것

Electron은 JavaScript, HTML, CSS와 같은 웹 기술을 활용해 Windows, macOS, Linux에서 실행 가능한 데스크탑 애플리케이션을 만들 수 있는 강력한 프레임워크입니다. Chromium과 Node.js를 통합한 구조 덕분에, 단일 코드베이스로 다양한 플랫폼을 지원하며 개발자들에게 친숙한 환경을 제공합니다.

이번 튜토리얼은 Electron을 이용하여 첫 번째 애플리케이션을 구축하고, 이를 패키징 및 배포하는 과정을 단계별로 안내합니다. 먼저 필요한 전제 조건과 도구들을 점검한 후, 실제 코드를 작성하며 전반적인 개발 과정을 이해해 보겠습니다.

개발을 위한 전제 조건

웹 기술 익숙도

Electron의 UI는 HTML과 CSS로 구성되고, JavaScript로 동작을 제어합니다. 기본적인 웹 개발 지식이 있다면 바로 시작할 수 있습니다.

Node.js 및 npm 설치

Electron 프로젝트를 초기화하고 의존성을 관리하려면 Node.js와 npm이 필수입니다.

LTS 버전을 설치하고 터미널에서 버전을 확인할 수 있습니다.

node -v
v18.12.1
npm -v
8.19.2

Electron은 자체 Node.js 런타임을 포함하고 있으므로, 앱을 다 개발하고 이용하는 최종 사용자가 Node.js를 설치할 필요는 없습니다.

Git과 버전 관리

Git을 사용해 소스 코드를 관리하고, GitHub에 업로드하면 협업과 배포가 편리해집니다. git 설치 여부는 git --version으로 할 수 있습니다.

코드 에디터와 CLI 도구

Visual Studio Code 같은 코드 에디터와 기본 터미널(Windows: Command Prompt/PowerShell, macOS: Terminal 등)을 활용하여 코드를 작성하고 실행합니다.