이 내용은 2011년 6월 현재 Silverlight5 Beta를 기준으로 작성 되었으며 Silverlight5 공식버전(RTM) 발표까지 꾸준히 업데이트 예정입니다.
아울러, 현재 Beta버전이지만 강좌를 따라해 보시는데 아무 문제 없으실거에요. 도움 되시길 바랍니다.
==================================================================================================



기본적으로 실버라이트는 브라우저 플러그인으로서 브라우저 안에서 돌아갑니다. 하지만… 사람들은 실버라이트로 데스크탑 응용 프로그램도 만들 수 있게 해달라고 했지요…

 

그 결과 실버라이트 응용 프로그램이 브라우저 밖에서도 돌아갈 수 있도록 해주는 Out-Of-Browser (이하 OOB)라는 기능이 추가되었습니다. OOB를 이용하면 실버라이트로 데스크탑 응용 프로그램을 만들 수 있습니다.

 

이번 강좌에서는 실버라이트의 OOB에 대해서 살펴보도록 하겠습니다.

 

 

 

 

OOB (Out-Of-Browser)란?

 

OOB는 실버라이트를 브라우저 밖에서도 작동할 수 있게 해주는 기능입니다. 브라우저가 없어도 작동한다는 것은 데스크탑 응용 프로그램이 된다는 것이죠^^

 

그런데, 실버라이트의 OOB는 일반적인 데스크탑 프로그램과는 달리 웹과 데스크탑 모두에 걸쳐있습니다.

 

그 이유는 다음과 같습니다.

1) 하나의 실버라이트 프로그램이 데스크탑과 브라우저에서 모두 작동하게 만들 수 있습니다.

2) 웹을 통해서 실버라이트 OOB 프로그램을 설치하게 됩니다.

 

 

OOB를 사용하면 실버라이트 프로그램을 데스크탑에서 작동하게 할 수 있는 것 이외에 또 다른 장점이 있습니다. 바로 실버라이트 보안 제약 사항의 완화이죠.

 

실버라이트는 ActiveX와 달리 보안 제약사항이 굉장히 많습니다. MS가 ActiveX로 크게 데어서인지 실버라이트에는 여러 가지 제약을 많이 있습니다. 그런데, OOB를 사용하게 되면 실버라이트의 많은 보안 제약 사항들이 완화가 됩니다. 데스크탑 프로그램으로서 작동하려면 당연한 것이죠.

 

 

 

대략적으로 다음과 같은 보안 제약 사항이 완화가 됩니다.

- 크로스 도메인 제약 완화: 다른 도메인이 있는 리소스에 접근할 수 있으며 웹 서비스 등 네트워크 기능도 사용할 수 있습니다.

- 로컬 파일 접근 가능: 특히 실버라이트 5에서는 모든 폴더에 접근할 수 있습니다.

- 전체 화면에서 키 입력 제약 없음: 브라우저 안에서는 피싱 방지를 위해 전체화면 모드에서는 키 입력 제약이 많습니다.

- 로컬 시스템의 COM 개체 사용 가능: Excel과 같이 COM  개체를 사용할 수 있도록 함으로써 엄청나게 기능을 확장할 수 있습니다.

 

 

이 이외로 세세하게 여러 가지 제약 사항이 완화되어서 데스크탑 응용 프로그램을 만들 수 있게 해줍니다.

 

그런데, 위 기능 중에서 상당 부분은 보안상 위험할 수도 있는 것들입니다. 그래서 OOB에서는 권한 상승(Elevated Trust)를 허용한 경우에 한하여 사용할 수 있도록 하고 있습니다.

 

 

 

 

OOB 프로그램 만들기

 

그럼 간단한 OOB 프로그램을 만들어보도록 합시다.

 

Visual Studio를 실행해서 Silverlight Application 프로젝트를 하나 생성합니다.

 

image_2.png

 

 

 

 

웹에서도 테스트를 해봐야 하므로 ASP.NET 프로젝트도 같이 생성해줍니다.

 

