Electron 앱의 창 위치 및 크기 기억하기

Electron 앱 구현 튜토리얼의 잘 알려진 예제들은 창의 크기나 위치를 복원시키는 코드를 대부분 알려주지 않는다. 필요하다면 알아서 구현해야 한다는 말인가? 다행히도 찾아보니 electron-window-state라는 패키지를 사용하는 방법이 가장 간단할 것 같아서 이용해봤다.

패키지 설치하기

여타 Node.js 패키지들처럼 NPM이나 Yarn을 이용해 설치할 수 있다.

yarn add electron-window-state
# or
npm install --save electron-window-state

런타임에 사용되는 패키지이기 때문에 개발 의존성(--save-dev 등)으로 설치하면 안 된다는 점에 주의하자.

패키지를 설치한 후 이제 몇몇 코드를 구현해야 한다.

반응형

코드 구현하기

공식 깃헙 저장소에서도 샘플 코드를 제공하니 그걸 참고해도 되겠지만 개인적으로 사용하는 코드는 구조가 조금 달라서 필요한 코드만 추려낸 예제를 정리한다.

// 패키지 모듈 임포트
const windowState = require('electron-window-state');

...

let window = null;

...

const createWindow = () => {
  // 창 크기 기본값 설정
  let mainWindowState = windowState({
    defaultWidth: 800,
    defaultHeight: 600
  });

  // 윈도우 생성 시 위치와 크기는 기본값 혹은 기존에 저장된 값을 사용한다
  window = new BrowserWindow({
    x: mainWindowState.x,
    y: mainWindowState.y,
    width: mainWindowState.width,
    height: mainWindowState.height,
    ...
  });

  ...

  // electron-window-state가 윈도우 이벤트를 감지하도록 한다.
  mainWindowState.manage(window);
};

...

app.whenReady().then(() => {
  createWindow();
});

핵심적인 부분은 BrowserWindow 오브젝트를 생성할 때 패키지를 통해서 창 위치나 크기를 간접적으로 지정하는 것과 하단의 manage() 함수를 호출하는 부분이다.

생략된 부분이 많아서 "뭐야?" 할지도 모르겠다. 필요하다면 이전 글에서 사용했던 예제들을 참고해보면 도움이 될지도 모르겠다.

728x90

주의사항

패키지 모듈 자체에는 manage() 함수가 없다는 것에 주의하자. 반드시 인스턴스화한 오브젝트에서 호출해야 한다. 위 예에서는 mainWindowState 변수가 인스턴스화한 오브젝트다.

구현한 앱 창을 강제로 종료시킨 경우 창 위치와 크기 기록이 제대로 저장되지 않는 경우가 있다. 반드시 정상 종료되는 경우로 시험해보자. 예를 들어 Command+Q 키로 종료시킨 경우에는 창 복원이 정상적으로 동작한다.

관련 링크

GitHub - mawie81/electron-window-state: A library to store and restore window sizes and positions for your Electron app

Electron + Svelte로 데스크톱 앱 개발 시작해보기