트레이, 메뉴, 알림

"웹뷰로 굴러가는 앱을 진짜 데스크톱에 속한 것처럼 느끼게 만드는 게 이런 손길이야."

시스템 트레이: 메뉴바에 살기

트레이 아이콘(macOS의 메뉴바 항목, Windows랑 Linux의 시스템 트레이)은 앱이 백그라운드에 조용히 있으면서도 한 번의 클릭 거리에 머물게 해줘. Rust에서 TrayIconBuilder로 만들고, 메뉴를 붙이고, 클릭을 처리해 — 창 보이기랑 숨기기, 빠른 동작, 종료. 유틸리티나 늘 대기하는 도우미한테는 트레이가 '내가 여는 앱'이랑 '그냥 거기 있는 앱'을 가르는 선이야.

메뉴: 네이티브 메뉴바랑 컨텍스트 메뉴

Tauri 메뉴 API(Menu, Submenu, MenuItem이랑 빌더 종류들)는 진짜 네이티브 메뉴를 조립해 — macOS 화면 맨 위의 앱 메뉴바, 오른쪽 클릭 메뉴, 트레이 드롭다운까지. 메뉴 항목은 Rust에서 처리할 이벤트를 내놔. 네이티브 메뉴가 자연스럽게 느껴지는 이유는 그게 OS의 메뉴 그 자체이지 메뉴인 척하는 HTML이 아니기 때문이야.

알림: 사용자 어깨를 툭 치기

notification 플러그인이 진짜 OS 알림을 보내. 브라우저 API처럼 권한을 거쳐. isPermissionGranted로 확인하고, 필요하면 requestPermission을 부르고, 그다음 sendNotification. 정말 알릴 값이 있는 일에만 써(긴 작업이 끝났다든지, 메시지가 왔다든지). 수다 떨지 말고. OS 알림 센터는 모두가 같이 쓰는 자리야. 시끄러운 앱은 결국 음소거당해.

Code

메뉴 달린 트레이 아이콘 (Rust)·rust

use tauri::tray::TrayIconBuilder;
use tauri::menu::{Menu, MenuItem};

// setup()에서: 작은 메뉴 달린 트레이 아이콘.
let quit = MenuItem::with_id(app, "quit", "Quit", true, None::<&str>)?;
let show = MenuItem::with_id(app, "show", "Show Window", true, None::<&str>)?;
let menu = Menu::with_items(app, &[&show, &quit])?;

TrayIconBuilder::new()
    .icon(app.default_window_icon().unwrap().clone())
    .menu(&menu)
    .on_menu_event(|app, event| match event.id.as_ref() {
        "quit" => app.exit(0),
        "show" => { if let Some(w) = app.get_webview_window("main") { let _ = w.show(); } }
        _ => {}
    })
    .build(app)?;

권한을 거쳐 보내는 OS 알림 (프론트엔드)·tsx

import {
  isPermissionGranted, requestPermission, sendNotification,
} from "@tauri-apps/plugin-notification";

let granted = await isPermissionGranted();
if (!granted) granted = (await requestPermission()) === "granted";
if (granted) {
  sendNotification({ title: "Export complete", body: "Your file is ready." });
}

Exercise

항목 두 개('Show Window'랑 'Quit')짜리 메뉴를 단 시스템 트레이 아이콘을 넣어봐. Show는 메인 창을 앞으로 가져오고 Quit은 앱을 종료하게. 보너스: (가짜로) 긴 작업이 끝나면 OS 알림을 보내되 권한 확인을 먼저 거치게 해. 데스크톱 앱이랑 그냥 감싼 웹 페이지를 가르는 네이티브 손길을 더한 거야.

Hint

setup()에서 TrayIconBuilder를 쓰고 on_menu_event에서 id로 갈라. 알림은 isPermissionGranted → requestPermission → sendNotification 순서고. notification capability permission 잊지 마(세 표면 규칙).