image_4.png

 

 

 

 

MainPage.xaml에 Button 하나 추가해줍니다. 프로그램이 하얗게 나오면 보기가 안좋으니까요^^

 

image_6.png

 

 

 

 

프로젝트를 실행해봅시다. 잘 실행되죠?

 

image_8.png

 

 

 

 

 

 

 

이제, 이 프로그램을 OOB로 바꿔봅시다.

 

사실 OOB 프로그램을 만드는 것은 엄청 간단합니다. 다음과 같이 체크박스 하나만 체크해주면 끝이지요^^

 

image_10.png

 

 

 

 

 

다시 한번 프로젝트를 실행해봅시다. 이 때 반드시 ASP.NET 프로젝트를 시작 프로젝트로 지정해주세요.

프로그램 위에서 마우스 오른쪽 버튼을 클릭하면 다음과 같이 새로운 메뉴가 생깁니다.

 

image_12.png

 

 

 

 

설치 메뉴를 클릭하면 다음과 같이 확인 창이 뜹니다.

 

image_16.png

 

 

 

확인을 누르면 시작 메뉴와 바탕화면에 프로그램의 아이콘이 추가되면서 윈도우 프로그램처럼 바로 실행됩니다.

프로그램 창이 브라우저가 아님을 잘 보세요.

 

image_18.png

image_20.png

image_22.png

 

 

 

 

혹시 실버라이트 프로그램 URL의 단축 아이콘이 아닌가 생각하실 수도 있겠지만 인터넷을 끊고 실행해도 잘 실행됩니다.

 

 

 

 

OOB 만드는 것 참 쉽죠?^^

 

 

 

 

프로젝트 속성 창에서 OOB 옵션 버튼을 클릭하면 추가 옵션을 설정할 수 있습니다.

 

image_24.png

 

 

image_26.png

 

 

 

여러 가지 옵션 중에서  빨간색 상자 안의 “Requre elevated trust when runniong outside the browser” 옵션을 잘 봐주세요.

이 옵션을 체크하면 OOB 프로그램이 권한 상승 모드로 실행되어 실버라이트의 기본 보안 제약을 뛰어넘어서 다양한 기능을 활용할 수 있게 됩니다.

 

 

근데, 항상 이 옵션을 체크하면 편리하지 않을까 하는 생각이 드실 수도 있지만 이 옵션을 체크하면 설치할 때 다음과 같은 경고 메시지가 뜨게 됩니다. 마치 비스타/윈도우 7의 UAC 경고창과 비슷한 느낌이군요.

 

image_28.png

 

 

 

위 경고창에서 게시자를 지정해주려면 XAP 파일에 서명을 해야 합니다. 프로젝트 속성의 Singing 탭에서 XAP 파일에 서명할 수 있습니다.

 

image_30.png

 

 

 

 

 

이처럼 OOB 프로그램은 일반적인 데스크탑 응용 프로그램과는 다른 방법으로 설치가 됩니다.

 

 

그런데, 프로그램을 업데이트하려면 어떻게 해야 할까요? 프로그램을 업데이트해야 할 경우에는 웹 서버에 있는 XAP 파일만 덮어써주면 끝납니다. 그러면 사용자가 단축 아이콘으로 OOB 프로그램을 실행할 때 자동으로 서버에서 최신 XAP 파일을 가져와서 바로 실행해줍니다. 어떻게 보면 ClickOnce와도 비슷한 면이 있군요.

 

 

 

 

 

OOB 프로그램 샘플

 

이번에는 좀더 복잡한 OOB 샘플을 통해 OOB의 몇 가지 기능에 대해서 살펴보도록 하겠습니다.

 

 

다음과 같이 MainPage.xaml에는 차트와 버튼들이 들어가 있습니다.

image_32.png

 

 

 

다음은 MainPage.xaml 소스입니다.

 

