카카오 FE팀, Electron 데스크톱 앱 개발 경험과 주요 이슈 공유

카카오 FE플랫폼팀의 Thomas와 Judy가 Electron v11.2.2를 사용해 데스크톱 애플리케이션을 개발하며 겪은 경험과 기술적 이슈를 공유했다. FE 개발 지식을 활용해 크로스 플랫폼 데스크톱 앱을 구축하는 과정에서 발생한 주요 문제점과 해결 방안을 다루었다.

인증 및 화면 구성 이슈

데스크톱 앱은 로컬 환경에서 동작하므로 소셜 로그인 시 필요한 REDIRECT_URL이 존재하지 않는다. 이를 해결하기 위해 BrowserWindow의 webContents가 감지하는 will-navigate 이벤트를 활용, 인증 완료 후 특정 URL로 이동할 때를 포착해 인증을 처리했다.

또한 하나의 윈도우에 여러 개의 BrowserView를 사용하는 경우, 뷰 간 상태 공유를 위해 메인 프로세스를 경유해야 한다. 뷰가 많아지면 렌더러 프로세스 수가 증가해 저사양 기기에서 렌더링 실패가 발생할 수 있다. 이에 불필요한 뷰 제거, 지연 생성 전략을 적용했으며, 실패 시 render-process-gone 이벤트를 감지해 화면을 다시 그리는 방식으로 대응했다.

업데이트 및 알림 구현

electron-updater를 이용해 Github Releases, S3, 또는 자체 서버를 통한 자동 업데이트를 구현할 수 있다. checkForUpdates는 조용히 업데이트하며, checkForUpdatesAndNotify는 사용자에게 알림을 띄워 확인을 받는다.

데스크톱 알림은 OS별 제약이 심하다. HTML5 Notification API는 serviceWorker 이슈로 버튼 커스텀이 제한적이고, 메인 프로세스의 Notification API는 macOS에서만 커스텀 버튼이 지원된다. node-notifier도 UI 일관성 문제가 있어, 결국 별도의 윈도우 창을 생성해 알림을 구현하는 것이 가장 안정적이었다.

윈도우 제어 및 프린터 연동

상단 바가 없는(frameless) 윈도우 창을 이동시키려면 CSS의 -webkit-app-region: drag을 사용하거나, 마우스 이벤트를 계산해 setWindowBounds로 위치를 갱신하는 방식을 쓴다. 후자가 클릭과 드래그 모두 지원되므로 더 유연하다.

프린터 연동 시에는 serialport를 electron-rebuild로 빌드해야 데스크톱 연결 기기 정보를 정상적으로 가져올 수 있다. 연결 속도 설정 오류로 출력이 안 될 수 있으므로 사용자에게 적절한 속도를 선택하게 하거나 안내하는 것이 중요하다.