Electron 배포 가이드: Windows 설치부터 macOS 공증까지
Electron 앱은 개발 환경에서 실행하는 것과 사용자에게 전달하는 과정이 꽤 다릅니다. 개발 중에는 명령 하나로 앱을 열 수 있지만, 실제 배포에서는 운영체제별 패키징과 설치 파일, 코드 서명, macOS 공증, 자동 업데이트까지 연결해야 합니다.
Electron 앱은 개발 환경에서 실행하는 것과 사용자에게 전달하는 과정이 꽤 다릅니다. 개발 중에는 명령 하나로 앱을 열 수 있지만, 실제 배포에서는 운영체제별 패키징과 설치 파일, 코드 서명, macOS 공증, 자동 업데이트까지 연결해야 합니다.
Next.js와 Electron은 둘 다 JavaScript와 TypeScript, React 생태계를 활용합니다. 화면만 만들 때는 꽤 비슷해 보입니다. 컴포넌트를 나누고 상태를 관리하며, npm 패키지를 설치하고 개발자 도구로 화면을 확인하는 흐름도 익숙합니다.
앱 아이콘을 바꾸고 커밋하려다가 아주 기본적인 질문 앞에서 멈췄습니다.
앱 두 개를 아이폰에 올려놓고 하나를 열었더니 빨간 화면에 이 문구가 떴습니다.
앱 아이콘 하나 만드는 데 하루를 썼습니다. 열 번 넘게 갈아엎었고 빌드를 네 번 중간에 끊었습니다. 그 과정에서 알아낸 것 중에 검색해도 잘 안 나오는 게 두 개 있어서 적어둡니다.
성경 지도라는 앱을 만들면서 npx create-expo-app을 치지 않았습니다. 이미 두 스토어에 배포되고 있는 다른 앱의 폴더를 통째로 복사해서 시작했습니다.
앱 하나를 두 스토어에 올리면서 이미지 21개를 만들어야 했습니다. 아이콘, 적응형 아이콘 레이어들, 스플래시, 파비콘, 그리고 꾸민 스토어 스크린샷 12장. 디자인 도구를 열지 않고 전부 명령줄에서 만들었습니다.
앱 하나를 App Store와 Google Play에 동시에 올리면서 이미지를 몇 개나 만들었는지 세어봤습니다. 스크린샷 12장, 스토어 전용 그래픽 2개, 앱 번들에 들어가는 아이콘 자산 7개. 합쳐서 21개입니다. 코드를 다 짜놓고 시작한 마무리 작업인데 결국 여기에 시간을 더 썼습니다.
오늘 성경 지도라는 앱을 App Store와 Google Play 양쪽에 올렸습니다. iOS를 먼저 끝내고 Play Console로 넘어왔는데, 출시 개요 페이지에서 카드 네 장을 보고 잠깐 멈췄습니다.
앱 설명과 키워드를 채우면서 두 스토어의 API 를 항목별로 다 두드려 봤습니다. 콘솔에 들어가지 않고 어디까지 갈 수 있는지 궁금했거든요.