에센셜 실버라이트 3

에센셜

실버라이트 3

iv

•목 차•

01장 실버라이트 개요 1실버라이트 설계 원칙들 ....................................................................................3

웹 개발 ..........................................................................................................3

보안 .............................................................................................................4

미디어와 향상된 인터넷 응용프로그램들 .................................................5

쉬운 개발 ......................................................................................................5

플랫폼 독립 ..................................................................................................6

실버라이트의 기능 .............................................................................................6

응용프로그램 모델 ......................................................................................7

그래픽스 .......................................................................................................7

텍스트 ...........................................................................................................8

입력 .............................................................................................................8

애니메이션 ...................................................................................................8

레이아웃 .......................................................................................................9

미디어 ...........................................................................................................9

컨트롤 ...........................................................................................................9

데이터 바인딩 ............................................................................................10

네트워킹 .....................................................................................................10

하부 구조 .......................................................................................................... 10

요점 정리 .......................................................................................................... 11

02장 응용프로그램 13응용프로그램 모델의 설계 원칙 .................................................................... 13

웹 개발과 브라우저 외부에서 실행 ..........................................................14

v

플랫폼 라이브러리 ....................................................................................15

디자이너와 개발자의 협업........................................................................15

플랫폼에 독립 ............................................................................................16

보안 ...........................................................................................................16

Visual Studio를 사용하여 응용프로그램 만들기 ......................................... 16

응용프로그램 구성요소들 .............................................................................. 18

브라우저 밖으로 응용프로그램 내보내기 (실버라이트 3의 새로운 기능) .....................................................23

XAML .........................................................................................................25

XAP 패키지 ................................................................................................33

하부구조 ........................................................................................................... 35

아키텍처 개요 ............................................................................................35

실버라이트 플러그인 ................................................................................36

다운로더 .....................................................................................................38

XAML 파서 ................................................................................................39

.NET 공통 언어 런타임 .............................................................................39

엘리먼트 트리 ............................................................................................40

이벤트 시스템 ............................................................................................40

애니메이션 .................................................................................................40

레이아웃 .....................................................................................................41

렌더링 .........................................................................................................42

요점정리 ........................................................................................................... 43

03장 그래픽스 45그래픽 시스템의 설계 원칙 ............................................................................ 45

벡터 그래픽과 비트맵 이미지 ...................................................................46

보유모드 .....................................................................................................47

플랫폼 독립의 일관성 ...............................................................................51

도구 ...........................................................................................................51

이미지 품질과 속도 ...................................................................................52

vi

그래픽 엘리먼트 .............................................................................................. 52

도형 ...........................................................................................................52

이미지 .........................................................................................................66

브러쉬 .........................................................................................................66

이미지 브러시 ............................................................................................72

외곽선 칠하기 ............................................................................................73

Canvas 엘리먼트 .......................................................................................77

하부구조 ........................................................................................................... 87

그리기 루프(Draw Loop) .........................................................................87

래스터화 .....................................................................................................88

변경된 부분 다시 그리기 ..........................................................................97

가려진 영역 찾기(Occlusion Culling).....................................................98

다중 코어 렌더링 .......................................................................................99

콘텐트가 화면에 출력되는 방법 ...............................................................99

요점정리 ......................................................................................................... 100

04장 텍스트 101텍스트 설계 원칙들 ....................................................................................... 102

서로 다른 기종의 플랫폼에서 동일한 특징 유지 ..................................102

크기에 독립적인 레이아웃......................................................................102

가독성을 위한 렌더링 .............................................................................103

Text 엘리먼트들 ............................................................................................ 103

TextBlock .................................................................................................103

하부구조 ......................................................................................................... 115

폰트 열거 ..................................................................................................115

대체 폰트 ..................................................................................................116

폰트 다운로드 ..........................................................................................116

캐시 .........................................................................................................117

래스터화 ...................................................................................................117

요점정리 ......................................................................................................... 118

vii

05장 입력 이벤트들 119입력 설계 원칙 ............................................................................................... 119

웹 브라우저 이벤트 받기 ........................................................................120

사용자 컨트롤 ..........................................................................................121

플랫폼에 독립적인 일관성......................................................................121

다중 언어 ..................................................................................................121

입력 이벤트 .................................................................................................... 122

마우스 입력 이벤트 .................................................................................124

키보드 이벤트와 포커스 .........................................................................130

하부구조 ......................................................................................................... 132

마우스 이벤트 ..........................................................................................132

키보드 이벤트 ..........................................................................................133

비동기적으로 실행되는 이벤트 ..............................................................134

요점정리 ......................................................................................................... 134

06장 애니메이션 135애니메이션 설계 원칙 ................................................................................... 136

시간 기반 애니메이션과 프레임 기반 애니메이션 ...............................136

시간에 따른 속성 변경 ............................................................................138

사용자 정의 애니메이션 .........................................................................139

성능 .........................................................................................................140

애니메이션 엘리먼트 .................................................................................... 140

애니메이션 시작하기 ..............................................................................141

보간과 키 프레임 애니메이션 .................................................................144

타임라인 ...................................................................................................148

비선형 보간(Easing) 기능(실버라이트3의 새로운 기능) ................ 149

사용자 정의 애니메이션 기능(실버라이트3의 새로운 기능) ........... 151

하부구조 ......................................................................................................... 152

애니메이션 틱 ..........................................................................................153

viii

속성 변경 속도 .........................................................................................153

화면 출력 ..................................................................................................156

요점정리 ......................................................................................................... 157

07장 레이아웃 159레이아웃 설계 원칙 ....................................................................................... 159

크기와 위치에 대한 자동화.....................................................................160

자동화된 응용프로그램 크기 ..................................................................162

크기에 독립적인 레이아웃......................................................................163

레이아웃 엘리먼트 ........................................................................................ 164

Canvas 엘리먼트 .....................................................................................164

Border 엘리먼트 ......................................................................................166

StackPanel 엘리먼트 ...............................................................................167

Grid 엘리먼트 ..........................................................................................168

레이아웃 좌표 반올림 .............................................................................174

사용자 정의 레이아웃 작성.....................................................................176

레이아웃 이벤트 ......................................................................................181

하부 구조 ........................................................................................................ 181

레이아웃 알고리즘 ..................................................................................181

요점 정리 ........................................................................................................ 184

08장 미디어 185미디어 설계 원칙 ........................................................................................... 186

미디어 통합 ..............................................................................................186

콘텐트 전송 ..............................................................................................186

전체 화면 재생을 위한 전송....................................................................188

Expression Media Encoder으로 플레이어 만들기 ..............................188

미디어 엘리먼트 ............................................................................................ 188

비디오 재생 ..............................................................................................188

ix

재생 컨트롤 만들기 .................................................................................191

비디오 효과와 변형 .................................................................................196

전체 화면 ..................................................................................................197

응용프로그램에 출력될 비디오 마커에 연결하기 ................................198

하부구조 ......................................................................................................... 199

소스 .........................................................................................................199

플레이어 ...................................................................................................200

요점 정리 ........................................................................................................ 201

09장 컨트롤 203컨트롤 설계 원칙 ........................................................................................... 204

내장 컨트롤 ..............................................................................................204

사용자 정의 컨트롤 .................................................................................206

사용자 정의 ..............................................................................................206

컨트롤 엘리먼트 ............................................................................................ 207

ContentControl과 ItemsControl ...........................................................207

상태 관리자 ..............................................................................................212

스타일 주기 ..............................................................................................215

사용자 정의 컨트롤 생성하기 .................................................................216

하부 구조 ........................................................................................................ 218

컨트롤 인스턴스 ......................................................................................218

상태 매니저 알고리즘 .............................................................................219

요점 정리 ........................................................................................................ 220

10장 데이터 바인딩 221데이터 바인딩 설계 원칙 .............................................................................. 221

데이터 소스 ..............................................................................................222

자동화된 연결과 동기화 .........................................................................222

선언적인 XAML 모델 .............................................................................222

x

데이터 바인딩 객체들 ................................................................................... 223

데이터 바인딩 ..........................................................................................223

DataContext 상속 ....................................................................................226

데이터 동기화와 바인딩 모드 .................................................................227

데이터 바인딩 컬렉션 .............................................................................230

값 변환자 ..................................................................................................233

데이터 유효성 검사 .................................................................................236

엘리먼트와 엘리먼트 바인딩(실버라이트3의 새로운 기능) .............. 237

하부 구조 ........................................................................................................ 238

Binding 객체 ............................................................................................238

ItemsControl ............................................................................................239

요점 정리 ........................................................................................................ 240

11장 효과 241효과 설계 원칙 ............................................................................................... 241

실시간 속도 ..............................................................................................242

내장된 공통 효과들 .................................................................................242

효과 엘리먼트 ................................................................................................ 242

효과 적용하기 ..........................................................................................242

효과 생성하기 ..........................................................................................244

하부구조 ......................................................................................................... 256

출력 면 생성 .............................................................................................256

BlurE�ect와 DropShadowE�ect ...........................................................257

요점정리 ......................................................................................................... 258

12장 GPU 가속 259GPU 가속을 설계할 때의 원칙들 ................................................................ 259

일반적인 시나리오에서 성능 개선 .............................................................. 260

이미지 품질 유지하기 .............................................................................260

xi

합리적인 안전성 유지 .............................................................................261

GPU 가속 기능 .............................................................................................. 261

GPU 가속의 필요 조건 ...........................................................................261

GPU 가속 활성화하기 ............................................................................262

CacheMode 속성 사용하기 ....................................................................262

성능문제 진단 ..........................................................................................268

하부구조 ......................................................................................................... 272

그래픽 장치 생성 .....................................................................................272

텍스처 생성 ..............................................................................................273

GPU 가속의 렌더링 단계 ........................................................................274

다중 모니터 사용 .....................................................................................274

요점정리 ......................................................................................................... 274

찾아보기 275

xii

역 자 서 문

누군가가 필자에게 이 책을 추천하는 이유를 말해보라고 한다면 두 가지로 그 이유를 말할 수 있을

것 같다. 그 첫 번째 이유는 누구라도 이 책을 읽고 나면 실버라이트를 보는 눈이 한층 더 깊어질 수 있

다는 점이다. 그리고 두 번째 이유는 실버라이트 2.0의 기능과 3.0에 새로 추가된 차이를 빠르고 간결

하게 정리할 수 있다는 점이다.

첫 번째 이유를 이야기 한다면, 우선 이 책의 저자가 누구인지를 아는 것이 중요할 듯하다. 이 책의

저자 ‘아슈라프 미하일’은 지난 11년 동안 마이크로소프트에서 제작된 수많은 제품군에서 그래픽 시

스템과 관련된 일을 담당해왔으며, 2005년부터는 WPF나 실버라이트의 그래픽 시스템을 담당하는

아키텍트로 근무해왔다. 실버라이트에 대해서는 초창기 모델부터 지금까지 모든 것을 직접 설계 해

왔기 때문에 그 어느 누구보다도 실버라이트의 동작 원리나 구현 방식에 대해서 가장 잘 알고 있다고

해도 과언이 아니다. 따라서 이 책에서도 오랫동안 쌓아 온 저자의 경험과 노하우를 녹여내는 데 초

점을 맞추고 있다. 즉, 실버라이트의 구성과 동작 원리 또는 주의할 점이나 성능에 대한 문제점들에

대해서 실버라이트를 제작한 사람의 입장에서 개발자들에게 실버라이트의 이야기를 친절하게 들려

주고 있다.

사실 이 책은 실버라이트를 완전 처음 접하는 초보자를 위한 책은 아니다. 하지만 실버라이트 개발

자라면 반드시 한 번쯤은 읽어보아야 할 필독서임은 분명하다. 이 책은 초보자를 위한 다른 책들처럼

TextBlock과 같은 컨트롤을 사용하는 방법에 초점을 맞춘 것이 아니다. 대신 실버라이트를 설계한 아

키텍트의 입장에서 컨트롤을 사용할 때의 주의점이나 동작 원리에 대해서 설명해주고 있다. 필자 또

한 이러한 부분들을 개발자들에게 소개하고 싶은 마음에서 이 책을 번역하게 되었다. 아마도 이 책을

읽고 나면 과거 실버라이트를 개발할 때의 시각과 다른 새로운 시각을 갖게 될 것이다. 이를테면 구현

동작 구현에만 신경 쓰던 나였지만 이제는 나도 모르게 성능을 따지고 있는 자신을 만나게 될 것이다.

두 번째 이유는, 실버라이트뿐만 아니라 새로운 플랫폼이나 프레임워크를 공부해야 할 때의 참고

서는 개념 설명과 활용 부분이 분리되어 있어야 공부하기가 편하다. 즉, 처음 접하는 사람들에게 개념

과 활용 또는 그 외의 잡다한 내용을 짬뽕해놓은 두꺼운 책은 그것을 읽는 독자들로 하여금 지루함

과 난해함을 전해줌으로써 시작하고자 하는 의지마저도 꺾을 수가 있다. 하지만 이 책은 앞 단락에서

xiii

언급한 내용만으로도 이미 짐작하겠지만, 불필요한 많은 잡다한 내용으로 책의 지면을 가득 채우고

있지 않다. 이 책의 원서는 300쪽 정도의 분량에 실버라이트 3.0의 모든 내용을 군더더기 없이 설명하

고 있다.

또한, 이 책은 실버라이트를 시작하는 사람들이나 기존 개발자들이 실버라이트 2.0/3.0의 개념과

구성을 빠르게 정리할 수 있도록 간단 명료하게 설명해주고 있다. 이 책을 읽고 나면 실버라이트의 구

성을 한 번에 정리할 수 있을 뿐만 아니라, 3.0에서 새로 추가된 내용을 별도로 표시해서 설명하고 있

기 때문에, 새로운 내용 또한 어떻게 달라졌는지를 빠르게 정리할 수 있을 것이다.

마지막으로 이 책에 대한 추천글 중에서 필자가 가장 공감하는 글 하나를 소개하도록 하겠다. 필자

가 공감한 추천글은 노아 게드리히(BLITZ Agency의 기술이사)의 추천글이다.

“Essential Silvelright 3은 정말로 실버라이트 개발자의 라이브러리로 없어서는 안 되는 필수 책이

다. 각 장마다 실려 있는 ‘하부구조’ 부분에서는 실버라이트의 구현방식이 자세히 설명되어 있으며 ‘성

능 팁’에서는 소프트웨어를 최대한 활용하기 위한 정보를 사용하는 방법에 대해서 설명하고 있다. 이

엄청난 정보를 내 스스로 알아내야 하고 이해해야만 했는데 그럴 필요를 없게 해줘서 너무 고맙게 생

각한다.”

아무쪼록, 이 책이 여러분들에게도 도움이 되었으면 하는 바람이다.

- 박용우

xiv

추 천 사

실버라이트는 개발자들이 풍부한 미디어와 RIA 경험을 구축할 수 있게 만드는 크로스 브라우저, 크

로스 플랫폼 플러그인이다. 이 플러그인은 개발자들이 기존 웹 기술로는 가능하지 못했던 시나리

오들을 브라우저에서 .NET을 사용할 수 있게 한다. 그리고 생산성을 높이기 위해 Visual Studio나

Expression Studio와 같은 도구들을 사용할 수도 있게 한다.

새로운 실버라이트 3 릴리즈에서는 실버라이트 응용프로그램을 브라우저 외부에서 실행되도록 하

는 능력이라든지 HD와 H.264 비디오 스트림을 제공하는 능력 이 외에도 GPU 가속을 사용하는 3D

그래픽 출력, 더 풍부한 데이터 바인딩 지원, 새로운 비트맵 API와 애니메이션을 편하게 사용할 수 있

는 능력 등 개발자들에게 도움을 줄 수 있는 200개 이상의 새로운 기능들을 제공하고 있다.

아슈라프 미하일은 여러분이 지금 손에 쥐고 있는 책의 저자이며 그는 현재 실버라이트 팀 개발자

들 중에서 가장 인기 있는 개발자 가운데 한명이다. 그는 실버라이트가 시작될 때부터 아키텍처로 참

여하고 있으며 실버라이트의 큰형이라고 할 수 있는 Windows Presentation Foundation에 대한 그의

깊은 경험과 이해를 바탕으로 실버라이트를 만들어가고 있다. 아슈라프는 실버라이트 런타임의 안팎

을 아주 상세히 잘 알고 있으며 이 책에는 자신이 이해하고 있는 것들을 분명하고 간결한 설명으로 담

아내고 있다.

이 책은 단지 실버라이트 3에 대한 책이 아니다. 물론 나는 일하면서 실버라이트 3에 대해 설명하고

있는 다른 좋은 책들에 대해서 이야기하는 것을 좋아한다. 하지만 이 책은 다른 책과는 달리 실버라

이트 런타임과 그것이 동작하는 방식에 초점을 맞춘 유일한 책이다. 런타임 엔진에서 실제로 지금 무

슨 일이 발생하고 있는지를 알아야만 할 때, 여러분은 실버라이트의 속도와 힘을 완전히 제어할 수 있

는 위치가 되어 있을 것이다. 이 책의 각 장의 마지막 절인 ‘하부구조’를 보면, 그 내용들은 다른 어느

곳에서도 찾을 수 없는 내용들일 것이다.

또, 이 책의 곳곳에 있는 ‘기술에 대한 부연설명’, ‘디버깅 팁’ 그리고 ‘성능 팁’ 절을 보면, 그 내용들은

당장 가져가서 여러분의 응용프로그램을 날아갈 수 있게 만드는 보석과도 같은 것들이다. 너무 많은

데이터가 ComboBox 출력을 느리게 만들고 있다면? 그렇다면 10장에서 설명하고 있는 내용처럼 속도

xv

를 개선하기 위해서 Items의 Source를 필터링해야 한다. 여러분의 응용프로그램은 GPU 가속의 이점

을 이용하고 있는가? 12장에서는 그 방법에 대해서 설명하고 있으며, GPU 가속의 네 가지 단계의 설

명과 GPU 가속이 항상 도움을 주지 못하는지에 대한 튜닝 이유를 이해할 수 있도록 각 운영체제별

GPU 가속에 대한 차이점을 설명하고 있다.

여러분이 가지고 있는 이 책은 실버라이트 3 응용프로그램을 작성하기 위한 핵심들을 포함하고 있

다. 그것들을 잘 사용하기 바란다.

- 스콧 구스리, 부사장, Microso� 개발자 부서

xvi

저 자 소 개

아슈라프 미하일은 실버라이트가 시작된 2005년부터 지금까지 마이크로소프트에서 실버라이트 아

키텍트로 근무해왔다. 실버라이트 아키텍트로 근무하기 전에는 수많은 그래픽 관련 일을 해왔으며

UI 프레임워크, Windows Presentation Foundation, Windows Vista, Internet Explorer 내의 인터

넷 기술 외에도 마이크로소프트에서 생산하는 수많은 제품군에서 일을 해왔다. 아슈라프는 11년 동

안 마이크로소프트에서 근무하는 동안 많은 그래픽 엔진들을 만들어왔으며 그래픽 엔진과 UI 프레

임워크를 위한 아키텍처를 구축해왔다.

xvii

감 사 의 말

이 책의 출판을 지지해준 실버라이트 지휘부의 Scott Ghthrie, Ian Ellison-Taylor 그리고 Kevin

Gallo에게 감사의 마음을 전하며 이 책이 출간될 때까지 저를 도와준 Addison-Wesley의 Joan

Murray와 Olivia Basegio에도 감사하다는 말을 전하고 싶다.

이 책의 초안을 잡는 데 나의 많은 동료들이 훌륭한 리뷰를 제공해주었으며 소중한 피드백도 제공

해주었다. 특히 Gerhard Schmeider, Judith Myerson 그리고 Jaroslav Klima는 이 책의 모든 부분

에서 수많은 리뷰를 해주었다. 책의 각 장이나 전체 윤곽을 잡을 때는 John Gossman을 비롯해서,

Greg Schechter, Dave Relyea, Mike Hillberg, Joe Stegman, Mike Harsh, Sujal Parikh, Federico

Schliemann, Ivan Naranjo, Larry Olson, Akhil Kaza, EdMaja, Mark Rideout, Davia Brown,

Seema Ramchandani, Nick Kramer Vivek Dalvi, Karan Corby, Ashish Shetty, Jason Prado, Alan

Liu, Amy Dullard, Gilman Wong, Chris Anderson, Brad Abrams, Cyra Richardson, Leonardo

Blanco 그리고 Sriya Blanco와 같은 수많은 사람들이 리뷰를 담당해주었다.

끝으로, 이 책을 집필하는 것이 즐거움이 될 만큼 훌륭한 제품을 만든 실버라이트 팀에게 감사의 뜻

을 전하고 싶다.

xviii

내 인생에 용기를 준

나의 어머니께,

xix

서 문

실버라이트는 다양한 운영체제와 웹 브라우저를 대상으로 미디어와 풍부한 인터넷 응용프로그램

을 전달하기 위해 설계된 빠르게 성장하고 있는 웹 기술이다. 실버라이트는 런타임 그리고 응용프

로그램을 개발하기 위한 도구집합과 라이브러리들로 구성되어 있다. 최종 사용자는 http://www.

silverlight.net 사이트를 통해서 실버라이트 응용프로그램을 실행하기 위한 런타임을 무료로 다운로

드할 수 있다.

실버라이트 응용프로그램의 개발자들은 Visual Studio와 익숙한 .NET 언어를 사용하여 개발할

수 있으며, 디자이너들은 Expression Blend와 Expression Design 또는 Expression 도구들로 만든 디

자인 화면을 읽어들여서 편집할 수 있는 타사 디자인 도구들을 사용하여 화면 디자인을 만들고 애니

메이션을 줄 수 있다. Expression Media Encoder와 같은 도구를 사용하면 비디오 재생 경험을 만들

수 있으며 Deep Zoom Composer를 사용하면 이미지 확대 경험을 만들 수 있다.

실버라이트 런타임에 내장되어 있는 기본 라이브러리들뿐만 아니라 http://www.codeplex.com/

