JavaScript, HTML 및 CSS를 사용하여 크로스 플랫폼 데스크톱 앱 구축

웹 테크놀로지

Electron은 웹 개발자가 데스크톱 애플리케이션을 만들 수 있도록 Chromium과 Node.js를 내장하고 있습니다.

크로스 플랫폼

macOS, Windows 및 Linux와 호환되는 Electron 앱은 지원되는 모든 아키텍처에서 세 가지 플랫폼으로 실행됩니다.

오픈 소스

Electron은 OpenJS Foundation과 활발한 기여자 커뮤니티가 유지 관리하는 오픈 소스 프로젝트입니다.

Trusted by best-in-class apps

Popular consumer and rock-solid enterprise apps use Electron to power their desktop experiences.

쉬워진 데스크톱 개발

Electron이 어려운 부분을 처리하므로 애플리케이션의 핵심에 집중할 수 있습니다.

VSCode를 위한 macOS 운영체제 메뉴. 'Code' 메뉴 항목이 선택되어 있고, 하위 메뉴에는 'Visual Studio Code 정보', '업데이트 �확인...', '환경설정', '서비스', 'Visual Studio Code 숨기기', '다른 항목 숨기기', '모두 보기', 'Visual Studio Code 종료' 항목이 있습니다.

네이티브 그래픽 사용자 인터페이스

Electron의 메인 프로세스 API를 사용하여 운영체제의 인터페이스와 상호작용하세요.애플리케이션 윈도우 모양을 사용자 정의하고, 애플리케이션 메뉴를 제어하거나,대화상자 또는 알림을 통해 사용자에게 메시지를 전달하세요.

Electron Fiddle의 자동 업데이트를 위한 대화상자. 사용자에게 v0.27.3으로 업데이트하라는 메시지가 표시됩니다. '새 버전이 다운로드되었습니다. 업데이트를 적용하려면 애플리케이션을 다시 시작하세요.' 아래에는 '나중에'와 '다시 시작' 두 개의 버튼이 있습니다.

자동 소프트웨어 업데이트

Squirrel이 제공하는 Electron의 autoUpdater 모듈을 사용하여 새 버전을 출시할 때마다 macOS와 Windows 사용자에게 소프트웨어 업데이트를 배포하세요.

WhatsApp 설치 프로그램(DMG)을 위한 macOS 창. 'WhatsApp'과 '응용 프로그램' 두 개의 아이콘이 있습니다. 사용자에게 WhatsApp 앱 아이콘을 응용 프로그램 폴더로 드래그하라는 메시지가 표시됩니다.

애플리케이션 설치 프로그램

커뮤니티 지원 도구를 사용하여 macOS의 Apple 디스크 이미지(.dmg), Windows의 Windows Installer(.msi), Linux의 RPM 패키지 관리자(.rpm)와 같은 플랫폼별 도구를 생성하세요.

Rocket.Chat 다운로드 페이지가 열려있는 Mac App Store 창.

앱 스토어 배포

더 많은 사용자에게 애플리케이션을 배포하세요. Electron은Mac App Store(macOS),Microsoft Store(Windows),Snap Store(Linux)를 지원합니다.

크래시 리포트

crashReporter모듈을 사용하여 사용자로부터 JavaScript와 네이티브 충돌 데이터를 자동으로 수집하세요. 이 데이터를 수집하기 위해 타사 서비스를 사용하거나 자체 온프레미스 Crashpad 서버를 설정하세요.

좋아하는 도구를 사용하세요

최신 Chromium의 성능과 함께, Electron은 앱을 구축할 수 있는 자유로운 빈 캔버스를 제공합니다. 프론트엔드 생태계의 선호하는 라이브러리와 프레임워크를 통합하거나, 맞춤형 HTML 코드로 자신만의 길을 개척하세요.

React

Vue.js

Next.js

Tailwind CSS

Bootstrap

Three.js

Angular

TypeScript

webpack

Playwright

Testing Library

Sass

New!

Electron Forge

Electron Forge는 Electron 앱을 빌드하고 배포하기 위한 완벽한 도구 키트입니다. JavaScript 번들링을 위한 최고 수준의 지원과 확장 가능한 모듈 생태계로 Electron 앱을 올바른 방식으로 시작하세요.

시작하기 소스 코드

$ npm init electron-app@latest my-app
✔ 사용자 정의 템플릿 찾는 중: "base"
✔ 디렉토리 초기화 중
✔ 템플릿 준비 중
✔ 템플릿 초기화 중
✔ 템플릿 의존성 설치 중

직접 다운로드

설치

직접 설치 방법을 알아보고 싶으시다면, npm 레지스트리에서 Electron 패키지를 직접 설치하실 수 있습니다.

안정적인 프로덕션 환경을 위해서는 최신 안정 버전을 설치하세요. 좀 더 실험적인 기능을 원하신다면, 프리릴리스나 나이틀리 채널을 사용해보세요.

Stable
Prerelease
Nightly

$ npm install --save-dev electron@latest
# Electron 34.1.1
# Node 20.18.1
# Chromium 132.0.6834.194

API 실험하기

Electron Fiddle

Electron Fiddle을 사용하면 작은 Electron 실험들을 만들고 실행해볼 수 있습니다. 처음 실행하면 빠른 시작 템플릿이 나타나며 — 몇 가지를 수정하고, 원하는 Electron 버전을 선택한 다음 실험해볼 수 있습니다.

Fiddle을 GitHub Gist나 로컬 폴더에 저장하세요. GitHub에 올리면 누구나 주소창에 입력하는 것만으로도 여러분의 Fiddle을 바로 시험해볼 수 있습니다.

다운로드 소스 코드

Screenshot of Electron Fiddle's main window

Electron으로 만든, 사용자들이 사랑하는 앱

모든 산업 분야에 걸쳐 수천 개의 조직들이 크로스 플랫폼 소프트웨어를 만드는 데 Electron을 사용하고 있습니다.