2020.11.30

How To : 웹뷰 2 시작하기

Simon Bisson | InfoWorld
마이크로소프트가 WinUI 3 라이브러리에서 새로운 윈도우 컨트롤 세트로 전환하는 것은 윈도우 SDK의 개발과 전달 방법을 새로 설계하고 있음을 나타내는 신호다. 그 중심에는 API와 컨트롤의 분리다. 즉, 컨트롤을 제공하고 코드로 패키징하기 위한 새로운 방법이다. 마이크로소프트는 전달 모델에 변화를 꾀하고 있다. 더 이상 윈도우와 함께 업데이트되는 것이 아니라 기술의 변화와 새로운 기능의 개발에 따라 업데이트된다.
 
ⓒ Microsoft

최초로 출시되는 새로운 컨트롤 가운데 하나는 익숙한 웹뷰(WebView)의 업데이트된 버전이다. 원래의 웹뷰는 엣지HTML(EdgeHTML) 엔진을 사용해 애플리케이션에 HTML 콘텐츠를 탑재했다. 이로 인해 HTML과 자바스크립트에 대한 업데이트가 윈도우 기능 업데이트로 제한되고 보안 수정은 패치 화요일의 일부로 제공됐다. 

윈도우 설치에 의존하는 방법은 최소 공통 분모 기능을 사용하도록 보장하는 역할을 했다. 기능 탐지(feature detection)를 사용해 CSS 문제에 대처할 수 있었지만, 복잡한 기능의 경우 더 낮은 사양으로 후퇴하기 위한 추가 코드가 필요했다.

새로운 웹뷰 릴리스는 현재의 크로미엄 기반 엣지 브라우저 릴리스를 기반으로 하며, 동일한 프로세스와 리소스 모델을 사용하는 동일한 기능을 제공한다. 마이크로소프트가 여러 채널을 통해 주기적인 빌드를 푸시하고 있으므로 사용자에게 코드를 배포하기 전에 새로운 기능을 준비할 수 있다.


하이브리드 애플리케이션 웹뷰 2, 웹과 네이티브

웹뷰 2는 현대 애플리케이션 플랫폼의 중요한 요소로 HTML과 자바스크립트, CSS를 네이티브 앱과 프로그레시브 웹 앱(Progressive Web App, PWA) 사이에 위치하는 하이브리드 앱의 일부로 코드에 탑재하기 위한 프레임워크를 제공한다. 웹뷰 2에서는 웹 코드를 사용해 특정 UI 사례를 처리하거나 전체 웹사이트를 애플리케이션으로 래핑하고 일렉트론(Electron)에 대한 자체 닷넷 대안을 구축할 수 있다.

마이크로소프트는 이것을 필요한 부분에서 네이티브 코드와 웹을 혼합한 ‘하이브리드 애플리케이션(hybrid applications)’이라고 지칭한다. 웹뷰 2에서는 웹 코드가 PWA의 크로스 플랫폼 API를 거치지 않고 네이티브 API에 직접 액세스할 수 있다. 윈도우 전용으로 구축한다면 크로미엄 UI 기능을 모두 활용하면서 닷넷 UI 셸과 웹뷰 캔버스를 통해 훨씬 더 많은 것을 할 수 있다.

최신 웹뷰 2 빌드는 현재 대부분의 플랫폼에서 정식 출시됐지만 WinUI 3 버전은 WinUI 3의 나머지 부분과 마찬가지로 아직 프리뷰 단계다. 정식 출시되면 Win32, WPF, WinForms 애플리케이션에서 기존 엣지HTML 웹뷰 컨트롤을 새로운 버전으로 대체할 수 있다.


코드에서 웹뷰 2 사용하기

