2019.08.29

마이크로소프트의 새로운 크로미엄 웹뷰 컨트롤 시작하기

Simon Bisson | InfoWorld
새로운 크로미엄 기반 엣지 버전으로의 전환이 순조롭게 진행되고 있다. 마이크로소프트는 몇 개월 전부터 주 단위 개발자 빌드와 일 단위 카나리 빌드의 엣지 인사이더 버전을 제공하고 있으며, 최근에는 최종 사용자에게 초점을 두고 6주 단위로 업데이트되는 더 안정적인 베타 채널 빌드도 공개했다. 이 속도라면 2019년 말이나 2020년 초 무렵에 안정화 버전이 나올 것으로 예상된다.
 
ⓒ Microsoft / Google / Vijay Kumar / GettyImagesBank
 

애플리케이션의 브라우저 컨트롤 변경하기

이 변화는 많은 측면에서 중요하지만 가장 중요한 점은 브라우저와 운영체제의 분리다. 둘 사이의 연결은 원래의 EdgeHTML 기반 엣지가 경쟁 브라우저에 비해 뒤처지게 된 원인이다. 연 2회 윈도우 업데이트를 통해서만 중대한 업데이트를 받을 수 있었기 때문이다. 엣지는 웹 기술의 최첨단은 아니었지만 애플리케이션 개발자, 특히 앱에서 유니버설 윈도우 플랫폼(UWP)의 임베디드 HTML 웹뷰(WebView) 컨트롤을 사용하는 개발자에게는 안정적인 플랫폼이었다.

크로미엄 기반 엣지로 전환한다고 해서 이러한 UWP EdgeHTML 컨트롤의 수명이 끝난 것은 아니지만, 이제 유지 모드에 들어갔다고 봐야 한다. 즉, 더 이상 새로운 기능이 추가되지 않으며 향후 새로운 엣지 브라우저의 기능과 웹 표준의 발전 속도에 비해 빠르게 뒤처질 것이다. 마이크로소프트는 새로운 브라우저 엔진으로의 전환을 위해 새 브라우저 렌더링 엔진을 기반으로 하는 새로운 웹뷰 컨트롤 집합을 출시하고, 애플리케이션에서 브라우저 컨트롤을 사용하는 방법을 개발자가 선택할 수 있도록 할 것이라고 발표했다.
 

웹뷰2 SDK 프리뷰

초여름 무렵 새로운 웹뷰 컨트롤의 프리뷰 버전이 새로운 SDK와 함께 공개됐다. 지금은 윈도우 10의 Win32 C++ API용으로만 제공되지만, 최종적으로 윈도우 7부터(윈도우 서버의 경우 2012 R2부터) 그 이후의 모든 윈도우 버전을 지원한다. 정식 출시 시점에는 UWP, 윈폼(WinForm), WPF 버전 등 인기 있는 모든 윈도우 애플리케이션 개발 플랫폼을 지원할 것이다.

새 컨트롤의 큰 변화 중 하나는 제공되는 방식이다. 두 가지 옵션이 있는데, 첫 번째는 애플리케이션 업데이트를 전달하지 않고도 브라우저로 업데이트되어 사용자가 항상 최신(가장 안전한) 버전의 컨트롤을 사용하도록 하는 상시 최신 버전이다. 두 번째 옵션은 애플리케이션과 함께 패키징되고 해당 애플리케이션 컨텍스트에서만 실행되어 앱과 앱의 컨트롤을 하나의 테스트된 패키지로 만들 수 있게 해주는 맞춤 버전 컨트롤이다.

지금은 상시 최신 SDK만 제공된다. 완전한 크로미엄 패키지로, 상태 표시줄과 크로미엄 개발 툴을 지원한다. 모두 전달 코드에서 비활성화할 수 있지만 개발 중 유용한 정보를 제공하는 역할을 한다. 새 버전은 처음에는 약 6주 간격으로 출시되며, 컨트롤은 뉴겟(NuGet)을 통해 제공된다. SDK API와 기능은 아직 개발 중이므로 지금은 새로운 릴리스가 나오면 재컴파일이 필요하지만 마이크로소프트가 API 서비스를 안정화하고 나면 더 이상 그럴 필요가 없을 것이다.

