MFC WebView2(IE Edge, 엣지) 컨트롤

윈도우에서 웹을 보여주는 기존 인터넷익스플로어(IE)기반 컨트롤은 상대적으로 느리고 HTML5등 최신 웹에 대한 호환성도 좋지 않습니다. 그래서 MS가 인터넷익스플로어에서 엣지(Edge)로 웹브라우저를 변경했듯이 WebView2라는 엣지 기반의 웹을 보여주는 컨트롤을 외부 라이브러리로 제공하여 줍니다. 

WebView2 사용 예

만들고 있는 C++ MFC 기반의 클라이언트에서 특정 정보들을 웹으로 보여주는 관계로 WebView2 컨트롤을 위 스크린 샷처럼 사용하여 보았습니다. 실제 코딩은 Code Project의 WebView2 Edge Browser in MFC C++ Application를 참조하여 만들었습니다. 

적용하는데 반나절 정도 걸렸는데 적용하기가 IE기반 컨트롤에 비하여 조금은 까다롭습니다. 해당 소스를 보면 컨트롤을 사용하기 위하여 윈도우 템플릿 라이브러리(WRL)를 사용하고 있고 윈도우 10 관련 #define을 사용하면 WinRT를 사용합니다. 해당 라이브러리를 모르면 대충 이런 흐름으로 코딩되어 있구나 정도 알 수 있습니다. 또한 간단하기는 하지만 외부 라이브러리도 NuGet 패키지 관리로 인스톨하여야 합니다.

사용법은 관련 MFC 다이얼로그에 나오게만 하면 컨트롤러 인터페이스가 쉽게 되어 있어 그리 어렵지 않게 느껴집니다. 참고로 해당 부분 잘 이해하기 위해서 WRL 공부하실 거라면 최근 추세가 WRL은 호환성 위주로 지원하고 WinRT로 대체된 관계로 WinRT를 공부하실 것을 추천합니다. 

실제로 WebView2를 사용하시고자 한다면 위에 링크로 참조된 글에 있는 소스를 다운받아 실행하여 보신 뒤에 실행에 이상 없으면 해당 소스를 자신의 소스에 맞게 약간만 수정하시면 됩니다. 수정할 때 자신의 프로젝트에 해당 글에 있는 라이브러리를 다운 받아 인스톨하는 것을 잊으면 안됩니다. 이 과정은 대부분 NuGet으로 하는 거라 특별히 어렵거나 하지는 않습니다. WebView2를 사용하는 과정은 조금 지루한 코드들이 들어가는데 어차피 컨트롤 프로그래밍하는 거라 큰 이해보다는 자신의 프로젝트에 적용하고 원활히 사용하면 될 듯합니다. 

저와 같은 경우 탭 컨트롤에 붙였는데 탭 컨트롤에서 실행하면 WebView2가 보이지 않는 문제가 있었습니다. spy+로 확인한 결과 Visible 속성이 false인 관계로 안보이는 것이라 ResizeEverything() 코드 주변에 아래 코드를 추가하여 해결하였습니다.

m_controller->put_IsVisible(true);

이것은 비슷한 문제시 참고 바랍니다. 참고로 그냥 바로 다이얼로그 띄우면 이상 없는데 탭컨트롤 하위로 띄우면 해당 문제가 발생하였습니다.