Hey, Scripting Guy!Silverlight가 있으라!

Microsoft Scripting Guys

이 기사의 코드 다운로드: HeyScriptingGuy2007_10.exe (156KB)

지금까지 인류 역사는 적대적 세력 간의 충돌로 점철되어왔습니다. 로마인과 이방인 무리 간의 충돌, Hatfield 가문과 McCoy 가문의 충돌 등이 대표적인 사례겠지요. 이뿐만이 아닙니다. 지금 이 순간에도 시스템 관리 스크립팅에 관한 칼럼에서는 시스템 관리 스크립팅과 실질적인 관련이 있는 이야기를 해야지, 적대적 세력 간의 역사적 투쟁 따위에 관해서 떠들면 안 된다고 믿는 분들과 Scripting Guys 사이의 충돌이... [또는 이를테면, 퍽...! —편집자]

컴퓨터 분야 역시 그와 같은 적대적 세력 간의 충돌로부터 자유롭지 않습니다. 특히, 개발자와 시스템 관리자 간의 충돌이 떠오르는군요. 상황을 주시하던 Karl Marx가 말했듯이, "이 인간이 죽었거나, 아니면 내 시계가 죽었거나"의 문제죠.

아, 죄송합니다. 저 말을 한 사람은 Groucho Marx로군요. Karl Marx는 이렇게 말했군요. "예술은 언제 어느 곳에서나 비밀의 고백이며, 그와 동시에 그 시간의 영원한 운동이다." 사실, 이게 대체 무슨 소린지 저희는 전혀 모르겠습니다. 어쨌든 Groucho Marx가, 비록 그의 경구는 개발자와 시스템 관리자 사이의 충돌과는 그다지 관련이 없지만, Karl Marx보다는 확실히 재미있었습니다.

그럼에도 불구하고, Scripting Guys가 매일 아침 업무를 시작하기 전에 "시스템 관리자는 개발자가 아니다"라는 충성 서약을 암송하게 만든 것은 분명히 Karl Marx였습니다. 그리고 이는 전혀 틀린 말이 아닙니다. 시스템 관리자는 개발자와 다르다는 사실 말입니다. 개발자는 컴퓨터 프로그램을 짜는 사람들인 반면, 시스템 관리자는....음... 사실 Microsoft에 있는 사람들 중 시스템 관리자가 무슨 일을 하는지 정확히 아는 사람이 있는지 잘 모르겠습니다. 하지만 그게 무슨 일이든 간에, 적어도 컴퓨터 프로그램을 짜는 일이 아닌 것만은 분명합니다.

물론 Karl Marx는 "The Times, They Are A-Changing"이라는 노래도 만들었습니다. (최소한 우리에게는 그렇게 말했습니다.)

TechNet Script Center(microsoft.com/technet/scriptcenter)가 어느 정도 일조한 덕분에 시스템 관리자들이 점차 VBScript를 알게 되었고 스스로 유틸리티를 만들어 쓰기 시작했습니다. 비록 전형적인 컴퓨터 프로그램처럼 완전하고 포괄적인 것은 아니지만 그래도 유용한 관리 작업을 수행하는 유틸리티를 만들기 시작한 것입니다. 그리고 그런 유틸리티를 만들 때 시스템 관리자들은 개발자들이 사용하는 것과 매우 유사한 기술과 기법을 동원해야 했습니다.

그리고 그것은 시작에 불과했습니다. Windows PowerShell™ (microsoft.com/technet/scriptcenter/hubs/msh.mspx)의 등장은 Microsoft® .NET Framework가 시스템 관리자와 스크립트에 있어 더 이상 출입금지 영역이 아니라는 것을 뜻합니다. Windows Vista®는 가젯을 세상에 소개함으로써(microsoft.com/technet/scriptcenter/topics/vista/gadgets-pt1.mspx) 시스템 관리자를, 아니 최소한 스크립트를 작성하는 시스템 관리자를 개발자와 동등한 반열에 올려놓았습니다. 그리고 마침내—자, 드럼 사운드 효과 좀 부탁해요. 두두둥!—Microsoft Silverlight이 등장했습니다. "브라우저와 플랫폼을 가리지 않고 차세대 .NET Framework 기반 미디어 환경과 웹을 위한 풍부한 대화형 응용 프로그램을 제공하는 플러그인" 말입니다.

