데스크톱 플랫폼용 패키징 및 배포
코드 서명과 자동 업데이트를 포함하여 electron-builder로 macOS, Windows, Linux용 설치 프로그램을 만듭니다.
데스크톱 플랫폼용 패키징 및 배포은(는) CoddyKit의 무료 React Academy 강의입니다. 이것은 4개 중 4번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 React Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. React Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
electron-builder 구성
electron-builder는 Electron 앱을 배포 가능한 설치 프로그램으로 패키징하는 표준 도구입니다. 구성은 package.json의 "build" 키에 있으며, 앱 메타데이터(appId, productName), 아이콘 경로, 플랫폼별 대상 형식을 지정합니다.
플랫폼별 빌드 대상
electron-builder는 macOS(dmg 및 zip), Windows(NSIS 설치 프로그램), Linux(AppImage 및 deb)를 지원합니다. 하나의 빌드 명령으로 여러 플랫폼을 대상으로 지정하거나, 최상의 호환성을 위해 CI가 각 플랫폼의 네이티브 실행 환경에서 플랫폼별로 빌드하도록 구성할 수 있습니다.
macOS 코드 서명
Gatekeeper가 보안 경고 없이 사용자가 앱을 열 수 있도록 macOS에서는 Apple Developer 인증서를 사용한 코드 서명이 필요합니다. electron-builder는 빌드 과정에서 macOS 키체인에서 인증서를 읽고 모든 바이너리에 자동으로 서명합니다.
macOS 공증
코드 서명 외에도 최신 macOS에서는 공증이 필요합니다. 앱을 Apple의 공증 서비스에 제출하면 악성 코드를 검사하고 티켓을 발급합니다. electron-builder는 electron-notarize를 통해 공증을 자동화할 수 있으며, macOS 10.15 이상 사용자는 공증 없이는 앱 실행이 차단됩니다.
Windows 코드 서명
Windows에서 SmartScreen이 설치 프로그램을 신뢰하려면 신뢰할 수 있는 인증 기관(CA)의 Authenticode 인증서가 필요합니다. 서명하지 않으면 사용자에게 "Windows protected your PC" 경고가 표시됩니다. 확장 검증(EV) 인증서는 경고를 즉시 없애지만, 표준 OV 인증서는 시간이 지나면서 신뢰를 쌓습니다.
빌드 출력 구조
빌드가 성공하면 electron-builder는 플랫폼별 설치 프로그램을 dist/ 디렉터리에 기록합니다. macOS용 DMG 또는 zip, Windows용 NSIS .exe, Linux용 AppImage 또는 .deb와 함께 자동 업데이트 매니페스트인 latest.yml(또는 latest-mac.yml)을 확인할 수 있습니다.
앱 아이콘
Electron 앱에는 플랫폼별 형식의 아이콘이 필요합니다. Linux용 512x512 PNG, macOS용 ICNS 파일(다중 해상도), Windows용 ICO 파일(다중 해상도)입니다. electron-builder는 --icon 플래그를 사용해 하나의 1024x1024 PNG에서 모든 형식을 생성할 수 있습니다.
electron-updater를 사용한 자동 업데이트
electron-updater 패키지는 electron-builder와 통합되어 자동 업데이트를 제공합니다. 빌드를 GitHub 릴리스 또는 S3에 게시하면 electron-updater가 시작할 때 업데이트를 확인하고, 백그라운드에서 차등 업데이트를 다운로드하며, 사용자에게 다시 시작하라는 메시지를 표시할 수 있습니다.
시작할 때 업데이트 확인
앱이 준비된 후 main.js에서 autoUpdater.checkForUpdatesAndNotify()를 호출하세요. electron-updater는 게시 대상에서 최신 latest.yml 매니페스트를 가져와 버전을 비교하고, 업데이트가 있으면 다운로드한 뒤 설치할 준비가 되었을 때 네이티브 알림을 표시합니다.
ASAR 아카이브
electron-builder는 배포를 위해 애플리케이션의 JavaScript 파일을 하나의 ASAR 아카이브(tar 파일과 유사함)로 묶습니다. 이렇게 하면 파일 시스템 조회가 줄어 시작 성능이 향상되고, 소스 코드를 직접 확인하기가 더 어려워집니다(불가능한 것은 아닙니다).
ASAR에서 네이티브 모듈 압축 풀기
네이티브 Node.js 모듈(.node 파일)은 ASAR 아카이브 내부에서 로드할 수 없으므로 파일 시스템에 압축을 풀어야 합니다. electron-builder에서 asarUnpack을 구성해 네이티브 모듈 패턴을 나열하면 해당 모듈이 아카이브와 나란히 있는 app.asar.unpacked 디렉터리에 배치됩니다.
macOS 공증 요구 사항
단순히 코드에 서명하는 것만으로는 부족한데, macOS 배포에 공증이 필요한 이유는 무엇인가요?
레슨 요약
Electron 앱을 배포하려면 electron-builder 대상을 구성하고, macOS(공증 포함)와 Windows(Authenticode)에 맞게 코드에 서명하며, 필요에 따라 electron-updater로 자동 업데이트를 설정해야 합니다. ASAR 아카이브는 앱을 배포용으로 묶고, 네이티브 모듈은 별도로 압축을 풉니다. 견고한 CI/CD 자동화 절차가 플랫폼별로 이 단계를 자동 처리합니다.
AI 튜터와 함께 React을(를) 배우세요 — 무료
브라우저에서 실제 코드를 작성하고 실행하며, 24/7 AI 튜터로부터 즉각적인 도움을 받고, 웹이나 앱에서 중단한 부분부터 계속 학습하세요.
- 코스
- 88
- 레슨
- 324
자주 묻는 질문
“데스크톱 플랫폼용 패키징 및 배포” 강의는 무료인가요?
네 — “데스크톱 플랫폼용 패키징 및 배포” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 React Academy 강의 전체를 잠금 해제할 수 있습니다. React Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“데스크톱 플랫폼용 패키징 및 배포”에서 뭘 배우나요?
코드 서명과 자동 업데이트를 포함하여 electron-builder로 macOS, Windows, Linux용 설치 프로그램을 만듭니다. 브라우저에서 직접 실행하는 실습 코드로 React Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
React Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 React Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 4번째 강의입니다.
“데스크톱 플랫폼용 패키징 및 배포” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 React Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 React Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.
이 강의의 모든 강의
- Electron 아키텍처: 메인 프로세스와 렌더러 프로세스
- Electron과 React 설정하기
- 프로세스 간 IPC 통신
- 데스크톱 플랫폼용 패키징 및 배포