Electron에서 타이틀 바 숨기기 및 창 이동 문제

최근의 macOS 앱들은 전통적인 타이틀 바 대신 타이틀 바 영역까지 툴바나 콘텐츠로 꽉꽉 채우는 것이 유행인 것 같다. 개인적으로도 이런 디자인이 유려하고 쓸모가 많은 것 같아 선호하기도 한다. 물론 이런 형태를 Electron에서도 구현할 수 있다.

타이틀바가 안 보이니 확실히 미려한 것 같다

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

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

window = new BrowserWindow({
    ...
    titleBarStyle: 'hiddenInset',
    ...
});

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

참고로 hiddenInset 대신 hidden을 쓸 수도 있는데 이렇게 하면 윈도우 컨트롤 버튼들이 조금 작게 표시된다. 다르게 말해서 hidden은 기본적인 타이틀 바 사이즈가 적용되고 hiddenInset은 최근 유행하는 툴바 통합형 타이틀 바 사이즈로 적용된다.

이걸로 완전히 끝 이라고 할 수도 있겠지만 불행히도(?) 한 단계 할 일이 더 남아있다.

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

타이틀바를 숨기면 미려해지긴 하는데 큰 문제가 생긴다. 타이틀 바 만이 드래그로 윈도를 옮길 수 있는 유일한 영역인데 이게 사라지니 창을 옮길 방법이 사라져 버린다. 정말 치명적인 문제다.

다행히도 이 경우 아래와 같은 스타일을 이용해 드래그 영역을 지정해서 해결할 수 있다.

-webkit-app-region: drag;

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

그나저나 크로미움이 웹킷을 버린 지는 꽤 오래 되었을 텐데 왜 웹킷(-webkit) 머릿글자를 달고 있는 스타일 이름을 아직도 쓰는지는 궁금하긴 하지만 더 깊이 파고드는 것은 귀찮아서 그냥 잊어버리기로 했다.

관련된 글들

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

Electron에서 iframe 사용하기(?)

Electron의 app 정보를 얻기 위한 삽질기