굉장하지 않습니까? 그런데 그게 우리 같은 시스템 관리 스크립트 작성자와 무슨 관계가 있냐고요? 솔직히 저희도 잘 모릅니다. 그러나 Silverlight가 매우 멋진 사용자 인터페이스와 멀티미디어를 아주 쉽게 만들도록 해주는 것은 사실입니다. 마케팅 자료에서는 예외 없이 Silverlight을 웹 응용 프로그램 제작 도구로 소개하지만 별로 알려지지 않은 사실 하나를 밝히자면, Silverlight가 HTML 응용 프로그램, 또는 스크립트 작성자들이 아주 좋아하는 매체인 HTA(microsoft.com/technet/scriptcenter/hubs/htas.mspx)에서도 똑같이 효과적으로 작동하는 것 같습니다. 그러니 잠시 살펴 볼 만한 가치는 있겠습니다.

본론을 시작하기 전에...

먼저 여기서 Silverlight의 수많은 기능과 용도를 자세히 다루지는 않을 것이라는 점을 말씀 드려야겠습니다. 이 글의 주된 목적은 Silverlight의 기술을 어렵지 않게 사용할 정도의 코드 조각을 소개하는 것입니다. Silverlight를 설치하려면(참, 무료입니다.) Silverlight 홈페이지microsoft.com/silverlight를 이용하시기 바랍니다. 또한 silverlight.net/GetStarted에서는 SDK, 샘플 프로젝트를 비롯한 여러 가지 유용한 자료를 찾아보실 수 있습니다.

여기서는 이미 Silverlight를 설치한 것으로 간주하겠습니다. 그리고 TechNet Magazine 웹사이트의 코드 다운로드 섹션(technetmagazine.com/code07.aspx)에서 그림 1에 제시된 파일들을 다운로드했다는 전제하에 설명합니다.

Figure 1 Silverlight 프로젝트 구성 요소

SampleProject.js는 꼭 필요하지 않습니다. 최소한 이번 달 칼럼대로 따라서 할 필요는 없는 거죠. Silverlight에서는 프로젝트의 개체와 이벤트에 스크립트를 첨부할 수 있는데, 이 스크립트는 HTML 파일에 하드코딩해서 넣거나 여기서 설명하듯이 외부의 "포함" 파일에서 읽어올 수 있습니다. 그리고 SampleProject.html을 HTA로 바꾸겠습니다. 그냥 이름만 SampleProject.hta로 바꾸면 됩니다. 너무 쉽지 않습니까?

이 파일들을 폴더 하나에 모두 저장합니다. 자, 이제 재미 있는 시간을 보낼 준비는 다 된 것 같군요.

XAML 파일

짐작하신 대로 이번 달 Hey, Scripting Guy!에서 흥미로운 부분은 모두 XAML 파일과 관련이 있습니다. (우연히도, XAML은 "zamel"과 발음이 비슷합니다. camel과 운율이 맞죠. 아니면 mammal이나 enamel하고도 비슷하네요.) XAML은 Extensible Application Markup Language의 약어입니다. 무엇보다 XAML은 XML 유사 언어를 이용하여 사용자 인터페이스를 제작할 수 있다는 데 의의가 있습니다. 특히 시스템 관리자의 경우에, 이를 이용하면 과연 사용자 인터페이스를 만드는 일이 쉬워질까요? 지금부터 이에 대해 알아보도록 하겠습니다.

이 과제에 대해 조사하려면 우선 메모장을 실행해서 SampleProject.xaml 파일을 열어야 합니다. 기존 코드가 있다면 아래의 코드로 바꿔 넣습니다.