Silverlight 사이트로부터 다양한 라이브러리들을 다운로드할 수 있다. 이 라이브러리들을 여러분의

응용프로그램에서 사용할 수 있으며 소스코드를 수정할 수 있다. 또한 실버라이트 컴포넌트를 작성

할 때 참고할 수 있는 예제로써 그것을 활용할 수 있다.

이 책을 통해서 여러분들은 실버라이트 응용프로그램을 작성하는 방법을 배울 것이며 그래픽이나

텍스트, 입력 애니메이션, 레이아웃, 미디어, 컨트롤들 그리고 데이터 바인딩과 같은 기능들에 대해서

배우게 될 것이다. 이 책은 실버라이트 기능들을 사용하는 방법에 대한 정보 외에도, 그 기능을 설계

할 때의 원칙이나 그 기능들이 ‘하부구조’에서 동작하는 방식에 대해서도 설명하고 있다. 설계 원칙은

어떠한 기능이 응용프로그램의 요구사항과 어울리는지를 이해하는 데 도움을 준다. ‘하부구조’에서

제공하는 정보는 실버라이트에서 그 기능이 어떻게 구현되었는지를 알게 함으로써 실버라이트를 최

대한으로 이용할 수 있게 한다. 예를 들어 하부구조 절은 동작방식의 이해와 성능의 문제, 기능의 제

약사항 등을 더 깊게 이해할 수 있다.

xx

누구를 위한 책인가?

실버라이트 응용프로그램을 처음으로 작성해보려는 개발자뿐만 아니라 이미 실버라이트에 숙련된

개발자라고 하더라도 이 책으로부터 많은 것을 얻을 수 있을 것이다. 입문자 일 경우에 이 책은 실버라

이트 응용프로그램을 작성하기 위해 필요한 개념들을 배울 수 있을 것이며, 숙련된 개발자일 경우에

는 ‘하부구조’를 통해서 실버라이트가 동작하는 방식과 실버라이트를 최대한 이용하기 위한 정보를

사용하는 방법에 대한 깊이 있는 정보를 얻을 수 있을 것이다.

필요사항

이 책을 읽기 전에, 기본적인 웹 페이지를 작성하는 방법에 대해서 알고 있어야 하며 C#을 사용하여

.NET 응용프로그램을 작성하는 방법에 대한 기본적인 지식을 가지고 있어야만 한다.

편성

이 책은 각 장마다 원칙, 기능, 그리고 하부구조라는 세 가지 절을 포함하고 있다. 원칙들은 실버라이

트의 기능이 자신의 응용프로그램의 요구사항과 일치하는지를 결정하도록 그 기능을 설계할 당시의

목표를 알려주며, 기능을 설명하는 절에서는 기능을 사용하는 방법에 대해서 알려준다. 하구부조 절

에서는 실버라이트에서 그 기능이 구현된 방법과 응용프로그램을 개선하기 위해서 그 기능을 사용하

는 방법에 대해서 알려준다. 또, 이 책에는 수많은 성능 팁과 기술에 대한 부연설명들이 실려 있다.

이 책의 구성은 총 12장으로 구성되어 있다.

1장 ▒ ‘실버라이트 개요’에서는 실버라이트와 이 책에서 설명하게 될 이후 장의 내용들에 대해서

소개하고 있다. 1장은 실버라이트 2에서 사용할 수 없었던 실버라이트 3의 새로운 기능들을

강조하여 설명하고 있다.

2장 ▒ ‘응용프로그램’에서는 중요한 모든 컴포넌트에 대한 설명 뿐만 아니라 실버라이트 응용프

로그램을 생성하고 배치하는 방법에 대해서 설명하고 있다.

3장 ▒ ‘그래픽스’에서는 모든 그래픽과 관련된 깊이 있는 설명을 담고 있다.

4장 ▒ ‘텍스트’에서는 고품질의 텍스트를 출력하는 방법에 대해서 설명하고 있다.

5장 ▒ ‘입력 이벤트’에서는 응용프로그램에서 마우스와 키보드 입력을 사용하는 것에 대한 정보

를 제공하고 있다.

xxi

6장 ▒ ‘애니메이션’에서는 응용프로그램에 애니메이션을 추가하는 방법에 대해서 설명하고

있다.

7장 ▒ ‘레이아웃’에서는 응용프로그램에서 엘리먼트들의 크기나 위치를 자동으로 맞추어주는

레이아웃 시스템을 사용하는 방법에 대해서 설명하고 있다.

8장 ▒ ‘미디어’에서는 실버라이트를 사용하여 비디오 재생기를 만드는 방법에 대해서 설명하고

있다.

9장 ▒ ‘컨트롤’에서는 스타일, 사용자정의, 내장 컨트롤들에 대해서 설명하고 있으며 나만의 컨트

롤을 만들어 사용하는 방법에 대해서도 설명하고 있다.

10장 ▒ ‘데이터 바인딩’에서는 사용자 인터페이스 컨트롤과 데이터를 연결하는 방법에 대해서 설

명하고 있다.

11장 ▒ ‘효과’에서는 내장 효과를 사용하는 방법과 자신만의 효과를 만드는 방법에 대해서 설명

하고 있다. 효과들은 실버라이트 3의 새로운 기능이다.

12장 ▒ ‘GPU 가속’에서는 애니메이션이나 비디오 재생의 성능을 개선하기 위해 그래픽 프로세

스 유닛(GPU)를 사용하는 방법에 대해서 설명하고 있다. GPU는 실버라이트 3에서 새로 등장

한 기능이다.

xxii

1

01실버라이트 개요

실버라이트는 미디어 서비스나 풍부한 대화형 응용프로그램(RIA)을 만들기 위해 설계된 웹 플랫

폼이다. 현재 많은 인기를 누리고 있는 웹사이트들에서는 커다란 규모의 경기들을 온라인으로 중

계하기 위해 실버라이트를 사용하고 있다. 예를 들어 2008 올림픽이 개최되는 동안 http://www.

nbcolympics.com사이트는 오천만 명의 방문자를 기록했으며 그 사이트의 사용자들은 13억 개의 페

이지를 조회했고 7천만 번의 비디오 스트리밍을 서비스받았다. http://www.net�x.com사이트처럼 유

명한 다른 웹사이트들도 다양한 스포츠 경기나 텔레비전 그리고 비디오를 재생하기 위해 실버라이트

를 사용하고 있다.

많은 웹사이트들은 이메일용이나 업무용 또는 인적 네트워크용 응용프로그램을 만들 때나 매쉬업

생성도구, 캐주얼 게임, 고품질의 이미지 뷰어, 광고 그리고 그 외에 다양한 인터넷 응용프로그램 등을

만들어야 할 경우에 그것을 풍부한 인터넷 응용프로그램으로 구현하기 위해서 실버라이트를 사용한

다. 다음 페이지 그림 1.1에서 볼 수 있는 것처럼 http://www.silverlight.net/showcase 페이지에서는

이런 응용프로그램들을 구축한 다양한 사례들을 찾아볼 수 있다.

실버라이트의 구성은 실버라이트 응용프로그램을 실행하기 위해 필요한 런타임(다운로드와 설

치 필요)과 콘텐트를 제작하기 위해 필요한 Visual Studio, Expression Blend, Expression Design,

Expression Media Encoder, Deep Zoom Composer와 같은 도구들로 구성되어 있다. Expression

Blend와 Expression Design은 그래픽이나 애니메이션을 만들기 위해 사용되는 도구이며, Expression

Media Encoder는 인코딩이나 비디오 플레이어 샘플을 생성하기 위해 사용한다. 그리고 Deep Zoom

Composer는 웹에서 대형 이미지를 보여주고자 할 때 사용한다.

2 l 에센셜 실버라이트 3

그림 1.1 | http://silverlight.net/showcase에서 볼 수 있는 실버라이트 사이트들의 예

실버라이트는 CLR 런타임을 포함하고 있어서 C#이나 Visual Basic과 같은 .NET 언어들을 사용할

수 있으며, 벡터 그래픽, 텍스트 애니메이션, 레이아웃, 비디오, 오디오, 데이터 액세스, 그리고 풍부한

인터넷 응용프로그램을 쉽게 만들 수 있도록 많은 컨트롤들을 제공하고 있다.

실버라이트 3에서는 웹 브라우저상에서 실행되는 응용프로그램을 만들 수 있을 뿐만 아니라 그림

1.2에서 볼 수 있는 것처럼 브라우저 없이 네트워크가 연결되지 않은 컴퓨터상에서도 바로 실행할 수

있는 응용프로그램도 만들 수 있게 되었다.

그림 1.2 | 웹 브라우저 밖에서 실행될 수 있도록 실버라이트 응용프로그램을 설치하는 메뉴

01 실버라이트 개요 l 3

이번 장에서 다루는 내용은 다음과 같다.

실버라이트 설계 원칙 ▒

실버라이트에서 사용 가능한 기능 ▒

실버라이트 내부를 이해함으로써 실버라이트 응용프로그램을 개선할 수 있는 사항들 ▒

실버라이트 설계 원칙들

실버라이트를 통해서 다음과 같은 응용프로그램을 작성할 수 있도록 하였다.

웹 브라우저를 통해서 배포할 수 있는 응용프로그램 ▒

보안 환경에서 실행되는 안전한 응용프로그램 ▒

시각적으로 어필할 수 있는 향상된 인터넷 응용프로그램 ▒

개발이나 유지보수가 쉬운 응용프로그램 ▒

다양한 운영체제나 웹 브라우저에서 동일하게 동작할 수 있는 응용프로그램 ▒

웹 개발

웹 페이지는 서비스되는 방식의 특성상 사용자가 그 페이지를 요청할 때마다 매번 다운로드되어야만

한다. 마찬가지로 그 페이지에 포함된 실버라이트 응용프로그램 또한 매번 다운로드되어 실행되기 때

문에, 웹 서버에서 응용프로그램을 새로운 버전으로 변경하였다면 사용자 응용프로그램 또한 새롭게

변경된 버전이 다운로드된다. 심지어 웹 브라우저 없이 실행되는 실버라이트 응용프로그램일 경우에

도 네트워크가 연결되어 있기만 하다면 웹사이트로부터 항상 최근 날짜의 새로운 응용프로그램을 다

운로드한다.

실버라이트 콘텐트를 실행하기 위해서는 실버라이트 런타임이 설치되어 있어야만 한다. 만일 사용

자 컴퓨터에 그것이 설치되지 않은 상태라면 실버라이트 페이지는 일반적으로 그림 1.3처럼 런타임을

설치하라는 안내 문구를 화면에 출력하게 된다. 실버라이트를 채용하는 사이트가 늘어날수록 사용

자들은 실버라이트 콘텐트를 보기 위해서 기존에 설치한 런타임을 활용할 일이 많아질 것이다. 실버

라이트 런타임을 다운로드하는 데 걸리는 시간은 10초 정도만 소비하면 된다.


그림 1.3 | 실버라이트 런타임 없이 실버라이트 웹 페이지를 방문한 경우의 화면

보안

실버라이트 런타임을 한 번이라도 설치한 적이 있다면 그 다음부터는 어떠한 추가적인 설치나 확인작

업 없이 웹 페이지에서 실버라이트 응용프로그램을 바로 실행할 수 있다. 그렇다고 해서 사용자의 컴

퓨터를 해치거나 개인정보를 들추는 악의적으로 실버라이트 응용프로그램 또한 아무런 제약도 없이

바로 실행되어서는 안 될 것이다.

보안과 관련된 필요성으로 인해 실버라이트는 응용프로그램을 만들기 위한 API의 수를 안전한

API 종류로만 제한하거나 안전한 방법으로만 사용될 수 있도록 기능 노출을 제한하고 있다. 따라서

악의적인 응용프로그램을 이용해서 사용자의 컴퓨터에 해를 입힐 수 없도록 실버라이트API는 로

컬 파일을 직접 읽거나 기록할 수 없도록 되어 있다. 실버라이트는 응용프로그램이 파일을 로드하거

나 저장할 때도 사용자의 허락을 받기 위해 파일 열기 대화상자나 파일 저장하기 대화상자를 사용

해야만 읽기와 저장이 가능하다. 물론 사용자의 시스템과 분리되어 있는 격리저장소(isolate storage

system) 파일은 사용자의 허락을 받지 않고도 응용프로그램이 파일을 자동으로 로드하거나 저장할

수 있도록 허용하고 있다.


미디어와 향상된 인터넷 응용프로그램들

향상된 그래픽이나 미디어를 응용프로그램에 포함하기 위해 요구되는 기능의 대부분은 웹 브라우저

에서 제공할 수 있는 기능 범위를 초과하고 있다. 만약 브라우저에서 그 기능들을 제공할 수 있다고

해도 사용하는 방법이 어려운 기능들이 대부분이다. 예를 들어 비디오 플레이를 위한 기능 같은 경우

는 대부분의 웹 브라우저에서 아예 제공되지도 않는 기능이다. 그래픽을 지원하는 기능 역시 몇몇 웹

브라우저만이 SVG를 통해서 벡터 그래픽을 지원하고는 있지만 그렇지 않은 브라우저들이 더 많다.

또한 응용프로그램을 작성하기 위해서 JavaScript를 이용할 수도 있지만 언어적으로 구현하기 쉽지

않은 부분들이 많다. 예를 들어 ASP.NET 페이지와 클라이언트 페이지 사이에서 공통된 코드가 존재

한다. 웹 페이지에서는 JavaScript로 작성하고 서버에서는 C#으로 작성하는 중복된 방법을 사용해야

만 한다. 가장 이상적인 방법은 양쪽 모두에서 실행되는 공유 코드를 작성할 수 있게 하는 것이다.

이러한 여러 가지 문제들을 해결하기 위해서 실버라이트는 미디어나 그래픽을 포함하는 응용프로

그램을 쉽게 작성할 수 있도록 응용프로그램에서 필요한 기능들을 단일 실행환경으로 통합해 놓았

다. 이 실행환경에서는 모든 CLR 프로그래밍 언어들을 사용할 수 있는 특징을 제공할 뿐만 아니라,

비디오, 벡터 그래픽, 컨트롤 라이브러리, 레이아웃 서비스들과 데이터 서비스, 네트워킹, 그리고 향상

된 웹 응용프로그램을 더욱 쉽게 만들 수 있는 라이브러리 집합을 제공하고 있다.

쉬운 개발

실버라이트 콘텐트는 응용프로그램 코드와 그래픽 요소로 나누어져 있다. 실버라이트를 쉽게 개발

하려면 몇 가지 도구들을 추가로 사용할 수 있어야 한다. 예를 들어, 응용프로그램의 모양(컨트롤

이나 애니메이션)을 디자인하기 위해 Expression Blend와 같은 도구를 사용한다거나 코드 작성이

나 디버깅 또는 성능 프로파일링을 수행하기 위해 실버라이트 SDK가 포함된 Visual Studio를 다룰

수 있어야 한다. 이러한 도구들을 사용하는 방법을 좀 더 자세히 알고 싶다면 http://silverlight.net/

getstarted 페이지를 참고하도록 하자.

놀라운 점은 응용프로그램의 단일 구성요소를 개발할 때도 서로 다른 도구들을 함께 사용할 수

있다는 점이다. C#으로 동작을 표현하는 코드를 작성하면서도 화면을 구현할 때는 XML 형식의

XAML을 사용할 수 있다. 실버라이트의 모든 구성요소들은 개발자들이 코드를 수정하는 동안 디자

이너들이 시각적인 화면을 편집할 수 있도록 XAML과 C# 코드가 분리되어 있다. 디자이너는 코드에

신경 쓸 필요 없이 실버라이트 응용프로그램의 시각적인 모양을 수정할 수 있다.

또한 실버라이트는 개발환경이나 개발 언어를 선택해서 사용함으로써 응용프로그램 개발을 더욱


쉽게 만들어 주고 있다. 예를 들어 실버라이트 응용프로그램을 작성하기 위해서 C#이나 Visual Basic

을 선택해서 사용할 수 있을 뿐만 아니라 HTML상에서 사용되는 JavaScript를 선택할 수도 있다.

플랫폼 독립

실버라이트로 작성된 응용프로그램은 다양한 운영체제나 웹 브라우저에서 실행될 수 있다. 예를 들

어서 실버라이트는 Widnows 2000, Windows XP, Windows Vista, Windows 7뿐만 아니라 Mac

OS에서도 실행될 수 있다. 그 외에도 Linux와 같은 운영체제에서도 실행될 수 있도록 Novel에서

Moonlight 프로젝트를 진행하고 있다. 운영체제뿐만 아니라 실버라이트는 인터넷 익스플로러, 파이

어폭스, 사파리 같은 다양한 웹 브라우저에서도 동일하게 동작할 수 있다. 물론 이 외에 다른 브라우

저에서도 정상적으로 동작할 것이다.

플랫폼에 독립적이라는 점에서 주목해야 할 부분은 독립적이라는 단어가 가지는 의미이다. 그런데

모든 운영체제에서 독립적이라는 의미를 뒤집어보면 모든 운영체제에서 동작할 수 없는 기능은 실버

라이트에 포함하고 있지 않다는 것을 의미하기도 한다. 예를 들어, 실버라이트 응용프로그램은 비디

오를 재생할 때도 실버라이트에 포함된 비디오 디코더만을 사용하며, 절대로 사용자 컴퓨터에 설치되

어 있는 비디오 디코더를 사용하지 않는다. 뿐만 아니라 폰트 또한 모든 운영체제에서 사용할 수 있는

고정된 목록의 폰트만을 사용하거나 모든 운영체제에서 사용될 수 있도록 사용자가 별도로 포함한

폰트만을 사용할 수 있다.

모든 종류의 운영체제에서 사용할 수 있는 기능만으로 응용프로그램의 기능을 제한하는 것은 실

버라이트로 할 수 있는 범위를 한정하는 것이라고 생각될 수도 있다. 그렇지만 서로 다른 플랫폼들에

서 실행되는 응용프로그램을 만들려면 어쩔 수 없는 필요조건이라고 할 수 있다.

실버라이트의 기능

다음은 실버라이트 3 런타임이 포함하고 있는 기능 요소들이다.

모든 .NET 언어로 응용프로그램을 작성할 수 있도록 하는 CLR ▒

응용프로그램들을 생성하고 배치하기 위한 응용프로그램 모델 ▒

벡터 그래픽을 작성할 수 있는 시스템 ▒

텍스트 출력 시스템 ▒


입력 시스템 ▒

애니메이션 시스템 ▒

엘리먼트들을 배치 정렬하기 위한 레이아웃 시스템 ▒

공통 사용자 인터페이스 컨트롤 집합 ▒

응용프로그램 엘리먼트에 데이터를 연결하기 위한 데이터 바인딩 시스템 ▒

네트워크 리이브러리 ▒

이번 절에서는 실버라이트3이 제공하는 기능들을 간략하게 요약한 개요와 실버라이트3에서 새롭

게 등장한 기능들에 대해서 간단히 알아보도록 한다.

응용프로그램 모델

실버라이트 응용프로그램 모델이란 실버라이트 응용프로그램을 만들거나 배치하는 데 모델로 삼을

수 있는 구조를 의미한다. 응용프로그램 모델에는 XML 형식의 XAML과 응용프로그램 코드로 구

성되는 개발 패키지(XAP)가 포함되어 있다. 응용프로그램 코드는 C#과 같은 .NET 공통 언어 런타임

(CLR) 언어로 작성할 수 있으며, 심지어 HTML에서 사용되는 JavaScript를 사용해서 작성할 수도 있

다. 응용프로그램 모델에 포함된 다른 부분으로는 리소스를 실시간으로 다운로드하는 부분이나 스

플레쉬 윈도우를 추가하는 부분도 포함되어 있다. 뿐만 아니라 응용프로그램의 상태를 유지하기 위

한 부분도 포함되어 있다.

실버라이트 3에서는 실버라이트 응용프로그램을 로컬 컴퓨터에 설치함으로써 웹 브라우저 없이도

실행시킬 수 있는 새로운 지원 기능도 포함하고 있다.

그래픽스

실버라이트는 현대적인 그래픽 요소들과 함께 그 요소들을 생성하기 위한 도구들을 사용자의 요구

속도에 맞추어 발 빠르게 제공하고 있다. 그래픽 시스템에는 벡터 방식의 도형과 안티앨리어싱 그리고

이미지, 팬, 그라디언트, 투명도 효과, 변형, 클리핑, 그 외에도 현대적인 사용자 인터페이스를 디자인하

기 위한 수많은 기능들이 포함되어 있다. 뿐만 아니라 실버라이트는 멀티코어를 지원하는 기능과 폐

쇄도형을 최적화해서 출력하는 기능을 포함시킴으로써 그래픽 애니메이션의 속도를 높여줄 수 있는

많은 기능들도 더불어 포함할 수 있게 되었다. 또한 실버라이트는 딥줌 형식으로 저장된 이미지들을

빠르게 로드하고 확대해 줄 수 있는 기능도 포함하고 있다.


실버라이트 그래픽 요소들을 작성할 때는 Expression Blend나 Expression Design과 같은 도구들

을 사용하여 작성할 수 있다. 이 도구들은 다른 그래픽 도구들에 의해서 생성한 결과물을 로드해서

편집할 수도 있다. 딥줌 형식의 이미지를 생성할 때는 Deep Zoom Composer를 도구로 사용한다.

실버라이트 3에는 GPU 가속 기능, 3D 변환 기능, 효과 기능이 새롭게 추가되었다. 애니메이션이나

비디오 성능을 개선하기 위해서 GPU 가속 기능을 사용할 수 있다. 실버라이트 콘텐트의 기울어진 변

형이 필요할 때는 3D 변형을 사용할 수 있으며, 개선된 시각적인 효과를 적용하기 위해서 블러 효과

나 그림자 효과 또는 사용자가 정의한 효과를 사용할 수 있다.

텍스트