웹뷰 2를 사용하는 방법은 간단하다. 윈도우 프레젠테이션 파운데이션(Windows Presentation Foundation, WPF)으로 작업한다면 닷넷 프레임워크나 닷넷 코어와 함께 사용할 수 있다. 컨트롤 SDK는 뉴겟(NuGet)에 있으므로 추가하면 모든 전제 요건 항목이 추가되고 신속하게 컴파일을 테스트하는 데 사용할 수 있는 스케폴딩(scaffolding) 코드가 생성된다. HTML은 웹뷰 컨트롤과 독패널(DockPanel) 블록의 소스 링크를 사용해 적절한 XAML 네임스페이스에 추가된다.

기본 컨트롤이 준비되면 예를 들어 탐색 바를 더해 기본적인 브라우저를 제공하는 등 독패널에 기능을 추가할 수 있다. 웹뷰 2의 콘텐츠 로딩 프로세스는 호스트 애플리케이션에서 소비할 수 있는 이벤트를 생성해 로드할 콘텐츠 또는 표시할 오류를 대기하도록 할 수 있다. 따라서 무엇을 로드할 수 있는지를 제어하는 코드를 추가해 콘텐츠 하이재킹 위험을 낮추고 외부 연결을 HTTPS로 제한해 가로채기 위험도 낮출 수 있다.


웹/네이티브 장벽 넘기

웹뷰 2를 사용하면 런타임에 자바스크립트 코드를 주입할 수 있다. 이는 주 애플리케이션에 스크립트를 번들로 넣어 필요에 따라 주입할 수 있도록 보장한다. 이 코드는 로드된 콘텐츠에서 자바스크립트보다 먼저 실행되어 동작을 재정의하고 더 다양한 컨트롤을 제공한다. 컨트롤의 자바스크립트는 postMessage 메소드를 통해 호스트 애플리케이션과 통신할 수 있다. 양방향으로 작동하므로 호스트에서 웹 콘텐츠로 이벤트를 돌려보낼 수 있고, 따라서 호스트 앱은 컨트롤의 작업을 구동해 페이지 내 자바스크립트에서 처리하고 사용할 URL 및 기타 데이터를 제공할 수 있다.

메시지는 웹뷰 HTML 콘텐츠를 사용해 애플리케이션을 제어하기 위한 중요한 도구다. 호스트 앱에 의해 파싱된 메시지는 애플리케이션 기능을 트리거할 수 있다. 단, 메시지는 비동기적으로, 콜백 또는 이와 비슷한 메시지 기반 설계 패턴으로 취급해야 한다. 컨트롤에 메시지를 보내고 응답을 기대한다면 await 또는 이와 유사한 구조체에 트랜잭션을 래핑해야 한다.


앱에서 웹뷰 2 구현하기

웹뷰 2에서 중요한 특징 가운데 하나는 고정 버전(Fixed Version) 배포 개념이다. 사용자 또는 IT 부서에 의존해 윈도우 업데이트를 통해 기반 런타임을 최신 상태로 유지하는 대신, 코드에 필요한 크로미엄 요소와 함께 내장할 웹뷰 2의 버전을 선택할 수 있다. 물론 이 경우 설치 번들의 크기가 커지지만 호환되지 않는 엣지 버전의 지원에 대해 걱정할 필요가 없고, 필요한 모든 브라우저 엔진 기능을 사용하는 코드를 빌드할 수 있다.

자체 크로미엄 사본을 번들로 끼워 넣을 경우 보안에 대한 책임이 뒤따른다. 마이크로소프트가 업데이트된 엣지 버전을 내놓을 때마다 새 릴리스를 만들어 배포해야 하며(대략 6주마다 한 번씩) 이를 모든 애플리케이션 지원 모델에 반영해야 한다. 알려진 보안 버그가 있는 엣지 버전을 사용하는 것은 IT 팀 관점에서 거버넌스 문제가 될 수 있고, 오래되고 안전하지 않은 브라우저 구성요소에 의존하는 비즈니스 프로세스에 위험을 더할 수 있다.

그렇다 해도 알려진, 테스트된 구성요소를 코드에 번들로 넣을 때 얻는 장점은 크다. 고정된 번들을 제공하는 방법을 선택하기에 앞서 애플리케이션 사용 모델과 위험 노출을 충분히 분석해야 한다.

