Electron 팁 모음

2021년 12월 29일 수정

이 글은 Electron과 관련된 몇 가지 팁을 정리한다. 딱히 정해진 카테고리는 없으며 개인적으로 유용하다 싶은 내용을 무분별(?)하게 정리했다.

macOS에 어울리는 타이틀바 숨기기

아래와 같이 BrowserWindow 생성 시 titleBarStyle 을 hiddenInset 으로 설정하면 타이틀 컨트롤만 남고 타이틀바 자체는 사라진다.

window = new BrowserWindow({
    width: width / 1.25,
    height: height / 1.25,
    titleBarStyle: 'hiddenInset',
    webPreferences: {
      nodeIntegration: true
    }
  });

타이틀바에 있던 닫기나 풀스크린 버튼 등의 컨트롤과 기능은 그대로 남기 때문에 타이틀바 영역을 원하는대로 꾸밀 수 있다.

타이틀바가 없을 때 윈도우를 드래그로 옮길 수 있게 하기

타이틀바를 숨기면 기본적으로 윈도우를 옮길 방법이 없다. 이 경우 아래와 같은 CSS를 이용해 드래그 영역을 지정할 수 있다.

-webkit-app-region: drag;

상단 툴바의 여백이나 터치나 클릭 이벤트를 받지 않는 넓은 영역에 지정하면 괜찮을 것 같다.

iframe 사용하기

안타깝지만 Electron에서 iframe 태그는 사용할 수 없다. 대신 웹뷰를 별도로 붙일 수 있으니 이 방법을 사용해보자.

우선 BrowserWindow 인스턴스 생성 시 webviewTag 옵션이 추가로 필요하다.

window = new BrowserWindow({
    width: width / 1.25,
    height: height / 1.25,
    titleBarStyle: 'hiddenInset',
    webPreferences: {
      nodeIntegration: true,
      webviewTag: true,
    }
  });

이제 iframe 대신 webview 태그를 사용해보자.

<webview src="https://foo.bar/page" style="width: 100%; height: 100%"></webview>

이 글을 링크하는 글들

❏ Electron

데스크탑 웹 앱 프레임워크 엘렉트론(Electron) Updated on 2022년 1월 2일