화면 텍스트 출력뿐만 아니라 텍스트를 편집하기 위해서도 실버라이트를 사용할 수가 있다. 물론

HTML 페이지에서도 텍스트를 출력하거나 편집하는 것이 가능하다. 하지만 실버라이트에서 필요로

하는 텍스트 기능은 다른 컨트롤에 텍스트를 자연스럽게 포함시키거나 그래픽 또는 비디오 화면에도

텍스트를 통합시킬 수 있어야 한다. 물론 몇 가지 부분에서는 웹 브라우저만의 기능을 사용해서도 그

러한 기능을 구현할 수도 있을 것이다.

실버라이트 3에서는 실버라이트 2 때보다 텍스트 품질이 눈에 띄게 많이 개선되었다.

입력

실버라이트는 상호작용을 위해서 마우스와 키보드 이벤트를 제공한다. 원래 웹 브라우저의 기능에서

도 사용자 입력을 처리할 수는 있지만 실버라이트에서 필요로 하는 기능은 자바스크립트와 같은 언

어를 별도로 사용해서 입력을 처리하는 것이 아니라 컨트롤 스스로가 모든 입력을 처리할 수 있도록

하는 기능이다.

실버라이트 3에서는 실버라이트 2에서 지원하지 않았던 마우스 휠 이벤트나 멀티 터치 이벤트와 같

은 입력 이벤트들이 추가되었다.

애니메이션

실버라이트는 대화형 콘텐트를 구성하기 위해 그래픽만을 사용하는 능력 외에도 시간에 따라 속성의

값이 점차적으로 변경되는 애니메이션을 사용할 수도 있다. 예를 들어, 객체를 움직일 때나 화면을 확

대할 때 또는 사물을 희미하게 변화시키는 알파 효과를 적용할 때 애니메이션을 사용할 수 있다.


실버라이트 3에서는 애니메이션 기능 중에서 구현하기 어려웠던 복합 위치 변경이나 튀어 오르기

같은 애니메이션 기능을 보다 쉽게 구현할 수 있도록 모션 패스를 지원한다.

레이아웃

실버라이트는 엘리먼트의 크기나 위치를 자동으로 잡아주는 레이아웃 시스템을 제공한다. 예를 들

어, StackPanel과 같은 엘리먼트들은 자신에게 포함된 엘리먼트들을 수평 또는 수직 방향으로 그 위

치를 자동으로 배치해준다. 다른 레이아웃 엘리먼트들도 자신의 엘리먼트들의 위치나 크기를 자동으

로 배치시킬 수가 있다. 원한다면 실버라이트 레이아웃 시스템에서 사용할 수 있는 자신만의 사용자

레이아웃 엘리먼트를 생성할 수도 있다.

미디어

실버라이트를 사용하면 웹을 통해서 HD 품질의 비디오 스트리밍을 볼 수가 있다. 생방송 비디오나

녹화된 비디오는 인터넷에 연결된 속도에 맞추어서 전송률이 동적으로 조절될 수 있으며, 적은 버퍼링

시간과 재생목록 지원 그리고 비디오 스트림에 포함된 이벤트 등 실버라이트는 비디오와 관련된 많은

기능들을 제공한다.

실버라이트 3에서는 실버라이트 2에서 지원했던 VC1 형식의 비디오뿐만 아니라 H264 코덱의 비디

오도 지원한다.

그 외에도 MP3, WMA 그리고 AAC를 포함한 다양한 오디오 형식의 파일도 출력할 수 있다. AAC

는 실버라이트 3에서 새로 지원하는 형식이다.

컨트롤

실버라이트는 버튼이나 콤보박스, 리스트박스, 스크롤뷰어, 텍스트 컨트롤 등 다른 프레임워크에서도

흔히 볼 수 있는 사용자 인터페이스를 위한 표준 컨트롤들을 제공하고 있다. 실버라이트 컨트롤들은

HTML 컨트롤들보다 컨트롤의 모양을 사용자의 마음대로 더 자연스럽게 변경할 수 있다. 컨트롤들

은 모양을 정의하기 위해 템플릿을 사용하고 있으며 템플릿을 재정의하면 컨트롤의 시각적인 출력을

재정의할 수 있게 된다. 원한다면 자신만의 사용자 컨트롤을 작성할 수도 있다.

실버라이트 3에서는 실버라이트 2보다 컨트롤을 로드하고 출력하는 시간이 훨씬 빨라졌다. 그리고

유효성 검사 입력 컨트롤과 유효하지 않은 필드 입력에 대한 에러를 출력하는 컨트롤들이 이번에 새롭

게 추가되었다.


데이터 바인딩

실버라이트는 엘리먼트에 데이터를 연결하기 위한 데이터 바인딩 서비스를 제공하고 있다. 데이터를

실시간으로 사용자 인터페이스를 통해서 출력해야 하는 경우 데이터 바인딩 서비스를 사용하면 쉽게

자동으로 데이터를 엘리먼트를 통해서 출력할 수 있을 것이다.

실버라이트 3에서는 컨트롤 속성끼리 직접 바인딩하는 기능이 새로 추가되었다.

네트워킹

AJAX에서 할 수 있었던 HTTP 데이터 요청 방법뿐만 아니라, 실버라이트는 또 다른 네트워킹 서비스

들도 제공한다. 압축된 데이터를 다운로드하는 서비스나 소켓을 사용해 서버와의 직접적인 연결을 시

도할 수 있는 서비스들을 제공하고 있다.

하부 구조

실버라이트를 설계할 때 목표 중의 하나는 응용프로그램을 쉽게 개발할 수 있게 만드는 것이다. 이 목

표에 부응할 수 있도록 실버라이트는 가능하면 개발자들이 코드를 적게 작성할 수 있도록 하는 기능

들을 포함하고 있다. 예를 들어 코드를 한 줄도 작성하지 않고 프로그램이 시작되자마자 애니메이션

동작을 자동으로 실행시키는 기능이 런타임에 포함되어 있다. 이러한 고수준의 서비스들을 사용하면

응용프로그램을 보다 적은 코드를 사용하여 빠르게 만들 수 있다. 물론 이런 서비스들 이면의 하부

구조에서는 더 많은 일들을 실버라이트 런타임에게 위임하고 있을 것이다.

이 책에서는 각 장마다 실버라이트가 동작하는 방법을 설명하는 절(하부구조)을 포함하고 있다. 실

버라이트 런타임의 하부구조에 대해서 알게 된다면 좀 더 나은 방법으로 응용프로그램을 작성할 수

있도록 하는 데 도움을 줄 수 있을 것이다. 특히 다음과 같은 도움을 받을 수 있을 것이다.

기능의 동작을 더 잘 이해할 수 있다. ▒

응용프로그램의 성능을 개선할 수 있다. ▒


요점 정리

이번 장에서 다룬 내용들은 다음과 같다.

실버라이트 설계 원칙들 ▒

실버라이트 3의 기능 집합 ▒

나머지 장에서 사용되는 '하부구조'에 대한 소개 ▒

다음 장부터는 실버라이트의 기능에 대해서 좀 더 깊이 있는 내용들을 다룰 것이다.


13

02응용프로그램

이번 장에서는 실버라이트 응용프로그램을 작성하는 방법에 대해서 알아보기로 한다. 실버라이트를

사용하면 다양한 기능을 가진 수많은 종류의 응용프로그램을 만들 수 있을 것이다. 하지만, 어떤 종

류의 응용프로그램을 만든다고 해도 그것을 만들고 배포하고 실행하려면 아래 목록으로 나열한 구

성들이 모두 동일하게 필요하다.

웹 페이지에 응용프로그램을 포함시키는 배포기술 ▒

응용프로그램을 구성하는 코드와 리소스 ▒

공통 컨트롤과 응용프로그램을 위한 라이브러리 ▒

응용프로그램의 실행을 담당하는 런타임 ▒

이번 장에서는 응용프로그램 모델의 설계 원칙과 응용프로그램을 만드는 방법 그리고 실버라이트

응용프로그램의 구성요소와 실버라이트 응용프로그램의 하부구조의 동작방식에 대해서 알아본다.

응용프로그램 모델의 설계 원칙

실버라이트의 목표는 시각적으로 매력적인 웹 응용프로그램들을 쉽게 작성할 수 있게 하는 것이다.

실버라이트가 응용프로그램을 개발할 때 제시하는 개발 모델에는, 플랫폼 라이브러리와 .NET 언어

사용에 따른 장점과 설치과정 없이 웹 페이지에서 응용프로그램을 사용할 수 있게 하는 보안 모델, 브


라우저 밖에서 응용프로그램을 실행시킬 수 있는 모델, 그리고 그 외에도 높은 품질의 웹 페이지를 만

들 수 있도록 디자이너와 개발자들이 동시에 작업할 수 있게 만드는 기술 모델들이 포함되어 있다.

웹 개발과 브라우저 외부에서 실행

실버라이트는 사용자 컴퓨터에 어떠한 설치과정도 없이 웹 페이지를 통해서 응용프로그램을 배포할

수 있다. 물론 응용프로그램 사용자는 자신의 컴퓨터에 실버라이트 플로그인을 설치해야만 한다. 하

지만, 그것은 한 번만 설치하면 그 이후부터는 다시는 어떠한 설치도 요구하지 않고 모든 실버라이트

응용프로그램을 웹 브라우저상에서 실행시킬 수 있다. 사용자가 단순히 웹사이트를 방문하기만 하

면, 실버라이트는 응용프로그램을 다운로드하고 그것을 정상적으로 실행시켜준다.

실버라이트를 배포할 때 필요한 것이 있다면 응용프로그램을 호스트할 수 있는 HTML 페이지이다.

HTML 페이지는 실버라이트 응용프로그램을 포함하기 위해 XAP 패키지를 참조한다. XAP란 실행

코드와 데이터 파일 그리고 응용프로그램의 매니페스트 파일을 하나의 파일로 압축하고 있는 패키지

파일이다. XAP에 포함된 매니패스트는 다운로드될 코드 파일(어셈블리)과 사용 중인 언어 그리고 응

용프로그램의 시작점에 대한 정보를 담고 있으며, 그 외에도 응용프로그램 로드에 필요한 다양한 정

보들을 담고 있다.

기술에 대한 부연 설명

실버라이트에서 사용되는 XAP 파일은 ZIP 파일과 동일한 파일이다. 파일 확장명 XAP을 단순히

ZIP으로 변경하기만 하면 ZIP 압축 프로그램을 사용하여 파일 내용을 확인할 수 있다.

실버라이트 3에서는 데스크톱 응용프로그램처럼 실버라이트 응용프로그램도 웹 브라우저 없이 실

행될 수 있도록 응용프로그램 매니페스트에 설정 정보를 추가할 수 있다. 브라우저 밖에서 실행되는

실버라이트 응용프로그램이 사용자의 컴퓨터에 해를 끼칠 수도 있다는 생각이 들지 않도록 실버라이

트 응용프로그램은 보호영역(sandbox) 안에서만 실행된다. 웹 브라우저 밖에서 실행되는 응용프로그

램은 네트워크가 연결되지 않은 상태에서도 데스크톱 응용프로그램처럼 단독으로 실행될 수 있다.

02 응용프로그램 l 15

플랫폼 라이브러리

실버라이트 플랫폼은 기존 HTML이나 JavaScript를 통해서 제공되는 기능 외에도 다음과 같은 기능

들을 추가로 제공하고 있다.

비디오, 벡터 그래픽, 그리고 다양한 크기의 이미지를 지원하는 ▒ 그래픽 라이브러리

Javascript로 가능했던 것보다 훨씬 더 크고 복잡한 계산이 가능하도록 응용프로그램의 코드 ▒

수행속도가 빠른 .NET CLR(공통 언어 런타임)

원격 데이터 제공을 위한 ▒ 네트워크 서비스들

데이터를 연결하고 통합시키기 위한 ▒ 데이터 서비스들

▒ 대화형 응용프로그램을 위한 사용자 인터페이스 컨트롤들

사용자 컴퓨터의 보안이나 사생활 침해에 대한 걱정 없이 응용프로그램의 상태를 ▒ 로컬에 저장

할 수 있는 격리된 저장소 서비스들

위에서 나열한 기능들은 이 책의 나머지 장들을 통해서 하나씩 자세히 알아볼 것이다. 이번 장에서

다룰 내용은 응용프로그램을 배포하는 방법과 응용프로그램의 구성요소이다. 그리고 ‘하부구조’ 절

을 통해서 런타임이 동작하는 방식에 대해서도 알아본다.

디자이너와 개발자의 협업

현대의 웹 응용프로그램들은 일반적으로 그래픽 디자인(디자이너)과 실행 로직(개발자)을 나누어 작

업할 수 있도록, 예술가가 생성한 듯한 디자인과 응용프로그램 로직을 분리된 구조로 나누어서 포함

하고 있다. 실버라이트 또한 웹사이트를 만들 때 두 분야가 동시에 작업될 수 있도록 그 영역을 서로

분리하는 것이 실버라이트 응용프로그램 모델의 핵심이다. 이 목표를 위해 실버라이트는 그래픽과 레

이아웃을 담당하는 XAML이라는 이름의 XML 문서를 제공하고 있다. 이 파일은 디자이너가 작성하

고 개발자가 실행 코드를 연결해서 사용할 수 있도록 구성되어 있다. 디자이너는 Expression Blend와

같은 디자인 도구를 사용하여 응용프로그램의 레이아웃이나 그래픽 디자인을 편집하고 그 결과를

XAML로 저장할 수 있으며, 개발자는 Visual Studio를 사용하여 그 XAML을 로드한 후 디자인된

화면이 실제로 동작할 수 있도록 코드를 작성할 수 있다.


플랫폼에 독립

실버라이트를 개발하면서 중요했던 설계 원칙 중에 또 다른 핵심은 서로 다른 수많은 종류의 운영체

제나 웹 브라우저를 대상으로 응용프로그램의 배포가 가능하도록 하는 것이었다. 물론 플랫폼에 독

립적인 웹 콘텐트를 만들기 위해서 HTML이나 JavaSciprt만 사용할 수도 있겠지만, 실제로 그 응용

프로그램을 서로 다른 브라우저에서 실행해보면 그 구현 내용에 따라서 조금씩 다르게 동작하는 경

우가 많다. 실버라이트는 이러한 문제를 해결하기 위해서 브라우저 플러그인을 사용하여 모두 동일한

실행 엔진(.NET 공통 언어 런타임)을 포함하도록 했으며 모두 동일한 플랫폼 라이브러리를 포함하도

록 하였다. 이것은 응용프로그램이 실행되는 사용자 컴퓨터상에서 어떠한 웹 브라우저나 운영체제를

사용하더라도 모두 동일하게 동작할 수 있도록 만들어 준다.

보안

실버라이트는 과거 데스크톱 응용프로그램을 실행했을 때처럼 설치 과정이나 보안 안내 문구 없이

응용프로그램을 웹 페이지에 포함시켜서 쉽게 배포할 수 있다. 따라서 악의적인 웹사이트에서는 사용

자 컴퓨터를 공격하기 위해 의도적으로 실버라이트를 이용할 수도 있을 것이다. 이것을 막기 위해서

실버라이트 응용프로그램은 기능이 제한된 영역 안에서만 실행되도록 하였다. 예를 들어 사용자 허

락 없이 사용자의 파일 시스템을 사용한다거나 운영체제의 시스템 호출을 할 수 없을 뿐만 아니라 잠

재적으로 안전하지 않은 동작을 수행할 수도 없다. 만일 운영체제의 기능을 직접 사용해야 하는 응용

프로그램을 구현해야만 한다면 실버라이트를 사용하는 것보다 .NET 클라이언트 런타임을 사용하는

데스크톱 응용프로그램으로 만드는 편이 더 바람직할 것이다. 왜냐하면 .NET 클라이언트 런타임은

윈도우 운영체제 시스템을 사용할 수 있으므로 실버라이트가 가지고 있지 않은 많은 기능들을 수행

할 수 있기 때문이다.

Visual Studio를 사용하여 응용프로그램 만들기

실버라이트 응용프로그램을 생성하는 가장 쉬운 방법은 http://silverlight.net/getstarted로부터

Visual Studio용 실버라이트 도구를 다운로드해서 사용하는 것이다. 이 도구를 설치하면 그림 2.1에

서 볼 수 있는 것처럼 실버라이트 프로젝트를 쉽게 생성할 수 있다.


그림 2.1 | Visual Studio 실버라이트 응용프로그램 프로젝트

실버라이트 프로젝트는 다음과 같은 것들을 자동으로 지원해준다.

실버라이트 응용프로그램을 호스트하는 ▒ 테스트용 HTML 페이지

실버라이트 응용프로그램에 대한 정보를 포함하고 있는 ▒ AppManifest.xml 파일

실버라이트 응용프로그램 객체를 생성하기 위해 사용되는 App.xaml 파일 ▒

실버라이트 응용프로그램의 콘텐트를 정의하기 위한 ▒ MainPage.xaml 파일

응용프로그램 XAP 패키지를 생성하기 위한 규칙들과 응용프로그램을 실행하거나 디버깅할 ▒

때 HTML 페이지 자동 실행

실버라이트 응용프로그램을 만들려면 기능적으로 이해하고 있어야 하는 구성요소들이 많다. 응용

프로그램을 기능적으로 분리해서 만들기 위해 맨 먼저 시작해야 할 일은 MainPage.xml 파일에 콘텐

트를 추가하는 것이다. 예를 들어 콘텐트에 버튼을 추가하는 방법은 다음과 같다.

<UserControl x:Class="HelloWorld.MainPage"

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

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


Width="400" Height="300"

>

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

<Button Content="HelloWorld"/>

</Grid>

</UserControl>

위의 예제를 실행해보면 그림 2.2와 같은 결과를 볼 수 있다.

그림 2.2 | Hello World 응용프로그램

위 예제에서 사용했던 엘리먼트들이 이번 장을 통해서 다루어질 내용들이다. 특히 실버라이트 응

용프로그램(실버라이트 XAP 패키지)을 호스트하기 위해서 사용하는 HTML 페이지나 응용프로그

램 매니패스트, 그리고 응용프로그램 객체와 XAML을 사용하는 방법에 대해 자세히 알아볼 것이다.

응용프로그램 구성요소들

Visual Studio를 사용하면 실버라이트 프로젝트를 통해서 많은 파일들이 자동으로 생성된다. 그 파

일들이 각각 어떤 역할을 하는지 이해할 수 있도록, 이번 절에서는 Visual Studio를 사용하지 않고 프


로젝트에 의해 생성된 파일들을 직접 만들어 볼 것이다. 그 파일들을 직접 생성해보면 실버라이트 응

용프로그램의 구성을 이해하는 데 많은 도움을 받을 수 있을 것이다.

프로젝트 파일 중 맨 먼저 생성해볼 파일은 실버라이트 응용프로그램을 호스트하기 위해 사용되는

HTML 페이지이다.

<body>

<object

data="data:application/x-silverlight"

type="application/x-silverlight-2"

width="100%"

height="100%"

>

<param name="source" value="HelloWorld.xap"/>

</object>

</body>

파라미터로 전달된 source의 값으로는 로드하게 될 응용프로그램 패키지인 XAP 파일을 설정한다.

XAP 파일은 확장명만 다를 뿐 zip 파일과 같으며 다음과 같은 내용들을 압축해서 담고 있다.

응용프로그램의 구성요소들을 설명하고 있는 ▒ AppManifest.xaml 파일

응용프로그램 코드를 담고 있는 ▒ .NET 어셈블리

XAML 파일, 이미지, 비디오, 폰트처럼 ▒ 응용프로그램에 사용되는 리소스들

AppManifest.xaml 파일에는 프로그램의 시작을 담당하는 클래스와 함께 런타임 버전 그리고 로

드해야 할 어셈블리 목록 정보들을 가지고 있다.

<Deployment

xmlns="http://schemas.microsoft.com/client/2007/deployment"


EntryPointAssembly="HelloWorld"

EntryPointType="HelloWorld.App"

RuntimeVersion="3.0.40624.0"

>

<Deployment.Parts>

<AssemblyPart Source="HelloWorld.dll" />

</Deployment.Parts>

</Deployment>



RuntimeVersion 속성은 응용프로그램을 개발할 때 사용한 실버라이트 런타임 버전을 의미한다.

만일 실행환경이 새로운 버전의 실버라이트로 업그레이드되더라도 기존 버전의 응용프로그램들은

아무런 문제 없이 올바르게 동작할 것이다. 새로운 버전의 실행환경은 그 버전 정보를 기준으로 해

당 버전을 동작시킬 것이다. 새로운 실버라이트 버전은 기존 버전에서 동작했던 방식과 미묘하게

다른 부분들이 있을 수는 있지만 버전 번호가 지정되어 있고 그것이 과거 버전이라면 실버라이트는

그 과거 버전으로 실행환경을 에뮬레이트해준다.

이번 단계에서 만들어보게 될 파일은 시작위치를 가지는 HelloWorld.App 클래스와 그것의 배포

버전인 HelloWorld.dll 어셈블리를 만들어 볼 것이다.

using System.Windows;

using System.Windows.Controls;

namespace HelloWorld

{

public partial class App : Application

{

public App()

{

// 콘텐트를 초기화하기 위해서 시작 이벤트 핸들러 연결하기

//

// RootVisual을 한번 설정하면 동적으로 변경될 수 없으며, 시작 페이지로 사용될 것이다.

// 초기화는 응용프로그램이 로드된 후에 시작 이벤트에서 처리된다.

//

this.Startup += this.Application_Startup;

// 종료 이벤트 핸들러나 에러 핸들러도 연결해서 사용할 수 있다.

//

// this.Exit += this.Application_Exit;

// this.UnhandledException += this.Application_Unhandled;

}

private void Application_Startup(

object sender,

StartupEventArgs e

)

{


// hello world TextBlock 생성

TextBlock textBlock = new TextBlock();

textBlock.Text = "Hello World";

// 캔버스 컨테이너 생성

Canvas canvas = new Canvas();

canvas.Children.Add(textBlock);

// 캔버스 컨테이너를 출력하기 위해서 응용프로그램의 루트로 설정

this.RootVisual = canvas;

}

}

}