<Canvas
 xmlns="https://schemas.microsoft.com/
    client/2007"
 xmlns:x="https://schemas.microsoft.com/
    winfx/2006/xaml">
</Canvas>

참고로, SampleProject.hta는 이미 SampleProject.xaml에서 정보를 가져오도록 구성되어 있습니다. 다른 XAML 파일을 사용하려면 CreateSilverlight.js 파일을 편집해야 합니다.

코드를 붙여 넣었으면 파일을 저장하고 SampleProject.hta를 두 번 클릭합니다. 무엇이 나타날까요? 그렇습니다. 터무니없이 큰 회색 상자가 나타나는군요.

그렇다고 벌써 실망하지는 마십시오. 지극히 정상적인 현상이니까요.

아직 아무 것도 한 게 없으니 아무 것도 안 나타나는 게 당연합니다. 그저 XAML 파일에 캔버스를 하나 펼쳐 놓았을 뿐이죠 하지만 이는 중요한 절차 중 하나입니다. 어쨌든 유화를 그리려면 캔버스부터 마련해야 하지 않겠습니까? Silverlight에서도 마찬가지입니다. 프로젝트에 요소를 추가하려면 먼저 "캔버스"부터 준비해야 합니다. 지금 그 준비를 한 것입니다.

그런데 우리는 왜 가로 300픽셀에 세로 300픽셀인 회색 상자를 준비한 것일까요? 대답은 간단합니다. CreateSilverlight.js에 기본 설정으로 구성된 규격이기 때문입니다. 이 기본값이 마음에 들지 않는다면 CreateSilverlight.js를 열어서 설정을 만져주면 됩니다. 가로 800픽셀에 세로 300픽셀인 흰색 캔버스를 원합니까? (이제부터 사용하려는 예에는 아마 그 편이 더 나을 것입니다.) 그러면 CreateSilverlight.js에 다음 세 행을 추가해야 합니다.

width:'800', // Width of rectangular region of 
             // control in pixels.
height:'300', // Height of rectangular region 
              // of control in pixels.
background:'white', // Background color of
                    // control.

참고로, 원래의 .js 파일에는 배경이 #D6D6D6로 설정되어 있습니다. 방금 이것을 흰색으로 바꾸었습니다. XAML 파일에서는 RGB 값을 이용하거나 색 이름을 이용해서 색을 나타낼 수 있습니다. 전체 색 값 및 색 이름 목록은 msdn2.microsoft.com/bb188314.aspx를 참조하십시오. Scripting Guys는 "저희 집이요? FFFFFACD 바탕에 FFCD5C5C 테두리로 되어있지요"와 같은 식으로 RGB 값으로 색을 지칭하기를 좋아하지만, 여기서는 색 이름을 사용하기로 했습니다.

보너스로 팁을 하나 알려 드리자면, 캔버스 배경에 단색만 사용할 수 있는 것은 아닙니다. 그림 2의 코드를 여러분의 XAML 파일에 붙여 넣고 그 결과를 한번 살펴보십시오.

Figure 2 예쁜 색

<Canvas
 xmlns="https://schemas.microsoft.com/client/2007"
 xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
 Width="800"
 Height="300">
 
 <Canvas.Background>
 <LinearGradientBrush>
 <GradientStop Color="Blue" Offset="0.0" />
 <GradientStop Color="Black" Offset="1.0" />
 </LinearGradientBrush>
 </Canvas.Background>

</Canvas>

해보셨나요? 멋있지 않습니까?

물론, 텅 빈 캔버스가 전부는 아닙니다. 그러면 계속해서 그 캔버스에 개체를 추가해보겠습니다. Silverlight에서는 타원형, 사각형, 선, 다각형 등 온갖 개체를 모두 추가할 수 있지만 여기서는 구식 텍스트 블록을 추가해보겠습니다. 어떻게 하냐고요? XAML 파일의 <Canvas> 태그와 </Canvas> 태그 사이에 다음 태그를 넣어주면 됩니다.

