본문 바로가기

Silverlight

실버라이트 애플리케이션 위에 HTML 엘리먼트를 올리기

<div style="position:absolute;z-index:10">
            <asp:Silverlight ID="Xaml1" runat="server" Source="~/ClientBin/test.xap" MinimumVersion="2.0.30523" Width="400px" Height="400px" PluginBackground="Transparent" Windowless="true" />
        </div>
        <div style="position:absolute;left:100px;top:100px;z-index:50;border:1px solid">
            <a href="http://truepia.tistory.com/" target="_blank">진실세상을 꿈꾸며</a>
        </div>

단, 성능저하는 감수해야 된다는 점은 명심하자.

아래 설명을 보자~!!

=================================================================================================================
'실버라이트 영역 위에 다른 HTML DIV를 올릴 수 있지 않을까? 어차피 실버라이트 애플리케이션도 HTML 태그일 뿐이니까!'

기본적인 실버라이트 애플리케이션 렌더링

한 가지 생각을 해보죠. 실버라이트 애플리케이션은 웹 브라우저 위에 OBJECT 태그로 호스팅되고 있지만 웹 브라우저는 실버라이트 애플리케이션을 어떻게 렌더링해야 하는지 이해할 수 없을 거에요. 당연히 실버라이트 애플리케이션의 영역은 실버라이트 런타임이 렌더링할 책임을 가지고 있을 거에요.

기본적으로 실버라이트 런타임은 실버라이트 애플리케이션의 인스턴스를 생성할 때 자신이 직접 컨트롤하는 'Window'의 인스턴스를 생성하여 자신을 호스팅하는 HTML 페이지를 렌더링하는 Window의 자식 윈도(child window)로 추가를 해요. 그리고 사용자의 명시적인 코드-Win32 프로그래밍에서 많은 개발자를 골치아프게 만들었던 WM_PAINT 메시지 핸들러 따위- 없이도 실버라이트 런타임에 내장된 그래픽 엔진이 XAML을 해석하여 적절한 시점에 적절한 그래픽을 렌더링해 주죠.

실버라이트 런타임이 개발자의 머리속을 헤집어 놓지 않고도 똑똑하게 렌더링을 하지만 한가지 문제가 생겼어요. 바로 렌더링 할 영역이 새로운 윈도가 되기 때문에 기존의 HTML 엘리먼트들을 렌더링하는 윈도와는 별개로 취급되고 다른 HTML 엘리먼트들을 덮어버리게 되는 것이죠. 왜냐하면 윈도우즈 OS의 렌더링은 윈도 단위로 일어나기 때문이에요. 만약 Win32 프로그래밍 경험이 없다면 지금 무슨 얘기를 하는건지 도무지 이해할 수 없을 거에요. 하지만 제가 늘 얘기하듯이 쫄지 마세요! 이해가 되지 않는 부분은 과감하게 무시해도 좋아요. 다만 이해되지 않더라도 세번은 읽어보세요. 언젠가 이것이 이해가 되는 날이 올테니까요.

Window vs Windowless

자 이제 결전의 시간입니다!

 Window 모드와 Windowless 모드 중 어느 쪽을 사용하는 게 더 좋을까요?

 '당연히 다른 HTML 엘리먼트와 조화할 수 있는 Windowless 모드가 더 좋죠!'

 당연히 그렇겠죠? 하지만 Windowless 모드에는 렌더링 방식의 차이에서 오는 치명적인 문제가 있어요. 바로 성능 저하죠.

 이 부분에 대해서는 마이크로소프트에서 확실하게 문서화된 내용이 없어서 정확하지는 않지만 저는 이렇게 추측하고 있어요. 실버라이트 런타임이 실버라이트 애플리케이션을 Windowless 모드로 생성하였을 때 실버라이트 애플리케이션은 다른 HTML 엘리먼트와 동일한 윈도에 자리를 잡게 되겠죠. 아마도 실버라이트 런타임은 이 윈도의 WM_PAINT 메시지를 서브클래싱 하여 HTML 영역이 다시 그려질 때 실버라이트 애플리케이션이 정상적으로 보일 수 있도록 렌더링하고 또한 애플리케이션 자체의 애니메이션 등으로 그래픽의 변화가 있을 때에도 해당 영역을 다시 렌더링 할거에요. 일반적으로 서브클래싱은 윈도의 소유자가 직접 처리하는 윈도 프로시저에 비해 더 느린걸로 알려져 있어요. 당연히 일반적인 렌더링에 비해 한 단계 더 거치니까 느려지겠죠. 하지만 이 차이는 지금의 하드웨어 스펙을 고려해보면 사실상 거의 무의미한 차이일 거에요.

 성능 저하 문제를 논할 정도로 확실한 차이를 보이는 것은 단순한 렌더링이 아닌 색상의 불투명도를 나타내는 알파값이 100%보다 낮을 때 즉, 렌더링해야 할 HTML 엘리먼트와 실버라이트 영역이 서로 색상값이 섞일 때이죠. 일반적으로 2D 그래픽 처리에서 가장 CPU 리소스를 많이 먹는 작업이 바로 알파 블렌딩 작업이라고 해요.

※물론 원형 그래디언트나 폰트의 안티앨리어싱 같은 고도의 연산을 필요로 하는 처리도 있지만 이런 처리의 일부에도 역시 알파 블렌딩이 들어가기 때문에 위와 같은 표현을 사용했어요.

또 한가지, Windowless 모드일 때에는 실버라이트 런타임이 윈도를 완전히 제어하지 않기 때문에 윈도를 다시 렌더링할 적절한 시점을 맞추지 못할 수 있어요. 특히 실버라이트 애플리케이션이 애니메이션을 포함하고 있을 경우 최악의 경우엔 애니메이션이 깜빡거리는 현상의 원인이 되기도 하죠.

 반면 Window 모드에서는 아무리 XAML의 최상위 Canvas를 투명으로 설정한다고 해도 실버라이트 애플리케이션이 렌더링 되는 윈도 자체의 배경 색상이 있기 때문에 알파값은 100%가 되고 알파 블렌딩은 발생하지 않게 되죠. 또한 렌더링에 고려할 요소가 정확히 실버라이트 런타임이 제어하는 윈도로 한정이 되기 때문에 애니메이션 등의 복잡한 렌더링을 높은 효율로 처리할 수 있게될 거에요.

 결론

 항상 강조하는 것.

실버라이트는 HTML 페이지에 호스팅되는 웹 애플리케이션이다.

따라서 필요하다면 Windowless 모드를 사용하여 다른 HTML 엘리먼트들과 계층을 이룰 수 있겠지만, 앞에서 살펴본 것 처럼 Windowless 모드는 많은 대가를 치르게 되므로 가능한 실버라이트 애플리케이션이 자신의 영역을 완전히 차지하도록 디자인 하는 것이 성능상 이득이 있다는 것을 잊지마세요.

 하지만! 너무 겁먹지는 마세요. 실버라이트는 웹 애플리케이션, 그 중에서도 RIA를 위해 나왔잖아요? 멋지고 풍부한 그래픽의 디자인을 지레 겁먹고 죽일 필요는 없을 거에요. 해보지도 않고 상상력을 제한하지 마세요. 한 번 시도해 보세요. 그리고 애플리케이션이 목표로 하는 성능에 부합하는지 테스트 할 수 있을 거에요. 어떤가요? 물론 Window 모드에 비해 CPU 점유율이 높을 수 있을 거에요. 하지만 생각보다 부드럽게 움직이지 않나요? 의외로 CPU 점유율 차이도 많지 않을 수도 있어요. :D


[출처] 실버라이트 네이버 카페