지금까지 3번 SDK의 프리뷰 릴리스가 나왔다. 최신 0.8.230 버전은 엣지 77.0.230.00 이상을 기반으로 한다. 최근 릴리스에는 닷넷 프로젝트와 네트워크 운영 및 탐색 종료를 위한 API 지원이 추가됐다. 프리뷰 릴리스에서는 탐색 내역, HTTP 헤더를 제어하고 64비트 윈도우에서 32비트 컨트롤을 실행할 수 있다.
 

첫 웹뷰2 애플리케이션 구축하기

시작하기 전에 크로미엄 기반 엣지의 개발자 릴리스와 웹뷰2 SDK를 개발 PC에 설치한다. C++ 윈도우 앱을 빌드하기 위한 비주얼 스튜디오를 설정한 다음 뉴겟을 통해 SDK를 다운로드한다. 뉴겟에서 다운로드해 설치하면 앱에 필요한 대부분의 파일이 솔루션 디렉터리에 추가된다. 사용하려면 애플리케이션에 적절한 헤더 파일을 포함한다. 이미 설치했더라도 업데이트된 릴리스를 확인하는 것이 좋다.

코드에 웹뷰2 컨트롤을 추가하기는 쉽다. 먼저 웹뷰2 환경을 설정한다. 기본값을 그대로 두면 컨트롤은 현재 설치된 엣지 브라우저를 사용한다. 또는 주요 브라우저 설정을 직접 정의할 수도 있다. 예를 들어 앱에 자체 사용자 폴더를 부여하고 특정 브라우저 플래그를 설정할 수 있다. 환경이 설정되면 CreateWebView를 호출해서 웹뷰2 컨트롤을 추가하고 컨트롤의 탐색 속성을 애플리케이션에서 사용하는 URL로 설정한다. NavigationCompleted 이벤트를 사용해서 콘텐츠 로딩을 추적할 수 있다.

코드가 웹뷰2 컨트롤에 의해 로드되는 HTML 문서의 콘텐츠와 상호작용해야 한다면, 페이지에 자바스크립트를 주입할 수 있다. postMessage 이벤트를 사용해서 HTML 콘텐츠로 메시지를 전송할 수 있으며, 이 이벤트는 호스트 애플리케이션 또는 웹 콘텐츠 자바스크립트에서 실행 중인 이벤트 핸들러를 통해 포착이 가능하다.

애플리케이션 안에 웹뷰2를 빌드하기 위해 알아야 할 대부분의 사항은 SDK의 API 참조, 더 구체적으로는 IWebView2WebView 인터페이스에서 볼 수 있다. 여기서 현재 웹뷰를 위한 설정, HTML 및 자바스크립트 콘텐츠를 다루기 위한 컨트롤을 찾아볼 수 있다. 워낙 내용이 많은 관계로 마이크로소프트는 기본적인 웹 브라우저 형태의 유용한 예제를 만들었다. 이 예제를 통해 코드가 웹뷰2 창의 콘텐츠와 어떻게 상호작용하는지 확인하고 자신의 애플리케이션에서는 어떻게 사용해야 하는지 알아볼 수 있다.
 

웹뷰2 브라우저 컨트롤 따라잡기

SDK의 유용한 기능 중 하나는 다양한 엣지 채널을 타겟으로 설정하는 기능이다. 크로미엄 기반 엣지는 4개의 버전으로, 서로 다른 일정과 안정성 수준으로 나뉘어 제공되므로 가장 안정적인 버전 또는 가장 불안정한 버전을 선택하거나 윈도우 레지스트리 키를 통해 채널을 강제 적용하는 방법 등으로 사용할 버전을 제어할 수 있다. 따라서 테스트는 개발자 릴리스에서 하고 전달은 프로덕션 릴리스에서 하는 방법으로 기반 브라우저 엔진의 변경에 항상 미리 준비할 수 있다.

