Skip to main content

애플리케이션 패키징

Electron으로 앱을 배포하려면 앱을 패키징하고 브랜딩을 변경해야 한다. 이를 위해 특수화된 도구를 사용하거나 수동으로 작업할 수 있다.

도구 활용하기​

여러분의 Electron 앱을 패키징하고 배포하기 위해 사용할 수 있는 몇 가지 도구가 있다. 우리는 Electron Forge를 사용할 것을 권장한다. 해당 도구의 문서를 직접 확인하거나, Electron 튜토리얼의 패키징 및 배포 부분을 참고할 수 있다.

수동 패키징​

수동 방식을 선호한다면, 애플리케이션을 배포하는 두 가지 방법이 있다:

  • 미리 빌드된 바이너리 파일을 사용하는 방법
  • 앱 소스 코드 아카이브를 사용하는 방법

사전 빌드된 바이너리 사용​

앱을 수동으로 배포하려면 Electron의 사전 빌드된 바이너리를 다운로드해야 한다. 그런 다음 앱을 포함한 폴더를 app으로 이름을 변경하고, 아래 예제와 같이 Electron의 리소스 디렉터리에 배치한다.

note

아래 예제에서 Electron의 사전 빌드된 바이너리 위치는 electron/로 표시한다.

macOS
electron/Electron.app/Contents/Resources/app/
├── package.json
├── main.js
└── index.html
Windows and Linux
electron/resources/app
├── package.json
├── main.js
└── index.html

그런 다음 macOS에서는 Electron.app, Linux에서는 electron, Windows에서는 electron.exe를 실행하면 Electron이 앱으로 시작된다. 이제 electron 디렉터리를 사용자에게 배포할 준비가 완료된다.

앱 소스 코드 아카이브(asar) 활용하기​

앱의 모든 소스 파일을 복사하여 배포하는 대신, asar 아카이브로 앱을 패키징하면 Windows와 같은 플랫폼에서 파일 읽기 성능을 향상시킬 수 있다. 단, Parcel이나 Webpack과 같은 번들러를 이미 사용하고 있지 않은 경우에 해당한다.

asar 아카이브를 사용해 app 폴더를 대체하려면, 아카이브 파일을 app.asar로 이름을 변경한 후 아래와 같이 Electron의 리소스 디렉터리에 넣어야 한다. 그러면 Electron이 아카이브를 읽고 이를 기반으로 실행을 시작한다.

macOS
electron/Electron.app/Contents/Resources/
└── app.asar
Windows
electron/resources/
└── app.asar

asar 사용 방법에 대한 더 자세한 내용은 electron/asar 저장소에서 확인할 수 있다.

다운로드한 바이너리로 리브랜딩하기​

Electron으로 앱을 번들링한 후, 사용자에게 배포하기 전에 Electron을 리브랜딩하고 싶을 것이다.

  • Windows: electron.exe 파일을 원하는 이름으로 변경할 수 있으며, rcedit 같은 도구를 사용해 아이콘 및 기타 정보를 수정할 수 있다.

  • Linux: electron 실행 파일을 원하는 이름으로 변경할 수 있다.

  • macOS: Electron.app를 원하는 이름으로 변경할 수 있으며, 다음 파일들에서 CFBundleDisplayName, CFBundleIdentifier, CFBundleName 필드도 함께 변경해야 한다:

    • Electron.app/Contents/Info.plist
    • Electron.app/Contents/Frameworks/Electron Helper.app/Contents/Info.plist

    또한, Activity Monitor에서 Electron Helper가 표시되지 않도록 헬퍼 앱의 이름도 변경할 수 있다. 단, 헬퍼 앱의 실행 파일 이름도 함께 변경해야 한다.

    리브랜딩된 앱의 구조는 다음과 같다:

MyApp.app/Contents
├── Info.plist
├── MacOS/
│   └── MyApp
└── Frameworks/
    └── MyApp Helper.app
        ├── Info.plist
        └── MacOS/
            └── MyApp Helper
note

소스 코드를 빌드하여 제품 이름을 변경하는 방식으로도 Electron을 리브랜딩할 수 있다. 이를 위해 args.gn 파일에서 제품 이름에 해당하는 빌드 인수(electron_product_name = "YourProductName")를 설정한 후 다시 빌드해야 한다.

단, 소스 코드를 컴파일하기 위한 환경을 설정하는 것은 간단하지 않으며 상당한 시간이 소요되기 때문에 이 방법은 권장하지 않는다.