이 예제에서 응용프로그램의 시작위치는 HelloWorld.App 생성자 함수이며, 이 함수에서는 Startup

이벤트 핸들러를 위임하고 있다. 시작을 알리는 로딩 애니메이션이 사라지면 Startup 이벤트 핸들러에

서는 응용프로그램의 콘텐트를 생성한다. 만약 응용프로그램이 사라질 때 현재 상태를 저장하고 싶

다면 Exit 이벤트를 사용할 수 있으며, 응용프로그램이 실행되는 과정에서 발생하는 예외에 대한 정

보를 얻고 싶다면 UnhandledException 이벤트를 사용할 수 있다.

앞 예제에서 보여준 것처럼 응용프로그램을 작성하면서 콘텐트 객체들을 생성하기 위해 프로그래

밍 코드를 사용할 수도 있지만 실버라이트에서는 선언적인 방식의 XAML 언어를 사용해서 콘텐트 객

체를 간접적으로 생성할 수 있다. XAML 코드는 Expression Blend와 같은 WYSIWYG 도구를 사용

하여 작성할 수 있기 때문에 콘텐트를 구성하기가 쉬울 뿐만 아니라, 프로그래밍 코드로 작성한 경우

보다 콘텐트를 로드하는 속도가 더 빠르다.

성능 팁

XAML을 파싱하는 것보다 닷넷 코드로 객체를 직접 생성하는 것이 로딩 속도를 더 빠르게 할 것이

라고 생각할지도 모르겠다. 하지만 대부분의 경우에서 XAML을 사용하는 방법이 더 빠르다. 왜냐하

면 XAML 파서는 엘리먼트와 상호작용하기 위해 필요한 API 객체들을 생성하지 않고, 오로지 화면

에 출력될 내용만을 생성해서 화면에 출력한다. 엘리먼트와 실제 상호작용하기 위해 필요한 API 객

체들은 닷넷 코드가 실제로 필요한 시점에 생성된다.


앞에서 다루어본 예제 코드를 XAML을 사용하는 코드로 변경하려면 HelloWrold.App를 수정하

여 XAML 파일을 로드하는 부분을 포함시켜야만 한다.

using System.Windows;


{


{

public App()

{

System.Windows.Application.LoadComponent(

this,

new System.Uri(

"/HelloWorld;component/App.xaml",

System.UriKind.Relative

)

);

}

}

}

다음 XAML 파일은 위의 코드에서 로드될 파일로서 이전 예제에서 프로그래밍 코드로 작성된 콘

텐트 부분을 표현하고 있다.

<Application

xmlns="http://schemas.microsoft.com/client/2007"


x:Class="HelloWorld.App"

>

<Application.RootVisual>

<Canvas>

<TextBlock Text="Hello World"/>

</Canvas>

</Application.RootVisual>

</Application>

XAML 파일은 생성될 객체와 설정될 속성들을 설명하는 파일이다. 예를 들어 Application 태그

는 HelloWorld.App 클래스를 생성하기 위한 것이다. Application.RootVisual 태그는 Application

객체의 RootVisual 속성을 의미하며, 그 안에 포함된 Canvas 엘리먼트는 Canvas 객체를 생성해서

Application 객체의 RootVisual 속성에 설정된다는 것을 의미한다. 일반적으로 XML의 속성에 값

을 설정한다는 것은 그 속성에 지정된 값이 객체의 속성에 설정된다는 것을 의미한다. MyClass의


MyProerty 속성을 XAML 태그를 사용해서 중첩 엘리먼트로 설정할 때는 <MyClass.MyProperty>

와 같은 특수한 모양의 이름으로 속성을 설정한다.

앞에서 보여준 XAML 내용의 의미를 정리해보면 다음과 같다.

Application 객체 생성. x:Class 속성에 설정된 값은 이 객체의 클래스 이름이 HelloWorld. ▒

App으로 정의된다는 것을 의미한다. 이 XML 파일을 통해서 설정되는 모든 이벤트 핸들러들

은 HelloWorld.App 클래스의 메서드로 정의되어 있어야 한다.

Canvas 엘리먼트 생성 ▒

Application.RootVisual 속성을 Canvas 엘리먼트로 설정 ▒

▒ TextBlock 엘리먼트 생성

Canvas 엘리먼트의 자식으로 TextBlock 엘리먼트를 설정 ▒

TextBlock 엘리먼트의 Text 속성을 "Hello World"로 설정 ▒

모든 실버라이트 응용프로그램은 이번 절에서 보여준 패턴과 같은 방식으로 나누어져 작성되며, 하

나의 응용프로그램을 구현하기 위한 구성은 다음과 같다.

실버라이트 플러그인을 포함하는 HTML ▒

다음 내용들을 압축하고 있는 zip 파일(확장명은 ▒ .XAP)

파일명이 AppManifest.xaml인 응용프로그램의 매니페스트 ▒

앞에서 살펴본 HelloWorld.dll 같은 ▒ 코드 어셈블리

응용프로그램 콘텐트를 정의하고 있는 하나 이상의 XAML 파일 ▒

브라우저 밖으로 응용프로그램 내보내기(실버라이트 3의 새로운 기능)

실버라이트 3에서 제공하는 새로운 기능 가운데 하나는 웹 브라우저를 사용하지 않고 실버라이트 응

용프로그램을 동작시키는 기능이다. 이 기능을 사용하는 방법은 간단히 ApplicationManifest.xaml

파일에 Depolyment.OutOfBrowserSettings의 속성을 다음과 같이 설정하기만 하면 된다.

<Deployment

xmlns="http://schemas.microsoft.com/client/2007/deployment"


EntryPointAssembly="HelloWorld"


EntryPointType="HelloWorld.App"

RuntimeVersion="3.0.40624.0"

>

<Deployment.Parts>

<AssemblyPart Source="HelloWorld.dll" />

</Deployment.Parts>

<Deployment.OutOfBrowserSettings>

<OutOfBrowserSettings ShortName="Hello World" >

<OutOfBrowserSettings.WindowSettings>

<WindowSettings Title="Hello World"/>

</OutOfBrowserSettings.WindowSettings>

<OutOfBrowserSettings.Blurb>

Description of your Silverlight application

</OutOfBrowserSettings.Blurb>

</OutOfBrowserSettings>

</Deployment.OutOfBrowserSettings>

</Deployment>

이 설정만으로 웹 브라우저 없이 응용프로그램을 실행하도록 하는 준비는 끝난 것이다. 사용자는

그림 2.3에서 볼 수 있는 것처럼 마우스 오른쪽 버튼 클릭으로 나타나는 메뉴를 사용해서 응용프로그

램을 로컬에 설치하기만 하면 된다. 사용자에게 나타나는 안내 문구는 단지 단축 아이콘을 생성할 것

인지를 묻는 정도이다. 실제로 윈도우 운영체제상에서 보여지는 안내 문구는 그림 2.4에서 보는 것뿐

이다. 이 과정을 마치고 나면 응용프로그램을 그림 2.5에서 보는 것처럼 브라우저 없이 실행할 수 있다.

그림 2.3 | 응용프로그램 설치 메뉴


그림 2.4 | 응용프로그램 설치 안내 문구

그림 2.5 | 웹 브라우저 밖에서 실행되는 응용프로그램

웹 브라우저 없이 응용프로그램이 실행될 경우에도 웹 서버에서 응용프로그램을 수정하면 웹브

라우저를 사용할 때처럼 실버라이트는 새로운 버전으로 응용프로그램을 다운로드한다. 그렇다고

해서 네트워크가 연결되어 있을 때만 응용프로그램을 실행할 수 있는 것은 아니다. 응용프로그램

이 현재 웹 브라우저 밖에서 실행되고 있는지를 코드로써 확인하고 싶을 때는 Application.Current.

IsRunningOutOfBrowser 속성을 사용할 수 있다.

XAML

지금까지 다루어본 예제에서 볼 수 있는 것처럼 응용프로그램의 객체들을 생성하기 위해 XAML을

사용할 수 있다. 이번 절에서는 XAML을 사용하기 위해 필요한 다음과 같은 기본 지식들에 대해서 좀

더 자세히 알아보도록 한다.


XAML 파일에서 사용할 수 있는 객체들을 정의하기 위한 내장 네임스페이스와 사용자 네임 ▒

스페이스

실버라이트에 의해서 문자열이 형식화된 객체로 변경되게 하는 방법 ▒

XAML을 사용해서 객체에 ▒ 이벤트 핸들러 연결하는 방법

XAML을 사용해서 ▒ 사용자 클래스 정의하는 방법

네임스페이스

XAML 파일에서 어떤 자료형을 사용하려면 그 형식의 네임스페이스를 루트 태그에 xmlns 속성을 사

용하여 설정해야만 한다. 실버라이트가 제공하는 모든 내장 자료형들은 "http://schemas.microso�.

com/client/2007" 네임스페이스를 사용한다. 앞에 예제에서도 Canvas 엘리먼트와 TextBlock 엘리먼

트를 사용하기 위해 네임스페이스를 사용하고 있다.

<Application




>


<Canvas>

<TextBlock Text="Hello World"/>

</Canvas>


</Application>

그 외에도 특수한 속성이나 값을 사용하기 위해서 "http://schemas.microsoft.com/winfx/2006/

xaml" 네임스페이스를 사용하기도 한다. 예를 들어 객체에 이름을 명명하려면 특수한 의미를 가지는

Name 속성을 사용해야만 하는데, 그때 이 네임스페이스를 사용한다.

<Application




>


<Canvas>

<TextBlock x:Name="myTextBlock" Text="Hello World"/>

</Canvas>



</Application>

Name 속성을 사용하여 객체에 이름을 부여하면 그 이름으로 객체의 포인터를 반환할 수 있으므

로 응용프로그램에서 그 이름을 쉽게 활용할 수 있다.

TextBlock myTextBlock = (TextBlock)FindName("myTextBlock");

myTextBlock.Text = "Hello World";

때로는 사용자가 정의한 클래스를 사용하는 경우도 있다. 예를 들어 사용자가 MyButton 클래스

를 정의해서 MyCustomAssembly.dll 파일에 포함해서 배포하고 있다고 할 경우, 사용자가 정의한

MyButton 클래스를 XAML에서 사용하려면 아래 예제처럼 MyNamespace 네임스페이스를 사용해

야만 한다.

<Application



xmlns:myTypes="clr-namespace:MyNamespace;assembly=MyCustomAssembly"


>


<Canvas>

<myTypes:MyButton Content="Hello"/>

</Canvas>


</Application>

형식 변환자

지금까지 다루어본 XAML 예제에서 설정되고 있는 속성값들은 모두 문자열만을 설정하고 있다. 하지

만 실제로 할당되어야 하는 속성의 자료형은 Double 형이거나 Point 형 또는 그 외의 다양한 자료형

으로 이루어져야만 한다. 예제로 그림 2.6과 같은 결과를 보이는 다음과 같은 XAML 코드를 보도록

하자.

<Canvas xmlns="http://schemas.microsoft.com/client/2007">

<Path

StrokeThickness="10"

Stroke="Black"


Fill="Red"

Data="M 14,16

C 14,16 -8,256 64,352

C 136,448 185,440 247,336

C 309,233 448,416 448,416

L 436,224

Z"

/>

</Canvas>

그림 2.6 | 자유선 예

Path 엘리먼트가 가지고 있는 Data 속성의 자료형은 String 형식이 아니라 Geometry 형식이다.

따라서 실버라이트 XAML 파서는 이 문자열을 Geometry 형식으로 변환하기 위해서 형식 변환기

(converter)를 사용한다. Geometry 변환기는 Geometry 형식으로 변환하기 위해 문자열에 이동 명령

(M)이나 라인 명령(L) 그 외의 다른 명령들을 문자열에 포함할 수 있게 한다. 이것은 Geometry 객체

를 생성하기 위한 일종의 미니 언어이다. 표 2.1에서는 형식 변환자들의 몇 가지 예를 보여주고 있다.

표 2.1 형식 변환자 구문의 예

형식 구문 예

String "hello world"

Double "123.456"

Point "10, 20"

Matrix "2,0.5,0.75,2,12,12"


형식 구문 예

SolidColorBrush "Red" or "#ffff0000"

PathGeometry "M 10,10 L 100,100"

이벤트 핸들러

XAML을 사용하여 대화형 응용프로그램을 구현하려면 이벤트 핸들러와 컨트롤을 연결할 수 있어야

한다. 예를 들어 XAML을 사용하여 실버라이트 Button을 정의할 경우 HelloWorld.App 클래스에 작

성된 이벤트 핸들러를 Button의 Click 속성에 연결할 수 있는 XAML 표기방법이 있어야 한다.

<Application




>


<Canvas>

<Button Content="Hello World" Click="Button_Click"/>

</Canvas>


</Application>

이벤트 핸들러에서는 sender 인자를 통해서 전달되는 이벤트 객체를 사용할 수 있다.


{


{

private void Button_Click(object sender, RoutedEventArgs e)

{

Button button = (Button)sender;

button.Content = "Hello World Clicked Once";

}

}

}

사용자 클래스

사용자가 엘리먼트 클래스를 정의해서 사용하는 방법은 두 단계로 나누어 볼 수 있다. 프로그래밍 코

드만을 사용하든 또는 XAML과 코드를 조합하든 엘리먼트를 정의하는 것이 그 첫 번째 단계이다. 두


번째 단계는 첫 번째 단계에서 정의한 클래스를 XAML 파일에 포함시켜서 XAML 파서에 의해서 사

용자가 만든 클래스를 생성하도록 하는 단계이다. 예를 들어, 사용자가 빨간색 원 모양의 엘리먼트를

작성하고 싶다면 Canvas 엘리먼트를 상속받아서 Canvas 엘리먼트 생성자에서 원을 그리는 코드를

작성할 수 있을 것이다.

public class MyEllipse : Canvas

{

public MyEllipse()

{

// 타원 생성하기

Ellipse ellipse = new Ellipse();

ellipse.Fill = new SolidColorBrush(Colors.Red);

ellipse.Width = 100;

ellipse.Height = 100;

// 캔바스의 자식으로 타원 추가하기

this.Children.Add(ellipse);

}

}

XAML 파서가 XAML 코드에 포함된 MyEllipse를 인식할 수 있도록 코드가 정의된 어셈블리와 네

임스페이스를 xmlns 속성을 사용해서 파서에게 알려주어야만 한다. 파서는 네임스페이스를 통해서

사용자 엘리먼트를 인지하고 MyEllipse를 객체로 만들어 준다.

<Application



xmlns:myTypes="clr-namespace:HelloWorld;assembly=HelloWorld"


>


<Canvas>

<myTypes:MyEllipse />

</Canvas>


</Application>


MyEllipse는 Canvas 엘리먼트로부터 상속되었기 때문에, 다른 Canvas 엘리먼트에 포함될 수도 있

을 뿐만 아니라 Children 컬렉션을 사용해서 다른 엘리먼트를 포함할 수도 있다.

만약 MyEllipse 클래스에 새로운 속성을 추가하고 싶다면 일반적인 클래스에 public 속성을 추가

하는 것과 동일한 방법으로 MyEllipse 엘리먼트에 속성을 추가할 수 있다.

public class MyEllipse : Canvas

{

private Ellipse ellipse;

public MyEllipse()

{

// 타원 생성하기

this.ellipse = new Ellipse();

this.ellipse.Fill = new SolidColorBrush(Colors.Red);

this.ellipse.Width = 100;

this.ellipse.Height = 100;

// 캔바스에 자식으로 타원 추가하기

this.Children.Add(this.ellipse);

}

public Brush FillColor

{

set

{

this.ellipse.Fill = value;

}

get

{

return this.ellipse.Fill;

}

}

}

새로 추가된 FillColor 속성은 XAML에서 바로 사용할 수 있다. 물론 이 속성의 자료형은 Brush 형

이므로 XAML에서 사용될 때 이 속성에 대입되는 문자열은 실버라이트의 Brush 형식 변환기를 통해

서 Brush 객체로 파싱될 것이다.


<Application





>


<Canvas>

<myTypes:MyEllipse FillColor="Blue"/>

</Canvas>


</Application>

사용자 엘리먼트 클래스를 정의할 때 프로그래밍 코드만을 사용하지 않고 XAML을 이용하여 정

의할 수도 있다. 예를 들어 앞의 예제에서 MyEllipse 엘리먼트를 정의할 때 콘텐트에 해당하는 부분

은 XAML을 사용하여 정의할 수도 있다. XAML을 사용하여 MyEllipse을 정의하려면 XAML 파일

을 로드할 수 있도록 UserControl 클래스를 상속받아야만 한다.

public partial class MyEllipse : UserControl

{

private Ellipse ellipse;

public MyEllipse()

{

// XAML 파일 로드


this,

new System.Uri(

"/HelloWorld;component/MyEllipse.xaml",


)

);

// Ellipse 검색

this.ellipse = (Ellipse)this.FindName("myEllipse");

}

public Brush FillColor

{

set

{


this.ellipse.Fill = value;

}

get

{

return this.ellipse.Fill;

}

}

}

이제 콘텐트 부분을 담당하는 엘리먼트들을 생성하고 초기화하는 부분을 XAML을 이용하여 정의

하고 MyEllipse.xaml 파일명으로 저장한다.

<UserControl

x:Class="HelloWorld.MyEllipse"



>

<Ellipse

x:Name="myEllipse"

Fill="Red"

Width="100"

Height="100"

/>

</UserControl>

콘텐트 엘리먼트를 정의할 때 XAML 파일을 사용하는 가장 큰 장점 중의 하나는 이 파일을 편집

할 때 Expression Blend와 같은 시각적인 편집 도구를 사용할 수 있다는 점이다. 객체들에 부여한 이

름이 변하지 않는 한 모양을 변경할 때 코드 파일이나 다른 부분에는 영향을 주지 않는다. 예를 들어,

Ellipse 엘리먼트 외곽에 border 엘리먼트를 추가하는 변화를 주어도 MyEllipse 엘리먼트의 동작에

는 아무런 영향을 주지 않는다.

XAP 패키지

앞에서도 언급했던 것처럼 응용프로그램 코드와 XAML 파일, 그리고 매니페스트 파일은 .XAP을

확장자로 사용하는 zip 파일로 묶어서 압축할 수 있다. zip 파일로 압축하기 위해서 Windows의 ZIP

툴을 사용할 수도 있지만, Visual Studio의 Silverlight 프로젝트 도구를 사용하는 방법이 가장 쉽다.

Visual Studio를 사용하여 Silverlight 프로젝트를 사용하는 방법에 대한 자세한 방법은 http://www.

silverlight.net/getstarted를 참고하도록 하자.


패키지를 압축하는 이유 중의 하나는 이미지나 폰트 그리고 XAML이나 그 외의 다른 파일들을 묶

어서 함께 배포할 수 있기 때문이다. 그 패키지에 포함된 구성요소들을 참조할 때는 상대적인 URI를

사용하여 접근할 수 있다.

<Application




>


<Canvas>

<Image Source="silverlight.png"/>

</Canvas>


</Application>

성능 팁

XAP 파일은 다운로드 크기를 줄여줄 뿐만 아니라 응용프로그램을 로드할 때 요청횟수를 줄여준다.

인터넷에서 한 개의 파일을 다운로드하기 위해 소비되는 대기시간은 약 50ms 이상이 된다. 만일

20~100번의 다운로드 요청이 이루어진다면 응용프로그램의 로드 시간은 수초 이상이 지연될 수

있다. XAP 파일을 사용하는 이유는 응용프로그램이 로드될 때 사용될 초기화 파일들을 한 번에 다

운로드하기 위함이다.

로드될 때 필요하지 않은 구성요소들은 필요한 시점에 요청해서 로드할 수 있다.

앞의 예제에서 사용된 Silverlight.png 파일을 배포하는 방법은 XAP 파일에 압축해서 배포하거나

HelloWorld.dll의 리소스 영역에 포함시켜서 배포하거나 별도로 분리된 파일로 배포할 수 있다. 웹 서

버에서 패키지에 담아서 배포하지 않고 느슨한 결합력을 갖는 분리된 파일로 배포할 수도 있지만. 초

기에 보여주어야 할 이미지를 분리해서 배포하는 경우에는 로딩 시간을 더 느리게 만들 수 있다. 만약

에 분리된 파일을 응용프로그램에서 사용할 경우에 그것을 참조하는 방법은 기존과 동일하게 상대

URI를 사용할 수 있다.

Image image = new Image();

image.Source = new BitmapImage(

new Uri("/silverlight.png", UriKind.Relative)

);


LoadComponent API는 XAML 파일을 로드하고 XAML 파일로부터 객체 인스턴스를 초기화하기

위해 사용한다. 이 API를 사용하여 응용프로그램 객체를 로드하는 방법은 다음과 같다:


this,

new System.Uri(

"/HelloWorld;component/App.xaml",


)

);

구성요소를 로드하기 위해 상대 URI를 지정할 때는 네임스페이스와 XAML 구성요소의 경로를 모

두 지정해야만 한다.

하부구조

이번 장에서 다루어본 예제들은 비교적 간단한 XAML과 닷넷 코드로 이루어졌지만, 그것을 실행할

때 실버라이트 런타임은 관련 구성요소들을 다운로드해야 하고 압축을 풀어야 하며 컨트롤들의 위치

와 크기를 조정한 후에 응용프로그램을 렌더링해야만 하는 많은 일들을 처리하게 된다.

이번 절에서는 응용프로그램의 기능이 동작할 수 있도록 중요한 역할을 하는 실버라이트 런타임의

구성요소들의 소개를 통해서 실버라이트의 ‘하부구조’에 대해서 알아볼 것이다. 이후의 장들에서는

이번에 소개하는 구성요소들의 기능들에 대해서 좀 더 자세히 다루어보면서 응용프로그램의 품질을