마이크로소프트가 웹뷰2에 중점을 두는 만큼 이제는 코드에서 웹뷰2를 어떻게 사용해야 할지 고민을 해야 한다. 컨트롤이 정식 출시되기까지는 아직 몇 개월의 시간이 있으므로 어떻게 코드를 변경하고 프로토타입을 빌드하고 테스트해야 할지 알아볼 시간은 충분하다. 엣지팀은 오피스의 추가 기능 플랫폼을 웹뷰2를 사용하도록 업데이트하고 있다. 여러분도 마이크로소프트의 기존 HTML5 API(예를 들어 오피스 스토어 앱을 제공하는 데 사용된 API 등)를 사용하는 예전 애플리케이션이 있다면 웹뷰2 기능을 지원하기 위해 무엇을 변경해야 할지 생각해봐야 한다.

웹 코드와 로컬 코드의 혼합은 애플리케이션에 HTML 기반 사용자 인터페이스 구성요소를 렌더링하는 경우에만 타당한 방법이다. 반년 단위 브라우저 업데이트로부터의 탈피는 중대한 변화이므로 웹뷰2를 사용하는 하이브리드 애플리케이션을 구축한다면 이 점을 고려해야 한다. 또한 사용자가 어떻게 브라우저를 설치하는지, 이 브라우저를 어떻게 최신 업데이트 상태로 유지하는지도 함께 고려해야 한다. 엣지에 크롬의 자동 업데이트 모델이 도입된다는 것은 사용자가 어느 버전을 설치했고 언제 브라우저를 업데이트할지 개발자가 더 이상 확신할 수 없다는 것을 의미한다. 지금 웹뷰2를 시작하면 사용하는 HTML 및 자바스크립트를 제한하는 방법이든 특정 브라우저 버전과 각각의 새로운 코드 릴리스를 규정하는 방법이든, 코드에서 브라우저 호환성을 확보하기 위한 가장 유연한 접근 방법을 개발할 수 있다.  editor@itworld.co.kr


2019.08.29

마이크로소프트의 새로운 크로미엄 웹뷰 컨트롤 시작하기

Simon Bisson | InfoWorld
새로운 크로미엄 기반 엣지 버전으로의 전환이 순조롭게 진행되고 있다. 마이크로소프트는 몇 개월 전부터 주 단위 개발자 빌드와 일 단위 카나리 빌드의 엣지 인사이더 버전을 제공하고 있으며, 최근에는 최종 사용자에게 초점을 두고 6주 단위로 업데이트되는 더 안정적인 베타 채널 빌드도 공개했다. 이 속도라면 2019년 말이나 2020년 초 무렵에 안정화 버전이 나올 것으로 예상된다.
 
ⓒ Microsoft / Google / Vijay Kumar / GettyImagesBank
 

애플리케이션의 브라우저 컨트롤 변경하기

이 변화는 많은 측면에서 중요하지만 가장 중요한 점은 브라우저와 운영체제의 분리다. 둘 사이의 연결은 원래의 EdgeHTML 기반 엣지가 경쟁 브라우저에 비해 뒤처지게 된 원인이다. 연 2회 윈도우 업데이트를 통해서만 중대한 업데이트를 받을 수 있었기 때문이다. 엣지는 웹 기술의 최첨단은 아니었지만 애플리케이션 개발자, 특히 앱에서 유니버설 윈도우 플랫폼(UWP)의 임베디드 HTML 웹뷰(WebView) 컨트롤을 사용하는 개발자에게는 안정적인 플랫폼이었다.

크로미엄 기반 엣지로 전환한다고 해서 이러한 UWP EdgeHTML 컨트롤의 수명이 끝난 것은 아니지만, 이제 유지 모드에 들어갔다고 봐야 한다. 즉, 더 이상 새로운 기능이 추가되지 않으며 향후 새로운 엣지 브라우저의 기능과 웹 표준의 발전 속도에 비해 빠르게 뒤처질 것이다. 마이크로소프트는 새로운 브라우저 엔진으로의 전환을 위해 새 브라우저 렌더링 엔진을 기반으로 하는 새로운 웹뷰 컨트롤 집합을 출시하고, 애플리케이션에서 브라우저 컨트롤을 사용하는 방법을 개발자가 선택할 수 있도록 할 것이라고 발표했다.
 