대부분의 경우 마이크로소프트에서 지칭하는 에버그린(Evergreen) 모드를 사용하면 된다. 이 모드에서는 기반 웹뷰 2 런타임 플랫폼이 마이크로소프트에 의해 관리된다. 이는 모든 웹뷰 2 애플리케이션에서 공유되는 크로미엄 기반 엣지 바이너리의 수정된 버전으로 업데이트 일정도 동일하다.

이는 사용자에게 애플리케이션으로 보이지 않고 엣지와는 별개로 설치되므로 설치된 브라우저에 의존하지 않는다. 해야 할 일은 소량의 부트스트래퍼(bootstrapper) 코드를 설치 프로그램에 집어넣는 것이 전부다. 이 코드는 런타임이 설치되었는지 여부를 확인하고 설치되지 않았다면 애플리케이션을 설치하기 전에 런타임을 다운로드한다.

웹뷰 2는 새 크로미엄 엣지가 실행되는 모든 곳에서 작동하므로 윈도우 7에서 작동하는 코드에까지 사용할 수 있다. 다만 오래된 윈도우 버전에서의 지원은(특히 윈도우 7, 윈도우 서버 2008 R2와 같이 지원이 종료된 버전의 경우) 마이크로소프트 엣지 지원 라이프사이클로 제한되며, 이 라이프사이클 자체가 크로미엄 프로젝트와 구글의 크롬 지원 모델에 묶인다는 점에 유의해야 한다.

이는 애플리케이션을 현대화하는 흥미로운 방법이며 다양한 윈도우 버전에 걸쳐 일관적인 모양과 느낌을 제공하므로 구형 운영체제의 사용자에게 새로운 애플리케이션을 제공하고, 궁극적으로는 이런 사용자를 더 새로운 윈도우로 유도하는 데 도움이 된다. editor@itworld.co.kr 


2020.11.30

How To : 웹뷰 2 시작하기

Simon Bisson | InfoWorld
마이크로소프트가 WinUI 3 라이브러리에서 새로운 윈도우 컨트롤 세트로 전환하는 것은 윈도우 SDK의 개발과 전달 방법을 새로 설계하고 있음을 나타내는 신호다. 그 중심에는 API와 컨트롤의 분리다. 즉, 컨트롤을 제공하고 코드로 패키징하기 위한 새로운 방법이다. 마이크로소프트는 전달 모델에 변화를 꾀하고 있다. 더 이상 윈도우와 함께 업데이트되는 것이 아니라 기술의 변화와 새로운 기능의 개발에 따라 업데이트된다.
 
ⓒ Microsoft

최초로 출시되는 새로운 컨트롤 가운데 하나는 익숙한 웹뷰(WebView)의 업데이트된 버전이다. 원래의 웹뷰는 엣지HTML(EdgeHTML) 엔진을 사용해 애플리케이션에 HTML 콘텐츠를 탑재했다. 이로 인해 HTML과 자바스크립트에 대한 업데이트가 윈도우 기능 업데이트로 제한되고 보안 수정은 패치 화요일의 일부로 제공됐다. 

윈도우 설치에 의존하는 방법은 최소 공통 분모 기능을 사용하도록 보장하는 역할을 했다. 기능 탐지(feature detection)를 사용해 CSS 문제에 대처할 수 있었지만, 복잡한 기능의 경우 더 낮은 사양으로 후퇴하기 위한 추가 코드가 필요했다.

새로운 웹뷰 릴리스는 현재의 크로미엄 기반 엣지 브라우저 릴리스를 기반으로 하며, 동일한 프로세스와 리소스 모델을 사용하는 동일한 기능을 제공한다. 마이크로소프트가 여러 채널을 통해 주기적인 빌드를 푸시하고 있으므로 사용자에게 코드를 배포하기 전에 새로운 기능을 준비할 수 있다.


