Electron 문서1.4.1

Docs / API / Frameless 윈도우

Frameless 윈도우

툴바, 테두리, 시각적인 “chrome” 없이 윈도우를 엽니다.

Frameless 윈도우는 창 테두리가 없는 윈도우를 말합니다. 이 기능은 윈도우의 일부분인 툴바와 같이 웹 페이지의 일부분이 아닌 부분을 보이지 않도록 합니다. BrowserWindow 클래스의 옵션에서 설정할 수 있습니다.

Frameless 윈도우 만들기

Frameless 윈도우를 만드려면 BrowserWindow 객체의 options 객체에서 frame 옵션을 false로 지정하면 됩니다:

const {BrowserWindow} = require('electron')
let win = new BrowserWindow({width: 800, height: 600, frame: false})

최신 macOS에서 사용할 수 있는 대안

macOS 10.9 Mavericks 이후의 최신 버전부터는 테두리가 없는 창을 만들 때 새로운 방법을 사용할 수 있습니다. frame 옵션을 false로 지정하여 제목과 창 구성 요소를 모두 비활성화하는 대신 새로운 titleBarStyle 옵션을 통해 제목만 숨기고 창 구성 요소 (“신호등 버튼”)의 기능과 창 크기를 그대로 유지할 수 있습니다:

let win = new BrowserWindow({titleBarStyle: 'hidden'})

투명한 창 만들기

Frameless 윈도우 창의 배경을 투명하게 만들고 싶다면 transparent 옵션을 true로 바꿔주기만 하면됩니다:

let win = new BrowserWindow({transparent: true, frame: false})

API의 한계

클릭이 통과될 수 있는 윈도우

클릭이 통과될 수 있는 윈도우를 만드려면, i.e. 모든 마우스 이벤트를 무시하는 윈도우를 만드려면, win.setIgnoreMouseEvents(ignore) API를 사용하여 구현할 수 있습니다:

win.setIgnoreMouseEvents(true)

드래그 가능 위치 지정

기본적으로 Frameless 윈도우는 드래그 할 수 없습니다. 애플리케이션의 CSS에서 특정 범위를 -webkit-app-region: drag로 지정하면 OS의 기본 타이틀 바 처럼 드래그 되도록 할 수 있습니다. 그리고 -webkit-app-region: no-drag를 지정해서 드래그 불가능 영역을 만들 수도 있습니다. 현재 사각형 형태의 범위만 지원합니다.

창 전체를 드래그 가능하게 만드려면 -webkit-app-region: drag을 body의 스타일에 지정하면 됩니다:

<body style="-webkit-app-region: drag">
</body>

참고로 창 전체를 드래그 영역으로 지정할 경우 사용자가 버튼을 클릭할 수 없게 되므로 버튼은 드래그 불가능 영역으로 지정해야 합니다:

button {
  -webkit-app-region: no-drag;
}

따로 커스텀 타이틀 바를 만들어 사용할 때는 타이틀 바 내부의 모든 버튼을 드래그 불가 영역으로 지정해야 합니다.

텍스트 선택

Frameless 윈도우에서 텍스트가 선택되는 드래그 동작은 혼란을 야기할 수 있습니다. 예를 들어 타이틀 바를 드래그 할 때 타이틀 바의 텍스트를 실수로 선택할 수 있습니다. 이를 방지하기 위해 다음과 같이 드래그 영역의 텍스트 선택 기능을 비활성화해야 할 필요가 있습니다:

.titlebar {
  -webkit-user-select: none;
  -webkit-app-region: drag;
}

컨텍스트 메뉴

몇몇 플랫폼에선 드래그 가능 영역이 non-client 프레임으로 처리됩니다. 이러한 플랫폼에선 드래그 가능 영역에서 오른쪽 클릭 할 경우 시스템 메뉴가 팝업 됩니다. 이러한 이유로 컨텍스트 메뉴 지정 시 모든 플랫폼에서 정상적으로 작동하게 하려면 커스텀 컨텍스트 메뉴를 드래그 영역 내에 만들어선 안됩니다.

고쳐야 할 것이 있습니까? 소스에서 변경을 제안할 수 있습니다.
다른 버전의 문서가 필요한가요? 이전 버전 또는 커뮤니티 번역을 보세요.
모든 문서를 한번에 검색하고 싶으신가요? 한 페이지 문서를 보세요.