본문 바로가기
C.W.K.
Stream
Lesson 01 of 06 · published

창 만들기: WebviewWindow

~12 min · tauri, windows, webviewwindow, rust

Level 0웹 관광객
0 XP0/56 lessons0/13 achievements
0/100 XP to next level100 XP to go0% complete
"설정에 적은 창은 실행할 때 열리는 창이야. 코드로 만든 창은 네가 정한 순간에 열리는 창이고."

창을 만드는 두 가지 길

창은 tauri.conf.json에 미리 적어두거나(시작할 때 열려), Rust에서 WebviewWindowBuilder로 그때그때 만들 수 있어. 미리 적어두는 쪽은 메인 창에 딱이고, 그때그때 만드는 쪽은 필요할 때만 여는 창에 써 — 사용자가 Preferences를 누르면 뜨는 설정 창, 두 번째 문서 창, 팝업 같은 것들. 둘 다 결국 같은 WebviewWindow 타입을 만들어.

뭘 보여줄 건데?

창은 뭘 그릴지 알아야 하고, 그걸 정하는 게 WebviewUrl이야. WebviewUrl::App("index.html".into())(또는 라우트 경로)는 함께 실은 프론트엔드를 불러 — 대부분 이 경우야. WebviewUrl::External(url)은 창을 원격 사이트로 돌려놓는데, 이건 조심히 다뤄야 해(원격 콘텐츠를 믿는 문제는 security 트랙에서). WebviewUrl::default()는 앱 진입점을 불러오고. 네가 만드는 창은 대부분 라우트랑 App을 써서 새 창이 네 UI의 특정 화면을 보여주게 될 거야.

빌더 패턴

WebviewWindowBuilder는 설정을 줄줄이 이어 붙이고 — title, 크기, resizable — .build()로 마무리해서 살아 있는 창(아니면 에러)을 돌려줘. 빌더를 시작하려면 AppHandle이나 &App이 있어야 해서, 창을 만드는 코드는 보통 그걸 손에 쥐고 있는 setup이나 command나 이벤트 핸들러에 들어가.

Code

필요할 때 창 만들기, 두 번 눌러도 하나만·rust
use tauri::{WebviewWindowBuilder, WebviewUrl, Manager};

// 필요할 때 설정 창 열기 (예: command에서).
#[tauri::command]
fn open_settings(app: tauri::AppHandle) -> Result<(), String> {
    // 이미 있으면 복제하지 말고 포커스만.
    if let Some(win) = app.get_webview_window("settings") {
        let _ = win.set_focus();
        return Ok(());
    }
    WebviewWindowBuilder::new(
        &app,
        "settings",                                  // label (신원)
        WebviewUrl::App("index.html#/settings".into()), // 번들 UI의 라우트
    )
    .title("Settings")
    .inner_size(520.0, 640.0)
    .resizable(false)
    .build()
    .map_err(|e| e.to_string())?;
    Ok(())
}

External links

Exercise

프론트엔드의 라우트(해시 라우트 #/settings 같은)를 가리키는 두 번째 창을 만드는 open_settings command를 더하고, 두 번 눌러도 하나만 뜨게 해. 창이 이미 있으면 새로 만들지 말고 포커스하는 거야. 버튼을 엮어서 invoke해봐. 멀티윈도우 앱의 토대인 '필요할 때 창 만들기'를 만든 거야.
Hint
build 전에 if let Some(win) = app.get_webview_window("settings") { win.set_focus(); return Ok(()); }로 막아. 라우트엔 WebviewUrl::App을 쓰고. label "settings"가 있어야 그 확인이 작동해.

Progress

Progress is local-only — sign in to sync across devices.
이 페이지에서 버그를 발견하셨거나 피드백이 있으세요?문제 신고

댓글 0

🔔 답글 알림 (로그인 필요)
로그인댓글을 남기려면 로그인해 주세요.

아직 댓글이 없어요. 첫 댓글을 남겨보세요.