윈도우 커스터마이징
BrowserWindow
모듈은 Electron 애플리케이션의 핵심이다. 이 모듈은 애플리케이션 윈도우의 외관과 동작을 커스터마이징할 수 있는 다양한 API를 제공한다. 이 섹션에서는 macOS, Windows, Linux에서 윈도우 커스터마이징을 위한 다양한 사용 사례를 구현하는 방법을 다룬다.
BrowserWindow
는 BaseWindow
모듈의 서브클래스다. 두 모듈 모두 Electron에서 애플리케이션 윈도우를 생성하고 관리할 수 있지만, 주요 차이점은 BrowserWindow
가 단일의 전체 크기 웹 뷰를 지원하는 반면, BaseWindow
는 여러 웹 뷰를 합성할 수 있다는 점이다. 이 섹션의 문서 예제에서 BaseWindow
는 BrowserWindow
와 상호 교환하여 사용할 수 있다.
📄️ Custom Title Bar
애플리케이션 윈도우는 운영체제에서 제공하는 기본 크롬(Chrome)을 적용한다. 구글 크롬 브라우저와 혼동하지 말 것. 윈도우 크롬은 웹 콘텐츠가 아닌 윈도우의 일부(예: 제목 표시줄, 도구 모음, 컨트롤)를 의미한다. 운영체제에서 제공하는 기본 제목 표시줄은 간단한 사용 사례에 충분하지만, 많은 애플리케이션은 이를 제거하기도 한다. 커스텀 제목 표시줄을 구현하면 애플리케이션을 더 현대적으로 만들고 플랫폼 간 일관성을 유지하는 데 도움이 된다.
📄️ 커스텀 윈도우 인터랙션
기본적으로 윈도우는 OS가 제공하는 타이틀 바를 통해 드래그할 수 있다. 기본 타이틀 바를 제거한 앱은 app-region CSS 속성을 사용해 윈도우를 드래그할 수 있는 영역을 정의해야 한다. app-region: drag를 설정하면 특정 직사각형 영역을 드래그 가능한 영역으로 표시한다.
📄️ Custom Window Styles
!Frameless Window