<UserControl

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit"

    x:Class="InstallationExperience.MainPage"

    mc:Ignorable="d"

    d:DesignHeight="500" d:DesignWidth="640">

    <Grid x:Name="LayoutRoot" Background="White">

       <Grid.RowDefinitions>

          <RowDefinition/>

          <RowDefinition Height="52"/>

       </Grid.RowDefinitions>

   

      <toolkit:Chart Title="Chart Title" Margin="5">

          <toolkit:ColumnSeries DependentValuePath="X" IndependentValuePath="Y">

             <toolkit:ColumnSeries.ItemsSource>

                <PointCollection>

                   <Point>5,1</Point>

                   <Point>6,2</Point>

                   <Point>7,3</Point>

                   <Point>8,4</Point>

                   <Point>9,5</Point>

                   <Point>7,6</Point>

                </PointCollection>

             </toolkit:ColumnSeries.ItemsSource>

          </toolkit:ColumnSeries>

       </toolkit:Chart>

      

       <StackPanel HorizontalAlignment="Center" Orientation="Horizontal" Grid.Row="1" Margin="10">

            <Button x:Name="btnSave" Content="저장" Width="100" Margin="10,0"/>

            <Button x:Name="btnToggleFullScreen" Content="전체화면 전환" Width="100" Margin="10,0"/>

            <TextBox Text="" Width="100"/>

            <Button x:Name="btnExport" Content="Excel로 내보내기" Width="120" Margin="10,0"/>

       </StackPanel>

    </Grid>

</UserControl>

 

 

 

 

처음 OOB 예제에서는 실버라이트 프로그램에서 사용자가 마우스 우클릭 한 후 설치 메뉴를 눌렀는데, 실제 프로그램을 이렇게 만들었다가는 사용자가 어떻게 설치하는지 자체를 모를 수가 있습니다.

 

 

 

그래서, 다음과 같이 InstallationInstructionControl.xaml 이라는 UserControl을 추가한 후 설치 안내 UI를 만들었습니다.

 

image_34.png

 

 

 

 

다음은 코드 비하인드 소스입니다.

사용자가 버튼을 클릭하면 Application.Current.Install 메서드를 호출하여 프로그램이 바로 설치되도록 할 수 있습니다.

 

image_36.png

 

 

 

 

 

MainPage.xaml.cs의 소스를 봅시다.

image_38.png

 

 

 

 

MainPage가 로드 될 때 InstallState 속성을 이용하여 프로그램이 설치되어 있는지 확인하고 설치되어있지 않으면 InstallationInstructionControl를 화면에 보여줘서 사용자가 설치하도록 유도하고 있습니다.

 

IsRunningOutOfBrowser 속성을 이용하면 현재 프로그램이 OOB로 실행되었는지 아닌지 알아낼 수 있습니다. 위 소스에서는 프로그램을 이미 설치한 상황에서 브라우저 내에서 실버라이트 프로그램을 실행한 경우 바탕화면의 단축 아이콘으로 실행하라고 안내 메시지를 띄우고 있습니다.

 

이처럼, OOB에서는 여러 가지 유용한 속성들을 이용하여 사용자가 보다 쉽게 OOB 프로그램을 설치하고 사용할 수 있도록 설치 경험을 커스터마이징 할 수 있도록 해줍니다.

 

 

 

한 번 실행해볼까요?

 

다음과 같이 우리가 만든 설치 안내 화면이 뜨는군요.

 

image_40.png

 

 

 

프로그램 설치하기 버튼을 클릭하면 보안 경고가 뜹니다. 이 프로그램은 권한 상승을 사용했기 때문이죠.

 

image_42.png

 

 

 

 

프로그램을 설치한 후 다시 웹 사이트에 접근하면 다음과 같이 안내 메시지가 뜹니다.

 

image_44.png

 

 

 

 

 

이 프로그램은 OOB의 기능 3가지를 구현하고 있습니다. 하나씩 살펴보도록 하죠.

 

1) 로컬 파일 접근

 

저장 버튼을 클릭하면 로컬 디스크에 파일을 생성해줍니다.

 