웹뷰2 SDK 프리뷰

초여름 무렵 새로운 웹뷰 컨트롤의 프리뷰 버전이 새로운 SDK와 함께 공개됐다. 지금은 윈도우 10의 Win32 C++ API용으로만 제공되지만, 최종적으로 윈도우 7부터(윈도우 서버의 경우 2012 R2부터) 그 이후의 모든 윈도우 버전을 지원한다. 정식 출시 시점에는 UWP, 윈폼(WinForm), WPF 버전 등 인기 있는 모든 윈도우 애플리케이션 개발 플랫폼을 지원할 것이다.

새 컨트롤의 큰 변화 중 하나는 제공되는 방식이다. 두 가지 옵션이 있는데, 첫 번째는 애플리케이션 업데이트를 전달하지 않고도 브라우저로 업데이트되어 사용자가 항상 최신(가장 안전한) 버전의 컨트롤을 사용하도록 하는 상시 최신 버전이다. 두 번째 옵션은 애플리케이션과 함께 패키징되고 해당 애플리케이션 컨텍스트에서만 실행되어 앱과 앱의 컨트롤을 하나의 테스트된 패키지로 만들 수 있게 해주는 맞춤 버전 컨트롤이다.

지금은 상시 최신 SDK만 제공된다. 완전한 크로미엄 패키지로, 상태 표시줄과 크로미엄 개발 툴을 지원한다. 모두 전달 코드에서 비활성화할 수 있지만 개발 중 유용한 정보를 제공하는 역할을 한다. 새 버전은 처음에는 약 6주 간격으로 출시되며, 컨트롤은 뉴겟(NuGet)을 통해 제공된다. SDK API와 기능은 아직 개발 중이므로 지금은 새로운 릴리스가 나오면 재컴파일이 필요하지만 마이크로소프트가 API 서비스를 안정화하고 나면 더 이상 그럴 필요가 없을 것이다.

지금까지 3번 SDK의 프리뷰 릴리스가 나왔다. 최신 0.8.230 버전은 엣지 77.0.230.00 이상을 기반으로 한다. 최근 릴리스에는 닷넷 프로젝트와 네트워크 운영 및 탐색 종료를 위한 API 지원이 추가됐다. 프리뷰 릴리스에서는 탐색 내역, HTTP 헤더를 제어하고 64비트 윈도우에서 32비트 컨트롤을 실행할 수 있다.
 

첫 웹뷰2 애플리케이션 구축하기

시작하기 전에 크로미엄 기반 엣지의 개발자 릴리스와 웹뷰2 SDK를 개발 PC에 설치한다. C++ 윈도우 앱을 빌드하기 위한 비주얼 스튜디오를 설정한 다음 뉴겟을 통해 SDK를 다운로드한다. 뉴겟에서 다운로드해 설치하면 앱에 필요한 대부분의 파일이 솔루션 디렉터리에 추가된다. 사용하려면 애플리케이션에 적절한 헤더 파일을 포함한다. 이미 설치했더라도 업데이트된 릴리스를 확인하는 것이 좋다.

코드에 웹뷰2 컨트롤을 추가하기는 쉽다. 먼저 웹뷰2 환경을 설정한다. 기본값을 그대로 두면 컨트롤은 현재 설치된 엣지 브라우저를 사용한다. 또는 주요 브라우저 설정을 직접 정의할 수도 있다. 예를 들어 앱에 자체 사용자 폴더를 부여하고 특정 브라우저 플래그를 설정할 수 있다. 환경이 설정되면 CreateWebView를 호출해서 웹뷰2 컨트롤을 추가하고 컨트롤의 탐색 속성을 애플리케이션에서 사용하는 URL로 설정한다. NavigationCompleted 이벤트를 사용해서 콘텐츠 로딩을 추적할 수 있다.