<TextBlock 
 Name="Test"
 FontSize="40"
 FontFamily="Georgia"
 FontWeight="Bold"
 Canvas.Top="20" 
 Canvas.Left="20"
 Text="The TechNet Script Center">
</TextBlock>

보다시피, 이 XAML 작업은 그다지 까다롭지 않습니다. <TextBlock> 태그를 먼저 넣고 그 뒤에 다양한 TextBlock 매개 변수(Name, FontSize 등)를 넣습니다. 그리고 </TextBlock> 태그를 넣어서 TextBlock이 끝났다는 것을 표시하기만 하면 됩니다. 이게 뭐가 근사하냐고요? 어떤 개체든 이와 똑같은 방법으로 XAML 파일에 추가할 수 있다는 겁니다. 가로 300픽셀에 세로 100픽셀짜리 사각형을 추가하고 싶다면 다음 코드만 삽입하면 됩니다.

<Rectangle
 Height="300" 
 Width="100" 
 Fill="Blue">
</Rectangle> 

그런데 사각형과 같은 어떤 도형을 캔버스에 추가할 때는 채우기 색 및/또는 스트로크 색을 지정해야 합니다. 그렇게 하지 않으면 Silverlight의 캔버스에 투명한 사각형이 추가됩니다. 그 사각형은 실제로 캔버스에 있지만 슈퍼맨 같은 x-레이 투시 능력이 없다면 볼 수 없겠죠?

채우기 색과 스트로크 색이란 일부 Silverlight 개체에 색을 칠하는 방법이라고 할 수 있습니다. 다른 개체의 경우에는 보너스 팁에서 소개한(그러나 설명하지는 않은) LinearGradientBrush와 같은 브러시를 사용해야 합니다. 개체를 단색으로 칠하고 싶다면 그에 딱 맞는 이름을 가진 SolidColorBrush를 사용하면 됩니다. 예를 들어 그림 3의 XAML 태그를 살펴보십시오. 이 태그는 텍스트를 빨간색으로 '칠'해 줍니다. 기술적으로는 TextBlock의 Foreground 속성에 색을 설정하는 것입니다.

Figure 3 텍스트 칠하기

<TextBlock 
 Name="Test"
 FontSize="40"
 FontFamily="Georgia"
 FontWeight="Bold"
 Canvas.Top="20" 
 Canvas.Left="20"
 Text="The TechNet Script Center">

 <TextBlock.Foreground>
 <SolidColorBrush Name="test_brush" Color="red"/>
 </TextBlock.Foreground>

</TextBlock>

더 근사한 효과를 원한다면 텍스트에 그림을 채워 주는 ImageBrush 속성을 사용해보십시오.

<TextBlock.Foreground>
 <ImageBrush Name="test_brush" ImageSource="Sunset.jpg"/>
</TextBlock.Foreground>

그리고 팁을 하나 더 소개하자면, ImageBrush 속성을 사용하는 경우 FontSize 값을 높이는 것이 좋습니다. 텍스트가 클수록 효과가 더 잘 나타나기 때문입니다.

직접 결과를 확인하십시오. 꽤 인상적일 것입니다.

잠깐! 이 정도는 아무 것도 아닙니다.

이제 터놓고 말씀 드려야겠군요. 비장의 카드는 아직 꺼내지도 않았습니다. Silverlight에 텍스트를 표시하는 것도 좋은 기능이고, 사각형이나 타원형, 다각형을 그리는 것은 그보다도 더 근사한 기능이지만, 애니메이션 추가 기능에 비하면 아무 것도 아닙니다.

다시 한번 말하지만, 이 글에서는 Silverlight 애니메이션을 만드는 몇 가지 방법을 간단히 소개하기만 합니다. 더 이상 다룰 지면이 없답니다. (우리를 탓하지는 마십시오. TechNet Magazine을 Hey, Scripting Guy! Magazine으로 바꿔야 한다고 계속 제안하고 있는데도 그 메일이 아직 전달되지 않은 것 같습니다.)