image_46.png

 

 

 

소스를 보도록 하죠.

image_50.png

 

 

 

이 소스는 내 문서 폴더와 c:\temp 폴더에 MyData.txt를 생성합니다.

 

실버라이트 4에서는 권한상승을 하더라도 내 문서 ,내 음악, 내 비디오 등 특수 폴더에만 접근할 수 있었는데, 실버라이트 5에서는 이 제약 사항이 완화되어서 모든 로컬 경로에 접근할 수 있도록 변경되었습니다. 따라서 위 소스는 실버라이트 4에서는 에러가 나고 실버라이트 5에서는 잘 돌아가지요.

 

파일 시스템을 다루는 방법은 데스크탑용 .NET Framework과 거의 동일합니다.

 

HasElevatedPermissins 속성을 이용하면 현재 OOB 프로그램이 권한 상승 상태인지 확인할 수 있습니다. 로컬 파일 시스템 접근은 권한 상승이 필요한 작업이므로, 권한 상승되지 않은 OOB에서 실행하면 오류가 나기 때문에 미리 체크하여 오류를 막고 있네요.

 

이처럼 권한상승된 OOB는 로컬 파일 시스템에 마음대로 접근할 수 있기 때문에 진짜 데스크탑 응용 프로그램처럼 다양한 기능을 만드실 수 있을 것 같네요.

 

 

 

2) 전체 화면에서 키 입력 제약 완화

 

전체 화면 전환 버튼을 누르면 전체화면과 일반 화면이 전환됩니다. 이때, 브라우저 내에서는 전체화면 전환 시 화면 가운데에 경고 메시지가 뜨는데 OOB에서는 안 뜹니다. 그리고, 모든 키도 입력이 되지요. 전체화면으로 전환한 후 텍스트박스에 키 입력을 해보면 잘 됨을 확인하실 수 있습니다.

 

image_52.png

 

 

이 기능은 실버라이트로 키오스크 응용 프로그램 만들 때 필수적입니다.

 

 

 

 

3) COM 오토메이션

 

권한 상승 OOB의 최고 매력중의 하나가 COM 객체를 생성할 수 있다는 겁니다. COM 오토메이션을 사용하면 실버라이트의 기능을 무궁무진하게 확장할 수 있습니다. 이 샘플은 COM  오토메이션을 이용하여 엑셀을 제어하는 코드를 담고 있습니다.

 

 

image_54.png

 

 

 

위 코드에서는 Excel.Application이라는 COM 객체를 생성한 다음, 셀에 값을 채우고 그래프까지 그립니다.

 

이 코드를 실행하면 다음과 같이 자동으로 엑셀이 뜨면서 그래프가 그려집니다.

 

image_56.png

 

 

 

OOB의 COM 객체 생성 기능은 실버라이트의 기능을 확장할 뿐만 아니라 기존 Unmanaged 프로그램과도 연계할 수 있게 해줍니다. 물론, 보안성에는 좀 약하겠지요. 하지만, 사용하기에 따라서 실버라이트의 가치를 몇 배 올려줄 수 있는 기능이라고 생각합니다.

 

 

 

 

이번 강좌에서는 실버라이트의 OOB의 기본 개념과 몇 가지 기능에 대해서 살펴봤습니다. 현재 실버라이트가 처해진 상황을 봤을 때 버전업 할 때마다 OOB의 기능이 강화될 것으로 예상이 되며, 특히 인트라넷에서의 OOB 활용도가 더욱 높아질 것으로 예상이 됩니다.



