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 타이틀바가 사라져 — 이제 네가 직접 그려야 해. 근데 액자가 없어진 창은 없어진 그 타이틀바로 끌 수가 없잖아. 그래서 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()를 부르면 돼.