웹 임베딩

개요

Electron의 BrowserWindow에 (서드파티) 웹 콘텐츠를 임베드하려면 세 가지 옵션이 있다: <iframe> 태그, <webview> 태그, 그리고 WebContentsView. 각 옵션은 약간 다른 기능을 제공하며, 상황에 따라 유용하게 사용할 수 있다. 이 가이드에서는 각 옵션의 차이점과 기능을 설명해, 여러분이 적절한 선택을 할 수 있도록 돕는다.

Iframes

Electron에서 iframe은 일반 브라우저의 iframe과 동일하게 동작한다. 페이지 내 <iframe> 엘리먼트는 외부 웹 페이지를 표시할 수 있으며, 이는 해당 페이지의 콘텐츠 보안 정책(Content Security Policy)이 허용하는 경우에 가능하다. <iframe> 태그 내 사이트의 기능을 제한하려면 sandbox 속성을 사용하고, 지원하려는 기능만 허용하는 것이 좋다.

WebViews

중요 참고 사항: WebViews 사용을 권장하지 않는다. 이 태그는 애플리케이션의 안정성에 영향을 미칠 수 있는 구조적 변경을 겪고 있다. 대안으로 iframe이나 Electron의 WebContentsView를 사용하거나, 설계상 임베디드 콘텐츠를 피하는 아키텍처로 전환하는 것을 고려해 보라.

WebViews는 Chromium의 WebViews를 기반으로 하며, Electron에서 명시적으로 지원하지 않는다. WebView API가 Electron의 향후 버전에서 계속 사용 가능할 것이라고 보장할 수 없다. <webview> 태그를 사용하려면 BrowserWindow의 webPreferences에서 webviewTag를 true로 설정해야 한다.

WebView는 Electron 내부에서만 동작하는 커스텀 엘리먼트(<webview>)다. 이는 "프로세스 외부 iframe"으로 구현된다. 즉, <webview>와의 모든 통신은 IPC를 통해 비동기적으로 처리된다. <webview> 엘리먼트는 webContents와 유사한 다양한 커스텀 메서드와 이벤트를 제공하며, 이를 통해 콘텐츠를 더 세밀하게 제어할 수 있다.

<iframe>과 비교했을 때, <webview>는 약간 느릴 수 있지만, 제3자 콘텐츠를 로드하고 통신하며 다양한 이벤트를 처리하는 데 있어 훨씬 더 많은 제어 기능을 제공한다.

WebContentsView

WebContentsView는 DOM의 일부가 아니다. 대신, 메인 프로세스에서 이를 생성하고 제어하며 위치와 크기를 조정한다. WebContentsView를 사용하면 동일한 BaseWindow 안에서 여러 페이지를 결합하고 레이어로 쌓을 수 있다.

WebContentsView는 BrowserWindow와 유사하게 webContents를 구현하기 때문에 콘텐츠에 대한 가장 세밀한 제어를 제공한다. 하지만 WebContentsView는 DOM 내부의 엘리먼트가 아니기 때문에, DOM 콘텐츠와 정확하게 위치를 맞추려면 메인 프로세스와 렌더러 프로세스 간의 조율이 필요하다.