하이브리드 애플리케이션 웹뷰 2, 웹과 네이티브

웹뷰 2는 현대 애플리케이션 플랫폼의 중요한 요소로 HTML과 자바스크립트, CSS를 네이티브 앱과 프로그레시브 웹 앱(Progressive Web App, PWA) 사이에 위치하는 하이브리드 앱의 일부로 코드에 탑재하기 위한 프레임워크를 제공한다. 웹뷰 2에서는 웹 코드를 사용해 특정 UI 사례를 처리하거나 전체 웹사이트를 애플리케이션으로 래핑하고 일렉트론(Electron)에 대한 자체 닷넷 대안을 구축할 수 있다.

마이크로소프트는 이것을 필요한 부분에서 네이티브 코드와 웹을 혼합한 ‘하이브리드 애플리케이션(hybrid applications)’이라고 지칭한다. 웹뷰 2에서는 웹 코드가 PWA의 크로스 플랫폼 API를 거치지 않고 네이티브 API에 직접 액세스할 수 있다. 윈도우 전용으로 구축한다면 크로미엄 UI 기능을 모두 활용하면서 닷넷 UI 셸과 웹뷰 캔버스를 통해 훨씬 더 많은 것을 할 수 있다.

최신 웹뷰 2 빌드는 현재 대부분의 플랫폼에서 정식 출시됐지만 WinUI 3 버전은 WinUI 3의 나머지 부분과 마찬가지로 아직 프리뷰 단계다. 정식 출시되면 Win32, WPF, WinForms 애플리케이션에서 기존 엣지HTML 웹뷰 컨트롤을 새로운 버전으로 대체할 수 있다.


코드에서 웹뷰 2 사용하기

웹뷰 2를 사용하는 방법은 간단하다. 윈도우 프레젠테이션 파운데이션(Windows Presentation Foundation, WPF)으로 작업한다면 닷넷 프레임워크나 닷넷 코어와 함께 사용할 수 있다. 컨트롤 SDK는 뉴겟(NuGet)에 있으므로 추가하면 모든 전제 요건 항목이 추가되고 신속하게 컴파일을 테스트하는 데 사용할 수 있는 스케폴딩(scaffolding) 코드가 생성된다. HTML은 웹뷰 컨트롤과 독패널(DockPanel) 블록의 소스 링크를 사용해 적절한 XAML 네임스페이스에 추가된다.

기본 컨트롤이 준비되면 예를 들어 탐색 바를 더해 기본적인 브라우저를 제공하는 등 독패널에 기능을 추가할 수 있다. 웹뷰 2의 콘텐츠 로딩 프로세스는 호스트 애플리케이션에서 소비할 수 있는 이벤트를 생성해 로드할 콘텐츠 또는 표시할 오류를 대기하도록 할 수 있다. 따라서 무엇을 로드할 수 있는지를 제어하는 코드를 추가해 콘텐츠 하이재킹 위험을 낮추고 외부 연결을 HTTPS로 제한해 가로채기 위험도 낮출 수 있다.


웹/네이티브 장벽 넘기

웹뷰 2를 사용하면 런타임에 자바스크립트 코드를 주입할 수 있다. 이는 주 애플리케이션에 스크립트를 번들로 넣어 필요에 따라 주입할 수 있도록 보장한다. 이 코드는 로드된 콘텐츠에서 자바스크립트보다 먼저 실행되어 동작을 재정의하고 더 다양한 컨트롤을 제공한다. 컨트롤의 자바스크립트는 postMessage 메소드를 통해 호스트 애플리케이션과 통신할 수 있다. 양방향으로 작동하므로 호스트에서 웹 콘텐츠로 이벤트를 돌려보낼 수 있고, 따라서 호스트 앱은 컨트롤의 작업을 구동해 페이지 내 자바스크립트에서 처리하고 사용할 URL 및 기타 데이터를 제공할 수 있다.

