• 목록
• 답변
• 글쓰기
• 게시판 리스트 옵션
  • 수정
  • 삭제

윈도우 어플리케이션개발 어플리케이션 개발시 WebView를 이용하여 웹페이지를 표시해야하는 경우가 있는데 기존 WebView는 구식 IE 기반이라서 웹표준을 따르지 않고 많은 웹페이지가 정상적으로 표현되지 않는 경우가 많았다. Chromium 기반 브라우저를 WebView에서 사용하기 위해서는 CefSharp같은 별도의 라이브러리를 이용해야 했는데 그 또한 썩 성능이나 그런 것이 좋지는 않았다. 이게 상당히 아쉬운 부분이었는데...Microsoft Edge WebView2 어플리케이션개발 가 나오고 나서 이런 문제가 해결이 되었다Microsoft Edge WebView2 Microsoft Edge WebView2를 사용하여 사용자의 기본 응용 프로그램에 웹 콘텐츠(HTML, CSS, JavaScript)를 포함합니다. 문서 지금 다운로드하기 피드백 제공 최고의 웹 최신 Microsoft Edge(Chromium) 플랫폼을 사용하여 웹 환경을 사용자의 기본 앱으로 가져올 수 있습니다. 강력한 기본 기능 WebView2에서 기본 기능 어플리케이션개발 액세스 권한을 제어함으로써 강력하고 안전한 응용 프로그램을 구축합니다. 에버그린 또는 최종 버전 기본적으로 WebView2는 에...암튼 이 WebView2를 이용하여 네이버 map과 연동하는 간단한 어플리케이션 개발에 대한 기록을 해두고자 한다.WebView2 개발환경에 대한 설명은 아래 페이지에 샘플 프로젝트와 함께 잘 설명이 되어 있다.Set up your Dev environment for WebView2 development. Set 어플리케이션개발 up git, Visual Studio, and a preview channel of Microsoft Edge, and clone the WebView2Samples repo.WPF로 개발하는 방법에 대한 기본적은 Tutorial 은 Get started guide with WebView2 for Windows Presentation Foundation (WPF) apps.내가 진행하고자 하는 것은WebView에 네이버 map 페이지 로드map에서 클릭 시 마커 표시하고 클릭한 위치 좌표를 WPF 어플리케이션개발 앱으로 전달하여 TextBox에 표시WPF 앱에서 버튼 클릭 시 클릭 된 위치에 대한 주소를 찾아(Reverse-Geocoding) 역시 TextBox에 표시​네이버 세팅네이버 map을 이용하기 위해서는 먼저 Naver Cloud Platform 에서 서비스를 신청하고 Application을 등록해야한다.Naver Cloud Platform 회원가입 하고 Application 등록하고 이용서비스는 아래와 같이 해야한다.지도를 이용할 것이므로 Web Dynamic Map은 필수고 또한 좌표값을 어플리케이션개발 주소로 변환을 해야하기 때문에 Reverse Geocoding도 필수로 추가해야한다. Geocoding은 주소값을 좌표값을 변경하는 API 인데 지금 진행하는 부분에서는 사용하지 않는다.변경버튼을 클릭하면 하단에 서비스 환경 등록하는 부분이 나오는데 Web 서비스 URL을 아래와 같이 등록해야한다.​WPF 프로젝트​Visual Studio에서 WPF 프로젝트를 생성하고 nuget 패키지 관리를 이용하여 WebView2를 설치한다.UI는 아래와 같이 구성했다 좌측에 지도를 어플리케이션개발 표시할 WebView 영역 우측에는 WebView와 연동하여 좌표와 주소를 표시할 TextBox로 간단하게 구성했다.MainWindow.xaml 파일 코드MainWindow.xaml.cs 부분 코드지도를 표시하는 map.html 파일 코드WebView의 웹페이지가 WPF 앱으로 메세지를 전달하려면 아래 코드를 이용한다WPF 앱에서는 webView.CoreWebView2.WebMessageReceived 핸들러에서 그 메세지를 수신하여 처리하게 된다.WebView map에서 클릭이벤트 처리하여 마커 표시하고 클릭한 좌표를 앱으로 전달하여 TextBox에 표시한 화면웹페이지로 어플리케이션개발 메세지를 전달하려면 아래의 코드를 이용한다.웹페이지에서는 아래 이벤트 핸들어에서 그 메세지를 처리하게 된다.주소얻기 버튼을 클릭하면 Reverse Geocoding API를 통해 지번주소와 도로명주소를 얻어서 TextBox에 표시한 화면지금까지 네이버 map WebView와 WPF 앱 간의 간단한 연동에 대해서 살펴보았다.WebView2로 인해서 앞으로 데스크탑 응용프로그램도 웹기술을 유연하게 사용할 수 있는 길이 열린 것 같다.​이상.