2015-07-12 04:23:54 +00:00
|
|
|
# Frameless 윈도우
|
2015-06-25 17:32:51 +00:00
|
|
|
|
2015-07-12 04:23:54 +00:00
|
|
|
Frameless 윈도우는 테두리가 없는 윈도우 창을 말합니다.
|
2015-06-25 17:32:51 +00:00
|
|
|
|
2015-07-12 04:23:54 +00:00
|
|
|
## Frameless 윈도우 만들기
|
2015-06-25 17:32:51 +00:00
|
|
|
|
2015-08-25 13:17:24 +00:00
|
|
|
Frameless 윈도우를 만드려면 [BrowserWindow](browser-window-ko.md) 객체의 `options`에서 `frame` 옵션을 `false`로 지정하기만 하면됩니다:
|
2015-06-25 17:32:51 +00:00
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
|
var BrowserWindow = require('browser-window');
|
|
|
|
|
var win = new BrowserWindow({ width: 800, height: 600, frame: false });
|
|
|
|
|
```
|
|
|
|
|
|
2015-07-12 04:23:54 +00:00
|
|
|
## 투명한 창 만들기
|
2015-06-25 17:32:51 +00:00
|
|
|
|
2015-07-12 04:23:54 +00:00
|
|
|
Frameless 윈도우의 창의 배경을 투명하게 만들고 싶다면 `transparent` 옵션을 `true`로 바꿔주기만 하면됩니다:
|
2015-06-25 17:32:51 +00:00
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
|
var win = new BrowserWindow({ transparent: true, frame: false });
|
|
|
|
|
```
|
|
|
|
|
|
2015-07-08 03:33:23 +00:00
|
|
|
### API의 한계
|
2015-06-25 17:32:51 +00:00
|
|
|
|
2015-07-12 04:23:54 +00:00
|
|
|
|
|
|
|
|
|
|
|
|
|
* 투명한 영역을 통과하여 클릭할 수 없습니다. 우리는 이 문제를 해결하기 위해 API를 제공할 예정이지만 현재로써는
|
|
|
|
|
[upstream 버그](https://code.google.com/p/chromium/issues/detail?id=387234)로 인해 중단된 상태입니다.
|
|
|
|
|
* 투명한 창은 크기를 조절할 수 없습니다. `resizable` 속성을 `true`로 할 경우 몇몇 플랫폼에선 윈도우 크래시가 일어납니다.
|
|
|
|
|
* `blur` 필터는 웹 페이지에서만 적용됩니다. 윈도우 아래 컨텐츠에는 블러 효과를 적용할 방법이 없습니다.
|
|
|
|
|
* Windows에선 DWM(데스크톱 창 관리자)가 비활성화되어 있을 경우 작동하지 않습니다.
|
|
|
|
|
* Linux를 사용할 경우 [alpha channel doesn't work on some NVidia drivers](https://code.google.com/p/chromium/issues/detail?id=369209)
|
|
|
|
|
upstream 버그가 있으므로 CLI 옵션에 `--enable-transparent-visuals --disable-gpu`을 추가해야 합니다.
|
|
|
|
|
이 옵션은 GPU의 사용을 중단하고 윈도우를 생성하는데 ARGB를 사용할 수 있도록 해줍니다.
|
|
|
|
|
* OS X(Mac)에선 네이티브 윈도우의 그림자가 투명한 창에선 보이지 않습니다.
|
2015-06-25 17:32:51 +00:00
|
|
|
|
2015-07-08 03:33:23 +00:00
|
|
|
## 드래그 가능 위치 지정
|
2015-06-25 17:32:51 +00:00
|
|
|
|
2015-07-12 04:23:54 +00:00
|
|
|
기본적으로 Frameless 윈도우는 드래그 할 수 없습니다.
|
|
|
|
|
어플리케이션의 CSS에서 특정 범위를 `-webkit-app-region: drag`로 지정하면 OS의 기본 타이틀바 처럼 드래그 되도록 할 수 있습니다.
|
|
|
|
|
그리고 `-webkit-app-region: no-drag`를 지정해서 드래그 불가능 영역을 만들 수도 있습니다. 현재 사각형 형태의 범위만 지원합니다.
|
2015-06-25 17:32:51 +00:00
|
|
|
|
2015-07-12 04:23:54 +00:00
|
|
|
창 전체를 드래그 가능하게 만드려면 `-webkit-app-region: drag`을 `body`의 스타일에 지정하면 됩니다:
|
2015-06-25 17:32:51 +00:00
|
|
|
|
|
|
|
|
```html
|
|
|
|
|
<body style="-webkit-app-region: drag">
|
|
|
|
|
</body>
|
|
|
|
|
```
|
|
|
|
|
|
2015-07-12 04:23:54 +00:00
|
|
|
참고로 창 전체를 드래그 영역으로 지정할 경우 사용자가 버튼을 클릭할 수 없게 되므로 버튼은 드래그 불가능 영역으로 지정해야 합니다:
|
2015-06-25 17:32:51 +00:00
|
|
|
|
|
|
|
|
```css
|
|
|
|
|
button {
|
|
|
|
|
-webkit-app-region: no-drag;
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
2015-07-12 04:23:54 +00:00
|
|
|
또한 커스텀 타이틀바를 만들어 사용할 때 타이틀바 내부의 버튼도 드래그 불가능 영역으로 지정해야 합니다.
|
2015-06-25 17:32:51 +00:00
|
|
|
|
2015-07-08 03:33:23 +00:00
|
|
|
## 텍스트 선택
|
2015-06-25 17:32:51 +00:00
|
|
|
|
2015-07-12 04:23:54 +00:00
|
|
|
한가지, Frameless 윈도우에서 텍스트가 선택되는 드래그 동작은 혼란을 야기할 수 있습니다.
|
|
|
|
|
예를 들어 타이틀바를 드래그 할 때 타이틀바의 텍스트를 실수로 선택할 수 있습니다.
|
|
|
|
|
이를 방지하기 위해선 다음과 같이 드래그 영역의 텍스트 선택 동작을 비활성화해야 할 필요가 있습니다:
|
2015-06-25 17:32:51 +00:00
|
|
|
|
|
|
|
|
```css
|
|
|
|
|
.titlebar {
|
|
|
|
|
-webkit-user-select: none;
|
|
|
|
|
-webkit-app-region: drag;
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
2015-07-08 03:33:23 +00:00
|
|
|
## 컨텍스트 메뉴
|
2015-06-25 17:32:51 +00:00
|
|
|
|
2015-07-12 04:23:54 +00:00
|
|
|
몇몇 플랫폼에선 드래그 가능 영역이 non-client 프레임으로 처리됩니다. 그래서 이 영역에서 오른쪽 클릭을 할 경우 시스템 메뉴가 팝업 됩니다.
|
|
|
|
|
그래서 컨텍스트 메뉴 지정이 모든 플랫폼에서 정상적으로 작동하게 하려면 커스텀 컨텍스트 메뉴를 드래그 영역 내에 만들어선 안됩니다.
|
