Decorations, 투명도, Always-on-Top

"액자는 창 관심사, 내용물은 CSS 관심사야. 커스텀해 보이는 앱은 그 경계를 흐려 — 일부러."

액자의 손잡이들

창 chrome은 속성 몇 개로 설정해, tauri.conf.json이나 빌더로: decorations(OS 타이틀바랑 테두리 — 커스텀 룩 원하면 꺼), transparent(바탕화면이 비치게), always_on_top(다른 앱 위로 떠), resizable, min/max inner size, shadow. 이게 박스 모양을 잡고, 네 HTML/CSS가 채워.

프레임 없애기

decorations(false)면 OS 타이틀바가 사라져 — 이제 네가 직접 그려. 근데 프레임 없는 창은 더 이상 없는 OS 타이틀바로 못 끌어서, HTML의 한 영역을 data-tauri-drag-region으로 드래그 핸들로 표시해. 그 요소가 '여기 잡고 창 옮겨' 구역이 돼. 이게 앱이 자기 버튼 단 커스텀 헤더바를 가지면서도 네이티브 창처럼 움직이는 방법이야.

투명도는 플랫폼에 민감해

transparent(true)로 플로팅 패널이랑 둥근 비사각형 창을 만들 수 있는데, OS 컴포지터랑 플랫폼마다 다르게 상호작용하고 CSS(투명/반투명 배경)랑 짝이야. macOS에선 titleBarStyle로 반투명 타이틀바 아래 콘텐츠를 겹칠 수도 있어. 출시할 타깃마다 투명도를 테스트해 — 딱 네 Mac에선 완벽하고 Linux에선 틀려 보이는 그런 기능이야.

Code

커스텀 chrome 창 만들기·rust

use tauri::{WebviewWindowBuilder, WebviewUrl};

// 프레임 없고, 떠 있고, 투명한 패널.
WebviewWindowBuilder::new(&app, "palette", WebviewUrl::App("index.html#/palette".into()))
    .decorations(false)      // OS 타이틀바/테두리 없음
    .transparent(true)       // 바탕화면 비침 (CSS랑 짝)
    .always_on_top(true)     // 다른 창 위로 떠
    .resizable(false)
    .inner_size(320.0, 480.0)
    .shadow(true)
    .build()?;

data-tauri-drag-region이 커스텀 타이틀바를 끌리게 함·html

<!-- 프레임 없는 창에선 헤더를 드래그 핸들로 표시. -->
<header data-tauri-drag-region class="app-titlebar">
  <span data-tauri-drag-region>My App</span>
  <!-- 버튼엔 드래그 속성 넣지 마, 안 그럼 클릭이 드래그가 됨. -->
  <button class="win-close" onclick="...">×</button>
</header>

Exercise

창을 프레임 없게(decorations: false) 만들고 HTML에 data-tauri-drag-region 헤더랑 작동하는 닫기 버튼이 있는 커스텀 타이틀바를 지어. 헤더로 창을 끌 수 있으면서 버튼은 여전히 클릭되는지 확인해. 버튼이 클릭 대신 드래그되면 거기에 드래그 속성을 넣은 거야 — 그 실수가 레슨이야.

Hint

data-tauri-drag-region은 헤더 컨테이너랑 빈 span에 넣고, 버튼엔 절대 안 넣어. 닫기 버튼은 @tauri-apps/api/window의 getCurrentWindow().close()를 불러.