Window vs Webview: 2.0의 분리

"창은 액자야. 웹뷰는 그 안에 걸리는 그림이고. Tauri 2가 드디어 둘을 떼어놨어."

예전엔 한 몸이던 개념 둘

Tauri 1에선 '창'이랑 그 안의 웹 콘텐츠가 사실상 한 객체였어. Tauri 2는 둘을 갈라놨지, 진짜 앱을 만들다 보면 이 구분이 필요해지거든:

Window는 네이티브 OS 액자야 — 타이틀바, 테두리, 위치, 크기, 작업표시줄에 뜨는 그것. Tauri는 TAO라는 라이브러리로 창을 만들어.
Webview는 네 HTML을 칠하는 화면이야. Tauri는 WRY라는 라이브러리로 웹뷰를 굴려.

Tauri 2에선 창 하나가 웹뷰를 여럿 품을 수 있어(웹 컨텍스트가 진짜로 갈린 split pane을 떠올려봐). 아니면 창 하나에 웹뷰 하나를 묶어주는 일상용 타입을 써도 되고.

95%는 이 타입을 쓰게 돼

그 일상용 타입이 WebviewWindow야 — 창 하나랑 웹뷰 하나를 같이 만들어줘. 웹 패널이 따로따로 들어가는 타일링 에디터 같은 걸 짓는 게 아니면 WebviewWindow를 꺼내 쓰면 되고, 이 퀘스트 나머지도 대부분 이걸 써. 더 깊은 분리(창 하나에 웹뷰 여럿)는 필요해질 때 거기 있어 — 평범한 앱 만드는데 복잡한 쪽으로 끌려가진 않아.

지금 알아둬야 하는 이유

이 분리를 알아두면 나중에 하루를 헷갈리며 보낼 일이 없어. Tauri 2 문서를 읽다가 Window랑 WebviewWindow API가 나란히 보일 때 뭐가 뭔지 바로 알거든 — Window는 맨 액자, WebviewWindow는 액자에 그림까지. windows 트랙이 이 토대 위에 진짜 멀티윈도우 UI를 세워. 이 레슨은 용어에 걸려 넘어지지 말라고 있는 거야.

Code

WebviewWindow — 액자랑 그림을 한 호출에·rust

// 일상용 타입: 창 하나 + 웹뷰 하나, 같이 생성.
// (제대로 된 창 작업은 `windows` 트랙에 있어 — 여긴 맛보기야.)
use tauri::WebviewWindowBuilder;
use tauri::WebviewUrl;

tauri::Builder::default()
    .setup(|app| {
        WebviewWindowBuilder::new(app, "main", WebviewUrl::default())
            .title("My App")
            .inner_size(1000.0, 700.0)
            .build()?;
        Ok(())
    });

Exercise

훔쳐보지 말고 네 말로 답해봐: (1) UI의 다른 라우트를 보여주는 두 번째 앱 창을 원하면 새 Window가 필요해, 새 Webview야, 새 WebviewWindow야? (2) 창 '하나' 안에 웹뷰를 둘 두고 싶은 건 어떤 때일까? 두 번째엔 한 줄짜리 사용 사례까지 붙여봐.

Hint

(1)은 액자랑 그림을 통째로 새로 원하는 거니까 일상용 타입이야. (2)는 독립된 웹 페이지 둘이 OS 액자 하나 안에 나란히 있어야 하는 레이아웃 — 듀얼 패널 미리보기 같은 걸 떠올려봐.