개선하기 위해 사용될 수 있는 장점들을 활용하는 방법들에 대해서도 알아볼 것이다.

아키텍처 개요

그림 2.7에서 보는 것처럼 실버라이트 런타임을 구성하는 가장 중요한 구성요소들은 다음과 같다.

웹 페이지에서 호스트되는 실버라이이트 플러그인 객체 ▒

XAP 패키지를 다운로드하거나 XAML이나 코드에서 참조하는 파일들을 다운로드하기 위해 ▒

사용되는 다운로더

XAML 파일에 선언된 객체들을 생성하고 초기화하는 XAML 파서 ▒

응용프로그램 코드를 실행해주는 .NET 공통 언어 런타임 ▒


응용프로그램 화면의 구조를 형성하는 ▒ 선언적인 엘리먼트 트리

애니메이션 효과를 생성할 수 있도록 하는 애니메이션 시스템 ▒

화면 영역의 크기나 콘텐트의 크기를 기준으로 객체들을 동적으로 배치해주는 레이아웃 시 ▒

스템

화면에 응용프로그램 콘텐트들을 출력하는 ▒ 렌더링 시스템

이번 절에서는 이 구성요소들에 대해서 알아보도록 한다.

실버라이트 플러그인

다운로더

XAML 파서 .NET CLR

애니메이션 레이아웃 이벤트 기본 클래스라이브러리

네트워크

데이터

격리된저장소

비디오

엘리먼트 트리

렌더링

그림 2.7 | 아키텍처 개요

실버라이트 플러그인

실버라이트 플러그인은 실버라이트가 시작되는 진입점이다. 플러그인은 source 속성을 통해서 XAP

파일을 참조하며 그것을 HTML 페이지 내에 로드하는 역할을 한다.

<body>

<object

data="data:application/x-silverlight,"

type="application/x-silverlight-2"

width="100%"


height="100%"

>

<param name="source" value="HelloWorld.xap"/>

</object>

</body>

플러그인 객체는 source 속성 이외에도 수많은 유용한 속성들을 가지고 있다. onError 속성은 실행

중에 발생하는 에러를 출력해야 할 때 사용할 수 있으며 Background 속성은 컨트롤의 배경색을 변경

하기 위해 사용한다. 이 외의 속성들에 대한 설명은 Silverlight So�ware Development Kit(SDK)에

기술되어 있다.

실버라이트 플러그인을 응용프로그램의 인스턴스라고도 부르며, 모든 서비스들은 플러그인의 생명

주기 동안에만 실행된다. 플러그인 객체당 하나의 AppDomain 인스턴스 하나를 가지게 되고 웹 브라

우저가 플러그인 객체를 제거하면 AppDomain도 종료된다.

응용프로그램의 메인 스레드는 실버라이트 런타임에 있는 것이 아니라 웹 브라우저에 속해 있으며,

실버라이트는 메인 스레드로부터 전달되는 입력 이벤트 또는 타이머 이벤트들을 기다렸다가 응답만

처리하는 역할을 담당한다. 이벤트에 응답하기 위해서 실버라이트는 이벤트 핸들러에 작성된 응용프

로그램의 코드를 실행한다. 만일 응용프로그램 코드의 실행이 많은 시간을 소비하게 되면, 웹 브라우

저가 사용자의 입력에 응답을 하지 않게 되는 원인이 된다.

성능 팁

실버라이트 이벤트 핸들러에서 실행되는 응용프로그램 코드는 웹 브라우저와 동일한 스레드상에서

실행되기 때문에, 네트워크 요청과 같이 오랜 시간을 필요로 하는 코드는 사용자의 입력으로부터

웹 브라우저가 바로 응답하지 못하게 만드는 원인이 될 수 있다. 따라서 네트워크 요청은 비동기적

으로 요청해야 하며 절대로 실행 스레드가 블록킹되도록 해서는 안 된다. 연산을 비동기로 실행하

면 실버라이트는 그 연산을 백그라운드로 실행하고 바로 다음 연산을 실행할 수 있게 된다.

성능 팁

실버라이트는 플러그인 객체가 로드되자마자 초기화에 필요한 구성요소들을 다운로드하고 응용프

로그램을 실행한다. 웹 페이지의 로드 시간을 빠르게 하려면 웹 페이지의 엘리먼트들 중에서 실버

라이트 플러그인을 가능한 먼저 로드될 수 있도록 해야만 한다.


성능 팁

만일 실버라이트 플러그인이 더 이상 실행될 필요가 없다면 JavaScript를 사용해서 HTML

DOM(docment object model)으로부터 플러그인 객체를 제거하고 모든 참조를 null로 설정하여

실버라이트 런타임에서 사용되던 모든 자원들을 해제해야만 한다.

다운로더

응용프로그램 프로세스가 시작되기 전에 실버라이트 런타임은 응용프로그램 XAP 파일을 다운로

드한다. 만일 XAP이 웹 서버상의 다른 파일들을 참조하고 있거나 별도의 다운로드를 필요로 한다면,

실버라이트는 이 파일들도 실행 초기에 다운로드하게 된다.

실버라이트 다운로더는 호스트하고 있는 웹 브라우저를 통해서 다운로드를 수행한다. 예를 들어 인

터넷 익스플로러(IE)가 실버라이트를 호스트하고 있다면, 실버라이트는 인터넷 익스플로러에게 파일

다운로드를 부탁하게 된다. 다음은 웹 브라우저를 통해서 다운로드할 때 알고 있어야 할 몇 가지 정보

들을 나열하고 있다.

다운로드된 결과물은 브라우저의 ▒ 캐시에 저장된다.

대부분의 모든 웹 브라우저에서는 동시 다운로드 개수가 두 개로 제한되어 있다. ▒

보안과 관련된 컨텍스트는 호스트하고 있는 웹 페이지와 동일하다. 예를 들어 리소스를 다 ▒

운로드할 때 호스트하고 있는 웹 페이지의 권한과 동일한 권한으로만 다운로드를 시도하게

된다.

실버라이트는 호스트하는 웹 브라우저에 설정된 ▒ 프락시 설정을 따른다.

다운로드가 완료되면 실버라이트 시스템으로 데이터가 전달된다. 예를 들어 다운로드가 완료된

응용프로그램의 메인 XAP 파일은 패키지 시스템에 의해서 압축이 해제된 후에 코드를 실행을 위해

.NET 공통 언어 런타임으로 전달된다.


성능 팁

네트워크를 사용하는 시간은 테스트할 때 걸린 시간보다 실제 서비스할 때 더 많은 대기시간이 요

구될 수 있다. 따라서 응용프로그램의 성능을 확인하기 위해 대기시간이 가장 높은 시간을 기준으

로 테스트해야만 한다. 만일 다운로드하는 데 긴 로드 시간이 걸린다면 응용프로그램의 로드 속도

를 개선하기 위해서 다운로드의 요청 횟수를 줄이는 방법을 찾아볼 필요가 있다.

XAML 파서

응용프로그램을 로드하자마자 XAML 파서는 XAML 파일들을 파싱하고 객체들을 초기화한다. 이

과정은 응용프로그램의 시작 이벤트에서 프로그래밍 코드를 사용하여 객체들을 직접 생성하는 방법

과 내용상으로는 동일하다.

성능 팁

많은 수의 객체를 초기화해야 하는 경우에 프로그래밍 코드를 사용하여 객체를 생성하는 것보다

XAML을 사용하여 객체를 생성하는 것이 일반적으로 초기화 속도가 더 빠르다. 그 이유 중의 하나

는 실버라이트 런타임에 의해 제공되는 수많은 최적화 알고리즘 때문이다.

.NET 공통 언어 런타임

실버라이트 용용프로그램은 C#뿐만 아니라 모든 .NET 공통 언어를 사용하여 작성할 수 있다. .NET

언어를 사용할 수 있다는 것은 실행 코드 보안과 관련된 안전성이나 가비지 컬렉션(garbage collection)

서비스 또는 형 안전성의 특징뿐만 아니라 많은 라이브러리를 사용할 수 있다는 것을 의미한다. 다만

아쉬운 점은 실버라이트 응용프로그램이 사용하는 런타임은 .NET 클라이언트 런타임처럼 풍부한

하위 집합 라이브러리들을 모두 제공하고 있지는 않으며 기본적인 라이브러리만을 제공하고 있다.

실버라이트 응용프로그램을 개발할 때는 .NET 런타임이 제공하는 기능 외에도 많은 도구들의 도

움을 받을 수 있다. .NET을 지원하기 위한 도구들에는 언어 컴파일러나 디버거 또는 프로파일러와 같

이 실버라이트 개발을 위한 도구들을 사용할 수 있다.


엘리먼트 트리

예제 응용프로그램에서 다루어보았던 것처럼 콘텐트를 출력하기 위한 기본 모델의 구성은 다음과

같다.

코드나 XAML을 사용하여 엘리먼트 트리를 생성하는 것 ▒

엘리먼트 트리를 조작하기 위해 이벤트에 응답하는 코드를 작성하는 것 ▒

위에서 설명한 것처럼 모든 실버라이트의 출력과 사용자 인터페이스의 기능은 엘리먼트 트리를 생

성하고 그것을 조작하는 방식으로 이루어진다. 예를 들어 타원을 그리고자 한다면 Ellipse 엘리먼트를

생성하고 그것을 엘리먼트 트리에 추가하기만 하면 된다. 실버라이트는 화면에 콘텐트를 직접 그릴 수

있는 DrawEllipse와 같은 메서드를 가지고 있지 않다.

이 모델은 Expression Blend와 같은 도구를 사용할 수 있다는 점과 성능을 높일 수 있다는 것 외에

도 많은 장점을 가지고 있다. 3장 ‘그래픽스’에서는 트리 모델에서 엘리먼트를 교체하는 방법에 대해서

알아본다.

이벤트 시스템

응용프로그램 로드가 완료되면 웹 브라우저로부터 렌더링 요청이나 사용자에 의한 마우스 또는 키보

드 이벤트가 전달되기 시작한다. 실버라이트가 웹 브라우저로부터 이런 이벤트들을 전달받게 되면 등

록된 이벤트 핸들러에서 그것을 처리하게 된다.

애니메이션

이벤트에 응답하는 코드에서 속성값을 한 번에 변경하는 방법이 아니라 일정 시간 동안 속성의 값을

점진적으로 자동 변경해주는 것을 원할 경우에는 애니메이션을 사용할 수 있다. 예를 들어 (0,0) 위

치에서 (300,0) 위치로 사각형을 움직이기 위해 애니메이션을 사용할 수 있으며 사용방법은 다음과

같다.

<Canvas



>

<Canvas.Triggers>

<EventTrigger RoutedEvent="Canvas.Loaded">

<EventTrigger.Actions><BeginStoryboard>


<Storyboard>

<DoubleAnimation

Storyboard.TargetName="rect1"

Storyboard.TargetProperty="(Canvas.Left)"

From="0"

To="300"

Duration="0:0:5"

/>

</Storyboard>

</BeginStoryboard>

</EventTrigger.Actions>

</EventTrigger>

</Canvas.Triggers>

<Rectangle x:Name="rect1" Width="100" Height="100" Fill="Red"/>

</Canvas>

6장 ‘애니메이션’에서 좀 더 자세하게 애니메이션 시스템에 대해서 알아본다.


선언적인 애니메이션 시스템은 애니메이션을 만들거나 응용프로그램의 레이아웃을 구성할 때 눈으

로 보면서 레이아웃을 구성할 수 있도록 Expression Blend 같은 도구를 사용할 수 있다. 6장에서

좀 더 자세히 설명하겠지만 애니메이션 시스템은 조금 특별한 출력 품질과 성능을 가지고 있다.

레이아웃

레이아웃 시스템은 실버라이트 응용프로그램에서 콘텐트의 위치나 크기를 조절하는 역할을 담당하

고 있다. 예를 들어 그림 2.8에서 표현하고 있는 콘텐트는 다음의 XAML을 사용하여 표현할 수 있다.

<Application





>



<StackPanel>

<Button FontSize="24" Content="Top"/>

<Button FontSize="24" Content="Bottom"/>

</StackPanel>


</Application>

그림 2.8 | 레이아웃 예제

이번 예제에서, 실버라이트는 다음과 같은 일을 한다.

Button 엘리먼트의 텍스트 크기 측정 ▒

Button 엘리먼트의 크기 측정 ▒

실버라이트 플러그인이 출력되는 영역의 크기와 텍스트를 기준으로 Button 엘리먼트의 크기 ▒

조정

수직 방향의 스택 모양으로 Button 엘리먼트들을 배치 ▒

7장 ‘레이아웃’에서 레이아웃 시스템에 대해서 좀 더 자세히 설명한다.

렌더링

실버라이트는 응용프로그램을 다운로드하고, XAML을 파싱한다. 코드가 실행되고 엘리먼트들의 위

치나 크기를 결정할 때가 되면 레이아웃 시스템이 동작을 하고 그 다음이 되어서야 엘리먼트들을 화

면에 렌더링하기 위한 준비를 하게 된다. 실버라이트는 운영체제의 렌더링 시스템을 사용하지 않고 자

기 자신의 렌더링 시스템을 가지고 있다. 그 이유는 실버라이트 렌더링 시스템이 운영체제나 브라우저

에 종속되지 않고 일관된 품질을 제공하기 위해서이며, 웹 브라우저에서 HTML로는 구현할 수 없었

던 안티앨리어싱 벡터 그래픽이나 비디오 또는 특수효과, 3D와 같은 향상된 렌더링을 지원하기 위해

서이다. 실버라이트의 렌더링 시스템에 대해서는 3장에서 자세히 설명한다.


요점정리

이번 장에서 다룬 내용들은 다음과 같다.

실버라이트 응용프로그램 모델의 설계 원칙들 ▒

실버라이트 XAP의 구성요소 ▒

XAML 소개 ▒

코드와 XAML을 통합하는 방법 ▒

실버라이트 응용프로그램을 실행하기 위해서 실버라이트 런타임이 ▒ ‘하부구조’에서 동작하는

방식

다음 장부터는 다음과 같은 주제를 기반으로 구현원리나 기능 그리고 ‘하부구조’의 동작방식에 대

해서 알아볼 것이다.

그래픽스 ▒

텍스트 ▒

입력 ▒

애니메이션 ▒

비디오 ▒

레이아웃 ▒


45

03그래픽스

이번 장에서는 향상된 벡터 그래픽과 이미지를 응용프로그램에서 사용하는 방법과 그래픽 엘리먼트

의 성능을 최적화하고 이미지 품질을 높이는 방법에 대해서 알아본다. 이번 장에서 다룰 내용은 다음

과 같다.

그래픽 시스템 설계 원칙 ▒

그래픽 엘리먼트 출력방법 ▒

‘하부구조’에서 실버라이트 런타임이 처리하는 내용과 응용프로그램에서 처리해야 할 내용들 ▒

그래픽 시스템의 설계 원칙

실버라이트 그래픽 API는 벡터 그래픽이나 비트맵 이미지 그리고 텍스트를 응용프로그램에 쉽게 사

용할 수 있게 해준다. 이번 절에서는 그래픽 API의 설계 원칙에 대해서 설명한다.


벡터 그래픽과 비트맵 이미지

비트맵 이미지는 응용프로그램에 그래픽을 넣을 때 가장 보편적으로 사용되는 방식이다. 하지만 비트

맵 이미지는 그림 3.1에서 보는 바와 같이 크기가 커지면 이미지가 뿌옇게 흐려지고 반대로 크기가 작

아지면 그림 3.2에서 보는 것처럼 앨리어스라고 하는 거친 화상이 생기게 된다. 하지만 벡터 그래픽을

사용하게 되면 그림 3.3에서 보는 것처럼 이미지의 선명한 모양을 그대로 유지하게 할 수 있다. 그렇다

고 해서 벡터 그래픽이 더 좋다고 말하는 것은 아니다. 대부분의 응용프로그램에서 벡터 그래픽과 비

트맵 이미지는 상황에 따라서 모두 유용하게 사용할 수 있다. 예를 들어 사용자 인터페이스를 구성하

는 컨트롤을 작성할 때는 비트맵 이미지보다 벡터 그래픽을 사용해서 크기나 해상도가 달라질 경우라

도 그래픽의 품질을 유지할 수 있을 것이다.

비트맵 이미지는 디지털 사진처럼 복잡한 그림이나 벡터 방식으로 표현하기 힘든 그래픽을 출력해

야 할 때 유용할 수 있다.

그림 3.1 | 원 이미지 크기 확대

그림 3.2: 원 이미지 크기 축소

03 그래픽스 l 47

그림 3.3 | 원 벡터 그래픽 크기 변경

실버라이트 3의 새로운 기능

이미지의 크기를 축소할 때 그림 3.2에서 보여준 결과보다 더 나은 품질로 축소할 수 있는 기술들

은 수없이 많이 존재한다. 실버라이트 3에서는 그러한 좋은 품질로 축소할 수 있는 여러 알고리즘

들 중에서 하나를 사용해서 비트맵 이미지를 축소하고 있다. 그런데 비트맵 이미지를 축소할 때는

이미지 하나당 여러 개의 다양한 크기로 축소된 비트맵 이미지 집합을 생성하게 되며, 비트맵 이미

지마다 한 번씩 실행하여 비트맵의 생명주기 동안 그 변환된 이미지들을 캐시에 저장해 놓고 사용

한다. 애니메이션이 진행되는 동안 실버라이트 3은 출력하기에 적당한 크기의 이미지를 동적으로

찾아서 그 이미지를 사용한다. 이 과정은 메모리의 사용률을 33% 정도 증가시키는 원인이 되기도

하지만, 3D 변환이나 크기가 축소된 이미지의 출력 품질을 그림 3.3에서 보여주는 것과 거의 같을

정도로 좋은 품질로 개선시킬 수 있다.

반대로 비트맵을 확대시킬 때는 그림 3.1처럼 뿌옇게 보일 것이다.

보유모드

그래픽 API의 종류는 두 가지로, 보유모드(retained mode) API와 직접모드(immediate mode) API가

있다. 보유모드 API는 그래프 객체의 모양에 변화를 주면 그 객체가 변함에 따라 달라진 영역을 API

가 자동으로 그려주는 모드이다. 직접모드 API는 변화된 영역을 추가적인 API를 사용하여 직접 그려

야만 한다. 예를 들어 보유모드 시스템에서 그림 3.4에 보이는 사각형을 제거할 때는 API를 사용하여

간단히 해당 엘리먼트를 제거하는 함수만 호출하면 된다. 그러면 보유모드 그래픽 시스템에 의해서 사

각형이 차지했던 배경 영역과 아래 쪽의 삼각형 그리고 위쪽의 원이 자동으로 다시 그려진다. 반면에


직접모드 API를 사용해서 그림 3.4에 보이는 동일한 사각형을 제거하려면 그림 3.5에서 보는 바와 같

이 사각형이 차지했던 배경을 채우기 위한 함수와 밑의 삼각형과 위의 원을 그리는 함수 등 총 세 번의

함수 호출을 통해서 직접 처리해주어야만 한다.

사각형 제거

그림 3.4 | 보유모드 API를 사용하여 사각형 제거하기

사각형뒷편의배경그리기

삼각형그리기

원 그리기

그림 3.5 | 직접모드 API를 이용하여 사각형 제거하기


보유모드 API를 사용하면 다음과 같은 일을 쉽게 처리할 수 있다.

그래픽 엘리먼트 생성 ▒

그래픽 엘리먼트의 속성 변경 ▒

엘리먼트 사이의 관계를 그래프로 표현 ▒

그래프 구조 조작 ▒

보유모드 그래픽 API는 직접모드 API를 사용하는 것보다 더 쉬우며 그림이 커질 경우 하부 시스템

에 의해서 성능 최적화가 자동으로 이루어지기 때문에 모든 폐쇄형 공간을 직접 책임져야 하는 것을

피할 수 있다. 실버라이트는 그래픽이나 애니메이션 그리고 응용프로그램에서 UI 컨트롤을 쉽게 사

용할 수 있도록 보유모드 시스템을 제공하고 있다.

실버라이트에서는 XAML 파일에서 선언적인 방법으로 보유모드 그래픽을 생성할 수 있다.


<!–– 삼각형 ––>

<Path

Fill="Green"

Data="F1 M 128,12L 12,224L 224,224"

/>

<!–– 사각형 ––>

<Rectangle

Fill="Blue"

Canvas.Left="96"

Canvas.Top="160"

Width="256"

Height="224"

/>

<!–– 타원 ––>

<Ellipse

Fill="Red"

Canvas.Left="230"

Canvas.Top="288"

Width="200"

Height="200"

/>

</Canvas>


프로그래밍 코드를 사용하여 보유모드 그래픽을 생성할 수도 있다.

Canvas canvas = new Canvas();

//

// 삼각형 만들기

//

Path path = new Path();

path.Fill = new SolidColorBrush(Colors.Green);

PathFigure pathFigure = new PathFigure();

pathFigure.StartPoint = new Point(128, 12);

LineSegment lineSegment1 = new LineSegment();

lineSegment1.Point = new Point(12, 224);

pathFigure.Segments.Add(lineSegment1);

LineSegment lineSegment2 = new LineSegment();

lineSegment2.Point = new Point(224, 224);

pathFigure.Segments.Add(lineSegment2);

PathGeometry pathGeometry = new PathGeometry();

pathGeometry.Figures = new PathFigureCollection();

pathGeometry.Figures.Add(pathFigure);

path.Data = pathGeometry;

canvas.Children.Add(path);

//

// 사각형 만들기

//

Rectangle rectangle = new Rectangle();

rectangle.Fill = new SolidColorBrush(Colors.Blue);

Canvas.SetLeft(rectangle, 96);

Canvas.SetTop(rectangle, 160);


rectangle.Width = 256;

rectangle.Height = 224;

canvas.Children.Add(rectangle);

//

// 타원 만들기

//

Ellipse ellipse = new Ellipse();

