Skip to main content

애플리케이션 패키징

튜토리얼 따라하기

이 문서는 Electron 튜토리얼의 5부에 해당한다.

  1. 필수 조건
  2. 첫 번째 앱 만들기
  3. 프리로드 스크립트 사용하기
  4. 기능 추가하기
  5. 애플리케이션 패키징
  6. 배포 및 업데이트

학습 목표​

이번 튜토리얼에서는 Electron Forge를 사용해 앱을 패키징하고 배포하는 기본적인 내용을 다룬다.

Electron Forge 사용하기​

Electron은 코어 모듈에 패키징 및 배포를 위한 도구를 포함하고 있지 않다. 개발 모드에서 동작하는 Electron 앱을 만들었다면, 사용자에게 배포할 수 있는 패키지 앱(일반적으로 배포 가능 파일이라고 함)을 생성하기 위해 추가 도구를 사용해야 한다. 배포 가능 파일은 설치 프로그램(예: Windows의 MSI) 또는 포터블 실행 파일(예: macOS의 .app) 형태일 수 있다.

Electron Forge는 Electron 앱의 패키징과 배포를 한 번에 처리하는 올인원 도구다. 내부적으로는 여러 기존 Electron 도구(예: @electron/packager, @electron/osx-sign, electron-winstaller 등)를 하나의 인터페이스로 통합하여, 이들을 직접 연결할 필요 없이 편리하게 사용할 수 있도록 한다.

프로젝트를 Forge로 가져오기​

프로젝트의 devDependencies에 Electron Forge의 CLI를 설치하고, 기존 프로젝트를 편리한 변환 스크립트를 통해 가져올 수 있다.

npm install --save-dev @electron-forge/cli
npx electron-forge import

변환 스크립트가 완료되면, Forge가 package.json 파일에 몇 가지 스크립트를 추가했을 것이다.

package.json
  //...
  "scripts": {
    "start": "electron-forge start",
    "package": "electron-forge package",
    "make": "electron-forge make"
  },
  //...
CLI 문서

make 및 다른 Forge API에 대한 더 많은 정보는 [Electron Forge CLI 문서][]를 참고한다.

또한, package.json 파일에는 devDependencies에 몇 가지 패키지가 추가되었고, 설정 객체를 내보내는 새로운 forge.config.js 파일이 생성되었을 것이다. 미리 구성된 설정에는 각 대상 플랫폼에 대한 여러 메이커(배포 가능한 앱 번들을 생성하는 패키지)가 포함되어 있다.

배포 가능한 파일 생성​

배포 가능한 파일을 생성하려면 프로젝트의 새로운 make 스크립트를 사용한다. 이 스크립트는 electron-forge make 명령어를 실행한다.

npm run make

make 명령어는 두 단계로 구성된다:

  1. 먼저 electron-forge package를 실행하여 앱 코드와 Electron 바이너리를 함께 묶는다. 패키징된 코드는 특정 폴더에 생성된다.
  2. 그런 다음 이 패키징된 앱 폴더를 사용해 각각의 설정된 메이커에 대해 별도의 배포 가능한 파일을 생성한다.

스크립트 실행 후 out 폴더가 생성되며, 이 폴더에는 배포 가능한 파일과 패키징된 앱 코드가 포함된 폴더가 함께 들어 있다.

macOS 출력 예시
out/
├── out/make/zip/darwin/x64/my-electron-app-darwin-x64-1.0.0.zip
├── ...
└── out/my-electron-app-darwin-x64/my-electron-app.app/Contents/MacOS/my-electron-app

out/make 폴더에 있는 배포 가능한 파일은 바로 실행할 수 있다. 이제 첫 번째로 번들링된 Electron 애플리케이션을 성공적으로 생성한 것이다.

배포 가능한 파일 형식

Electron Forge는 운영체제별로 다양한 형식(예: DMG, deb, MSI 등)의 배포 가능한 파일을 생성하도록 설정할 수 있다. 모든 설정 옵션은 Forge의 Makers 문서를 참고한다.

애플리케이션 아이콘 생성 및 추가

커스텀 애플리케이션 아이콘을 설정하려면 몇 가지 설정을 추가해야 한다. 자세한 내용은 [Forge의 아이콘 튜토리얼][]을 참고한다.

Electron Forge 없이 패키징하기

코드를 직접 패키징하거나 Electron 앱 패키징의 내부 동작 방식을 이해하고 싶다면, 전체 [애플리케이션 패키징][] 문서를 확인한다.

중요: 코드 서명하기​

최종 사용자에게 데스크톱 애플리케이션을 배포할 때는 반드시 코드 서명을 하는 것을 강력히 권장한다. 코드 서명은 데스크톱 애플리케이션 출시 과정에서 중요한 단계이며, 튜토리얼의 마지막 부분에서 자동 업데이트를 구현할 때 필수적이다.

코드 서명은 특정 소스에서 데스크톱 애플리케이션을 생성했음을 인증하는 보안 기술이다. Windows와 macOS는 각각의 운영체제에 맞는 코드 서명 시스템을 가지고 있으며, 서명되지 않은 애플리케이션을 다운로드하거나 실행하는 것을 어렵게 만든다.

macOS에서는 앱 패키징 단계에서 코드 서명을 진행한다. Windows에서는 배포 가능한 설치 프로그램에 서명을 한다. 이미 Windows와 macOS용 코드 서명 인증서를 가지고 있다면, Forge 설정에 자격 증명을 입력할 수 있다.

info

코드 서명에 대한 자세한 정보는 Forge 문서의 macOS 앱 서명하기 가이드를 참고한다.

forge.config.js
module.exports = {
  packagerConfig: {
    osxSign: {},
    // ...
    osxNotarize: {
      tool: 'notarytool',
      appleId: process.env.APPLE_ID,
      appleIdPassword: process.env.APPLE_PASSWORD,
      teamId: process.env.APPLE_TEAM_ID
    }
    // ...
  }
}

요약​

Electron 애플리케이션을 사용자에게 배포하려면 패키징 작업이 필요하다. 이 튜토리얼에서는 Electron Forge를 통해 앱을 가져오고, 패키징 및 설치 프로그램 생성을 설정하는 방법을 다뤘다.

사용자의 시스템에서 애플리케이션을 신뢰받으려면, 배포 가능한 파일이 진본이며 변조되지 않았음을 디지털 서명을 통해 증명해야 한다. 코드 서명 인증서 정보를 설정하면 Forge를 통해 앱에 서명할 수 있다.