코드가 웹뷰2 컨트롤에 의해 로드되는 HTML 문서의 콘텐츠와 상호작용해야 한다면, 페이지에 자바스크립트를 주입할 수 있다. postMessage 이벤트를 사용해서 HTML 콘텐츠로 메시지를 전송할 수 있으며, 이 이벤트는 호스트 애플리케이션 또는 웹 콘텐츠 자바스크립트에서 실행 중인 이벤트 핸들러를 통해 포착이 가능하다.

애플리케이션 안에 웹뷰2를 빌드하기 위해 알아야 할 대부분의 사항은 SDK의 API 참조, 더 구체적으로는 IWebView2WebView 인터페이스에서 볼 수 있다. 여기서 현재 웹뷰를 위한 설정, HTML 및 자바스크립트 콘텐츠를 다루기 위한 컨트롤을 찾아볼 수 있다. 워낙 내용이 많은 관계로 마이크로소프트는 기본적인 웹 브라우저 형태의 유용한 예제를 만들었다. 이 예제를 통해 코드가 웹뷰2 창의 콘텐츠와 어떻게 상호작용하는지 확인하고 자신의 애플리케이션에서는 어떻게 사용해야 하는지 알아볼 수 있다.
 

웹뷰2 브라우저 컨트롤 따라잡기

SDK의 유용한 기능 중 하나는 다양한 엣지 채널을 타겟으로 설정하는 기능이다. 크로미엄 기반 엣지는 4개의 버전으로, 서로 다른 일정과 안정성 수준으로 나뉘어 제공되므로 가장 안정적인 버전 또는 가장 불안정한 버전을 선택하거나 윈도우 레지스트리 키를 통해 채널을 강제 적용하는 방법 등으로 사용할 버전을 제어할 수 있다. 따라서 테스트는 개발자 릴리스에서 하고 전달은 프로덕션 릴리스에서 하는 방법으로 기반 브라우저 엔진의 변경에 항상 미리 준비할 수 있다.

마이크로소프트가 웹뷰2에 중점을 두는 만큼 이제는 코드에서 웹뷰2를 어떻게 사용해야 할지 고민을 해야 한다. 컨트롤이 정식 출시되기까지는 아직 몇 개월의 시간이 있으므로 어떻게 코드를 변경하고 프로토타입을 빌드하고 테스트해야 할지 알아볼 시간은 충분하다. 엣지팀은 오피스의 추가 기능 플랫폼을 웹뷰2를 사용하도록 업데이트하고 있다. 여러분도 마이크로소프트의 기존 HTML5 API(예를 들어 오피스 스토어 앱을 제공하는 데 사용된 API 등)를 사용하는 예전 애플리케이션이 있다면 웹뷰2 기능을 지원하기 위해 무엇을 변경해야 할지 생각해봐야 한다.

웹 코드와 로컬 코드의 혼합은 애플리케이션에 HTML 기반 사용자 인터페이스 구성요소를 렌더링하는 경우에만 타당한 방법이다. 반년 단위 브라우저 업데이트로부터의 탈피는 중대한 변화이므로 웹뷰2를 사용하는 하이브리드 애플리케이션을 구축한다면 이 점을 고려해야 한다. 또한 사용자가 어떻게 브라우저를 설치하는지, 이 브라우저를 어떻게 최신 업데이트 상태로 유지하는지도 함께 고려해야 한다. 엣지에 크롬의 자동 업데이트 모델이 도입된다는 것은 사용자가 어느 버전을 설치했고 언제 브라우저를 업데이트할지 개발자가 더 이상 확신할 수 없다는 것을 의미한다. 지금 웹뷰2를 시작하면 사용하는 HTML 및 자바스크립트를 제한하는 방법이든 특정 브라우저 버전과 각각의 새로운 코드 릴리스를 규정하는 방법이든, 코드에서 브라우저 호환성을 확보하기 위한 가장 유연한 접근 방법을 개발할 수 있다.  editor@itworld.co.kr


X