C# WPF에 WebView2 연결하기

WPF에 웹 컨텐츠를 통합하고 싶다면, Microsoft의 WebView2는 이러한 요구를 충족시키는 좋은 솔루션입니다. 이번 글에서는 WebView2에 대해 소개하고, WPF에 WebView2를 연결하여 기본 웹 페이지를 로딩하는 방법에 대해 알아보겠습니다.

 

WebView2란?

WebView2는 Microsoft Edge 브라우저의 Chromium 기반 엔진을 사용하는 웹 뷰 제어 컴포넌트입니다. 이를 통해 개발자들은 자신의 Windows 애플리케이션 내에 모던 웹 콘텐츠와 기능을 통합할 수 있습니다. WebView2는 다양한 프로그래밍 환경과 언어를 지원하며, .NET 및 Win32 C++을 포함한 여러 Microsoft 기술과 호환됩니다.

 

WebView2의 주요 기능

• 풍부한 웹 콘텐츠 통합: 최신 HTML, CSS, JavaScript 기술을 사용하여 웹 기반 UI와 콘텐츠를 네이티브 애플리케이션에 통합할 수 있습니다.
• 양방향 통신: JavaScript와 네이티브 코드 간의 양방향 상호 작용을 지원하여, 웹 뷰와 호스트 애플리케이션 간의 데이터 교환을 가능하게 합니다.
• 향상된 보안 및 개인 정보 보호: Microsoft Edge(Chromium)의 보안 모델을 이용하여, 보다 안전한 웹 콘텐츠 경험을 제공합니다.
• 커스텀 사용자 경험: 개발자는 WebView2를 사용하여 사용자 맞춤형 경험을 설계할 수 있으며, 기존 애플리케이션의 기능을 확장할 수 있습니다.

 

이러한 특징들 덕분에 WebView2는 다양한 유형의 Windows 애플리케이션 개발에 있어 강력한 도구로 자리잡고 있습니다. WebView2는 특히 기업용 애플리케이션, 교육 및 트레이닝 플랫폼, 그리고 복잡한 데이터를 시각화하는 도구들에 있어 널리 활용되고 있습니다.

 

1단계: NuGet에서 WebView2 SDK 설치하기

Visual Studio에서 WPF 프로젝트를 열고, NuGet 패키지 관리자를 사용해 Microsoft.Web.WebView2 패키지를 설치합니다.

NuGet에서 WebView2 검색하여 설치하기

 

 

2단계: XAML에 WebView2 추가

MainWindow.xaml 파일에서 WebView2 XAML 네임스페이스를 추가하기 위해 <Window/> 태그 안에 다음 줄을 삽입합니다.

xmlns:wv2="clr-namespace:Microsoft.Web.WebView2.Wpf;assembly=Microsoft.Web.WebView2.Wpf"

 

WebView2 컨트롤을 추가하려면 <Grid> 태그를 다음 코드로 바꿉니다. Source 속성은 WebView2 컨트롤에 표시되는 초기 URI를 설정합니다.

<DockPanel>
   <wv2:WebView2 Name="webView"
                  Source="https://www.naver.com"
   />
</DockPanel>

 

MainWindow.xaml의 코드가 다음 코드와 같이 보이는지 확인합니다.

<Window x:Class="Wpf_WebView2_Practice.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:Wpf_WebView2_Practice"
        xmlns:wv2="clr-namespace:Microsoft.Web.WebView2.Wpf;assembly=Microsoft.Web.WebView2.Wpf"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <DockPanel>
        <wv2:WebView2 Name="webView"
                  Source="https://www.naver.com"
   />
    </DockPanel>
</Window>

 

F5를 눌러 디버깅을 시작하면, 아래와 같은 모습을 확인할 수 있습니다.

WPF에 연결한 WebView2를 통해 NAVER에 접속한 모습

 

3단계: 앱에 주소 URL 추가하기

앱에 주소 표시줄을 추가하여 사용자가 WebView2 컨트롤에 표시되는 URL을 변경할 수 있게 합니다. MainWindow.xaml 파일에서 WebView2 컨트롤이 포함된 <DockPanel>에 코드를 추가하여 주소 표시줄을 추가합니다. 코드는 아래와 같습니다.

<DockPanel>
    <DockPanel DockPanel.Dock="Top">
        <Button x:Name="ButtonGo" DockPanel.Dock="Right" Click="ButtonGo_Click" Content="Go"/>
        <TextBox Name = "addressBar"/>
    </DockPanel>
    <wv2:WebView2 Name = "webView"
                  Source = "https://www.naver.com"
    />
</DockPanel>

 

MainWindow.xaml.csfile에서 다음 코드를 복사하여 ButtonGo_Click 메서드를 생성합니다. 이 코드는 WebView2 컨트롤을 주소 표시줄에 입력한 URL로 이동합니다.

private void ButtonGo_Click(object sender, RoutedEventArgs e)
{
    if (webView != null && webView.CoreWebView2 != null)
    {
        webView.CoreWebView2.Navigate(addressBar.Text);
    }
}

 

여기까지 따라오셨으면, 앱의 모습이 아래와 같습니다. URL을 입력하고 Go버튼을 클릭하면 해당 주소로 연결됩니다. 아직 기본적인 처리만 하였기 때문에 HTTP로 시작하는 URL 전체를 입력해야 합니다.

 

URL에 구글 주소를 넣어서 연결된 모습

 

이번 글에서는 WebView2에 대해 소개하고, WPF 앱에 WebView2를 연결하는 방법에 대해 알아보았습니다. 다음 글에서는 WPF 애플리케이션의 로컬 HTML 파일을 WebView2를 통해 로딩하고 표시하는 방법에 대해 알아보겠습니다.