Silverlight5 시리즈 강좌 리스트
[Silverlight5강좌] 1. 실버라이트, 어디에 쓰는 물건인가요?
[Silverlight5강좌] 2. 실버라이트로 Hello World 만들기
[Silverlight5강좌] 3. 레이아웃 시스템 이해하기 #1 - 레이아웃 시스템 개념 이해하기
[Silverlight5강좌] 4. 레이아웃 시스템 이해하기 #2 - 레이아웃 시스템의 꽃 Grid 살펴보기
[Silverlight5강좌] 5. 이것만은 꼭! - 간단한 Expression Blend 사용법
[Silverlight5강좌] 6. 유저 인터페이스를 만들어봅시다 - 기본 컨트롤 사용하기
[Silverlight5강좌] 7. 나에게 더 많은 컨트롤을 줘! - Silverlight Toolkit
[Silverlight5강좌] 8. 컨트롤 사이의 연결 고리 - Element Binding
[Silverlight5강좌] 9. 데이터 바인딩 #1 - DataContext
[Silverlight5강좌] 10. 좀더 깊은 곳으로 - 의존 속성(Dependency Property) 이해하기
[Silverlight5강좌] 11. 애니메이션 시스템 이해하기 #1 - Render Transform
[Silverlight5강좌] 12. 애니메이션 시스템 이해하기 #2 - Perspective 3D
[Silverlight5강좌] 13. 애니메이션 시스템 이해하기 #3 - Storyboard
[Silverlight5강좌] 14. 한 방에 편리하게 모양 바꾸기 - Style
[Silverlight5강좌] 15. 컨트롤 모양을 내 마음대로 - ControlTemplate
[Silverlight5강좌] 16. 나만의 컨트롤 만들기 - User Control
[Silverlight5강좌] 17. 실버라이트의 최고 장점! 미디어 제어하기 - MediaElement
[Silverlight5강좌] 18. 손쉽게 다중 페이지 UI 만들기 - Navigation Framework
[Silverlight5강좌] 19. 실버라이트로 데스크탑 응용 프로그램 만들기
[Silverlight5강좌] 20. 실버라이트 응용 프로그램 배포하기




Silverlight5 동영상 강좌 리스트

[Silverlight5 동영상 강좌] 2. 실버라이트로 Hello World 만들기
[Silverlight5 동영상 강좌] 3. 레이아웃 시스템 이해하기 #1 - 레이아웃 시스템 개념 이해하기
[Silverlight5 동영상 강좌] 4. 레이아웃 시스템 이해하기 #2 - 레이아웃 시스템의 꽃 Grid 살펴보기
[Silverlight5 동영상 강좌] 5. 이것만은 꼭! - 간단한 Expression Blend 사용법
[Silverlight5 동영상 강좌] 6. 유저 인터페이스를 만들어봅시다 - 기본 컨트롤 사용하기
[Silverlight5 동영상 강좌] 7. 나에게 더 많은 컨트롤을 줘! - Silverlight Toolkit
[Silverlight5 동영상 강좌] 8. 컨트롤 사이의 연결 고리 - Element Binding
[Silverlight5 동영상 강좌] 9. 데이터 바인딩 #1 - DataContext
[Silverlight5 동영상 강좌] 10. 좀더 깊은 곳으로 - 의존 속성(Dependency Property) 이해하기
[Silverlight5 동영상 강좌] 11. 애니메이션 시스템 이해하기 #1 - Render Transform
[Silverlight5 동영상 강좌] 12. 애니메이션 시스템 이해하기 #2 - Perspective 3D
[Silverlight5 동영상 강좌] 13. 애니메이션 시스템 이해하기 #3 - Storyboard
[Silverlight5 동영상 강좌] 14. 한 방에 편리하게 모양 바꾸기 - Style
[Silverlight5 동영상 강좌] 15. 컨트롤 모양을 내 마음대로 - ControlTemplate
[Silverlight5 동영상 강좌] 16. 나만의 컨트롤 만들기 - User Control
[Silverlight5 동영상 강좌] 17. 실버라이트의 최고 장점! 미디어 제어하기 - MediaElement
[Silverlight5 동영상 강좌] 18. 손쉽게 다중 페이지 UI 만들기 - Navigation Framework
[Silverlight5 동영상 강좌] 19. 실버라이트로 데스크탑 응용 프로그램 만들기
[Silverlight5 동영상 강좌] 20. 실버라이트 응용 프로그램 배포하기







profile