서비스 모음으로 돌아가기
Developer Brief
Joint — Electron 이식 검증
Next.js + PWA 를 데스크탑으로
운영 중인 Next.js 웹 서비스를 Electron 데스크탑 앱으로 이식할 수 있는지, 상주형 알림 흐름(WebSocket 상시 연결 → 네이티브 알림 → 클릭 라우팅)을 중심으로 검증한 프로토타입입니다. 프레임워크·웹 로딩·알림 경로를 왜 그렇게 선택했는지는 결정 기록 문서에 정리했습니다.
기술 스택
ElectronNext.jsTypeScriptWebSocket (ws)Node.js
아키텍처
서버 · 렌더러 · Electron 쉘 세 조각으로 나누고, 알림을 띄우는 판단은 렌더러가, 실제로 띄우는 일은 메인 프로세스가 맡습니다. 같은 웹 코드가 브라우저에서도 돌아야 하므로 알림 경로를 isElectron 으로 분기했습니다.
Server (Node + ws)
- userId 당 WebSocket 1연결로 모든 방 이벤트를 한 소켓에 실어 보냄
- 방·메시지 브로드캐스트와 presence(online/away/idle) 추적, 시연용 봇이 임의 방에 메시지 주입
Renderer (Next.js)
- WebSocket 수신과 채팅 UI 렌더링, focus·active-room·idle 을 서버에 보고
- isElectron 분기로 알림 경로를 나눔 — Electron 이면 preload 브리지, 브라우저면 Notification API(실서비스에서는 FCM 자리)
Electron Shell
- BrowserWindow 에 backgroundThrottling: false 를 줘 백그라운드에서도 연결 유지
- 트레이 상주 + 네이티브 Notification, 알림 클릭 시 창 복원과 방 이동까지 IPC 로 연결
- Windows 는 setAppUserModelId 가 없으면 알림 표시가 깨져 필수로 설정
스크린샷