자, 이제 각설하고, 텍스트가 서서히 그렇지만 분명하게 나타나는 근사한 페이드인 효과를 보여 드리겠습니다. 그림 4의 코드를 XAML 파일의 <TextBlock> 태그와 </TextBlock> 태그 사이에 추가하십시오.

Figure 4 TextBlock 트릭

<TextBlock.Triggers>
 <EventTrigger RoutedEvent=
     "TextBlock.Loaded">
 <BeginStoryboard>
 <Storyboard>
 <DoubleAnimation
 Storyboard.TargetName="Test"
 Storyboard.TargetProperty="Opacity"
 From="0.0" To="1.0" 
 Duration="0:0:5" />
 </Storyboard>
 </BeginStoryboard>
 </EventTrigger>
</TextBlock.Triggers>

상당히 잡다해 보인다는 점은 인정하겠습니다. 하지만 다행히 그 대부분은 상투적인 반복 태그에 불과합니다. 애니메이션을 그냥 XAML 파일에 추가하기만 해서는 안 됩니다. 애니메이션을 언제 재생할 것인지를 지정해야 합니다. 이를 위해서는 TextBlock에 일련의 트리거를 지정해야 합니다. 여기서는 언제든 TextBlock이 로드되면 애니메이션을 시작하는 트리거를 만들어보겠습니다.

<EventTrigger RoutedEvent="TextBlock.Loaded">

Silverlight에서 애니메이션은 반드시 스토리보드(영화 쪽에서 가져온 용어임)에 따라 구성되어야 합니다. 그래서 <BeginStoryboard> 태그와 <Storyboard> 태그를 사용하는 것입니다.

텍스트에 페이드인 효과를 적용하려면 Opacity 속성을 수정해야 합니다. 이 값을 0.0(투명)에서 1.0(단색)으로 점차 높여갑니다. Opacity는 Double 속성(배정밀도 숫자 값 기반 속성)이므로 DoubleAnimation 애니메이션을 사용합니다. 그러면 DoubleAnimation 애니메이션은 어떤 방식으로 사용할까요? 먼저 애니메이션 효과를 적용할 개체를 지정(이 경우에는 Test, 즉 TextBlock에 지정했던 이름)하고 대상 속성(Opacity)을 지정한 다음 애니메이션 범위(불투명도 0.0 ~ 1.0)와 애니메이션 지속 시간(5초)을 지정합니다. 즉, 다음과 같습니다.

<DoubleAnimation
 Storyboard.TargetName="Test"
 Storyboard.TargetProperty="Opacity"
 From="0.0" To="1.0" 
 Duration="0:0:5" />

참고로, 5초를 나타내려면 0:0:5(시, 분, 초) 형식의 구문을 사용해야 합니다. 그냥 5를 값으로 사용하면 그 자체로는 오류가 발생하지 않지만 애니메이션이 5일간 실행됩니다.

해보셨습니까? 다음으로, DoubleAnimation 태그 안의 AutoReverse 속성을 True로 설정해 보십시오.

AutoReverse="True"

서서히 나타났다가(페이드인) 서서히 사라지는(페이드아웃) 애니메이션 효과가 나타납니다.

RepeatBehavior 속성을 Forever로 설정하면 페이드인 효과와 페이드아웃 효과가 계속 반복됩니다. 예, 영원히 말입니다.

RepeatBehavior="Forever"

과하다고요? 그렇다면 RepeatBehavior를 3x와 같이 설정하십시오. 이 경우 애니메이션이 3번 반복된 후 사라집니다.

RepeatBehavior="3x"

꽤 근사하죠? 적어도 우리끼리는 그렇게 말할 수 있겠군요. 하지만 텍스트가 서서히 나타났다 서서히 사라지는 것이 별로 마음에 들지 않는다면? 그보다는 텍스트 색상이 서서히 바뀌는 편이 더 마음에 든다면 어떻게 해야 할까요? 이 경우 ColorAnimation 애니메이션을 사용해야 합니다.

