[electron] BrowserWindow의 frame 옵션(상단바 없애기 + 클릭)

electron에서 윈도우를 생성할때 BrowserWindow의 옵션중에 frame을 false로 주게 되면 기본 윈도우에 존재하는 최소화, 최대화, 종료 버튼을 없앨 수 있다.

 

https://www.electronjs.org/docs/latest/api/browser-window

BrowserWindow | Electron

 

그런데 이렇게 하면 문제가 drag가 불가능 해지는 문제가 있다.

그래서 드래그가 가능하게 할 영역을 html로 만들고 css style에 "-webkit-app-region: drag"을 추가해주면 드래그가 가능해진다. 그런데 이렇게 하고 상단바를 커스텀하여 만들었지만 클릭이 불가능 해지는 문제가 있다. 

 

클릭이 가능해져야 하는 버튼에 다음 css style을 넣어주자. "-webkit-app-region: no-drag"

위의 스타일을 추가해주면 클릭 이벤트가 동작하는 것을 볼 수 있다.

 

필자는 상단바를 header태그로 만들어주고 다음과 같이 css를 주었다.btn클래스는 상단바에서 클릭 되어야 하는 버튼에 입혔다.

header{
    display:block;
    height:50px;
    width:100%;
    background-color:yellow;
    -webkit-app-region: drag
}
header *{
    -webkit-user-select: none;
    -webkit-app-region: drag;
}
header .btn{
    -webkit-app-region: no-drag
}

 

 

카카오에도 해당 내용이 있으며 "5. 상단바 없는 윈도우 창 이동하기"를 참고하면 위의 방법 외에 다른 방법으로 해결을 한게 나오니 참고 바란다. 여기에서는 css style을 사용하지 않고 javascript로 창의 이동 기능을 구현해서 해결한다.

 

https://tech.kakao.com/2021/08/17/frontend-growth-11/#5-%EC%83%81%EB%8B%A8%EB%B0%94-%EC%97%86%EB%8A%94-%EC%9C%88%EB%8F%84%EC%9A%B0-%EC%B0%BD-%EC%9D%B4%EB%8F%99%ED%95%98%EA%B8%B0

FE개발자의 성장 스토리 11 : Electron, 저도 한번 해보겠습니다.