NEMOKOALA
서비스 모음ImageGenTossMeNemoDrop/ClipBoardJoint — Electron 이식 검증
서비스 모음으로 돌아가기

Developer Brief

Joint — Electron 이식 검증

Next.js + PWA 를 데스크탑으로

운영 중인 Next.js 웹 서비스를 Electron 데스크탑 앱으로 이식할 수 있는지 검증하려고 만든 프로토타입입니다. 디스코드·슬랙류의 상주형 알림 흐름(WebSocket 상시 연결 → 네이티브 알림 → 클릭 시 해당 방으로 라우팅)을 최소 구성으로 재현해, 이식할 때 실제로 걸림돌이 되는 지점만 골라 확인했습니다. 검증 과정과 선택의 근거는 결정 기록 문서로 따로 정리했습니다.

결정 기록GitHub 보기

핵심 정보

  • backgroundThrottling: false 로 창을 최소화해도 WebSocket 연결과 타이머가 죽지 않게 유지
  • close 를 종료가 아닌 트레이 숨김으로 처리하고, app.isQuitting 플래그로 완전 종료와 구분
  • contextBridge 로만 렌더러 ↔ 메인을 잇고, 렌더러에서 require 직접 사용은 차단
  • 포커스·현재 방·idle 상태를 서버에 보고해 이미 보고 있는 방의 알림은 생략

기술 스택

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 가 없으면 알림 표시가 깨져 필수로 설정

문제 · 해결

문제

창을 최소화하면 Chromium 이 백그라운드 렌더러의 타이머·네트워크를 스로틀링해, 정작 알림이 가장 필요한 상황에서 WebSocket 이 끊기거나 메시지 수신이 지연됨

해결

BrowserWindow 의 webPreferences 에 backgroundThrottling: false 를 줘 최소화 상태에서도 연결과 타이머를 유지. 이식 가능 여부를 가르는 핵심 조건이라 가장 먼저 확인

문제

이미 보고 있는 방의 메시지까지 알림이 떠 알림이 금방 소음이 됨. 반대로 최소화 상태를 '활성'으로 오인하면 필요한 알림을 놓침

해결

렌더러가 focus·현재 방·idle 을 서버에 보고하고, 창이 포커스된 상태에서 해당 방을 보고 있으면 알림을 생략. 최소화 시 visibilitychange·blur 가 실제로 발생하는지 확인해 presence 판정의 전제를 검증

향후 계획

아직 개발하지 않았지만, 현재 한계를 인지하고 다음 단계로 고려하는 항목입니다.

예정

브라우저 경로를 FCM(Service Worker Push)으로 구현

Electron 경로는 네이티브 알림으로 검증했지만, 같은 코드가 브라우저에서 돌 때는 앱이 닫혀 있으면 알림을 보낼 방법이 없어 현재는 Notification API 로 best-effort 처리한 자리표시 상태. 실제 서비스에 이식하려면 이 경로를 FCM 으로 채워야 함

다른 서비스

ImageGenAI 이미지 생성·공유TossMe토스로 바로 송금NemoDrop가입 없이 파일·메모 공유ClipBoard클립보드 히스토리 매니저