ellipse.Fill = new SolidColorBrush(Colors.Red);

Canvas.SetLeft(ellipse, 230);

Canvas.SetTop(ellipse, 288);

ellipse.Width = 200;

ellipse.Height = 200;

canvas.Children.Add(ellipse);

플랫폼 독립의 일관성

실버라이트 그래픽 엔진의 주요 목표는 응용프로그램이 다양한 운영체제나 브라우저에 독립적일 뿐

만 아니라 모든 곳에서 동일한 성능으로 실행되도록 하는 것이다. 모든 운영체제는 자기만의 그래픽

라이브러리를 별도로 가지고 있다. 그런데 각 운영체제의 그래픽 라이브러리는 그 기능이나 성능 그리

고 이미지 품질에서 서로 상당한 차이가 있기 때문에, 플랫폼에 독립적이면서 일관된 성능을 보장하

기 위한 방법은 실버라이트가 자신만의 렌더링 엔진을 가지는 것이다.

도구

실버라이트는 디자인 도구를 사용하여 만든 벡터 그래프나 이미지를 동적으로 로드할 수 있을 뿐만

아니라 개발 도구를 사용하여 응용프로그램 코드와 통합시킬 수도 있다. 실버라이트 런타임에서 사

용되는 벡터 그래픽이나 애니메이션을 XAML로 만들기 위해 사용되는 도구로는 Expression Design

이나 Expression Blend를 사용할 수 있다. 그 외에도 Adobe Illustrator을 사용해서 만든 결과물을

XAML로 변환해주는 변환기도 있으며 이와 비슷한 무료 추출 변환기의 종류도 많고, XPS 프린트 드

라이버나 기타 다양한 종류의 도구들도 있다.


이미지 품질과 속도

실버라이트는 정적인 그림 출력 외에도 초당 60프레임으로 움직이는 애니메이션도 지원한다. 하지만

실행 성능은 응용프로그램 콘텐트의 복잡도나 대상 컴퓨터의 하드웨어 구성 또는 출력해상도에 따라

다를 수 있으며, 운영체제와 웹 브라우저에 따라서 많은 영향을 받는다.

응용프로그램이 초당 60프레임의 성능을 보이지 않을 경우에 성능을 개선하기 위해서 실버라이트

팀에서는 다음과 같은 두 가지 방법을 사용한다.

실버라이트 런타임에서 동작에 사용되는 구성요소들을 최적화한다.1.

성능을 높이기 위해 이미지의 품질을 낮춘다.2.

속도를 높이기 위해서 이미지의 품질을 낮추는 방법은 가장 큰 논란거리가 될 수도 있다.

왜냐하면 실버라이트 응용프로그램은 시각적으로 멋지게 보여야 하기 때문이다. 하지만 일반적으

로 사용자가 그 차이를 크게 느끼지 못할 정도로 이미지 품질을 낮춘다면 괜찮을 수도 있을 것이다.

실제로 백터 그래픽 렌더링은 대부분 어느 정도는 이미지 품질을 낮추어서 사용하고 있지만 대부분의

사용자들은 그것을 크게 문제 삼고 있지 않다.

반대로 텍스트 품질에 대한 사용자들의 기대는 표준 이상의 높은 품질을 원한다. 실제로 실버라이

트 런타임은 텍스트를 선명하게 렌더링하는 데 그래픽보다 더 많은 CPU를 할당하고 있다.

그래픽 엘리먼트

앞에서 설명한 것처럼 실버라이트 런타임은 다양한 플랫폼에서 그래픽을 출력하기 위해 XAML을 동

적으로 로드할 수 있다. 만약 C#이나 JavaScript를 사용할 수 있다면 그래픽 엘리먼트를 로드 방식이

아닌 프로그래밍 코드를 사용하여 생성할 수도 있을 것이다. 이번 절에서는 벡터 그래픽과 이미지를

출력하기 위해 사용되는 엘리먼트의 종류와 그 사용방법에 대해서 알아본다.

도형

그래픽 엘리먼트의 종류에 대해서 알아보기 전에 그래픽 엘리먼트의 기반이 되는 클래스(Shape 클래

스)부터 먼저 알아보도록 하자. Shape 엘리먼트가 제공하는 가장 기본적인 기능은 다음과 같다.

도형의 내부를 칠하기 위한 Fill 속성 ▒


도형 엘리먼트의 Width와 Height 속성에 설정된 영역에서 도형을 확장하는 방식을 설정하기 ▒

위한 Stretch 속성

팬의 색과 두께를 설정하기 위한 ▒ Stroke와 Strok�ickness 속성

Shape로부터 파생된 엘리먼트들은 기하학적인 도형을 표현할 수 있다. Shape로부터 파생된 엘리먼

트에는 Rectangle, Ellipse, Line, Polygon, Polyline, Path가 있다.

Rectangle 엘리먼트

사각형을 그리는 방법은 Rectangle을 Canvas 엘리먼트에 추가하고 Canvas.Top, Canvas.Left,

Width, Height, Fill 색상을 설정하는 것이다.


<Rectangle

Fill="LightGray"

Canvas.Left="50"

Canvas.Top="50"

Width="400"

Height="400"

/>

</Canvas>

Stroke 속성을 사용해서 선의 색상을 설정하고, Stroke�ickness 속성을 사용해서 선의 두께를 설

정하면 그림 3.6에서 보는 바와 같이 사각형에 외곽선이 추가된 것을 볼 수 있을 것이다.


<Rectangle

Fill="LightGray"

Stroke="Black"


Canvas.Left="50"

Canvas.Top="50"

Width="400"

Height="400"

/>

</Canvas>


그림 3.6 | 외곽선을 가진 Rectangle 엘리먼트

Rectangle 엘리먼트의 RadiusX와 RadiusY 속성에 값을 설정하면 그림 3.7처럼 모가 둥근 사각형

을 그릴 수도 있다.

그림 3.7 | 모가 둥근 Rectangle 엘리먼트


<Rectangle

Fill="LightGray"

Stroke="Black"


RadiusX="40"

RadiusY="60"

Canvas.Left="50"

Canvas.Top="50"


Width="400"

Height="400"

/>

</Canvas>

Ellipse 엘리먼트

Rectangle 엘리먼트를 사용할 때처럼 Canvas.Top, Canvas.Left, Width, Height 속성을 사용하여

Ellipse 엘리먼트를 그릴 수 있다. Ellipse는 그림 3.8에서 볼 수 있는 것처럼 사각형 영역에 맞춰진 내접

원을 표현한다.

그림 3.8 | Ellipse 엘리먼트


<Ellipse

Fill="LightGray"

Stroke="Black"


Canvas.Left="50"

Canvas.Top="50"

Width="400"

Height="400"

/>

</Canvas>


Line 엘리먼트

Line 엘리먼트는 X1, Y1, X2, Y2 속성을 사용하여 선을 표현한다. 그림 3.9에서 보는 바와 같이 두꺼

운 선을 표현할 때는 다른 도형과 마찬가지로 Stoke와 Stroke�ickness 속성을 사용해서 선의 색상이

나 두께를 지정할 수 있다.

그림 3.9 | Line 엘리먼트


<!–– 두꺼운 대각선 ––>

<Line

Stroke="Black"


X1="60"

Y1="60"

X2="400"

Y2="400"

/>

<!–– 1 픽셀의 수평 선 ––>

<Line

Stroke="Black"

StrokeThickness="1"

X1="100"

Y1="60"

X2="400"

Y2="60"

/>

</Canvas>


어느 경우에는 수평선을 그림 3.10처럼 확대해서 보면 XAML에서 Stroke�ickness에 지정한 값이

1픽셀임에도 불구하고 2픽셀의 높이를 가지는 경우가 있다. 그런 경우에는 선의 색을 검정색으로 지정

했음에도 불구하고 회색으로 보이게 된다. 왜 그런 렌더링 결과가 나오는지를 이해하기 위해서 다음

단락에서 설명하는 Rectangle 엘리먼트를 참고하도록 하자.

그림 3.10 | 렌더링된 Line 엘리먼트의 픽셀들


<!–– 사각형으로 그린 1 픽셀의 수평 선 ––>

<Rectangle

Fill="Black"

Canvas.Left="99.5"

Canvas.Top="59.5"

Width="301"

Height="1"

/>

</Canvas>

위 예제에서는 Rectangle 엘리먼트를 그리기 위한 위치 값으로 소수점(.5) 값을 사용하고 있다. 소

수점을 사용한 이유는 사각형을 이용해서 선을 표현해보기 위함이다. 하지만 사각형은 선의 위치가

Stroke�ickness의 반만큼 그 위치를 넘어서고 있다. Stroke�ickness의 값이 1이므로 선을 좌/상단

좌표에 정확히 맞추려면 -0.5씩 빼야 한다. 그렇게 되면 사각형의 선을 표현하는 픽셀이 0.5씩 픽셀 중

간 사이에 걸쳐지게 되는데, 그 때문에 선을 출력할 때 안티앨리어싱 알고리즘이 사용된다. 그 결과 두

픽셀의 색상이 밝은 색상으로 변하게 된다. 만일 그림 3.11처럼 수평 방향이나 수직 방향의 선명한 선

을 원한다면 그냥 정수 좌표를 사용하여 사각형을 배치해야만 한다.


그림 3.11 | Rectangle 엘리먼트로 그려진 수평방향의 선 도형


<!–– 사각형으로 그린 1 픽셀의 수평 선––>

<Rectangle

Fill="Black"

Canvas.Left="99"

Canvas.Top="59"

Width="301"

Height="1"

/>

</Canvas>

Path 엘리먼트

Path 엘리먼트는 Shape 엘리먼트가 가지고 있지 않은 Data 속성을 확장하고 있다. 이 속성에는

Geometry 객체를 설정한다. 이 속성을 사용하면 앞에서 설명한 Rectangle, Ellipse, Line 엘리먼트

를 사용하여 그릴 수 있었던 도형들을 Path 엘리먼트 하나만을 사용해서 모두 표현할 수 있다. 예

를 들어 사각형을 그리기 위해 Rectangle 엘리먼트를 사용하지 않고 Path 엘리먼트의 Data 속성에

RectangleGeometry를 설정하면 동일한 모양의 사각형을 그릴 수 있다.


<Path


Fill="Blue"

Stroke="Black"


>

<Path.Data>

<RectangleGeometry Rect="96,160,256,224"/>

</Path.Data>

</Path>

</Canvas>

Path 엘리먼트를 사용하여 도형을 표현하는 구문은 Rectangle과 같은 기본 도형 엘리먼트를 사용

하는 구문보다 복잡하다. 하지만 실버라이트가 표현하는 모든 도형들을 내부적으로는 Path 엘리먼트

로 변환하여 사용하고 있기 때문에 Path 엘리먼트를 표현하는 방법을 이해하면 모든 도형이 그려지는

방법을 이해하는 것이라고 할 수 있다.

Path 엘리먼트는 기본 도형을 표현하는 능력 외에도 Figure 엘리먼트를 사용하면 복잡한 모양의 도

형들도 표현할 수 있다. Figure 엘리먼트는 직선이나 곡선과 같은 도형의 조각들을 결합하여 만든 집

합이다. 그림의 조각들을 모아서 그림을 그릴 때 사용하는 가장 일반적인 방법은 직선조각이나 곡선

조각과 같은 조각들을 간단한 문자열로 표현해주는 미니언어(mini-language)를 사용하는 방법이다.

직선과 곡선을 이용한 가장 일반적인 그림의 형태는 그림 3.12와 같다.

그림 3.12 | Path를 이용한 그림의 예



<Path


Stroke="Black"

Fill="Red"

Data="M 14,16

C 14,16 -8,256 64,352

C 136,448 185,440 247,336

C 309,233 448,416 448,416

L 436,224

Z"

/>

</Canvas>

미니언어 명령어들은 표 3.1에서 볼 수 있으며 이 명령어들은 각각 자신의 동작이 따로 구분되어 있

다. 만일 미니언어를 사용하고 싶지 않다면 다음 XAML 코드처럼 그림조각(Segment)을 직접 이어 붙

여서 그림을 그릴 수도 있다.


<Path


Stroke="Black"

Fill="Red"

>

<Path.Data>

<PathGeometry>

<PathGeometry.Figures>

<PathFigure StartPoint="14, 16" IsClosed="true">

<PathFigure.Segments>

<BezierSegment

Point1="14,16"

Point2="-8,256"

Point3="64,352"

/>

<BezierSegment

Point1="136,448"

Point2="185,440"


Point3="247,336"

/>

<BezierSegment

Point1="309,233"

Point2="448,416"

Point3="448,416"

/>

<LineSegment

Point="436,224"

/>

</PathFigure.Segments>

</PathFigure>

</PathGeometry.Figures>

</PathGeometry>

</Path.Data>

</Path>

</Canvas>

표 3.1 Path의 미니언어 명령어

명령어 행위

M x,y x,y 좌표로 이동

L x,y 현재 좌표에서 x,y 좌표까지 선을 그린다

C x1,y1, x2,y2, x3,y3 (x1,y1), (x2,y2), (x3,y3) 현재 좌표와 (x1,y1), (x2,y2), (x3,y3) 좌표를 조합하여 3차원의 Bezier 조각을 그린다.

Q x1,y1, x2,y2 (x1,y1), (x2,y2) 현재 좌표와 (x1,y1)과 (x2,y2) 좌표를 조합하여 2차원의 Bezier 조각을 그린다.

H x 현재 좌표 x0,y0에서 좌표 x, y0까지 수평 선을 그린다.

V y 현재 좌표 x0,y0에서 좌표 x0,y까지 수직 선을 그린다.

Z 그림을 닫는다.

F0 EvenOdd 채우기 규칙 설정

F1 NonZero 채우기 규칙 설정

앞의 설명 중에서 Figure 엘리먼트를 언급하였다. Path 엘리먼트는 하나 이상의 조각그림을 조합하

여 그림을 그릴 수 있기 때문에 그림 3.13에서 보이는 것처럼 배경이 비워진 그림도 그릴 수 있다.


그림 3.13 | 가운데 공간이 비워진 Path


<Path


Stroke="Black"

Fill="LightGray"

Data="M 50,50 L 50,450 450,450 450,50 50,50 z

M 100,100 L 100,400 400,400 400,100 100,100 z"

/>

</Canvas>

성능 팁

Path를 그리기 위해 사용하는 두 가지 방식은 모두 동일한 그림을 그려주기는 하지만 성능이나 유

연성 면에서는 차이가 있다. 미니언어를 사용하는 방식이 더 빠르며 더 적은 메모리를 사용할 뿐만

아니라 런타임이 도형을 출력해주는 속도도 더 빠르다. 하지만 장점만 있는 것은 아니다. 미니언어

를 사용하는 경우는 콘텐트를 정적으로 구성할 때만 추천되는 방법이다. 미니언어를 사용하면 실버

라이트는 Path, Figure, Segment 객체들을 생성해주지 않기 때문에 애니메이션과 연동할 수 없

으며 Path의 조각들을 동적으로 변경하는 것이 불가능하게 된다.


채우기 규칙들

앞 절에서는 배경이 채워진 도형을 그리기 위해 그림 조각을 사용하였다. 그런데 선을 연결해서 도형

을 그리게 되면 배경을 채울 때 도형의 내부와 외부를 구분할 수 없다. 예를 들어 선으로만 이루어진

그림 3.13을 대상으로 배경을 칠하라고 명령을 내릴 경우 그림 3.14에서 보이는 결과처럼 어떤 그림이

올바르다고 할 수 없다. 도형의 내부 외부를 구분하여 배경을 칠하려면 도형을 채우는 규칙이 있어야

만 한다.

그림 3.14 | 동일한 외곽선에 서로 다른 채우기 방법

도형의 내부를 지정하는 방법 중 하나는 도형을 가로지르는 가상의 선을 만들고 왼쪽에서부터 오

른쪽으로 가로지르면서 경계선 수를 세는 방법이다. 만일 누적된 경계선 수가 짝수라면 그 부분은

도형의 외부로 구분하도록 한다. 이런 채우기 규칙을 EvenOdd 규칙이라고 한다. Path 엘리먼트는

기본적으로 이 규칙을 사용하고 있다. 채우기 규칙을 명시적으로 설정하고 싶을 때는 Geometry의

FillRule 속성을 사용한다. 미니언어를 사용하여 EvenOdd를 채우기 규칙으로 설정할 때의 표현방법

은 F0이다.


<!–– 채우기 규칙 F0=EvenOdd를 사용하는 Path ––>

<Path


Stroke="Black"

Fill="LightGray"


Data="F0

M 50,50 L 50,450 450,450 450,50 50,50 z

M 100,100 L 100,400 400,400 400,100 100,100 z"

/>

</Canvas>

또 다른 채우기 규칙으로는 NonZero 규칙이 있다. 이 규칙은 입력된 좌표의 순서가 도형의 내부와

외부를 구분 짖는 기준이 된다. 만일 입력된 좌표를 순서대로 따라가면서 그 선의 방향이 위쪽으로 진

행된다면 선의 휘어지는 수를 하나 증가시키고 아래방향이라면 선의 휘어지는 수를 하나 감소시킨

다. NonZero 규칙은 도형을 가로지르는 가상의 선을 그어서 왼쪽에서부터 휘어지는 수를 더한 값이

0(Zero)이 아니라면 그 부분을 내부영역으로 구분한다. 예를 들어 그림 3.14에서 보여준 그림을 다음

XAML 코드에서 지정된 순서로 좌표를 설정하면 휘어지는 수에 의해서 그 결과는 그림 3.15과 같은

모양으로 내부를 칠할 것이다.


<!–– 채우기 규칙 F0=NonZero를 사용하는 Path ––>

<Path


Stroke="Black"

Fill="LightGray"

Data="F1

M 50,50 L 50,450 450,450 450,50 50,50 z

M 100,100 L 100,400 400,400 400,100 100,100 z"

/>

</Canvas>

+1 +1 –1 –1

그림 3.15 | 휘어지는 모드


만일 좌표 순서를 다음처럼 설정한다면 그림 3.16에서 보이는 것처럼 배경이 다르게 그려질 것이다.

그림 3.16 | 다른 좌표 순서로 인한 다른 채우기 결과


<!–– Path with fill rule F1 = NonZero ––>

<Path


Stroke="Black"

Fill="LightGray"

Data="F1

M 50,50 L 50,450 450,450 450,50 50,50 z

M 100,100 L 400,100 400,400 100,400 100,100 z"

/>

</Canvas>

성능 팁

NonZero 규칙은 EvenOdd 규칙보다 더 복잡하고 렌더링 속도도 더 느리다. 벡터 그래픽 채우기의

대부분은 EvenOdd 규칙을 사용한다.


이미지

앞에서 설명한 벡터 그래픽 엘리먼트 외에 많이 사용되는 전형적인 그래픽이 있다면 이미지를 빼놓을

수 없을 것이다. 그림 3.17과 같이 이미지를 출력할 때는 이미지 URI를 참조하는 Image 엘리먼트를

사용한다.

그림 3.17 | Image 엘리먼트 예제


<Image Source="silverlight.png"/>

</Canvas>

Source 속성을 사용하면 JPG 또는 PNG 형식의 이미지를 참조할 수 있다. 하지만 JPG나 PNG 파일

이 DPI(dots per inch) 정보를 포함하고 있다고 해도 실버라이트는 출력 대상에 맞게 그 정보를 사용

하지 않고 그냥 무시해버린다. XAML에서 참조하는 모든 URI는 XAML 파일 위치를 기준으로 리소

스 위치를 검색한다. 예를 들어 XAML 파일이 XAP 파일 안에 있다면 실버라이트는 XAP 파일 안에

서 silverlight.png 파일을 검색하며, XAML 파일이 관리코드의 리소스 영역에 있다면 실버라이트는

동일한 어셈블리에서 silverlight.png 파일을 검색한다.

이미지의 Width와 Height 속성을 지정하지 않으면 실버라이트는 이미지를 원본 크기로 출력한다.

여기서 원본 크기란 원래 이미지 데이터의 완전한 픽셀 크기를 말한다.

브러쉬

이전 예제에서 다루어 본 그래픽은 단색으로 채워진 Path 엘리먼트였다. 실버라이트는 폐쇄형 도형의

배경을 칠할 때 이미지 브러쉬, 선형 그라디언트 브러쉬 그 외에 원형 그라디언트 브러쉬 등을 사용할


수 있다. 브러쉬는 (x,y) 좌표와 색상을 묶어서 맵으로 만든 수학적인 함수이다. SolidColorBrush는

위치와 상관없이 동일한 색상을 출력하는 단순한 기능의 브러쉬이다. 이번 절에서는 실버라이트에서

사용할 수 있는 브러쉬의 종류들과 위치와 색상을 묶어서 사용하는 방법에 대해서 알아본다.


앞의 예제에서는 Image 엘리먼트의 Source 속성에 이미지 URI를 설정하였다. URI는 다른

Image 엘리먼트에서도 사용될 수 있다. 그럴 경우에 실버라이트는 첫 번째 엘리먼트를 위해 그 이

미지를 다운로드하고 캐시에 저장하며, 다른 Image 엘리먼트를 위해서는 앞서 다운로드한 캐시에

있는 동일한 이미지를 참조한다.

만일 지정한 이미지 URI를 더 이상 참조하는 이미지 엘리먼트가 없다면 그 이미지는 메모리 캐시에

서 제거되고 더 이상 참조할 수 없게 된다. 나중에 다시 참조하게 되면 실버라이트는 그 이미지를 다

시 다운로드하게 된다. 당연한 얘기지만 다시 다운로드할 때는 브라우저 캐시에 있는 이미지를 맨

먼저 확인한다. 브라우저 캐시에 없을 경우에 네트워크를 통해서 이미지를 다시 다운로드한다.

단색 브러시

SolidColorBrush는 단일 색을 반환한다. 도형의 배경색을 칠하거나 팬의 색을 변경하기 위해 Fill 속