<ColorAnimation 
 Storyboard.TargetName="test_brush"
 Storyboard.TargetProperty="Color"
 From="Red" To="Blue" Duration="0:0:5" />

참고로, 이 경우에는 빨간색 텍스트로 시작해야 합니다. 텍스트를 빨간색으로 칠하는 방법은 이미 설명했습니다.

재미있지 않습니까? 그런데 약간 실망하는 기색이로군요. 아, 그렇다면 그건... ColorAnimation 자체는 훌륭하지만 진짜로 원하는 것은 화면에 무엇인가 날아다니는 효과라는 의미겠군요. 문제없습니다. Silverlight는 화면에 무엇인가 날아다니도록 하는 효과 정도는 당연히 구현할 수 있는 소프트웨어입니다. 다음과 같이 해보십시오.

<DoubleAnimation
 Storyboard.TargetName="Test"
 Storyboard.TargetProperty="(Canvas.Left)" 
 To="150"
 Duration="0:0:5" />

보다시피, TextBlock이 그 출발점에서 캔버스 왼쪽 가장자리(Canvas.Left)로부터 150픽셀 떨어진 지점까지 천천히 움직이도록 했습니다. TextBlock을 위아래로 움직이게 하려면 Canvas.Top 속성을 사용하면 됩니다.

<DoubleAnimation
 Storyboard.TargetName="Test"
 Storyboard.TargetProperty="(Canvas.Top)" 
 To="150"
 Duration="0:0:5" />

그러면 이 애니메이션 효과들을 결합하여 TextBlock을 좌우로, 그리고 위아래로 움직일 수는 없을까요? 자, 직접 해보십시오. 힌트는 드리겠습니다. 두 애니메이션을 XAML 파일에 연이어 붙여 넣고 어떻게 되는지 보십시오.

물론 처음부터 여러분이 이 정도 애니메이션쯤은 충분히 결합할 수 있으리라는 것을 알고 있었습니다. 사실 Silverlight 프로젝트 하나에 수많은 애니메이션을 추가할 수 있습니다. 다만 약간 까다로울 뿐이죠. 애니메이션 하나가 끝난 후에 다음 애니메이션이 시작되도록 하려면 추가 태그가 필요합니다. 그러나 XML과 유사한 태그를 몇 개 입력하는 것만으로도 꽤 근사한 애니메이션 효과를 구현할 수 있다는 것은 확인하셨을 것입니다.

아쉽게도 오늘의 쇼는 여기까지입니다.

예, 압니다. 우리도 아쉽습니다. 더구나 이제 막 진짜 유용한 부분으로 들어가는데 말이지요. 하지만 이것으로 영영 끝은 아닙니다. Silverlight를 좀 더 자세히 알고 싶다면 scripter@microsoft.com으로 연락 주시기 바랍니다. 관심을 보이는 분들이 많다면 이후에 다른 칼럼에서 고려해볼 수도 있을 것입니다. 그리고 TechNet Script Center(microsoft.com/technet/scriptcenter/resources/tnmag/archive.mspx)도 잊지 말고 들러 주시기 바랍니다. 전체 XAML 예(eXAML?)에 대한 링크를 게시해 두겠습니다. 그때까지는 Karl Marx와 Fredrich Engels가 브뤼셀 공산주의자통신위원회(Communist Correspondence Committee) 명의로 G. A. Kottgen에게 보낸 선언적 서한의 말미에서 말했듯이, "안녕히 가시고, 댁까지 안전 운전하세요."

Microsoft Scripting Guys는 Microsoft에서 고용되어 일하고 있는 Microsoft의 직원들입니다. 이들은 좋아하는 야구 경기와 기타 여러 활동을 하는 시간을 제외하고는 항상 TechNet 스크립트 센터를 운영합니다. 자세한 내용은 www.scriptingguys.com에서 확인하십시오.

© 2008 Microsoft Corporation 및 CMP Media, LLC. All rights reserved. 이 문서의 전부 또는 일부를 무단으로 복제하는 행위는 금지됩니다..