메시지는 웹뷰 HTML 콘텐츠를 사용해 애플리케이션을 제어하기 위한 중요한 도구다. 호스트 앱에 의해 파싱된 메시지는 애플리케이션 기능을 트리거할 수 있다. 단, 메시지는 비동기적으로, 콜백 또는 이와 비슷한 메시지 기반 설계 패턴으로 취급해야 한다. 컨트롤에 메시지를 보내고 응답을 기대한다면 await 또는 이와 유사한 구조체에 트랜잭션을 래핑해야 한다.


앱에서 웹뷰 2 구현하기

웹뷰 2에서 중요한 특징 가운데 하나는 고정 버전(Fixed Version) 배포 개념이다. 사용자 또는 IT 부서에 의존해 윈도우 업데이트를 통해 기반 런타임을 최신 상태로 유지하는 대신, 코드에 필요한 크로미엄 요소와 함께 내장할 웹뷰 2의 버전을 선택할 수 있다. 물론 이 경우 설치 번들의 크기가 커지지만 호환되지 않는 엣지 버전의 지원에 대해 걱정할 필요가 없고, 필요한 모든 브라우저 엔진 기능을 사용하는 코드를 빌드할 수 있다.

자체 크로미엄 사본을 번들로 끼워 넣을 경우 보안에 대한 책임이 뒤따른다. 마이크로소프트가 업데이트된 엣지 버전을 내놓을 때마다 새 릴리스를 만들어 배포해야 하며(대략 6주마다 한 번씩) 이를 모든 애플리케이션 지원 모델에 반영해야 한다. 알려진 보안 버그가 있는 엣지 버전을 사용하는 것은 IT 팀 관점에서 거버넌스 문제가 될 수 있고, 오래되고 안전하지 않은 브라우저 구성요소에 의존하는 비즈니스 프로세스에 위험을 더할 수 있다.

그렇다 해도 알려진, 테스트된 구성요소를 코드에 번들로 넣을 때 얻는 장점은 크다. 고정된 번들을 제공하는 방법을 선택하기에 앞서 애플리케이션 사용 모델과 위험 노출을 충분히 분석해야 한다.

대부분의 경우 마이크로소프트에서 지칭하는 에버그린(Evergreen) 모드를 사용하면 된다. 이 모드에서는 기반 웹뷰 2 런타임 플랫폼이 마이크로소프트에 의해 관리된다. 이는 모든 웹뷰 2 애플리케이션에서 공유되는 크로미엄 기반 엣지 바이너리의 수정된 버전으로 업데이트 일정도 동일하다.

이는 사용자에게 애플리케이션으로 보이지 않고 엣지와는 별개로 설치되므로 설치된 브라우저에 의존하지 않는다. 해야 할 일은 소량의 부트스트래퍼(bootstrapper) 코드를 설치 프로그램에 집어넣는 것이 전부다. 이 코드는 런타임이 설치되었는지 여부를 확인하고 설치되지 않았다면 애플리케이션을 설치하기 전에 런타임을 다운로드한다.

웹뷰 2는 새 크로미엄 엣지가 실행되는 모든 곳에서 작동하므로 윈도우 7에서 작동하는 코드에까지 사용할 수 있다. 다만 오래된 윈도우 버전에서의 지원은(특히 윈도우 7, 윈도우 서버 2008 R2와 같이 지원이 종료된 버전의 경우) 마이크로소프트 엣지 지원 라이프사이클로 제한되며, 이 라이프사이클 자체가 크로미엄 프로젝트와 구글의 크롬 지원 모델에 묶인다는 점에 유의해야 한다.

이는 애플리케이션을 현대화하는 흥미로운 방법이며 다양한 윈도우 버전에 걸쳐 일관적인 모양과 느낌을 제공하므로 구형 운영체제의 사용자에게 새로운 애플리케이션을 제공하고, 궁극적으로는 이런 사용자를 더 새로운 윈도우로 유도하는 데 도움이 된다. editor@itworld.co.kr 


X