성이나 Stroke 속성에 색상명을 설정하면 실버라이트는 해당 색상의 SolidColorBrush를 생성한다.


<Rectangle

Fill="Blue"

Stroke="Black"


Canvas.Left="96"

Canvas.Top="160"

Width="256"

Height="224"

/>

</Canvas>

Fill 속성이나 Stroke 속성에 색상명을 대입하는 대신 SolidColorBrush를 직접 설정할 수도 있다.



<Rectangle


Canvas.Left="96"

Canvas.Top="160"

Width="256"

Height="224"

>

<Rectangle.Fill>

<SolidColorBrush Color="Blue"/>

</Rectangle.Fill>

<Rectangle.Stroke>

<SolidColorBrush Color="Black"/>

</Rectangle.Stroke>

</Rectangle>

</Canvas>

앞의 예제에서는 명명된 색상 이름을 사용했지만, 색을 표현할 때는 #aarrggbb와 같은 헥사코드 형

식으로 색상을 설정할 수도 있다. 이 헥사 형식은 알파값, 빨강색, 녹색, 파란색을 혼합한 값을 의미한

다. 예를 들어 불투명한 녹색은 #�00�00로 표현한다. 이 외에도 색상을 표현할 때는 Color 클래스의

인스턴스를 통해서 색상을 설정할 수도 있다.

Color green = Color.FromArgb(0xff, 0x0, 0xff, 0x0);

알파값은 불투명도를 설정하기 위한 값으로 알파값이 0x0일 경우에는 투명한 색상을 의미하며 알

파값이 0x�이면 완전히 불투명한 색상을 의미한다. 배경색에 알파값을 사용하게 되면 다음과 같은

공식을 통해서 배경색이 만들어진다.

Color_destination = (alpha * Color_source + (0x� – alpha)* Color_destination)/256

헥사값으로 색상이 지정되면 실버라이트는 이것을 변화시키지 않고 웹 브라우저에게 그대로 전달

한다. 일반적으로 브라우저는 표준 RGB 색상영역 RGB(sRGB)로 색을 표현한다. sRGB는 8비트로 색

을 구분하는 감마영역의 색상으로 알려져 있다. 하지만 이러한 색 표현방법은 운영체제나 웹 브라우

저 또는 모니터나 운영체제의 색상 프로필에 따라서 색이 다르게 보일 수 있다. sRGB의 문제점을 줄일

수 있도록 이를 대신할 수 있는 색상지정 방법은 정수 사이의 중간색까지도 세밀하게 기록할 수 있도

록 실수를 사용하여 색상을 표현하는 전역범위 RGB(scRGB) 색상을 사용하는 방법이 있다.



<Rectangle

Fill="sc#1, 1.0, 0.0, 0.0"

Canvas.Left="96"

Canvas.Top="160"

Width="256"

Height="224"

/>

</Canvas>

scRGB 색상을 지정하면 실버라이트는 현재 출력시스템을 통해서 지정한 scRGB와 가장 근접한

sRGB 색을 찾아서 색을 표현하게 된다. 물론 처음부터 sRGB로 색상을 지정하였다면 색상변환 단계

는 필요 없다.

그라디언트 브러시

Gradient 브러쉬는 진행방향을 가리키는 가상의 그라디언트 선을 기준으로 위치와 색상을 엮는 집합

을 정의한다. 그라이언트가 진행되는 방향은 StartPoint와 EndPoint를 사용하여 표현하는데, 만약

StartPoint와 EndPoint의 위치를 각각 (0,0)과 (1,1)로 설정하였다면 그라데이션(gradation)의 진행 방

향이 좌/상단에서 우/하단으로 진행된다는 것을 의미하게 된다. 그라디언트(gradient)가 진행되는 방

향을 따라서 여러 개의 색상을 지정할 수 있으며 색상을 지정할 때는 위치와 함께 지정한다. 이때 사

용되는 위치의 표현 방법은 시작점(StartPoint)의 값을 0 끝점을 1로 설정된 옵셋 값을 사용한다.

다음 예제에서 LinearGradientBrush의 사용 예를 보도록 하자.


<Ellipse

Width="450"

Height="450"

>

<Ellipse.Fill>

<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">

<LinearGradientBrush.GradientStops>

<GradientStop Color="White" Offset="0"/>

<GradientStop Color="Black" Offset="1"/>

</LinearGradientBrush.GradientStops>

</LinearGradientBrush>


</Ellipse.Fill>

</Ellipse>

</Canvas>

선형 그라디언트 브러시를 사용하면 그림 3.18에서 볼 수 있는 것처럼 색이 점진적으로 변하는 배경

색을 칠할 수 있다. 선형 그라디언트 브러시에서 사용되는 색상의 위치는 색상 변화가 진행되는 방향

선을 기준으로 정해지는 좌표이다. 브러시는 그림 3.18에서 보여주는 것처럼 방향선을 따라서 색상의

변화가 이루어지고 있다.

그림 3.18 | 선형 그라디언트 브러시

선형 그라디언트 브리시 외에도 RadialGradientBrush를 사용하면 원형의 그라이언트 색을 칠할

수 있다. RadialGradientBrush는 도형의 경계선으로부터 원형 그라디언트의 중심까지의 거리를 위치

값으로 사용하며 그 위치 값과 색상을 묶은 맵을 가지고 있다. 예를 들어 그림 3.19을 표현하기 위해서

다음과 같은 XAML 코드를 작성할 수 있다.


<Ellipse

Width="450"

Height="450"

>

<Ellipse.Fill>

<RadialGradientBrush>

<RadialGradientBrush.GradientStops>




</RadialGradientBrush.GradientStops>

</RadialGradientBrush>

</Ellipse.Fill>

</Ellipse>

</Canvas>

그림 3.19 | 원형 그라디언트 브러시

RadialGradientBrush에는 그라디언트의 시작점을 이동시킬 수 있는 기능을 가지고 있다. 바로 앞

의 예제에서는 그라디언트의 시작점이 원의 중심이었으며 원의 그라디언트 끝점이 반지름의 끝점과

연결되어 있었다. 이런 구조를 이용하여 좀 더 독특한 원을 만들 수가 있다. 그림 3.20에서 보이는 결과

처럼 GradientOrigin 속성을 사용하면 그라디언트의 중심을 옮길 수 있다.

그림 3.20 | 초점을 갖는 그라디언트 브러시



<Ellipse

Width="450"

Height="450"

>

<Ellipse.Fill>

<RadialGradientBrush GradientOrigin="0.25 0.25">

<RadialGradientBrush.GradientStops>



</RadialGradientBrush.GradientStops>

</RadialGradientBrush>

</Ellipse.Fill>

</Ellipse>

</Canvas>

선형과 원형 그라디언트를 사용할 때 색상을 지정하지 않은 옵셋 영역은 비워지게 된다. 이렇게 색

이 지정되지 않은 영역을 색이 지정된 영역의 색을 이용하여 칠할 수 있도록 SpreadMethod 속성을

제공하고 있다. 그림 3.21에서 보는 바와 같이 SpreadMethod 속성에 Pad 모드를 설정하면 그라디언

트가 끝나는 옵셋의 위치의 색으로 선(혹은 테두리) 끝까지 동일한 색을 채우며, Repeat 모드는 설정

된 그라데이션을 반복하여 채운다. 마지막으로 Re�ect 모드는 그라데이션을 반사시키는 방식으로 반

복해서 색을 채운다.

Pad Repeat Reflect

그림 3.21 | SpreadMethod의 예

이미지 브러시

이미지 브러시는 이미지의 픽셀과 화면픽셀을 연결시켜주는 역할을 한다. 다음의 XAML 코드는 그림

3.22에서 볼 수 있는 것처럼 이미지를 브러시로 사용하고 있다.



<Ellipse Width="450"

Height="450"

Stroke="Black"


>

<Ellipse.Fill>

<ImageBrush ImageSource="silverlight.png"/>

</Ellipse.Fill>

</Ellipse>

</Canvas>

그림 3.22 | IamgeBrush의 예

외곽선 칠하기

앞 절에서는 도형의 배경색을 칠하기 위해 브러시를 사용했었다. 하지만 브러시는 배경뿐만 아니라

Stroke 속성을 통해서 도형의 외곽선 색을 칠할 때도 사용한다. 다음과 같은 XAML 코드는 그림 3.23

과 같은 결과를 만들어낸다.


<Ellipse

Stroke="Black"



Canvas.Left="50"

Canvas.Top="50"

Width="400"

Height="400"

/>

</Canvas>

그림 3.23 | 원에 Stroke가 적용된 예

Stroke 속성

Stroke 속성은 도형의 외곽선을 칠하기 위해 사용되는 속성이다. 실버라이트에서는 도형의 외곽선을

단순히 외곽선으로 인식하는 것이 아니라 외곽을 담당하는 폐쇄형 도형으로 인식하고 있다. 따라서

실버라이트는 도형의 배경을 칠하는 방식과 동일한 방식으로 외곽을 표현하는 도형 내부를 칠하고 있

다. 예를 들어 그림 3.24에서는 외곽 선을 확대해서 표현한 원의 예를 보여주고 있다.

도형의 외곽선을 확대해보면 선 두께의 절반은 외곽 도형의 외부 외곽선을 표현하는 데 사용되고

또 다른 절반은 외곽 도형의 내부 외곽선을 표현하는 데 사용된다. 외부와 내부 외곽선은 그 사이의

배경을 채우는 색과 함께 출력된다.


외부 외곽선

내부 외곽선

그림 3.24 | 외곽도형이 표현된 원


외곽도형을 표현하는 과정에서 외곽도형의 외곽선끼리 자기 교차점이 발생할 수 있다. 예를 들어

그림 3.25에서 보는 바와 같이 삼각형은 외곽도형의 외곽선이 서로 교차되는 자기 교차점을 여러

개 가질 수 있다. 이 부분을 해결하기 위한 한 가지 방법은 이것을 출력하기 전에 이 교차점을 제거

하는 알고리즘을 사용해서 교차점을 제거하거나 채우기 규칙을 간단히 NonZero로 변경하면 이러

한 교차점을 사용자들에게 보이지 않게 할 수 있다.

그림 3.25 | 삼각형의 외곽도형


대시 선

선모양을 대시(dashe) 모양으로 그리려면 대시선과 대시 선과 빈 공백의 순서를 맵으로 작성 생성해야

한다. 예를 들어 그림 3.26과 같은 모양처럼 외곽선을 출력하려면 다음의 XAML 코드에서처럼 대시

맵을 사용한다.


<Ellipse

Stroke="Black"


StrokeDashA rray="5, 4, 2, 4"

Canvas.Left="50"

Canvas.Top="50"

Width="400"

Height="400"

/>

</Canvas>

그림 3.26 | 길고 짧은 대시를 표현하기 위한 StrokeDashArray의 예


대시선도 외곽선을 도형으로 변형해주는 변경자를 통해서 만들어진다. StrokeDashArray 속성에

맵을 대입하면 실버라이트는 외곽선을 더 작은 기하 도형으로 변형한다. 대시의 수가 많아지면 그

만큼 렌더링을 느리게 만들기 때문에 가능하면 신중하게 사용해야 한다.


Canvas 엘리먼트

지금까지 다루었던 모든 예제에서는 Canvas 엘리먼트를 루트 엘리먼트로 사용하고 있다. Canvas 엘

리먼트는 컨테이너로 사용하기에 편리하면서도 자신이 포함하고 있는 엘리먼트들을 가장 전통적인

좌표 방식으로 표현할 수 있게 한다. Canvas 엘리먼트와 같은 컨테이너를 사용하면 다음과 같은 일들

을 할 수 있다.

엘리먼트들을 그룹으로 묶고 이름 부여하기 ▒

그룹으로 묶인 도형들을 단일 연산으로 추가 또는 제거하기 ▒

엘리먼트들을 그룹단위로 변형하기 ▒

엘리먼트들을 그룹단위로 클리핑하기 ▒

엘리먼트들을 그룹단위로 ▒ 불투명도나 마스크 효과 적용하기

변형, 클리핑, 그리고 불투명도 효과는 도형마다 개별적으로 적용하거나 Canvas 와 같은 컨테이너

로 묶어서 한 번에 적용할 수 있다.

성능 팁

클리핑이나 불투명 효과를 그룹으로 묶어서 적용하는 경우에는 속도가 느려질 수 있다. 속도를 개

선하기 위해 차선책으로 다른 방법을 사용하는 경우도 있다. 예를 들어 클리핑 효과를 대신해서

ImageBrush를 사용한다거나 Path를 사용할 수가 있으며 불투명 효과를 대신해서 브러시의 색상

을 조정할 수도 있다. 그런데 클리핑이나 불투명도를 그룹으로 묶어서 적용하지 않고 그룹으로 묶

인 도형들에게 개별적으로 그 효과를 적용할 수만 있어도 차선책을 쓰는 속도에 근접한 속도 개선

을 볼 수 있다.

변형

변형은 도형의 위치나 회전각도, 크기, 또는 비틀림을 변경할 수 있게 한다. 그림 3.27와 같은 결과를

만들려면 다음 XAML 코드에서 보여주는 것과 같이 Canvas 엘리먼트의 RenderTransform 속성에

변형 그룹을 설정해야만 한다.



<Canvas.RenderTransform>

<TransformGroup>

<ScaleTransform ScaleX="1.5"/>

<RotateTransform A ngle="30"/>

<TranslateTransform X="100" Y="-10"/>

</TransformGroup>

</Canvas.RenderTransform>

<Ellipse

Fill="LightGray"

Stroke="Black"


Width="200"

Height="200"

/>

<Rectangle

Fill="Gray"

Stroke="Black"


Canvas.Left="100"

Canvas.Top="100"

Width="200"

Height="200"

/>

</Canvas>

그림 3.27 | 원 위에 사각형을 그리고 있는 RenderTransform의 예


앞 예제에서 본 것처럼 TransformGroup 엘리먼트 안에 ScaleTransform과 TranslateTransform

그리고 RotateTransform 엘리먼트을 묶어서 함께 적용할 수 있다. 만약 MatrixTransform를 사용한

다면 동일한 변형을 한 번에 적용할 수도 있다.


<Canvas.RenderTransform>

<TransformGroup>

<MatrixTransform Matrix="

1.30, 0.75,

-0.50, 0.87,

100.00, -10.00"

/>

</TransformGroup>

</Canvas.RenderTransform>

<Ellipse

Fill="LightGray"

Stroke="Black"

StrokeThickness="20"Width="200"

Height="200"

/>

<Rectangle

Fill="Gray"

Stroke="Black"


Canvas.Left="100"

Canvas.Top="100"

Width="200"

Height="200"

/>

</Canvas>

3D 변형(실버라이트3의 새로운 기능)

실버라이트 3에서는 그림 3.28에서 보는 것처럼 엘리먼트의 Projection 속성에 PlanProjection을 설

정하면 3D 방향으로 회전시킬 수 있다.


그림 3.28 | 3D로 투영한 예


<Canvas.Projection>

<PlaneProjection RotationY="-60" CenterOfRotationY="50" />

</Canvas.Projection>

<Ellipse

Fill="LightGray"

Stroke="Black"


Width="200"

Height="200"

Canvas.Top="50"

/>

<Rectangle

Fill="Gray"

Stroke="Black"


Canvas.Left="100"

Canvas.Top="100"

Width="200"

Height="200"

/>

</Canvas>

자신을 화면에 투영하기 위해서 도형들은 각각 논리적인 자신만의 카메라를 가지게 된다. 동일한 투


시 카메라로 하나 이상의 객체를 그림 3.29처럼 배치시키려면 그들 모두를 동일한 곳에 위치시키고

3D 방식으로 위치를 움직이기 위해 GlobalO�setX, GlobalO�setY, GlobalO�setZ 속성에 적당한 값

을 설정한다.

그림 3.29 | 동일한 3D 투영 카메라로 세 개의 사각형을 위치시키기


<Rectangle

Fill="Gray"

Stroke="Black"


Canvas.Left="200"

Canvas.Top="100"

Width="200"

Height="200"

>

<Rectangle.Projection>

<PlaneProjection

GlobalOffsetX="-200"

RotationY="-60"

CenterOfRotationY="50"

/>

</Rectangle.Projection>

</Rectangle><Rectangle

Fill="Gray"

Stroke="Black"


Canvas.Left="200"

Canvas.Top="100"

Width="200"


Height="200"

>


<PlaneProjection GlobalOffsetZ="-150"/>


</Rectangle>

<Rectangle

Fill="Gray"

Stroke="Black"


Canvas.Left="200"

Canvas.Top="100"

Width="200"

Height="200"

>


<PlaneProjection

GlobalOffsetX="200"

RotationY="60"

CenterOfRotationY="50"

/>


</Rectangle>

</Canvas>

전역 옵셋(Global Offset) 속성에 설정한 값들은 회전속성(Rotation)이 적용된 후에 적용된다. 회

전보다 옵셋 값이 먼저 적용되기를 바란다면 PlaneProjection 객체의 LocalOffsetX 속성이나

LocalO�setY 또는 LocalO�setZ 속성을 사용해야만 한다.

클리핑

클리핑은 화면에 출력되는 도형의 출력 영역을 제한하는 것을 의미한다. 그림 3.30에서 보이는 결과처

럼 엘리먼트를 클리핑하려면 다음 XAML 코드처럼 Clip 속성을 설정하면 된다.


<Canvas.Clip>

<EllipseGeometry

Center="100,200"

RadiusX="150"

RadiusY="150"


/>

</Canvas.Clip>

<Ellipse

Fill="LightGray"

Stroke="Black"


Width="200"

Height="200"

/>

<Rectangle

Fill="Gray"

Stroke="Black"


Canvas.Left="100"

Canvas.Top="100"

Width="200"

Height="200"

/>

</Canvas>

그림 3.30 | 클리핑 예

성능 팁

클리핑은 이론적으로 두 개의 도형을 교차시키는 방법과 동일하다. 클리핑은 성능에 상당한 손실을

줄 수 있다. 그러므로 가능하면 클리핑을 피하는 것이 좋다.


Opacity 속성

브러시에 불투명도를 설정하거나 투명한 색을 설정하는 것을 알파효과 주기라고 한다. 브러시가 투명

한 색을 가지고 있다면 브러시는 다음과 같은 공식을 통해서 색상과 콘텐트를 섞은 것이다.

Color_destination = alpha * Color_source + (1 – alpha) * Color_destination

불투명도를 설정하는 방법에는 Canvas의 Opacity 속성에 불투명도를 설정하는 방법과 Canvas가

포함하고 있는 도형들에 개별적으로 Opacity를 설정하는 방법이 있다. 하지만 이 두 연산은 그림 3.31

예에서 알 수 있는 것처럼 결과가 동일하지 않다.

사각형에 불투명도 설정 캔버스에 불투명도 설정

그림 3.31 | 캔버스에 설정한 불투명도와 객체마다 설정한 불투명도

성능 팁

Canvas 엘리먼트에 Opacity를 설정하게 되면 첫 번째 엘리먼트뿐만 아니라 그 이후의 모든 엘리

먼트의 콘텐트를 불투명도와 연산해야만 한다. 이 과정에서 런타임은 상당히 느려지게 된다. 가능

하다면 최적의 성능을 위해 브러시에 불투명도를 설정하거나 브러시의 색을 변경하는 방법 또는

Path 엘리먼트를 사용하도록 하자.

OpacityMask 속성

UIElement의 OpacityMask 속성은 브러시의 픽셀 정보를 알파 값으로 활용하여 UIElement의 콘

텐트와 색을 섞는 기술을 제공한다. 예를 들어 다음의 XAML 코드는 그림 3.32와 같은 결과를 보여

준다.



<Canvas.OpacityMask>



<GradientStop Color="Transparent" Offset="0"/>




</Canvas.OpacityMask>

<Ellipse

Fill="LightGray"

Stroke="Black"


Width="200"

Height="200"

/>

<Rectangle

Fill="Gray"

Stroke="Black"


Canvas.Left="100"

Canvas.Top="100"

Width="200"

Height="200"

/>

</Canvas>

그림 3.32 | OpacityMask의 예


OpacityMask는 런타임을 느리게 만들기 때문에, 속도를 개선하기 위해서 OpacityMask를 사용하

는 방법보다는 콘텐트 위에 그라데이션을 그리는 방법을 차선책으로 생각해볼 수도 있다. 예를 들어

다음의 XAML 코드를 사용하면 그림 3.32와 비슷한 효과를 만들 수 있다.


<Ellipse

Fill="LightGray"

Stroke="Black"


Width="200"

Height="200"

/>

<Rectangle

Fill="Gray"

Stroke="Black"


Canvas.Left="100"

Canvas.Top="100"

Width="200"

Height="200"

/>

<!–– 상단에 사각형을 놓음으로써 불투명 마스크 효과를 흉내내기 ––>

<Rectangle Width="300" Height="300">

<Rectangle.Fill>




<GradientStop Color="Transparent" Offset="1"/>



</Rectangle.Fill>

</Rectangle>

</Canvas>


하부구조

지금까지는 그래픽스 원리나 그래픽스 API 엘리먼트들에 대해서 알아보았다. 이번 ‘하부구조’ 절에서

는 실버라이트에서 그림이 그려지는 방식과 브라우저에 콘텐트가 출력되는 방법에 대해서 알아본다.

이 과정을 이해하면 실버라이트 런타임의 수행 성능과 관련된 특징들을 이해하는 데 도움이 될 뿐

만 아니라 런타임에 의해서 해결되는 문제점들을 이해할 수 있으며 응용프로그램이 해결해야만 하는

문제점들도 이해하게 된다.

이번 절에서 다루는 내용은 다음과 같다.

변경된 그래프 객체를 확인하고 그것을 출력될 버퍼에 그리는 그리기 루프 과정 ▒

벡터 그래픽의 모양을 출력 버퍼에 픽셀로 저장하는 래스터화 과정 ▒

변경된 부분을 다시 그릴 때나 폐쇄된 브러시 픽셀을 연산할 때 또는 CPU 다중 코어로 연산할 ▒

