David Brain

Desktop Starter Kit

3 min read

ID: key_26_03_01_15_21_10_28_76200 Created date: Jan 15 2026 Thursday, 3rd 21:10

연관 문서

1. 코어 엔진 (The Engine)

  • Framework: Electron 30+

    • Chromium(브라우저)과 Node.js를 하나로 묶어 웹 기술로 데스크탑 앱을 만듭니다.

  • Frontend: Next.js (Static Export 모드)

    • Next.js의 편리한 라우팅과 컴포넌트 구조를 그대로 가져와 UI를 구성합니다.

  • Language: TypeScript

    • 메인 프로세스(OS 제어)와 렌더러 프로세스(UI 화면) 간의 통신 시 타입 안정성을 보장합니다.

2. 데스크탑 특화 기능 (Desktop Features)

웹 브라우저에서는 불가능하지만, Electron에서는 가능한 핵심 기능들입니다.

  • OS API 접근: 유저의 로컬 파일 시스템 읽기/쓰기, 알림 영역(System Tray) 아이콘 생성.

  • IPC (Inter-Process Communication): 보안을 위해 화면(Renderer)과 시스템(Main)을 분리하고, 전용 채널을 통해 안전하게 데이터를 주고받는 구조(contextBridge 활용).

  • Native Menu: 윈도우/맥 상단 메뉴 바 커스텀.

  • Auto Update: electron-updater를 활용하여 유저가 앱을 실행할 때 자동으로 최신 버전을 체크하고 업데이트.

3. 로컬 데이터 관리 (Offline-First)

데스크탑 앱은 인터넷이 끊겨도 작동해야 하는 경우가 많습니다.

  • Local DB: SQLite 또는 Realm

    • 서버(Spring Boot)와 통신이 안 될 때를 대비해 로컬 기기에 데이터를 직접 저장합니다.

  • Key-Value Store: electron-store

    • 유저의 설정값(다크모드, 자동로그인 등)을 저장하는 가장 단순하고 확실한 방법입니다.

4. 빌드 및 배포 (Packaging)

  • Builder: electron-builder

    • 한 번의 설정으로 Windows(.exe, .msi), macOS(.dmg, .pkg), Linux용 설치 파일을 모두 생성합니다.

  • Code Signing (보안 필수):

    • 외주 프로젝트 시 매우 중요합니다. 애플과 마이크로소프트로부터 인증서를 받아 ‘서명’을 해야 유저가 설치할 때 “알 수 없는 게시자” 경고가 뜨지 않습니다.

연관 메일

Graph View