[Windows 8] WebView와 WebViewBrush

얼마전에 만든 '자신에 대한 고찰 RSS Reader'에서 저는 다음 기능을 소개해드렸습니다.

 

 

사실 이게 별거 아닌거처럼 보이는데 여기에는 심오한 뜻이 달려있습니다. 바로 WebView와 AppBar가 동시에 쓰였다는 겁니다.

참 그전에 WebView에 대해서 잠깐 소개해드리겠습니다. WebView 컨트롤은 외부 HTML 소스를 우리가 보는 웹페이지처럼 쉽게 변환시켜주는 컨트롤입니다. 사실 지금 여러분들이 보고 계시는 웹페이지는 html이라는 하나의 문서로 작성되어 있습니다. 그걸 확인해보시려면 그냥 인터넷 브라우져 여신후에 F12 키를 누르시거나 마우스 우클릭으로 소스보기를 누르시면 됩니다.

 

 

이게 원래 웹페이지를 구현하는 html인 것이지요. 이걸

 

 

이렇게처럼 보이게 해줍니다. 그걸 브라우져가 해주는 건데.. 그럼 Windows 8 App에서는 어떻게 저 문서를 처리할까요? 그래서 WebView라는 것이 쓰입니다. WebView를 하나 지정한 후에

와 같이 html 데이터를 가진 값을 넣어주기만 하면 그게 우리가 보는 웹페이지처럼 보이게 된다는 거지요. 그래서 RSS Reader에서도 그걸 그대로 활용하고 있습니다.

 

그런데 문제가 있습니다. WebView 자체가 하나의 단일 UI라는 겁니다. 사실 지금 C#을 기반으로 개발하고 계신 분들은 지금 화면에 표현되고 있는 모든 개체가 XAML을 바탕으로 형성된다고 생각하실 수도 있지만 이 WebView는 다릅니다. 그리고 보통 XAML이 그려진 뒤에 이 WebView가 랜더링되기 때문에 이에 대한 문제가 발생합니다. 그냥 무작정쓰면 다음과 같이 구현됩니다.

 

 

자 보이시나요? 뭐가 문제인지... 안보이시는 분을 위해서 한번 더 자세하게 보여드립니다.

 

 

이렇게 XAML 기반의 AppBar를 가리는 현상이 발생합니다. 그리고 그냥 SettingsPane은 가만히 놔두는데 XAML 기반으로 만든 Flyout 컨트롤도 가려버리게 됩니다.

MS 개발진의 말로는 어쩔수없는 현상이랍니다. 그래서 개선점이 나오기까지의 대체 방안에 대해서 언급해놨습니다. 이 글에서도 그걸 소개할텐데 이해가 안 가시는 분은 공식 문서를 참고하시기 바랍니다. (http://msdn.microsoft.com/en-us/library/windows/apps/xaml/hh781232.aspx)

 

그 대체 방안이라고 함은 바로 WebViewBrush라는 Brush Type을 사용하라는 겁니다. WebViewBrush란 WebView의 내용을 하나의 이미지화 시켜서 Xaml상으로 다시 그리게 해주는 컨트롤입니다. 그래서 AppBar가 올라올때와 닫혔을때의 이벤트에 이 컨트롤을 사용하는 것이 간접적인 해결 방법입니다. 구현 방법은 다음과 같습니다.

(우선 appbar가 삽입되어 있음을 가정하고 언급합니다.)

 

자 우선은 appBar에 이벤트를 두개 만듭니다. 올라올때의 이벤트는 opened, 닫혔을때의 이벤트는 closed로 나타납니다.

 

 

맨날 소개해드린 방법을 활용하면 cs 코드부에 해당 이벤트 핸들러가 붙을겁니다.

다음은 WebView가 있던 곳에 다음과 같이 작성해줍니다.

 

 

하나의 RowDefinition을 형성해서 그안에 WebView와 rectangle을 집어넣었습니다. 당연히 Rectangle과 WebView는 현재 겹쳐져 있는 상태입니다.

이쯤 오면 아마 어떤건지 감이 오실겁니다. 안 오시는 분을 위해서 코드부로 들어가겠습니다.

 

 

앞에서 이벤트 핸들러를 만들었습니다. Appbar가 열릴때면 Appbar_Opened, 닫힐때면 AppBar_Closed 이벤트가 활성화될겁니다. 먼저 열렸을때는 WebView는 가라앉고 대신 앞에서 만든 Rectangle의 속을 앞에서 소개해드린 WebViewBrush로 채우면 될겁니다. 

 

타겟 이름만 제대로 맞추고 Redraw 메서드를 써주게 되면 그위를 WebviewBrush가 그리게 하는 거지요. 즉, 이게 동작되는 순간 여러분들은 WebViewBrush로 그려진 가짜 WebView를 보시게 되는 겁니다. 당연히 그냥 Brush로 그린 것이기에 WebView상의 개체들이 동작하지 않습니다. 아마 MS에서 의도한 요지는 appbar나 flyout을 사용할때 WebView를 동작할 필요가 없다고 가정한 것 같습니다.

 그리고 반대로 appbar가 닫힌다면 앞에서 가라앉힌 WebView를 다시 보이게 하고 기존의 Rectangle은 투명하게 하면 되겠지요.

 

 

이렇게 하면 동작은 다음과 같이 됩니다.

 

 

아까와 같이 가리는 현상이 사라졌습니다. 이걸로써 문제는 해결된 거 같이 보입니다. 하지만 앞에서 언급드린 것처럼 이건 정답이 아닌 간접적 해결방안입니다. 눈썰미 있으신분은 눈치채시겠지만 글자체나 이미지들이 WebView로 보여질때와 조금씩 바뀐것을 보실 수 있을겁니다. 비교를 하면 다음과 같이 되는 것이지요.

 

뭐 Brush로 그려지니 어쩔수없는 한계려니 합니다. 아무튼 추후에 개선될 예정이라는 이야기를 들었는데 어떤식으로 될건지는 궁금하네요. 아무튼 요기까지입니다.