때의 성능 최적화 방법

브라우저의 출력 버퍼를 사용해서 화면에 도형을 출력하는 방법 ▒

그리기 루프(Draw Loop)

실버라이트는 애니메이션을 출력할 때는 MaxFrameRate 속성에 설정된 규칙적인 타이머 간격마다

그림을 그린다. 매 타이머 간격마다 실버라이트는 다음과 같은 일을 처리한다.

Canvas를 포함한 모든 도형 엘리먼트에 변화가 있었는지를 확인한다. 만일 변화가 없었다면 1.

실버라이트는 더 이상 아무런 작업도 하지 않는다.

처리되지 않은 레이아웃 연산을 수행한다. 7장 ‘레이아웃’에서 레이아웃 연산에 대해서 더 자2.

세히 설명한다.

렌더링하기 위해 변경된 부분을 수집하고 3. 래스터화를 준비한다.

변경된 부분을 래스터화하고 그 결과로 만들어진 그래픽스 상태가 현재 프레임이 된다.4.

이제 출력될 프레임(또는 기존 프레임에서 달라진 증가분)이 완성되면 브라우저에게 그것을 통5.

보한다.


래스터화

그리기 루프에서는 다시 그려야 할 엘리먼트를 식별한 후에 그 엘리먼트들을 화면과 분리된 버퍼를 사

용해서 화면에 출력될 픽셀 집합으로 재생성한다. 이전 내용에서는 도형의 외곽선을 설정하는 방법이

라든지 도형의 내부를 칠하는 방법 등에 대해서 설명했지만, 사실 수학과 같은 기하학적인 도형은 해

상도에 대한 제약을 두지 않고 있으며 선은 연속된 것으로 가정한다. 그런데 현실에서의 화면은 색상

과 픽셀 수에 제약을 가질 수밖에 없다. 래스터화란 기하학적인 도형의 경로를 불연속적인 픽셀로 변

환하는 과정을 의미한다. 이번 절을 통해서 래스터화가 이루어지는 방법에 대해서 알아본다.

성능 팁

그리기 루프는 엘리먼트 트리에 변화가 생겨도 그것을 그 즉시 화면에 바로 반영하지 않는다. 때문

에 프로파일 도구들을 사용해서 그림 그리는 동작에 대한 비용을 측정하기가 어렵다. 만일 수행 성

능을 튜닝하고 싶다면 응용프로그램의 최대 프레임률을 측정해보는 것이 가장 바람직하다. 구체적

으로 말해서 다음과 같은 JavaScript 코드처럼 MaxFrameRate 속성을 실버라이트가 처리할 수

있는 한계를 넘는 값이 될 때까지 설정해보면서 실행하는 것이다.

function loadHandler()

{

plugin = document.getElementById("MySilverlightPlugin");

plugin.settings.EnableFramerateCounter = true;

plugin.settings.MaxFrameRate = 10000;

}

개발과정에서 프레임을 놓치는 부분을 집중적으로 체크하면서 콘텐트를 다른 형식으로 구성할 것

인지를 고려하는 방법 등을 고려해 보아야 한다.

기하 도형을 픽셀로 변환하기 위해 사용하는 가장 쉬운 방법은 샘플링이라고 불리는 방법을 사용

하는 것이다. 샘플링 과정은 픽셀을 대신하는 샘플 점을 이용해서 픽셀로 그려져야 할 도형을 샘플 점

들로 표현하는 것이다. 예를 들어서, 하나의 픽셀을 하나의 샘플 점으로 연결하는 격자 모양의 간단한

샘플 패턴을 생성한다.

만일 샘플 점이 기하 도형 안에 있다면 빛을 비추고, 만일 샘플 점이 기하 도형 밖에 있다면 그 픽셀

의 빛을 비추지 않는 것이다. 예를 들어 다음과 같은 XAML을 사용하여 표현된 원은 그림 3.33과 같

이 픽셀에 빛을 비출 것이다.



<Ellipse

Fill="Black"

Width="15"

Height="15"

/>

</Canvas>

그림 3.33 | 샘플링한 원

정수 좌표계가 픽셀의 좌/상단에 위치하고 샘플 점들은 픽셀의 중심에 있다는 것을 알 수 있다. 이

번 샘플 변환에서는 래스터화가 좌, 우, 상, 하가 대칭될 수 있도록 정수 좌표를 사용하여 대칭적인 곡

선이 설정될 수 있게 하였다. 만약에 샘플 점들이 정수 좌표 점에 있지 않다면 원은 그림 3.34처럼 대

칭 모양을 잃을 수도 있다.

그림 3.34 | 정수가 아닌 샘플 좌표상에서 원을 표현한 샘플링


그림 3.33에서 래스터화된 결과 그림이 톱니모양의 경계선을 보여주고 있다. 이 톱니형의 모양은 앨

리어싱으로 인해 나타나는 결과이다. 앨리어싱이란 연속된 기하학적인 곡선을 불연속적인 샘플점 집

합으로 변환하는 과정에서 손실된 정보를 의미한다. 안티앨리어싱은 앨리어싱을 최소화하기 위한 기

술을 의미하는 용어이다.

실버라이트 안티앨리어싱 기술은 다중 횟수 샘플링 과정과 픽셀의 색상을 생성하기 위한 박스 필터

과정으로 구성된다. 실버라이트는 그림 3.35에서 보는 것처럼 이론적으로는 픽셀당 64번의 샘플링을

한다.

그림 3.35 | 안티앨리어싱 샘플링 패턴

박스 필터 과정에서는 픽셀에 앨리어싱으로 손상된 픽셀에 사용될 색을 정하기 위해 사각형을 경계

로 샘플 점들이 픽셀을 구성하기 위해 얼마만큼 기여하는지에 대한 평균을 구한다. 그 결과를 사용해

서 실버라이트는 그림 3.36에서 볼 수 있는 것처럼 부드럽게 투명도와 색상을 섞어서 화면에 출력한다.

그림 3.36 | 안티앨리어싱이 적용된 래스터화



x 방향으로는 픽셀당 16개의 샘플 점이 있는데, 그에 반해서 y 방향으로는 왜 4개의 샘플 점밖에

없는지 의문을 가질 수도 있을 것이다. 이 샘플 패턴의 이유는 수평 해상도가 텍스트를 깨끗하게 렌

더링하기가 어려울 뿐만 아니라 수평 해상도는 계산적으로 비용이 저렴한 반면에 수직 해상도는 속

도가 더 느리고 비용이 비싸기 때문이다. 16x4 샘플링 패턴은 이미지의 품질과 속도의 균형을 맞춰

주기에 좋은 패턴이다.

박스 필터 과정을 대신할 수 있는 방법으로는 샘플들을 축적해가는 방법의 원형 패턴 방법이나 픽

셀의 크기를 확장하는 샘플 패턴 방법들이 존재한다. 사실 이러한 모든 알고리즘은 박스 필터보다

이미지의 품질을 더 좋게 할 수 있다. 하지만 일반적으로 속도는 더 느리다. 실버라이트의 고해상도

의 박스 필터는 합리적인 이미지 품질과 좋은 렌더링 성능을 가지기 위한 최선의 선택이다.

실버라이트의 안티앨리어싱 기법은 두 개의 도형이 겹치는 부분에서 약간의 티가 날 수가 있다. 다

음의 XAML 코드를 사용하면 그림 3.37처럼 두 사각형이 만나는 중간에 픽셀이 겹치는 부분을 볼 수

있을 것이다.


<Rectangle

Fill="Black"

Width="100.5"

Height="100.5"

/>

<Rectangle

Fill="Black"

Canvas.Left="100.5"

Width="100.5"

Height="100.5"

/>

</Canvas>

앞의 XAML 코드는 그림 3.37에서와 같은 래스터 결과를 만들어낸다. 두 사각형 사이에 공백이 있

는지를 XAML 코드를 통해서 확인해보면 수치상으로는 완전히 딱 들어맞아서 공백이 없는 것을 확

인할 수 있다. 그런데 왜 결과 화면에는 겹쳐진 부분이 나오는 것일까?


그림 3.37 | 안티앨리어싱으로 겹쳐지는 선의 예

이렇게 겹쳐지는 부분이 보이는 이유는 이번 절에서 설명하는 래스터화 규칙 때문이다. 래스터화 과

정을 생각해보면 그림 3.37에서 처럼 가운데 픽셀에 회색 빛이 나타나는 이유를 알 수 있다. 사각형 A

는 가운데 픽셀의 정확히 반만을 샘플 점으로 덮고 있다. 따라서 실버라이트는 0.5의 안티앨리어싱 알

파를 적용해서 사각형 A에서 해당 픽셀을 그리게 된다. 알파라는 용어는 다음과 같은 공식을 사용해

서 색상을 혼합할 때 사용되는 투명도를 의미하는 용어이다.

Color_destination = alpha * Color_source + (1 – alpha) * Color_destination

예제에서 현재 색상의 조합은 alpha=0.5이고 Color_source=Black 그리고 Color_destination=

White이므로 사각형 A의 경계를 나타내는 색상을 연산해보면 그 결과는 다음과 같다.

0.5 * Black + (1 – 0.5) * White = 0.5 * White

사각형 B 또한 샘플 점의 반을 차지하고 있으므로 실버라이트는 alpha=0.5과 배경색 0.5*White를

사용하여 사각형 B의 교차점 색을 연산한다. 따라서 결과 색은 다음과 같다.

0.5 * Black + (1 – 0.5) * (0.5 White) = 0.25 White.

결과적으로 이어지는 부분을 통해서 보여지는 최종 픽셀 색상은 4분의 1의 배경색을 가지게 된다.


이것은 각 도형을 독립적으로 샘플링해서 나온 결과이다. 이를 대체할 수 있는 안티앨리어싱 모드

로는 모든 도형의 샘플링을 일제히 한 번에 처리하는 전체 화면 안티앨리어싱이 있다. 하지만 현재

실버라이트는 전체 화면 안티앨리어싱을 지원하지 않는다. 왜냐하면 런타임의 수행 성능을 느리게

만들기 때문이다.


이러한 겹쳐지는 부분을 피하려면 그림 3.38에서 보는 바와 같이 픽셀의 경계선에서 도형의 경계선

을 잘라줘야 한다. 경계선을 자르게 되면 두 도형 사이의 경계면이 더 깔끔하게 만들어진다. 하지만 경

계 픽셀을 자르는 것은 x축이나 y축으로 할당했던 도형의 겹치는 경계를 단순히 제거하는 것뿐이다.

그림 3.39에서 보는 그림처럼 좌표축이 회전된 경우에는 앞의 방법처럼 인위적으로 경계를 제거할 수

없다. 겹치는 부분을 제거하기 위한 가장 일반적인 기술은 배경색이 더 이상 보이지 않도록 경계선 색

으로 덮어버리는 것이다.

그림 3.38 | 겹쳐진 픽셀을 자른 래스터화

그림 3.39 | 회전된 경계선를 가지고 있는 도형

앞 절에서는 실버라이트가 기하 도형을 픽셀 집합으로 변환되는 방법에 대해서 알아보았다. 그 변

환 과정이 끝나면 실버라이트는 브러시를 사용하여 색상을 입히게 된다. 단색 브러시나 그라디언트 브

러시를 사용하여 색을 입히는 방법은 간단하지만 이미지 브러시를 사용할 때는 간단하지가 않다. 원

본 이미지와 픽셀을 연결해주는 추가적인 작업을 해야만 하고 서로 다른 해상도에서 처리될 수 있음

도 고려해야만 한다. 이번 절에서는 그림 3.40에서 보는 바와 같이 이미지 데이터를 확장해서 매핑하


는 기능에 대해서 설명하도록 한다.

이미지를 확대하는 방법 중에 가장 간단한 방법은 근접 색을 이용하는 방법이다. 이 방법은 화면 픽

셀에 표현될 위치의 이미지 비트맵 색상과 가장 근접한 색상으로 픽셀을 칠하는 방법이다. 근접 색상

샘플링을 사용하면 그림 3.41에서 보는 것처럼 이미지가 확대되거나 회전될 경우에 이미지에는 거친

앨리어스가 만들어지게 된다. 그림을 가까이서 보면 톱니형의 선을 확인할 수 있다.

실버라이트는 이미지 데이터가 정확히 픽셀의 중심과 일치되는 경우에만 근접 색상 샘플링을 사용

한다. 회전이나 확대 또는 비정수형 변환의 경우에는 그림 3.40과 같은 좋은 결과를 보일 수 있도록 이

중 선형 필터링 방법을 사용한다.

그림 3.40 | 이중 선형 필터링을 사용하는 이미지

그림 3.41 | 근접색 지정방법을 사용하고 있는 이미지


이중 선형 필터링은 화면 좌표를 이미지 안의 좌표(u,v)와 연결한다. 그 다음으로 (�oor(u), �oor(v)),

(�oor(u) + 1, �oor(v)), (�oor(u), �oor(v) + 1), (�oor(u) + 1, �oor(v)+1) 위치의 픽셀들로부터 색을 삽

입한다. 그림 3.42는 이 과정의 예를 보여주고 있다. 이중 선형 필터링은 원본 이미지를 2배수로 확대

할 경우에 좋은 품질의 이미지를 만들어 낼 수 있다. 그림 3.43은 적당한 범주 내에서 이미지가 확대된

결과를 보여주고 있다.

이미지비트맵과연결

색상 삽입

가장 근접한 비트맵 픽셀 네 개 발견

그림 3.42 | 이중 선형 필터링 과정

그림 3.43 | 알맞은 범위 내에서의 이미지 확대


이중 선형 필터링을 사용해서 좋은 품질의 이미지를 얻을 수 있다고 해도 이미지를 너무 크게 확대

하게 되면 뿌옇고 흐릿한 결과의 이미지를 만들게 된다. 반대로 이미지를 너무 작게 축소하면 앨리어

스가 생긴 이미지를 만들게 된다. 그림 3.44는 이러한 이 두 가지의 변경에 대한 예를 보여주고 있다.

그림 3.44 | 과도하게 크기 변경한 이미지

실버라이트 3의 새로운 기능

이미지를 축소할 때 그림 3.44보다 더 좋은 결과를 만들어 낼 수 있는 수많은 기술들이 존재한다.

하지만 그러한 기술들은 처리 속도가 느리기 때문에 애니메이션을 구현할 때 속도를 느리게 하는

원인이 된다. 실버라이트 3에서는 좋은 품질의 알고리즘을 사용하면서도 애니메이션에서 느려지지

않도록 이미지를 다양한 크기의 더 작은 이미지 집합으로 변환하기 위한 밉매핑(mip-mapping)을

지원한다.

예를 들어 만일 128x128 크기의 이미지를 가지고 있다면 실버라이트는 64x64, 32x32, 16x16,

8x8, 4x4, 2x2 그리고 1x1 크기의 해상도로 변형된 축소본 집합을 생성한다. 이미지가 축소된 크

기로 출력되어야만 할 때 실버라이트는 출력할 크기와 가장 가까운 크기의 이미지를 선택해서 사용

한다. 3D로 출력할 때는 다양한 크기의 이미지 여러 개를 한 번에 사용하기도 한다.

축소본을 만드는 과정은 이미지마다 한 번씩만 이루어지며 실버라이트는 이 이미지들을 캐시에 저

장해놓고 사용한다. 이런 이유로 33%의 메모리를 더 사용하게 된다.


변경된 부분 다시 그리기

도형 객체를 그린 후에도 실버라이트는 그 객체에 변화가 생기면 계속해서 다시 그려야만 한다. 만일

객체의 위치가 달라졌다면 화면의 모든 픽셀을 다시 그리는 소모적인 일을 해야 할지도 모른다. 하지

만 실버라이트는 다시 그리는 영역의 범위를 좁히기 위해서 도형의 과거 위치 영역과 변화된 현재 위

치 영역을 모두 표시해 둔다. 영역을 표시하는 알고리즘을 가볍게 만들기 위해, 실버라이트는 도형의

모양에 맞추어진 영역을 사용하지 않고 박스 형태의 영역을 사용한다.

예를 들어 다음 XAML에서 보여주는 도형은 0,0 위치에서 100,100 위치로 자리를 이동하였을 경우

에 그림 3.45은 다시 그려야 할 영역을 보여주고 있다.

배경이 다시 그려져야 할 배경 영역

새로 그려야 할 원

그림 3.45 | 다시 그려야 할 영역


<Ellipse

Fill="Black"

Width="100"

Height="100”

/>

</Canvas>

응용프로그램에서 다시 그려야 할 영역을 시각화하려면 다음과 같은 JavaScript 코드를 사용할 수

있다.


function loadHandler()

{

plugin = document.getElementById("MySilverlightPlugin");

plugin.settings.EnableRedrawRegions = true;

}

시각화는 콘텐트가 그려진 내용 위에 투명색을 혼합해서 표현하며 프레임마다 다른 색상으로 순환

한다. 따라서 계속해서 다시 그려져야 하는 콘텐트는 깜빡이게 되고 여러 프레임 내내 변화되지 않은

단일 색상의 콘텐트는 고정된 콘텐트처럼 보일 수 있다.

가려진 영역 찾기(Occlusion Culling)

그리기 루프에서 가장 비용이 많이 드는 과정을 꼽으라고 하면 일반적으로 래스터화 과정이라고 할

수 있다. 이 과정에서는 일일이 픽셀마다 쓰기 작업을 한다. 만약에 전체화면 애니메이션을 처리해야

만 한다고 가정하면 초마다 수십억 개의 픽셀에 쓰기 작업을 할 수도 있다. 또한 각 픽셀마다 적어도

하나 이상의 브러시 연산을 추가로 처리해야 하기 때문에, 만일 브러시를 중첩해서 사용하고 있다면

요구되는 연산은 3배에서 10배까지 커질 수 있다.

엘리먼트들의 그래프가 더 복잡해지면 더 이상 원하는 프레임률로 렌더링할 수 없을 수도 있다. 래

스터화 과정을 최적화하기 위해 실버라이트는 폐쇄된 브러시 연산을 처리하지 않는다. 예를 들어 전

체 화면의 배경색을 칠하고 그 위에 전체 화면 크기의 이미지를 그린다면, 실버라이트는 이미지 픽셀

만을 연산하고 이미지에 의해서 가려진 배경색은 연산하지 않는다. 이런 방식은 여러 엘리먼트로 엉킨

복잡한 그래프를 표현할 경우에는 3~10배로 속도가 증가할 수 있다.

성능 팁

가려진 영역 픽셀을 찾는 작업은 브러시의 색상과 관련된 성능을 최적화할 때만 의미가 있다. 불투

명의 커다란 사각형 뒤에 도형이 가려져 있을 경우에는 가려진 도형을 그리는 연산이 필요하지 않

다는 것을 판단하기도 전에 래스터라이저(rasterizer)는 도형을 그리고 있을 것이다. 최대의 성능

을 원한다면 숨겨진 복잡한 콘텐트는 제거하는 것도 중요한 방법이 될 수 있다.


다중 코어 렌더링

실버라이트는 더욱 빠른 렌더링을 위해서 CPU의 다중 코어를 이용한다. 구체적으로 실버라이트는

하나의 프레임을 수평 방향으로 잘게 나누고 이것을 그림 3.46에서 보는 것처럼 CPU의 다중 코어를

사용하여 래스터화를 분산시켜 처리한다. 현재 CPU 다중 코어를 사용하는 처리는 래스터화, 효과, 밉

맵 생성 그리고 미디어 연산만에서만 이루어지고 있으며 레이아웃, 컨트롤 템플릿 작업, 응용프로그

램의 사용자 코드 그리고 애니메이션은 싱글 스레드상에서만 동작한다. 따라서 응용프로그램이 래스

터화되는 성능의 한계를 테스트해보고 싶다면 간단하게 프레임 비율을 초당 10000 프레임으로 설정

하고 CPU 사용률을 측정하면서 테스트해야만 한다. 만일 듀얼 코어 환경에서 한쪽 코어의 사용률이

거의 100%에 육박한다면 래스터화의 한계에 도달했다고 할 수 있다. 반면에 다른 한쪽 코어의 사용률

이 70%(초당 10000 프레임에서)에 이른다면 이것은 작업의 30%가 병렬로 동작하지 않고 있음을 의

미한다.

그림 3.46 | 다중 코어로 렌더링되는 프레임

콘텐트가 화면에 출력되는 방법

앞에서 설명했던 것처럼, 그리기 루프는 화면과 분리된 버퍼에 프레임을 먼저 그린 후에 화면에 출력

될 준비가 되었다는 것을 브라우저에 통보한다. windowless=false 모드라면 실버라이트 콘텐트는 대

부분의 운영체제에서 브라우저의 간섭 없이 화면에 바로 출력된다. 하지만 windowless=true 모드라

면 버퍼에 있는 프레임을 브라우저는 자신의 출력 영역으로 복사하는 작업을 한다. 많은 브라우저에

서 이런 추가적인 과정은 속도를 느리게 만들고 시각적으로 튀는 느낌을 줄 수가 있다. 연산에서 가장

최악의 모드는 windowless=true 모드에서 컨트롤의 배경색이 투명색으로 설정되는 것이다. 투명색


은 웹 브라우저가 출력 영역의 임의의 컨트롤이 변경될 때마다 컨트롤 밑에 있는 콘텐트들을 매번 다

시 그리게 만든다.

성능 팁

가능하면 투명 배경색과 widnowless=true 모드 사용을 사용하지 말아야만 한다.

요점정리

이번 장에서 다룬 내용들은 다음과 같다

그래픽 시스템 설계 원칙 ▒

그래픽을 출력하기 위한 엘리먼트들 ▒

실버라이트 런타임이 ‘하부 구조’를 통해서 해결하는 문제점과 응용프로그램이 해결해야만 하 ▒

는 문제점들

이 외에도 응용프로그램에서 사용할 수 있는 많은 성능 최적화 기술에 대해서 알아보았다.

Documents

에센셜 실버라이트 3